[part1] Visualize wrong dependency

frontend/components/ui/index.ts

@@ -5,6 +5,7 @@ export {
   Base,
   Button,
   CheckBox,
+  Chip,
   Cluster,
   DefinitionList,
   EmptyTableBody,
@@ -30,6 +31,8 @@ export {
   Sidebar,
   SingleComboBox,
   Stack,
+  TabBar,
+  TabItem,
   Table,
   TableReel,
   Td,

frontend/hooks/useSearchParams.ts

@@ -0,0 +1,25 @@
+import { parse, stringify } from '@/utils/queryString'
+import { useEffect, useState } from 'react'
+import { useSearchParams } from 'react-router-dom'
+
+type DeserializeSearchParams<T> = { [urlParam in keyof T]: (v: T[urlParam] | null) => T[urlParam] }
+
+const getInitialState = <T extends Record<string, unknown>>(
+  searchParams: Record<string, unknown>,
+  deserializeSearchParams: DeserializeSearchParams<T>,
+): T => {
+  return Object.entries(deserializeSearchParams).reduce((acc, [key, deserialize]) => {
+    return { ...acc, [key]: deserialize(searchParams[key]) }
+  }, {} as T)
+}
+
+export const useSearchParamsState = <T extends Record<string, unknown>>(deserializeSearchParams: DeserializeSearchParams<T>) => {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const [state, setState] = useState<T>(() => getInitialState(parse(searchParams.toString()), deserializeSearchParams))
+
+  useEffect(() => {
+    setSearchParams(new URLSearchParams(stringify(state)))
+  }, [state, setSearchParams])
+
+  return [state, setState] as const
+}

frontend/models/module.ts

@@ -2,28 +2,23 @@ import { MethodId } from './methodId'
 
 export type Module = string
 
+export type SpecificModuleDependency = {
+  sourceName: string
+  module: Module | null
+  methodIds: MethodId[]
+}
+
+export type SpecificModuleSource = {
+  sourceName: string
+  module: Module | null
+  memo: string
+  dependencies: SpecificModuleDependency[]
+}
+
 export type SpecificModule = {
   module: Module
   moduleDependencies: Module[]
   moduleReverseDependencies: Module[]
-  sources: Array<{
-    sourceName: string
-    module: Module
-    memo: string
-    dependencies: Array<{
-      sourceName: string
-      module: Module | null
-      methodIds: MethodId[]
-    }>
-  }>
-  sourceReverseDependencies: Array<{
-    sourceName: string
-    module: Module | null
-    memo: string
-    dependencies: Array<{
-      sourceName: string
-      module: Module
-      methodIds: MethodId[]
-    }>
-  }>
+  sources: SpecificModuleSource[]
+  sourceReverseDependencies: SpecificModuleSource[]
 }

frontend/models/source.ts

@@ -1,3 +1,4 @@
+import { ascString } from '@/utils/sort'
 import { MethodId } from './methodId'
 import { Module } from './module'
 
@@ -40,12 +41,6 @@ export const sortSources = (sources: Source[], key: 'sourceName' | 'module', sor
 
   let sorted = [...sources]
 
-  const ascString = (a: string, b: string) => {
-    if (a > b) return 1
-    if (a < b) return -1
-    return 0
-  }
-
   switch (key) {
     case 'sourceName': {
       sorted = sorted.sort((a, b) => ascString(a.sourceName, b.sourceName))