Multi branch tree

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "cSpell.words": [
+    "subproject",
+    "subprojects"
+  ]
+}

package.json

@@ -17,9 +17,9 @@
     "@corbado/react": "2.8.0",
     "@css-hooks/react": "2.0.4",
     "@css-hooks/recommended": "2.0.4",
-    "@cyntler/react-doc-viewer": "1.15.0",
-    "@fluentui/react-components": "9.52.0",
-    "@fluentui/react-datepicker-compat": "0.4.38",
+    "@cyntler/react-doc-viewer": "1.15.1",
+    "@fluentui/react-components": "9.53.0",
+    "@fluentui/react-datepicker-compat": "0.4.39",
     "@fluentui/react-icons": "2.0.240",
     "@fluentui/react-timepicker-compat-preview": "0.2.0",
     "@formkit/tempo": "0.1.1",
@@ -34,13 +34,13 @@
     "@turf/point-to-line-distance": "6.5.0",
     "@turf/points-within-polygon": "6.5.0",
     "@turf/polygon-to-line": "6.5.0",
-    "@uploadcare/blocks": "0.40.0",
-    "allotment": "1.20.1",
+    "@uploadcare/blocks": "0.41.1",
+    "allotment": "1.20.2",
     "array-move": "4.0.0",
     "dayjs": "1.11.11",
     "dotenv": "16.4.5",
     "electric-sql": "0.11.3",
-    "framer-motion": "11.2.5",
+    "framer-motion": "11.2.9",
     "is-uuid": "1.0.2",
     "leaflet": "1.9.4",
     "leaflet-draw": "1.0.4",
@@ -63,33 +63,33 @@
     "react-xml-viewer": "2.0.1",
     "recharts": "2.12.7",
     "redaxios": "0.5.1",
-    "use-debounce": "10.0.0",
+    "use-debounce": "10.0.1",
     "wa-sqlite": "rhashimoto/wa-sqlite#semver:v0.9.13",
     "wms-capabilities": "0.6.0",
     "xlsx": "0.18.5",
     "zod": "3.23.8"
   },
   "devDependencies": {
     "@databases/pg-migrations": "5.0.3",
-    "@eslint/compat": "^1.0.1",
-    "@eslint/eslintrc": "^3.1.0",
-    "@eslint/js": "^9.3.0",
+    "@eslint/compat": "1.0.1",
+    "@eslint/eslintrc": "3.1.0",
+    "@eslint/js": "9.3.0",
     "@types/leaflet": "1.9.12",
     "@types/leaflet-draw": "1.0.11",
     "@types/proj4": "2.5.5",
     "@types/proj4leaflet": "1.0.10",
-    "@types/react": "18.3.2",
+    "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
-    "@typescript-eslint/eslint-plugin": "7.10.0",
-    "@typescript-eslint/parser": "7.10.0",
-    "@vitejs/plugin-react": "4.2.1",
-    "eslint": "^9.3.0",
+    "@typescript-eslint/eslint-plugin": "7.11.0",
+    "@typescript-eslint/parser": "7.11.0",
+    "@vitejs/plugin-react": "4.3.0",
+    "eslint": "9.3.0",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-react-hooks": "4.6.2",
     "eslint-plugin-react-refresh": "0.4.7",
-    "globals": "^15.3.0",
+    "globals": "15.3.0",
     "typescript": "5.4.5",
-    "vite": "5.2.11",
+    "vite": "5.2.12",
     "vite-plugin-svgr": "4.2.0"
   },
   "devRemarks": {

src/components/AuthAndDb.tsx

@@ -4,6 +4,7 @@ import { CorbadoProvider } from '@corbado/react'
 import { ElectricProvider } from '../ElectricWrapper.tsx'
 import { SqlInitializer } from './SqlInitializer/index.tsx'
 import { Syncer } from './Syncer.tsx'
+import { TreeOpenNodesSetter } from './TreeOpenNodesSetter.tsx'
 
 import { Layout } from './LayoutProtected/index.tsx'
 
@@ -17,6 +18,7 @@ export const AuthAndDb = memo(() => {
       <ElectricProvider>
         <SqlInitializer />
         <Syncer />
+        <TreeOpenNodesSetter />
         <Layout />
       </ElectricProvider>
     </CorbadoProvider>

src/components/Layout/Header/Menu.tsx

@@ -9,7 +9,7 @@ import { css } from '../../../css.ts'
 export const Menu = memo(() => {
   const navigate = useNavigate()
 
-  const onClickEnter = useCallback(() => navigate('/projects'), [navigate])
+  const onClickEnter = useCallback(() => navigate('/data/projects'), [navigate])
 
   return (
     <div style={controls}>

src/components/LayoutProtected/Header/Menu.tsx

@@ -88,7 +88,7 @@ export const Menu = memo(() => {
   }, [appState?.app_state_id, navigate, params.user_email, searchParams])
 
   const onClickLogout = useCallback(() => logout(), [logout])
-  const onClickEnter = useCallback(() => navigate('/projects'), [navigate])
+  const onClickEnter = useCallback(() => navigate('/data/projects'), [navigate])
 
   const treeIsActive = tabs.includes('tree')
   const dataIsActive = tabs.includes('data')

src/components/LayoutProtected/index.tsx

@@ -22,7 +22,7 @@ export const Layout = memo(() => {
   // const onlyForm = searchParams.get('onlyForm')
   const onlyForm = false
 
-  console.log('hello Protected Layout')
+  // console.log('hello Protected Layout')
 
   // Breadcrumbs and Navs are not protected because:
   // - they are not (very) sensitive

src/components/Syncer.tsx

@@ -9,7 +9,7 @@ export const Syncer = () => {
   // console.log('hello Syncer', { db, authUser })
 
   useEffect(() => {
-    console.log('hello Syncer, syncing data for user:', authUser?.email)
+    // console.log('hello Syncer, syncing data for user:', authUser?.email)
     const syncItems = async () => {
       await db.app_states.update({
         where: { user_email: authUser?.email },
@@ -238,7 +238,7 @@ export const Syncer = () => {
         where: { user_email: authUser?.email },
         data: { syncing: false },
       })
-      console.log('hello Syncer, data synced')
+      // console.log('hello Syncer, data synced')
     }
 
     syncItems()

src/components/TableLayersProvider.tsx

@@ -59,7 +59,7 @@ export const TableLayersProvider = () => {
           const newVectorLayer = await db.vector_layers.create({
             data: vectorLayer,
           })
-          console.error(
+          console.warn(
             'hello TableLayersProvider, new places 1 vector layer:',
             newVectorLayer,
           )

src/components/Tree/Account.tsx

@@ -1,10 +1,6 @@
-import { useCallback, memo } from 'react'
-import {
-  useLocation,
-  useParams,
-  useNavigate,
-  useSearchParams,
-} from 'react-router-dom'
+import { memo, useMemo } from 'react'
+import { useLocation } from 'react-router-dom'
+import isEqual from 'lodash/isEqual'
 
 import { Node } from './Node.tsx'
 import { Accounts as Account } from '../../../generated/client/index.ts'
@@ -15,39 +11,27 @@ interface Props {
 }
 
 export const AccountNode = memo(({ account, level = 2 }: Props) => {
-  const params = useParams()
   const location = useLocation()
-  const navigate = useNavigate()
-  const [searchParams] = useSearchParams()
 
   const urlPath = location.pathname.split('/').filter((p) => p !== '')
-  const isOpen =
-    urlPath[0] === 'accounts' && params.account_id === account.account_id
-  const isActive = isOpen && urlPath.length === 2
+  const ownArray = useMemo(
+    () => ['data', 'accounts', account.account_id],
+    [account.account_id],
+  )
+  const ownUrl = `/${ownArray.join('/')}`
 
-  const onClickButton = useCallback(() => {
-    if (isOpen)
-      return navigate({
-        pathname: '/accounts',
-        search: searchParams.toString(),
-      })
-    navigate({
-      pathname: `/accounts/${account.account_id}`,
-      search: searchParams.toString(),
-    })
-  }, [isOpen, navigate, account.account_id, searchParams])
+  const isInActiveNodeArray = ownArray.every((part, i) => urlPath[i] === part)
+  const isActive = isEqual(urlPath, ownArray)
 
   return (
     <Node
       node={account}
       id={account.account_id}
       level={level}
-      isOpen={isOpen}
-      isInActiveNodeArray={isOpen}
+      isInActiveNodeArray={isInActiveNodeArray}
       isActive={isActive}
       childrenCount={0}
-      to={`/accounts/${account.account_id}`}
-      onClickButton={onClickButton}
+      to={ownUrl}
     />
   )
 })

src/components/Tree/Accounts.tsx

@@ -1,15 +1,20 @@
 import { useCallback, useMemo, memo } from 'react'
 import { useLiveQuery } from 'electric-sql/react'
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
+import { useCorbado } from '@corbado/react'
+import isEqual from 'lodash/isEqual'
 
 import { useElectric } from '../../ElectricProvider.tsx'
 import { Node } from './Node.tsx'
 import { AccountNode } from './Account.tsx'
+import { removeChildNodes } from '../../modules/tree/removeChildNodes.ts'
+import { addOpenNodes } from '../../modules/tree/addOpenNodes.ts'
 
 export const AccountsNode = memo(() => {
   const location = useLocation()
   const navigate = useNavigate()
   const [searchParams] = useSearchParams()
+  const { user: authUser } = useCorbado()
 
   const { db } = useElectric()!
   const { results: accounts = [] } = useLiveQuery(
@@ -18,32 +23,76 @@ export const AccountsNode = memo(() => {
     }),
   )
 
+  const { results: appState } = useLiveQuery(
+    db.app_states.liveFirst({ where: { user_email: authUser?.email } }),
+  )
+  const openNodes = useMemo(
+    () => appState?.tree_open_nodes ?? [],
+    [appState?.tree_open_nodes],
+  )
+
   const accountsNode = useMemo(
     () => ({ label: `Accounts (${accounts.length})` }),
     [accounts.length],
   )
 
   const urlPath = location.pathname.split('/').filter((p) => p !== '')
-  const isOpen = urlPath[0] === 'accounts'
-  const isActive = isOpen && urlPath.length === 1
+  const parentArray = useMemo(() => ['data'], [])
+  const parentUrl = `/${parentArray.join('/')}`
+  const ownArray = useMemo(() => [...parentArray, 'accounts'], [parentArray])
+  const ownUrl = `/${ownArray.join('/')}`
+
+  // needs to work not only works for urlPath, for all opened paths!
+  const isOpen = openNodes.some((array) => isEqual(array, ownArray))
+  const isInActiveNodeArray = ownArray.every((part, i) => urlPath[i] === part)
+  const isActive = isEqual(urlPath, ownArray)
 
   const onClickButton = useCallback(() => {
     if (isOpen) {
-      return navigate({ pathname: '/', search: searchParams.toString() })
+      removeChildNodes({
+        node: ownArray,
+        db,
+        appStateId: appState?.app_state_id,
+        isRoot: true,
+      })
+      // only navigate if urlPath includes ownArray
+      if (isInActiveNodeArray && ownArray.length <= urlPath.length) {
+        navigate({
+          pathname: parentUrl,
+          search: searchParams.toString(),
+        })
+      }
+      return
     }
-    navigate({ pathname: '/accounts', search: searchParams.toString() })
-  }, [isOpen, navigate, searchParams])
+    // add to openNodes without navigating
+    addOpenNodes({
+      nodes: [ownArray],
+      db,
+      appStateId: appState?.app_state_id,
+      isRoot: true,
+    })
+  }, [
+    appState?.app_state_id,
+    db,
+    isInActiveNodeArray,
+    isOpen,
+    navigate,
+    ownArray,
+    parentUrl,
+    searchParams,
+    urlPath.length,
+  ])
 
   return (
     <>
       <Node
         node={accountsNode}
         level={1}
         isOpen={isOpen}
-        isInActiveNodeArray={isOpen}
+        isInActiveNodeArray={isInActiveNodeArray}
         isActive={isActive}
         childrenCount={accounts.length}
-        to={`/accounts`}
+        to={ownUrl}
         onClickButton={onClickButton}
       />
       {isOpen &&