Merge pull request #105 from nanoapi-io/fix/control-bar

Fixes the control bar extension for filtering on the file-level view

Author: joeldevelops

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

@@ -1,4 +1,5 @@
 import { useState, useEffect, useRef } from "react";
+import { useParams } from "react-router";
 import { Button, DropdownMenu, Checkbox } from "@radix-ui/themes";
 import { LuChevronUp } from "react-icons/lu";
 import { Core } from "cytoscape";
@@ -28,6 +29,7 @@ export default function FiltersExtension(props: {
     showFunctions: true,
     showClasses: true,
   });
+  const { file } = useParams();
 
   function checkFiltersSet() {
     if (!filters) return false;
@@ -83,7 +85,7 @@ export default function FiltersExtension(props: {
 
     // Grab only the external nodes
     const nodes = props.cy.nodes().filter((node) => {
-      return node.data("isExternal");
+      return node.data("customData").isExternal;
     });
 
     if (filters.showExternal) {
@@ -99,7 +101,10 @@ export default function FiltersExtension(props: {
 
     // Grab only the internal nodes
     const nodes = props.cy.nodes().filter((node) => {
-      return !node.data("isExternal") && !node.data("isCurrentFile");
+      return (
+        !node.data("customData").isExternal &&
+        node.data("customData").fileName !== file
+      );
     });
     if (filters.showInternal) {
       nodes.removeClass("hidden");
@@ -115,8 +120,8 @@ export default function FiltersExtension(props: {
     // Grab only the variable nodes
     const nodes = props.cy.nodes().filter((node) => {
       return (
-        node.data("customData").instance?.type === "variable" &&
-        node.data("isCurrentFile")
+        node.data("customData").symbolType === "variable" &&
+        node.data("customData").fileName === file
       );
     });
     if (filters.showVariables) {
@@ -133,8 +138,8 @@ export default function FiltersExtension(props: {
     // Grab only the function nodes
     const nodes = props.cy.nodes().filter((node) => {
       return (
-        node.data("customData").instance?.type === "function" &&
-        node.data("isCurrentFile")
+        node.data("customData").symbolType === "function" &&
+        node.data("customData").fileName === file
       );
     });
     if (filters.showFunctions) {
@@ -151,8 +156,8 @@ export default function FiltersExtension(props: {
     // Grab only the class nodes
     const nodes = props.cy.nodes().filter((node) => {
       return (
-        node.data("customData").instance?.type === "class" &&
-        node.data("isCurrentFile")
+        node.data("customData").symbolType === "class" &&
+        node.data("customData").fileName === file
       );
     });
 

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

@@ -738,6 +738,12 @@ export class FileDependencyVisualizer {
           "line-opacity": 0.1,
         },
       },
+      {
+        selector: ".hidden",
+        style: {
+          display: "none",
+        },
+      },
     ] as StylesheetJson;
   }
 }

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

@@ -395,6 +395,12 @@ export class ProjectDependencyVisualizer {
           "line-opacity": 0.1,
         },
       },
+      {
+        selector: ".hidden",
+        style: {
+          display: "none",
+        },
+      },
     ] as StylesheetJson;
   }
 

packages/app/src/pages/audit/file/instance/index.tsx

@@ -155,6 +155,12 @@ export default function AuditInstancePage() {
         <CytoscapeSkeleton />
       ) : (
         <Controls busy={false} cy={cyInstance} onLayout={handleLayout}>
+          {/* TODO: Fix data shape for instane-level view and then uncomment */}
+          {/* <FiltersExtension
+            cy={cyInstance}
+            busy={context.busy}
+            onLayout={handleLayout}
+          /> */}
           <GraphDepthExtension
             cy={cyInstance}
             busy={context.busy}

packages/app/src/pages/audit/index.tsx

@@ -94,6 +94,7 @@ export default function AuditPage() {
 
   // Hook to update the target metric in the graph
   useEffect(() => {
+    console.log("Updating target metric", metric);
     if (projectVisualizer) {
       projectVisualizer.setTargetMetric(metric);
     }