next-arch-map 0.1.18 → 0.1.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/viewer/src/App.tsx +2 -0
- package/viewer/src/Filters.tsx +36 -32
package/package.json
CHANGED
package/viewer/src/App.tsx
CHANGED
|
@@ -111,6 +111,7 @@ export function App() {
|
|
|
111
111
|
const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
|
|
112
112
|
const [loadError, setLoadError] = useState<string | null>(null);
|
|
113
113
|
const [activePreset, setActivePreset] = useState<LayerPreset | null>(null);
|
|
114
|
+
const [showAdvanced, setShowAdvanced] = useState(false);
|
|
114
115
|
|
|
115
116
|
useEffect(() => {
|
|
116
117
|
setGraph(null);
|
|
@@ -468,6 +469,7 @@ export function App() {
|
|
|
468
469
|
visibleEdgeKinds={visibleEdgeKinds}
|
|
469
470
|
onToggleNodeType={toggleNodeType}
|
|
470
471
|
onToggleEdgeKind={toggleEdgeKind}
|
|
472
|
+
showAdvanced={showAdvanced}
|
|
471
473
|
/>
|
|
472
474
|
|
|
473
475
|
{/* Query */}
|
package/viewer/src/Filters.tsx
CHANGED
|
@@ -8,6 +8,7 @@ type FiltersProps = {
|
|
|
8
8
|
visibleEdgeKinds: Set<EdgeKind>;
|
|
9
9
|
onToggleNodeType: (type: NodeType) => void;
|
|
10
10
|
onToggleEdgeKind: (kind: EdgeKind) => void;
|
|
11
|
+
showAdvanced?: boolean;
|
|
11
12
|
};
|
|
12
13
|
|
|
13
14
|
const NODE_TYPE_COLORS: Record<NodeType, string> = {
|
|
@@ -26,6 +27,7 @@ export function Filters(props: FiltersProps) {
|
|
|
26
27
|
visibleEdgeKinds,
|
|
27
28
|
onToggleNodeType,
|
|
28
29
|
onToggleEdgeKind,
|
|
30
|
+
showAdvanced,
|
|
29
31
|
} = props;
|
|
30
32
|
|
|
31
33
|
return (
|
|
@@ -68,40 +70,42 @@ export function Filters(props: FiltersProps) {
|
|
|
68
70
|
</div>
|
|
69
71
|
</div>
|
|
70
72
|
|
|
71
|
-
|
|
72
|
-
<
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
<Checkbox.Root
|
|
82
|
-
checked={visibleEdgeKinds.has(kind)}
|
|
83
|
-
onCheckedChange={() => onToggleEdgeKind(kind)}
|
|
84
|
-
className="h-4 w-4 rounded border border-slate-300 bg-white flex items-center justify-center transition-colors data-[state=checked]:bg-indigo-600 data-[state=checked]:border-indigo-600"
|
|
73
|
+
{showAdvanced && (
|
|
74
|
+
<div>
|
|
75
|
+
<h3 className="text-[11px] font-semibold uppercase tracking-wider text-slate-400 mb-2">
|
|
76
|
+
Edge kinds
|
|
77
|
+
</h3>
|
|
78
|
+
<div className="space-y-1.5">
|
|
79
|
+
{allEdgeKinds.map((kind) => (
|
|
80
|
+
<label
|
|
81
|
+
key={kind}
|
|
82
|
+
className="flex items-center gap-2 cursor-pointer group"
|
|
85
83
|
>
|
|
86
|
-
<Checkbox.
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
84
|
+
<Checkbox.Root
|
|
85
|
+
checked={visibleEdgeKinds.has(kind)}
|
|
86
|
+
onCheckedChange={() => onToggleEdgeKind(kind)}
|
|
87
|
+
className="h-4 w-4 rounded border border-slate-300 bg-white flex items-center justify-center transition-colors data-[state=checked]:bg-indigo-600 data-[state=checked]:border-indigo-600"
|
|
88
|
+
>
|
|
89
|
+
<Checkbox.Indicator>
|
|
90
|
+
<svg width="10" height="10" viewBox="0 0 10 10" fill="none">
|
|
91
|
+
<path
|
|
92
|
+
d="M2 5L4 7L8 3"
|
|
93
|
+
stroke="white"
|
|
94
|
+
strokeWidth="1.5"
|
|
95
|
+
strokeLinecap="round"
|
|
96
|
+
strokeLinejoin="round"
|
|
97
|
+
/>
|
|
98
|
+
</svg>
|
|
99
|
+
</Checkbox.Indicator>
|
|
100
|
+
</Checkbox.Root>
|
|
101
|
+
<span className="text-xs text-slate-600 group-hover:text-slate-900 transition-colors">
|
|
102
|
+
{kind}
|
|
103
|
+
</span>
|
|
104
|
+
</label>
|
|
105
|
+
))}
|
|
106
|
+
</div>
|
|
103
107
|
</div>
|
|
104
|
-
|
|
108
|
+
)}
|
|
105
109
|
</div>
|
|
106
110
|
);
|
|
107
111
|
}
|