From 2aa11a6bf624e1a79d3e7f3b9315803b73cb7eb6 Mon Sep 17 00:00:00 2001 From: Andrew Sikowitz Date: Mon, 5 May 2025 14:40:00 -0700 Subject: [PATCH] feat(ui/lineage): Make show ghost entities toggle local storage sticky (#13424) --- .../src/app/lineageV2/LineageExplorer.tsx | 7 ++--- .../useShouldHideTransformations.ts | 0 .../useShouldShowDataProcessInstances.ts | 0 .../settings/useShouldShowGhostEntities.ts | 26 +++++++++++++++++++ 4 files changed, 30 insertions(+), 3 deletions(-) rename datahub-web-react/src/app/lineageV2/{ => settings}/useShouldHideTransformations.ts (100%) rename datahub-web-react/src/app/lineageV2/{ => settings}/useShouldShowDataProcessInstances.ts (100%) create mode 100644 datahub-web-react/src/app/lineageV2/settings/useShouldShowGhostEntities.ts diff --git a/datahub-web-react/src/app/lineageV2/LineageExplorer.tsx b/datahub-web-react/src/app/lineageV2/LineageExplorer.tsx index ad3e0e244d..e75a3f4f1e 100644 --- a/datahub-web-react/src/app/lineageV2/LineageExplorer.tsx +++ b/datahub-web-react/src/app/lineageV2/LineageExplorer.tsx @@ -13,9 +13,10 @@ import { NodeContext, useIgnoreSchemaFieldStatus, } from '@app/lineageV2/common'; +import useShouldHideTransformations from '@app/lineageV2/settings/useShouldHideTransformations'; +import useShouldShowDataProcessInstances from '@app/lineageV2/settings/useShouldShowDataProcessInstances'; +import useShouldShowGhostEntities from '@app/lineageV2/settings/useShouldShowGhostEntities'; import useSearchAcrossLineage from '@app/lineageV2/useSearchAcrossLineage'; -import useShouldHideTransformations from '@app/lineageV2/useShouldHideTransformations'; -import useShouldShowDataProcessInstances from '@app/lineageV2/useShouldShowDataProcessInstances'; import TabFullsizedContext from '@app/shared/TabFullsizedContext'; import { EntityType, LineageDirection } from '@types'; @@ -41,7 +42,7 @@ export default function LineageExplorer(props: Props) { const [hideTransformations, setHideTransformations] = useShouldHideTransformations(); const [showDataProcessInstances, setShowDataProcessInstances] = useShouldShowDataProcessInstances(); - const [showGhostEntities, setShowGhostEntities] = useState(false); + const [showGhostEntities, setShowGhostEntities] = useShouldShowGhostEntities(); const context: NodeContext = { rootUrn: urn, diff --git a/datahub-web-react/src/app/lineageV2/useShouldHideTransformations.ts b/datahub-web-react/src/app/lineageV2/settings/useShouldHideTransformations.ts similarity index 100% rename from datahub-web-react/src/app/lineageV2/useShouldHideTransformations.ts rename to datahub-web-react/src/app/lineageV2/settings/useShouldHideTransformations.ts diff --git a/datahub-web-react/src/app/lineageV2/useShouldShowDataProcessInstances.ts b/datahub-web-react/src/app/lineageV2/settings/useShouldShowDataProcessInstances.ts similarity index 100% rename from datahub-web-react/src/app/lineageV2/useShouldShowDataProcessInstances.ts rename to datahub-web-react/src/app/lineageV2/settings/useShouldShowDataProcessInstances.ts diff --git a/datahub-web-react/src/app/lineageV2/settings/useShouldShowGhostEntities.ts b/datahub-web-react/src/app/lineageV2/settings/useShouldShowGhostEntities.ts new file mode 100644 index 0000000000..5cd684df32 --- /dev/null +++ b/datahub-web-react/src/app/lineageV2/settings/useShouldShowGhostEntities.ts @@ -0,0 +1,26 @@ +import { useCallback, useState } from 'react'; + +export default function useShouldShowGhostEntities(): [boolean, (value: boolean) => void] { + const defaultValue = inLocalStorage() ? loadFromLocalStorage() : false; + const [showGhostEntities, setShowGhostEntities] = useState(defaultValue); + const setter = useCallback((value: boolean) => { + setShowGhostEntities(value); + saveToLocalStorage(value); + }, []); + + return [showGhostEntities, setter]; +} + +const SHOW_GHOST_ENTITIES_KEY = 'lineageV2__showGhostEntities'; + +function inLocalStorage(): boolean { + return localStorage.getItem(SHOW_GHOST_ENTITIES_KEY) !== null; +} + +function loadFromLocalStorage(): boolean { + return localStorage.getItem(SHOW_GHOST_ENTITIES_KEY) === 'true'; +} + +function saveToLocalStorage(showGhostEntities: boolean) { + localStorage.setItem(SHOW_GHOST_ENTITIES_KEY, String(showGhostEntities)); +}