systems tree Test using react flow

Author: joshdimanteto

package.json

@@ -28,10 +28,12 @@
     "@uppy/react": "^4.0.2",
     "@uppy/xhr-upload": "^4.2.0",
     "@vitejs/plugin-react": "^4.3.0",
+    "@xyflow/react": "^12.4.2",
     "axios": "^1.7.2",
     "blob-polyfill": "^9.0.20240710",
     "browserslist": "^4.23.0",
     "browserslist-to-esbuild": "^2.1.1",
+    "dagre": "^0.8.5",
     "date-fns": "4.1.0",
     "history": "^5.3.0",
     "loglevel": "^1.9.1",
@@ -86,6 +88,9 @@
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.1.0",
     "@testing-library/user-event": "14.5.2",
+    "@types/d3": "^7",
+    "@types/d3-hierarchy": "^3",
+    "@types/dagre": "^0",
     "@types/eslint-plugin-jsx-a11y": "6.10.0",
     "@types/eslint__js": "8.42.3",
     "@types/react-router-dom": "5.3.3",

src/App.tsx

@@ -64,6 +64,7 @@ import SystemsLayout, {
   SystemsLayoutErrorComponent,
   systemsLayoutLoader,
 } from './systems/systemsLayout.component';
+import SystemsTree from './systems/systemsTree.component';
 import ViewTabs from './view/viewTabs.component';
 
 export const paths = {
@@ -81,6 +82,8 @@ export const paths = {
   item: '/catalogue/:catalogue_category_id/items/:catalogue_item_id/items/:item_id',
   systems: '/systems',
   system: '/systems/:system_id',
+  systemTree: '/systems/:system_id/tree',
+  systemRootTree: '/systems/tree',
   manufacturers: '/manufacturers',
   manufacturer: '/manufacturers/:manufacturer_id',
 };
@@ -216,6 +219,15 @@ const routeObject: RouteObject[] = [
             Component: Systems,
             loader: systemsLayoutLoader(queryClient),
           },
+          {
+            path: 'tree',
+            Component: SystemsTree,
+          },
+          {
+            path: paths.systemTree,
+            Component: SystemsTree,
+            loader: systemsLayoutLoader(queryClient),
+          },
           {
             path: '*',
             Component: SystemsErrorComponent,

src/api/systems.tsx

@@ -87,6 +87,34 @@ export const useGetSystem = (
   return useQuery(getSystemQuery(id));
 };
 
+export interface SystemTree extends System {
+  subsystems?: SystemTree[];
+}
+
+const getSystemTree = async (parent_id?: string): Promise<SystemTree[]> => {
+  // Fetch the systems at the current level
+  const systems = await getSystems(parent_id || 'null');
+
+  // Fetch subsystems for each system recursively
+  const systemsWithTree = await Promise.all(
+    systems.map(async (system) => {
+      const subsystems = await getSystemTree(system.id); // Fetch subsystems
+      return { ...system, subsystems }; // Attach subsystems
+    })
+  );
+
+  return systemsWithTree;
+};
+
+export const useGetSystemsTree = (
+  parent_id?: string | null
+): UseQueryResult<SystemTree[], AxiosError> => {
+  return useQuery({
+    queryKey: ['SystemsTree', parent_id],
+    queryFn: () => getSystemTree(parent_id ?? ''),
+  });
+};
+
 const getSystemsBreadcrumbs = async (id: string): Promise<BreadcrumbsInfo> => {
   return imsApi.get(`/v1/systems/${id}/breadcrumbs`, {}).then((response) => {
     return response.data;

src/common/baseLayoutHeader.component.tsx

@@ -14,11 +14,16 @@ export interface BaseLayoutHeaderProps {
 function BaseLayoutHeader(props: BaseLayoutHeaderProps) {
   const { breadcrumbsInfo, children, homeLocation } = props;
   const navigate = useNavigate();
+
+  // Check if we are in Tree View or Normal View by looking for '/tree' in the URL
+  const isTreeView = location.pathname.includes('tree');
   const onChangeNode = React.useCallback(
     (id: string | null) => {
-      navigate(`/${RoutesHomeLocation[homeLocation]}${id ? `/${id}` : ''}`);
+      navigate(
+        `/${RoutesHomeLocation[homeLocation]}${id ? `/${id}` : ''}${isTreeView && !id && homeLocation == 'Systems' ? '/tree' : ''}`
+      );
     },
-    [homeLocation, navigate]
+    [homeLocation, isTreeView, navigate]
   );
   return (
     <Box height="100%" width="100%">

src/systems/systemsLayout.component.tsx

@@ -1,5 +1,14 @@
+import AccountTreeIcon from '@mui/icons-material/AccountTree';
+import ViewModuleIcon from '@mui/icons-material/ViewModule';
+import { ToggleButton, ToggleButtonGroup } from '@mui/material';
 import type { QueryClient } from '@tanstack/react-query';
-import { Outlet, useParams, type LoaderFunctionArgs } from 'react-router-dom';
+import {
+  Outlet,
+  useLocation,
+  useNavigate,
+  useParams,
+  type LoaderFunctionArgs,
+} from 'react-router-dom';
 import { getSystemQuery, useGetSystemsBreadcrumbs } from '../api/systems';
 import BaseLayoutHeader from '../common/baseLayoutHeader.component';
 import PageNotFoundComponent from '../common/pageNotFound/pageNotFound.component';
@@ -29,15 +38,58 @@ export const systemsLayoutLoader =
   };
 
 function SystemsLayout() {
+  const location = useLocation();
   const { system_id: systemId } = useParams();
 
   const { data: systemsBreadcrumbs } = useGetSystemsBreadcrumbs(systemId);
+  const navigate = useNavigate();
 
+  // Check if we are in Tree View or Normal View by looking for '/tree' in the URL
+  const isTreeView = location.pathname.includes('tree');
+
+  // Handle the view change using the toggle button
+  const handleViewChange = (
+    _event: React.MouseEvent<HTMLElement>,
+    newView: string
+  ) => {
+    if (newView === 'tree') {
+      // Navigate to Tree View
+      navigate(`/systems${systemId ? `/${systemId}` : ''}/tree`);
+    } else {
+      // Navigate to Normal View
+      navigate(`/systems${systemId ? `/${systemId}` : ''}`);
+    }
+  };
   return (
     <BaseLayoutHeader
       homeLocation="Systems"
-      breadcrumbsInfo={systemsBreadcrumbs}
+      breadcrumbsInfo={{
+        ...systemsBreadcrumbs,
+        full_trail: systemsBreadcrumbs?.full_trail ?? true,
+        trail:
+          systemsBreadcrumbs?.trail.map(([id, name]) => [
+            isTreeView ? id + '/tree' : id,
+            name,
+          ]) ?? [],
+      }}
     >
+      <ToggleButtonGroup
+        value={isTreeView ? 'tree' : 'normal'}
+        exclusive
+        onChange={handleViewChange}
+        aria-label="view mode toggle"
+        size="small"
+        sx={{ margin: 1 }}
+      >
+        <ToggleButton value="normal" aria-label="normal view">
+          <ViewModuleIcon sx={{ marginRight: 1 }} fontSize="small" />
+          Normal View
+        </ToggleButton>
+        <ToggleButton value="tree" aria-label="tree view">
+          <AccountTreeIcon sx={{ marginRight: 1 }} fontSize="small" />
+          Tree View
+        </ToggleButton>
+      </ToggleButtonGroup>
       <Outlet />
     </BaseLayoutHeader>
   );