some fix

Author: florianbgt

packages/app/src/components/DependencyVisualizer/DependencyVisualizer.tsx

@@ -12,6 +12,7 @@ import FileVisualizer from "./visualizers/FileVisualizer.tsx";
 import SymbolVisualizer from "./visualizers/SymbolVisualizer.tsx";
 
 export interface VisualizerContext {
+  manifestId: number;
   dependencyManifest: DependencyManifest;
   auditManifest: AuditManifest;
   highlightedCytoscapeRef: {
@@ -21,6 +22,7 @@ export interface VisualizerContext {
 }
 
 export default function DependencyVisualizer(props: {
+  manifestId: number;
   dependencyManifest: DependencyManifest;
   auditManifest: AuditManifest;
 }) {
@@ -114,6 +116,7 @@ export default function DependencyVisualizer(props: {
               <SymbolVisualizer
                 fileId={searchParams.get("fileId")!}
                 instanceId={searchParams.get("instanceId")!}
+                manifestId={props.manifestId}
                 dependencyManifest={props.dependencyManifest}
                 auditManifest={props.auditManifest}
                 highlightedCytoscapeRef={highlightedCytoscapeRef}
@@ -123,13 +126,15 @@ export default function DependencyVisualizer(props: {
             ? (
               <FileVisualizer
                 fileId={searchParams.get("fileId")!}
+                manifestId={props.manifestId}
                 dependencyManifest={props.dependencyManifest}
                 auditManifest={props.auditManifest}
                 highlightedCytoscapeRef={highlightedCytoscapeRef}
               />
             )
             : (
               <ProjectVisualizer
+                manifestId={props.manifestId}
                 dependencyManifest={props.dependencyManifest}
                 auditManifest={props.auditManifest}
                 highlightedCytoscapeRef={highlightedCytoscapeRef}

packages/app/src/components/DependencyVisualizer/components/SymbolExtractionDialog.tsx

@@ -21,6 +21,7 @@ import { ScrollArea } from "../../shadcn/Scrollarea.tsx";
 import { toast } from "sonner";
 
 export default function SymbolExtractionDialog(props: {
+  manifestId: number;
   children: React.ReactNode;
   filePath: string;
   symbolIds: string[];
@@ -32,7 +33,9 @@ export default function SymbolExtractionDialog(props: {
     const symbolOptions = props.symbolIds.map((symbolId) => {
       return `--symbol="${props.filePath}|${symbolId}"`;
     });
-    return `napi extract ${symbolOptions.join(" ")}`;
+    return `napi extract --manifestId=${props.manifestId} ${
+      symbolOptions.join(" ")
+    }`;
   };
 
   const copyToClipboard = async () => {

packages/app/src/components/DependencyVisualizer/components/detailsPanes/FileDetailsPane.tsx

@@ -25,6 +25,7 @@ import SymbolExtractionDialog from "../SymbolExtractionDialog.tsx";
 
 export default function FileDetailsPane(props: {
   context: {
+    manifestId: number;
     fileDependencyManifest: DependencyManifest[string];
     fileAuditManifest: AuditManifest[string];
   } | undefined;
@@ -72,6 +73,7 @@ export default function FileDetailsPane(props: {
               </Link>
             </Button>
             <SymbolExtractionDialog
+              manifestId={props.context?.manifestId || 0}
               filePath={props.context?.fileDependencyManifest.filePath || ""}
               symbolIds={Object.keys(
                 props.context?.fileDependencyManifest.symbols || {},
@@ -167,6 +169,7 @@ export default function FileDetailsPane(props: {
                       </Link>
                     </Button>
                     <SymbolExtractionDialog
+                      manifestId={props.context?.manifestId || 0}
                       filePath={props.context?.fileDependencyManifest
                         .filePath || ""}
                       symbolIds={[symbol.id]}

packages/app/src/components/DependencyVisualizer/components/detailsPanes/SymbolDetailsPane.tsx

@@ -26,6 +26,7 @@ import SymbolExtractionDialog from "../SymbolExtractionDialog.tsx";
 
 export default function SymbolDetailsPane(props: {
   context: {
+    manifestId: number;
     fileDependencyManifest: DependencyManifest[string];
     symbolDependencyManifest: DependencyManifest[string]["symbols"][string];
     fileAuditManifest: AuditManifest[string];
@@ -88,6 +89,7 @@ export default function SymbolDetailsPane(props: {
               </Link>
             </Button>
             <SymbolExtractionDialog
+              manifestId={props.context?.manifestId || 0}
               filePath={props.context?.fileDependencyManifest.filePath || ""}
               symbolIds={[props.context?.symbolDependencyManifest.id || ""]}
             >

packages/app/src/components/DependencyVisualizer/visualizers/FileVisualizer.tsx

@@ -39,9 +39,11 @@ export default function FileVisualizer(
 
   function handleMetricChange(metric: Metric | undefined) {
     if (metric) {
-      setSearchParams({ metric: metric });
+      searchParams.set("metric", metric);
+      setSearchParams(searchParams);
     } else {
-      setSearchParams({});
+      searchParams.delete("metric");
+      setSearchParams(searchParams);
     }
     setMetric(metric);
   }
@@ -56,6 +58,7 @@ export default function FileVisualizer(
 
   const [detailsPane, setDetailsPane] = useState<
     {
+      manifestId: number;
       fileDependencyManifest: DependencyManifest[string];
       symbolDependencyManifest: DependencyManifest[string]["symbols"][string];
       fileAuditManifest: AuditManifest[string];
@@ -198,6 +201,7 @@ export default function FileVisualizer(
           const fileAuditManifest = props.auditManifest[filePath];
           const symbolAuditManifest = fileAuditManifest.symbols[symbolId];
           setDetailsPane({
+            manifestId: props.manifestId,
             fileDependencyManifest,
             symbolDependencyManifest,
             fileAuditManifest,

packages/app/src/components/DependencyVisualizer/visualizers/ProjectVisualizer.tsx

@@ -34,9 +34,11 @@ export default function ProjectVisualizer(props: VisualizerContext) {
 
   function handleMetricChange(metric: Metric | undefined) {
     if (metric) {
-      setSearchParams({ metric: metric });
+      searchParams.set("metric", metric);
+      setSearchParams(searchParams);
     } else {
-      setSearchParams({});
+      searchParams.delete("metric");
+      setSearchParams(searchParams);
     }
     setMetric(metric);
   }
@@ -50,6 +52,7 @@ export default function ProjectVisualizer(props: VisualizerContext) {
 
   const [detailsPane, setDetailsPane] = useState<
     {
+      manifestId: number;
       fileDependencyManifest: DependencyManifest[string];
       fileAuditManifest: AuditManifest[string];
     } | undefined
@@ -152,6 +155,7 @@ export default function ProjectVisualizer(props: VisualizerContext) {
         onClose={() => setContextMenu(undefined)}
         onOpenDetails={(filePath) => {
           setDetailsPane({
+            manifestId: props.manifestId,
             fileDependencyManifest: props.dependencyManifest[filePath],
             fileAuditManifest: props.auditManifest[filePath],
           });

packages/app/src/components/DependencyVisualizer/visualizers/SymbolVisualizer.tsx

@@ -43,13 +43,15 @@ export default function SymbolVisualizer(
   );
 
   function handleDependencyDepthChange(depth: number) {
-    setSearchParams({ dependencyDepth: depth.toString() });
+    searchParams.set("dependencyDepth", depth.toString());
+    setSearchParams(searchParams);
     setDependencyDepth(depth);
     // TODO do something with the symbolVisualizer
   }
 
   function handleDependentDepthChange(depth: number) {
-    setSearchParams({ dependentDepth: depth.toString() });
+    searchParams.set("dependentDepth", depth.toString());
+    setSearchParams(searchParams);
     setDependentDepth(depth);
     // TODO do something with the symbolVisualizer
   }
@@ -64,6 +66,7 @@ export default function SymbolVisualizer(
 
   const [detailsPane, setDetailsPane] = useState<
     {
+      manifestId: number;
       fileDependencyManifest: DependencyManifest[string];
       symbolDependencyManifest: DependencyManifest[string]["symbols"][string];
       fileAuditManifest: AuditManifest[string];
@@ -191,6 +194,7 @@ export default function SymbolVisualizer(
           const fileAuditManifest = props.auditManifest[filePath];
           const symbolAuditManifest = fileAuditManifest.symbols[symbolId];
           setDetailsPane({
+            manifestId: props.manifestId,
             fileDependencyManifest,
             symbolDependencyManifest,
             fileAuditManifest,

packages/app/src/pages/projects/project/manifests/manifest.tsx

@@ -10,7 +10,9 @@ import { Loader } from "lucide-react";
 import DependencyVisualizer from "../../../../components/DependencyVisualizer/DependencyVisualizer.tsx";
 
 export default function ProjectManifest() {
-  const { manifestId } = useParams<{ manifestId: string }>();
+  const { manifestId } = useParams<{
+    manifestId: string;
+  }>();
   const coreApi = useCoreApi();
 
   const [isBusy, setIsBusy] = useState(true);
@@ -90,6 +92,7 @@ export default function ProjectManifest() {
 
   return (
     <DependencyVisualizer
+      manifestId={manifestData?.id || 0}
       dependencyManifest={manifestData?.manifest as DependencyManifest}
       auditManifest={auditManifest as AuditManifest}
     />