Skip to content

Commit 6c9e557

Browse files
florianbgtflorianbgt
authored
Merge pull request #104 from nanoapi-io/feature/add-extra-component-to-file-view
add extra compoent to file view
2 parents b687541 + 92c1670 commit 6c9e557

File tree

10 files changed

+686
-223
lines changed

10 files changed

+686
-223
lines changed

‎packages/app/src/components/Cytoscape/ControlExtensions/FiltersExtension.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@ import { Core } from "cytoscape";
66
import { toast } from "react-toastify";
77
import { MdFilterAlt } from "react-icons/md";
88

9-
const INITIAL_ELEMENT_LIMIT = 75;
10-
119
interface FiltersType {
1210
showExternal: boolean;
1311
showInternal: boolean;
@@ -59,22 +57,21 @@ export default function FiltersExtension(props: {
5957
return false;
6058
}
6159

62-
// Check the number of elements on the file view
63-
// if there are more than 50, show a toast
6460
useEffect(() => {
6561
if (!props.cy) return;
6662

67-
const elements = props.cy.elements();
63+
const INITIAL_NODE_LIMIT = 50;
64+
const nodeCount = props.cy.nodes().length;
6865

6966
// Handle strict mode for dev
7067
if (!initialized.current) {
7168
initialized.current = true;
7269
return;
7370
}
7471

75-
if (elements.length > INITIAL_ELEMENT_LIMIT) {
72+
if (nodeCount > INITIAL_NODE_LIMIT) {
7673
toast.info(
77-
"There are more than 75 elements on screen. We recommend using the filters in the control bar to get a better view of the graph.",
74+
`There are more than ${INITIAL_NODE_LIMIT} elements on screen. We recommend using the filters in the control bar to get a better view of the graph.`,
7875
);
7976
}
8077
}, []);

‎packages/app/src/components/Cytoscape/contextMenu/FileContextMenu.tsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import { Link } from "react-router";
2+
import { DropdownMenu } from "@radix-ui/themes";
3+
import {
4+
LuFolderSearch2,
5+
LuPanelRightOpen,
6+
LuSearchCode,
7+
} from "react-icons/lu";
8+
import { FileDependencyManifest } from "@napi/shared";
9+
10+
export default function FileContextMenu(props: {
11+
position: { x: number; y: number };
12+
fileDependencyManifest: FileDependencyManifest;
13+
open: boolean;
14+
showInSidebar: (filename: string) => void;
15+
onOpenChange: (open: boolean) => void;
16+
setDetailsPaneOpen: (open: boolean) => void;
17+
}) {
18+
return (
19+
<div
20+
className="absolute z-50"
21+
style={{
22+
top: props.position.y,
23+
left: props.position.x,
24+
}}
25+
onClick={() => props.onOpenChange(false)} // Optional auto-close
26+
>
27+
<DropdownMenu.Root open={props.open} onOpenChange={props.onOpenChange}>
28+
<DropdownMenu.Trigger>
29+
<div />
30+
</DropdownMenu.Trigger>
31+
32+
<DropdownMenu.Content
33+
sideOffset={4}
34+
align="start"
35+
className="rounded-md bg-secondarySurface-light dark:bg-secondarySurface-dark shadow-md border border-border-light dark:border-border-dark p-1"
36+
>
37+
<DropdownMenu.Label>
38+
{props.fileDependencyManifest.filePath.split("/").pop()}
39+
</DropdownMenu.Label>
40+
<DropdownMenu.Separator />
41+
<DropdownMenu.Item
42+
className="px-2 py-1 hover:bg-primary-light dark:hover:bg-primary-dark"
43+
onSelect={() => props.setDetailsPaneOpen(true)}
44+
>
45+
<div className="w-full flex justify-between space-x-2">
46+
<span>Show details</span>
47+
<LuPanelRightOpen className="text-lg my-auto" />
48+
</div>
49+
</DropdownMenu.Item>
50+
<DropdownMenu.Item className="px-2 py-1 hover:bg-primary-light dark:hover:bg-primary-dark">
51+
<Link
52+
to={`/audit/${encodeURIComponent(
53+
props.fileDependencyManifest.filePath,
54+
)}`}
55+
className="w-full flex justify-between space-x-2"
56+
>
57+
<span>Inspect symbols</span>
58+
<LuSearchCode className="text-lg my-auto" />
59+
</Link>
60+
</DropdownMenu.Item>
61+
<DropdownMenu.Item
62+
className="px-2 py-1 hover:bg-primary-light dark:hover:bg-primary-dark"
63+
onSelect={() =>
64+
props.showInSidebar(
65+
props.fileDependencyManifest.filePath.split("/").pop() || "",
66+
)
67+
}
68+
>
69+
<div className="w-full flex justify-between space-x-2">
70+
<span>Show file</span>
71+
<LuFolderSearch2 className="text-lg my-auto" />
72+
</div>
73+
</DropdownMenu.Item>
74+
</DropdownMenu.Content>
75+
</DropdownMenu.Root>
76+
</div>
77+
);
78+
}

packages/app/src/components/FileActionMenu.tsx renamed to packages/app/src/components/Cytoscape/contextMenu/SymbolContextMenu.tsx

Lines changed: 15 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,17 @@
1-
import { useNavigate } from "react-router";
1+
import { Link } from "react-router";
22
import { DropdownMenu } from "@radix-ui/themes";
3-
import {
4-
LuFolderSearch2,
5-
LuPanelRightOpen,
6-
LuSearchCode,
7-
LuGitGraph,
8-
} from "react-icons/lu";
3+
import { LuPanelRightOpen, LuSearchCode, LuGitGraph } from "react-icons/lu";
94
import { FileDependencyManifest } from "@napi/shared";
105
import { toast } from "react-toastify";
116

12-
export default function FileActionMenu(props: {
7+
export default function SymbolContextMenu(props: {
138
position: { x: number; y: number };
149
fileDependencyManifest: FileDependencyManifest;
10+
symbolId: string;
1511
open: boolean;
16-
showInSidebar: (filename: string) => void;
1712
onOpenChange: (open: boolean) => void;
1813
setDetailsPaneOpen: (open: boolean) => void;
1914
}) {
20-
const navigate = useNavigate();
21-
22-
function navigateToFileView() {
23-
if (props.fileDependencyManifest) {
24-
const urlEncodedFileName = encodeURIComponent(
25-
props.fileDependencyManifest.filePath,
26-
);
27-
const url = `/audit/${urlEncodedFileName}`;
28-
navigate(url);
29-
}
30-
}
31-
3215
function handleOnExtract() {
3316
toast.warning(
3417
"This functionality is not yet implemented. Please check back soon.",
@@ -46,7 +29,7 @@ export default function FileActionMenu(props: {
4629
>
4730
<DropdownMenu.Root open={props.open} onOpenChange={props.onOpenChange}>
4831
<DropdownMenu.Trigger>
49-
<div></div>
32+
<div />
5033
</DropdownMenu.Trigger>
5134

5235
<DropdownMenu.Content
@@ -56,9 +39,7 @@ export default function FileActionMenu(props: {
5639
>
5740
<DropdownMenu.Label className="">
5841
<h1 className="">
59-
{props.fileDependencyManifest.filePath.split("/").pop() ||
60-
"" ||
61-
"Node"}
42+
{props.fileDependencyManifest.symbols[props.symbolId].id}
6243
</h1>
6344
</DropdownMenu.Label>
6445
<DropdownMenu.Separator />
@@ -71,27 +52,16 @@ export default function FileActionMenu(props: {
7152
<LuPanelRightOpen className="text-lg my-auto" />
7253
</div>
7354
</DropdownMenu.Item>
74-
<DropdownMenu.Item
75-
className="px-2 py-1 hover:bg-primary-light dark:hover:bg-primary-dark"
76-
onSelect={() => navigateToFileView()}
77-
>
78-
<div className="w-full flex justify-between space-x-2">
79-
<span>Inspect</span>
55+
<DropdownMenu.Item className="px-2 py-1 hover:bg-primary-light dark:hover:bg-primary-dark">
56+
<Link
57+
to={`/audit/${encodeURIComponent(
58+
props.fileDependencyManifest.filePath,
59+
)}/${encodeURIComponent(props.symbolId)}`}
60+
className="w-full flex justify-between space-x-2"
61+
>
62+
<span>Inspect symbol</span>
8063
<LuSearchCode className="text-lg my-auto" />
81-
</div>
82-
</DropdownMenu.Item>
83-
<DropdownMenu.Item
84-
className="px-2 py-1 hover:bg-primary-light dark:hover:bg-primary-dark"
85-
onSelect={() =>
86-
props.showInSidebar(
87-
props.fileDependencyManifest.filePath.split("/").pop() || "",
88-
)
89-
}
90-
>
91-
<div className="w-full flex justify-between space-x-2">
92-
<span>Show file</span>
93-
<LuFolderSearch2 className="text-lg my-auto" />
94-
</div>
64+
</Link>
9565
</DropdownMenu.Item>
9666
<DropdownMenu.Separator />
9767
<DropdownMenu.Item

0 commit comments

Comments
 (0)