feat(map): New alternative PR in light of CiCD issues (#566)

package.json

@@ -7,8 +7,11 @@
     "@applitools/eyes-playwright": "^1.23.6",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.15.12",
+    "@mui/lab": "^5.0.0-alpha.167",
     "@mui/material": "^5.15.11",
     "@mui/x-date-pickers": "^6.19.5",
+    "@mui/x-tree-view": "^6.17.0",
     "@types/git-username": "^1.0.5",
     "@types/leaflet.markercluster": "^1.5.2",
     "@vitejs/plugin-react-swc": "^3.6.0",

src/pages/components/CustomTreeView.tsx

@@ -0,0 +1,89 @@
+import { TreeView } from '@mui/x-tree-view/TreeView'
+import { TreeItem } from '@mui/x-tree-view/TreeItem'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import ChevronRightIcon from '@mui/icons-material/ChevronRight'
+
+interface BaseTreeNode {
+  id: string
+  name: string
+}
+
+// Generic TreeNode interface with additional properties
+interface TreeNode<T extends BaseTreeNode> extends BaseTreeNode {
+  children?: TreeNode<T>[]
+  // You can now include additional properties from T
+}
+
+// Generic CustomTreeViewProps interface
+interface CustomTreeViewProps<T> {
+  data: T
+  name: string
+  id: string
+}
+
+const isPrimitive = (value: unknown) => value !== Object(value) || value === null
+// A utility function to transform any object into a TreeNode structure
+const objectToTreeNode = <T extends Record<string, unknown>>(
+  obj: T,
+  key: string = 'root',
+  nodeId: string = '0',
+): TreeNode<BaseTreeNode> => {
+  const children = Object.keys(obj).map((k, index) => {
+    const value = obj[k]
+    if (isPrimitive(value)) {
+      // Handle primitive types directly
+      return {
+        id: `${nodeId}-${index}`,
+        name: `${k}: ${value}`,
+      }
+    } else if (Array.isArray(value)) {
+      // If it's an array, create a node that lists all elements
+      return {
+        id: `${nodeId}-${index}`,
+        name: k,
+        children: value.map((item, itemIndex) => {
+          // Handle primitive items in the array directly
+          if (isPrimitive(item)) {
+            return {
+              id: `${nodeId}-${index}-${itemIndex}`,
+              name: `${item}`,
+            }
+          }
+          // Recursively handle objects in the array
+          return objectToTreeNode(item, k, `${nodeId}-${index}-${itemIndex}`)
+        }),
+      }
+    } else {
+      // Recursively handle objects
+      return objectToTreeNode(value as Record<string, unknown>, k, `${nodeId}-${index}`)
+    }
+  })
+
+  return {
+    id: nodeId,
+    name: (obj.name || key) as string,
+    children: children.length ? children : undefined,
+  }
+}
+
+// Render tree function utilizing the TreeNode interface
+const renderTree = <T extends BaseTreeNode>(nodes: TreeNode<T>): JSX.Element => (
+  <TreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name}>
+    {nodes.children?.map((node) => renderTree(node))}
+  </TreeItem>
+)
+
+// CustomTreeView component using TypeScript
+const CustomTreeView = <T,>({ data, name, id }: CustomTreeViewProps<T>) => {
+  const dataAsTreeNode = objectToTreeNode({ id, name, children: [data] })
+  return (
+    <TreeView
+      defaultCollapseIcon={<ExpandMoreIcon />}
+      defaultExpandIcon={<ChevronRightIcon />}
+      defaultEndIcon={<div style={{ width: 24 }} />}>
+      {renderTree(dataAsTreeNode)}
+    </TreeView>
+  )
+}
+
+export default CustomTreeView

src/pages/components/CutomTreeView.stories.tsx

@@ -0,0 +1,43 @@
+// CustomTreeView.stories.tsx
+import type { Meta, StoryObj } from '@storybook/react'
+import CustomTreeView from './CustomTreeView'
+import '../../shared/shared.css' // Assuming you have some shared styles
+
+// Example data for the story
+const exampleData = {
+  id: 'root',
+  name: 'Root Node',
+  children: [
+    {
+      id: '1',
+      name: 'Child Node 1',
+      children: [
+        { id: '1-1', name: 'Grandchild Node 1-1' },
+        { id: '1-2', name: 'Grandchild Node 1-2' },
+      ],
+    },
+    {
+      id: '2',
+      name: 'Child Node 2',
+    },
+  ],
+}
+
+const meta: Meta<typeof CustomTreeView> = {
+  title: 'Components/CustomTreeView',
+  component: CustomTreeView,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['tree', 'view', 'react', 'mui'], // Adjust tags as needed
+} satisfies Meta<typeof CustomTreeView>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    data: exampleData, // Using the example data for the default story
+  },
+}

src/pages/components/map-related/MapLayers/BusToolTip.tsx

@@ -10,6 +10,7 @@ import { SiriRideWithRelatedPydanticModel } from 'open-bus-stride-client/openapi
 import { useTranslation } from 'react-i18next'
 import { Spin } from 'antd'
 import cn from 'classnames'
+import CustomTreeView from '../../CustomTreeView'
 
 export type BusToolTipProps = { position: Point; icon: string }
 
@@ -94,11 +95,16 @@ export function BusToolTip({ position, icon }: BusToolTipProps) {
         {showJson ? t('hide_document') : t('show_document')}
       </Button>
       {showJson && (
-        <pre>
-          {JSON.stringify(position, null, 2)}
-          <br />
-          {siriRide && JSON.stringify(siriRide, null, 2)}
-        </pre>
+        <div onClick={(e) => e.stopPropagation()}>
+          <CustomTreeView<Point> id={position.point?.id + ''} data={position} name={t('line')} />
+          {siriRide?.gtfsRideId && (
+            <CustomTreeView<SiriRideWithRelatedPydanticModel | undefined>
+              id={siriRide?.gtfsRideId + ''}
+              data={siriRide}
+              name={t('drive_direction')}
+            />
+          )}
+        </div>
       )}
     </div>
   )