Skip to content

Commit 62ff2ac

Browse files
joeldevelopsjoeldevelops
committed
Improve visual representation of the nodes for large codebases, change highlighting mechanism, and small icon updates
1 parent 0d20e3c commit 62ff2ac

File tree

5 files changed

+103
-71
lines changed

5 files changed

+103
-71
lines changed

‎packages/app/src/components/FileExplorer/FileExplorer.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
} from "react-resizable-panels";
1717
import { ExtractionNode } from "@nanoapi.io/shared";
1818
import { FileExplorerSkeleton } from "./Skeleton.js";
19-
import { LuPanelRightOpen, LuX } from "react-icons/lu";
19+
import { LuSearchCode, LuX } from "react-icons/lu";
2020
import languageIcon from "./languageIcons.js";
2121
import {
2222
MdSearch,
@@ -458,7 +458,7 @@ function NodeElement(props: {
458458
color="violet"
459459
className="text-xl py-1.5 text-text-light dark:text-text-dark my-auto"
460460
>
461-
<LuPanelRightOpen className="text-gray-light dark:text-gray-dark" />
461+
<LuSearchCode className="text-gray-light dark:text-gray-dark" />
462462
</Button>
463463
</Link>
464464
</Tooltip>
@@ -638,7 +638,7 @@ function ExtractionElement(props: {
638638

639639
const [fileChecked, setFileChecked] = useState<CheckedState>(true);
640640
const [checkedSymbols, setCheckedSymbols] = useState(symbolMap);
641-
const maxPathLength = 35;
641+
const maxPathLength = 20;
642642

643643
function getDisplayedPath(name: string) {
644644
if (name.length > maxPathLength) {

‎packages/app/src/helpers/cytoscape/fileDependencyVisualizer/index.ts‎

Lines changed: 32 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -623,14 +623,40 @@ export class FileDependencyVisualizer {
623623
const data = node.data() as NapiNodeData;
624624
if (data.customData.isExternal) {
625625
return tailwindConfig.theme.extend.colors.border[theme];
626-
} else if (data.customData.fileName === this.fileId) {
627-
return tailwindConfig.theme.extend.colors.primary[theme];
628-
} else {
626+
} else if (data.customData.fileName !== this.fileId) {
629627
return tailwindConfig.theme.extend.colors.secondary[theme];
630628
}
629+
630+
if (this.targetMetric) {
631+
return getMetricLevelColor(
632+
this.theme,
633+
data.customData.metricsSeverity[this.targetMetric],
634+
);
635+
}
636+
637+
return tailwindConfig.theme.extend.colors.primary[theme];
631638
},
632-
"background-color":
633-
tailwindConfig.theme.extend.colors.background[theme],
639+
"background-color": (node: NodeSingular) => {
640+
const data = node.data() as NapiNodeData;
641+
642+
if (data.customData.isExternal) {
643+
return tailwindConfig.theme.extend.colors.border[theme];
644+
}
645+
646+
if (data.customData.fileName !== this.fileId) {
647+
return tailwindConfig.theme.extend.colors.secondary[theme];
648+
}
649+
650+
if (this.targetMetric) {
651+
return getMetricLevelColor(
652+
this.theme,
653+
data.customData.metricsSeverity[this.targetMetric],
654+
);
655+
}
656+
657+
return tailwindConfig.theme.extend.colors.primary[theme];
658+
},
659+
634660
shape: (node: NodeSingular) => {
635661
const symbolTypeToShape = {
636662
[classSymbolType]: "hexagon",
@@ -648,33 +674,9 @@ export class FileDependencyVisualizer {
648674
symbolTypeToShape[data.customData.symbolType] || fallbackShape
649675
);
650676
},
677+
"background-opacity": 0.2,
651678
width: "data(customData.collapsed.width)",
652679
height: "data(customData.collapsed.height)",
653-
"pie-size": "20px",
654-
"pie-1-background-color": (node: NodeSingular) => {
655-
const data = node.data() as NapiNodeData;
656-
if (!this.targetMetric) {
657-
return "transparent"; // even with transparent, the pie chart is visible. Need to set opacity to 0
658-
}
659-
660-
return getMetricLevelColor(
661-
this.theme,
662-
data.customData.metricsSeverity[this.targetMetric],
663-
);
664-
},
665-
"pie-1-background-size": "100%",
666-
"pie-1-background-opacity": (node: NodeSingular) => {
667-
const data = node.data() as NapiNodeData;
668-
669-
if (!this.targetMetric) {
670-
return 0;
671-
}
672-
673-
if (data.customData.metricsSeverity[this.targetMetric] === 0) {
674-
return 0;
675-
}
676-
return 1;
677-
},
678680
"text-valign": "center",
679681
"text-halign": "center",
680682
},

‎packages/app/src/helpers/cytoscape/projectDependencyVisualizer/index.ts‎

Lines changed: 21 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -297,46 +297,33 @@ export class ProjectDependencyVisualizer {
297297
"text-wrap": "wrap",
298298
color: tailwindConfig.theme.extend.colors.text[theme],
299299
"border-width": (node: NodeSingular) => {
300-
return this.highlightedNodeId === node.id() ? 10 : 4;
300+
return this.highlightedNodeId === node.id() ? 10 : 6;
301301
},
302302
"border-color": (node: NodeSingular) => {
303-
return this.highlightedNodeId === node.id()
304-
? "yellow"
305-
: tailwindConfig.theme.extend.colors.secondary[theme];
306-
},
307-
"background-color":
308-
tailwindConfig.theme.extend.colors.secondary[theme],
309-
"z-index": (node: NodeSingular) => {
310-
return this.highlightedNodeId === node.id() ? 3000 : 0;
311-
},
312-
shape: "round-rectangle",
313-
width: 20,
314-
height: 20,
315-
"pie-size": "20px",
316-
"pie-1-background-size": "100%",
317-
"pie-1-background-color": (node: NodeSingular) => {
318-
const data = node.data() as NapiNodeData;
319-
if (!this.targetMetric) {
320-
return "transparent"; // even with transparent, the pie chart is visible. Need to set opacity to 0
303+
if (this.highlightedNodeId === node.id()) {
304+
return "yellow";
321305
}
322306

323-
return getMetricLevelColor(
324-
this.theme,
325-
data.customData.metricsSeverity[this.targetMetric],
326-
);
307+
if (this.targetMetric) {
308+
return getMetricLevelColor(
309+
this.theme,
310+
node.data().customData.metricsSeverity[this.targetMetric],
311+
);
312+
}
313+
return tailwindConfig.theme.extend.colors.primary[theme];
327314
},
328-
"pie-1-background-opacity": (node: NodeSingular) => {
315+
"background-color": (node: NodeSingular) => {
329316
const data = node.data() as NapiNodeData;
330-
331-
if (!this.targetMetric) {
332-
return 0;
333-
}
334-
335-
if (data.customData.metricsSeverity[this.targetMetric] === 0) {
336-
return 0;
317+
if (this.targetMetric) {
318+
return getMetricLevelColor(
319+
this.theme,
320+
data.customData.metricsSeverity[this.targetMetric],
321+
);
337322
}
338-
return 1;
323+
return tailwindConfig.theme.extend.colors.primary[theme];
339324
},
325+
"background-opacity": 0.4,
326+
shape: "circle",
340327
"text-valign": "center",
341328
"text-halign": "center",
342329
},
@@ -355,6 +342,7 @@ export class ProjectDependencyVisualizer {
355342
tailwindConfig.theme.extend.colors.background[theme],
356343
"border-color": tailwindConfig.theme.extend.colors.primary[theme],
357344
"z-index": 2000,
345+
shape: "roundrectangle",
358346
width: "data(customData.expanded.width)",
359347
height: "data(customData.expanded.height)",
360348
},
@@ -366,6 +354,7 @@ export class ProjectDependencyVisualizer {
366354
"background-color":
367355
tailwindConfig.theme.extend.colors.background[theme],
368356
"z-index": 1000,
357+
shape: "roundrectangle",
369358
width: "data(customData.collapsed.width)",
370359
height: "data(customData.collapsed.height)",
371360
},

‎packages/app/src/helpers/cytoscape/views/auditFile.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -451,27 +451,37 @@ export function getCyStyle(theme: Theme) {
451451
"text-halign": "center",
452452
color: tailwindConfig.theme.extend.colors.text[theme],
453453
shape: "roundrectangle",
454+
width: "data(customData.nodeWidth)",
454455
},
455456
},
456457
// current instancenode
457458
{
458459
selector: "node[type = 'instance'][isCurrentFile]",
459460
style: {
460461
"background-color": tailwindConfig.theme.extend.colors.primary[theme],
462+
"background-opacity": 0.2,
463+
"border-color": tailwindConfig.theme.extend.colors.primary[theme],
464+
"border-width": 2,
461465
},
462466
},
463467
// external instancenode
464468
{
465469
selector: "node[type = 'instance'][!isCurrentFile][isExternal]",
466470
style: {
467471
"background-color": tailwindConfig.theme.extend.colors.gray[theme],
472+
"background-opacity": 0.2,
473+
"border-color": tailwindConfig.theme.extend.colors.gray[theme],
474+
"border-width": 2,
468475
},
469476
},
470477
// instance node non external
471478
{
472479
selector: "node[type = 'instance'][!isCurrentFile][!isExternal]",
473480
style: {
474481
"background-color": tailwindConfig.theme.extend.colors.secondary[theme],
482+
"background-opacity": 0.2,
483+
"border-color": tailwindConfig.theme.extend.colors.secondary[theme],
484+
"border-width": 2,
475485
},
476486
},
477487
// dependency edge

‎packages/app/src/helpers/cytoscape/views/auditInstance.ts‎

Lines changed: 37 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,40 @@ import {
33
FileDependencyManifest,
44
AuditManifest,
55
} from "@nanoapi.io/shared";
6-
import {
7-
NodeElementDefinition,
8-
EdgeElementDefinition,
9-
NodeMap,
10-
getNodeLabel,
11-
} from "./auditFile.js";
6+
import { ElementDefinition } from "cytoscape";
7+
import { EdgeElementDefinition, getNodeLabel } from "./auditFile.js";
8+
import { getNodeWidthAndHeightFromLabel } from "../label/index.js";
9+
10+
interface NodeElementDefinition extends ElementDefinition {
11+
data: {
12+
id: string;
13+
label: string;
14+
position: { x: number; y: number };
15+
parent?: string;
16+
isExpanded: boolean;
17+
type: "file" | "instance";
18+
isCurrentFile: boolean;
19+
isExternal: boolean;
20+
customData: {
21+
fileName: string;
22+
instance?: {
23+
name: string;
24+
type?: string;
25+
};
26+
errorMessages: string[];
27+
warningMessages: string[];
28+
nodeWidth: number;
29+
} & object;
30+
};
31+
}
32+
33+
type NodeMap = Record<
34+
string,
35+
{
36+
element: NodeElementDefinition;
37+
children: NodeMap;
38+
}
39+
>;
1240

1341
function getNodeId(filePath: string, symbolName: string): string {
1442
const joinChar = "|";
@@ -47,6 +75,8 @@ function createNodeElement(params: {
4775
warningMessages,
4876
});
4977

78+
const { width } = getNodeWidthAndHeightFromLabel(label);
79+
5080
return {
5181
data: {
5282
id,
@@ -62,6 +92,7 @@ function createNodeElement(params: {
6292
instance: { name: symbolName, type: symbolType },
6393
errorMessages,
6494
warningMessages,
95+
nodeWidth: width,
6596
},
6697
},
6798
};

0 commit comments

Comments
 (0)