Александр Зимин
32 lines
1.1 KiB
TypeScript
32 lines
1.1 KiB
TypeScript
import { createFileRoute } from '@tanstack/react-router'
|
||
import { useTranslation } from 'react-i18next'
|
||
import { PageHeader } from '@/ui'
|
||
import { DictionaryGraph } from '@/components/graph/DictionaryGraph'
|
||
|
||
/**
|
||
* Граф связей справочников — d3-force network diagram.
|
||
*
|
||
* Render: SVG с force-directed layout. Nodes = справочники (color по bundle,
|
||
* size по recordCount). Edges = incoming FK refs (через useDictionaryDependents
|
||
* для каждого dict'а, параллельно).
|
||
*
|
||
* Interactions:
|
||
* - hover node → highlight node + connected edges + neighbors (dim others)
|
||
* - click node → navigate /dictionaries/$name
|
||
*
|
||
* Performance: 40+ nodes SVG OK. >200 — переключать на canvas.
|
||
*/
|
||
export const Route = createFileRoute('/graph')({
|
||
component: GraphPage,
|
||
})
|
||
|
||
function GraphPage() {
|
||
const { t } = useTranslation()
|
||
return (
|
||
<div className="flex flex-col gap-4">
|
||
<PageHeader title={t('graph.title')} description={t('graph.description')} />
|
||
<DictionaryGraph />
|
||
</div>
|
||
)
|
||
}
|