Merge pull request #623 from liam-hq/browser_back_and_forward_for_hid…

…den_nodes

✨ Add support for hidden nodes in URL state management

.changeset/famous-clouds-knock.md

@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+✨ Add support for hidden nodes in URL state management

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/useInitialAutoLayout.ts

@@ -1,50 +1,19 @@
-import type { QueryParam } from '@/schemas/queryParam'
-import { type ShowMode, showModeSchema } from '@/schemas/showMode'
 import {
   addHiddenNodeIds,
   updateActiveTableName,
   updateShowMode,
 } from '@/stores'
-import { decompressFromEncodedURIComponent } from '@/utils'
+import {
+  getActiveTableNameFromUrl,
+  getHiddenNodeIdsFromUrl,
+  getShowModeFromUrl,
+} from '@/utils'
 import { type Node, useReactFlow } from '@xyflow/react'
 import { useEffect, useMemo } from 'react'
-import * as v from 'valibot'
 import { useERDContentContext } from './ERDContentContext'
 import { highlightNodesAndEdges } from './highlightNodesAndEdges'
 import { useAutoLayout } from './useAutoLayout'
 
-const getActiveTableNameFromUrl = (): string | undefined => {
-  const urlParams = new URLSearchParams(window.location.search)
-  const activeQueryParam: QueryParam = 'active'
-  const tableName = urlParams.get(activeQueryParam)
-
-  return tableName || undefined
-}
-
-const getHiddenNodeIdsFromUrl = async (): Promise<string[]> => {
-  const urlParams = new URLSearchParams(window.location.search)
-  const hiddenQueryParam: QueryParam = 'hidden'
-  const compressed = urlParams.get(hiddenQueryParam)
-  const hiddenNodeIds = compressed
-    ? await decompressFromEncodedURIComponent(compressed).catch(() => undefined)
-    : undefined
-
-  return hiddenNodeIds ? hiddenNodeIds.split(',') : []
-}
-
-const getShowModeFromUrl = (): ShowMode => {
-  const urlParams = new URLSearchParams(window.location.search)
-  const showModeQueryParam: QueryParam = 'showMode'
-  const showMode = urlParams.get(showModeQueryParam)
-
-  const result = v.safeParse(showModeSchema, showMode)
-  if (result.success && result.output) {
-    return result.output
-  }
-
-  return 'TABLE_NAME'
-}
-
 export const useInitialAutoLayout = (
   nodes: Node[],
   shouldFitViewToActiveTable: boolean,

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/usePopStateListener.ts

@@ -1,30 +1,37 @@
-import { showModeSchema } from '@/schemas/showMode'
 import {
+  replaceHiddenNodeIds,
   updateActiveTableName,
   updateIsPopstateInProgress,
   updateShowMode,
 } from '@/stores'
+import {
+  getActiveTableNameFromUrl,
+  getHiddenNodeIdsFromUrl,
+  getShowModeFromUrl,
+} from '@/utils'
 import { useEffect } from 'react'
-import * as v from 'valibot'
 
 export const usePopStateListener = () => {
   useEffect(() => {
     const handlePopState = async () => {
-      const url = new URL(window.location.href)
-      const tableName = url.searchParams.get('active')
-      const showMode = url.searchParams.get('showMode')
+      const tableName = getActiveTableNameFromUrl()
+      const showMode = getShowModeFromUrl()
+      const hiddenNodeIds = await getHiddenNodeIdsFromUrl()
 
       updateIsPopstateInProgress(true)
-      updateActiveTableName(tableName ?? undefined)
 
-      const result = v.safeParse(showModeSchema, showMode)
-      if (result.success && result.output) {
-        updateShowMode(result.output)
-      }
+      await new Promise<void>((resolve) => {
+        updateActiveTableName(tableName ?? undefined)
+        updateShowMode(showMode)
+        setTimeout(resolve, 1)
+      })
+
+      await new Promise<void>((resolve) => {
+        replaceHiddenNodeIds(hiddenNodeIds)
+        setTimeout(resolve, 1)
+      })
 
-      setTimeout(() => {
-        updateIsPopstateInProgress(false)
-      }, 0)
+      updateIsPopstateInProgress(false)
     }
 
     window.addEventListener('popstate', handlePopState)

frontend/packages/erd-core/src/stores/userEditing/store.ts

@@ -43,14 +43,17 @@ subscribe(userEditingStore.hiddenNodeIds, async () => {
   const url = new URL(window.location.href)
   const activeQueryParam: QueryParam = 'hidden'
   const hiddenNodeIds = Array.from(userEditingStore.hiddenNodeIds).join(',')
-
+  const isPopstateInProgress = userEditingStore.isPopstateInProgress
   url.searchParams.delete(activeQueryParam)
+
   if (hiddenNodeIds) {
     const compressed = await compressToEncodedURIComponent(hiddenNodeIds)
     url.searchParams.set(activeQueryParam, compressed)
   }
 
-  window.history.pushState({}, '', url)
+  if (!isPopstateInProgress) {
+    window.history.pushState({}, '', url)
+  }
 })
 
 subscribeKey(userEditingStore, 'showMode', (newShowMode) => {

frontend/packages/erd-core/src/utils/index.ts

@@ -1 +1,2 @@
 export * from './compressionString'
+export * from './urlParams'

frontend/packages/erd-core/src/utils/urlParams.ts

@@ -0,0 +1,33 @@
+import type { QueryParam } from '@/schemas/queryParam'
+import { type ShowMode, showModeSchema } from '@/schemas/showMode'
+import { decompressFromEncodedURIComponent } from '@/utils'
+import * as v from 'valibot'
+
+const getQueryParam = (param: QueryParam): string | undefined => {
+  const urlParams = new URLSearchParams(window.location.search)
+  const value = urlParams.get(param)
+  return value || undefined
+}
+
+export const getActiveTableNameFromUrl = (): string | undefined => {
+  return getQueryParam('active')
+}
+
+export const getHiddenNodeIdsFromUrl = async (): Promise<string[]> => {
+  const compressed = getQueryParam('hidden')
+  const decompressed = compressed
+    ? await decompressFromEncodedURIComponent(compressed).catch(() => undefined)
+    : undefined
+
+  return decompressed ? decompressed.split(',') : []
+}
+
+export const getShowModeFromUrl = (): ShowMode => {
+  const showMode = getQueryParam('showMode')
+  const result = v.safeParse(showModeSchema, showMode)
+  if (result.success && result.output) {
+    return result.output
+  }
+
+  return 'TABLE_NAME'
+}