Merge pull request #3 from chengcyber/fix-filter-form

Fix filter form
chengcyber · Jul 4, 2024 · f3b0c0b · f3b0c0b
2 parents 8a94a9c + 73fb98c
commit f3b0c0b
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 76 deletions.
diff --git a/.changeset/clean-tools-exercise.md b/.changeset/clean-tools-exercise.md
@@ -0,0 +1,5 @@
+---
+"pnpm-workspace-graph": patch
+---
+
+Fix filter settings form lost after reopen
diff --git a/client/ControlPanel.tsx b/client/ControlPanel.tsx
@@ -18,13 +18,19 @@ import {
 } from "@fluentui/react-icons";
 import { useBoolean } from "@fluentui/react-hooks";
 import { FieldValues, FormProvider, useForm } from "react-hook-form";
-import { saveAs } from 'file-saver';
+import { saveAs } from "file-saver";
 import { ControlledTextFieldArray } from "./ControlledFormComponent/ControlledTextFieldArray";
 import { GraphService } from "./service/Graph";
 import { useState } from "react";
 
 const gs = GraphService.getInstance();
 
+const defaultFilter = [
+  {
+    value: "",
+  },
+];
+
 export const ControlPanel = () => {
   const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] =
     useBoolean(false);
@@ -36,29 +42,26 @@ export const ControlPanel = () => {
     setIsExportImage(true);
     const blobPromise = gs.exportToPNG();
     if (!blobPromise) {
-      console.log('Save failed, cy not initialized');
+      console.log("Save failed, cy not initialized");
       setIsExportImage(false);
       return;
     }
 
-    blobPromise.then((blob: Blob) => {
-      saveAs(blob, `pnpm-workspace-graph.png`)
-    }).catch((error) => {
-      console.log('Error exporting image:', error);
-    }).finally(() => {
-      setIsExportImage(false);
-    })
+    blobPromise
+      .then((blob: Blob) => {
+        saveAs(blob, `pnpm-workspace-graph.png`);
+      })
+      .catch((error) => {
+        console.log("Error exporting image:", error);
+      })
+      .finally(() => {
+        setIsExportImage(false);
+      });
   };
 
-  const defaultFilter = [
-    {
-      value: "",
-    },
-  ];
-
-  const defaultValues: FieldValues = {
+  const [defaultValues, setDefaultValues] = useState<FieldValues>({
     filter: defaultFilter,
-  };
+  });
 
   const form = useForm({
     defaultValues,
@@ -68,9 +71,13 @@ export const ControlPanel = () => {
   const { control, reset, handleSubmit } = form;
 
   const onSubmit = (data: FieldValues) => {
-    gs.setFilter(
-      data.filter.map((f: { value: string }) => f.value.trim()).filter(Boolean)
-    );
+    const filter: string[] = data.filter
+      .map((f: { value: string }) => f.value.trim())
+      .filter(Boolean);
+    gs.setFilter(filter);
+    setDefaultValues({
+      ...data,
+    });
   };
 
   return (
@@ -79,6 +86,54 @@ export const ControlPanel = () => {
         position: "relative",
       }}
     >
+      <div
+        style={{
+          position: "absolute",
+          top: 20,
+          left: 20,
+          zIndex: 1,
+          display: isOpen ? "none" : "block",
+        }}
+      >
+        <Toolbar>
+          <Button
+            appearance="subtle"
+            icon={
+              isExpandActions ? (
+                <ChevronLeft20Regular />
+              ) : (
+                <ChevronRight20Regular />
+              )
+            }
+            title={
+              isExpandActions ? "Collapse Action Bar" : "Expand Action Bar"
+            }
+            onClick={toggleExpandActions}
+          />
+          <Button
+            appearance="subtle"
+            icon={<DataFunnel20Regular />}
+            title="Filter Settings"
+            onClick={() => {
+              openPanel();
+              form.reset(defaultValues);
+            }}
+          >
+            {isExpandActions ? "Filter" : ""}
+          </Button>
+          <Button
+            appearance="subtle"
+            icon={
+              isExportingImage ? <SpinnerIos20Regular /> : <Save20Regular />
+            }
+            disabled={isExportingImage}
+            title="Save"
+            onClick={onSave}
+          >
+            {isExpandActions ? "Save" : ""}
+          </Button>
+        </Toolbar>
+      </div>
       <Drawer
         open={isOpen}
         size="medium"
@@ -111,7 +166,8 @@ export const ControlPanel = () => {
               <InfoLabel
                 info={
                   <div>
-                    This points to PNPM's "--filter" syntax to select a subset of projects. See{" "}
+                    This points to PNPM's "--filter" syntax to select a subset
+                    of projects. See{" "}
                     <a
                       href="https://pnpm.io/filtering#matching"
                       target="_blank"
@@ -136,7 +192,9 @@ export const ControlPanel = () => {
               <Button
                 onClick={() => {
                   gs.setFilter([]);
-                  reset(defaultValues);
+                  reset({
+                    filter: defaultFilter,
+                  });
                 }}
               >
                 Clear
@@ -145,49 +203,6 @@ export const ControlPanel = () => {
           </FormProvider>
         </DrawerBody>
       </Drawer>
-      <div
-        style={{
-          position: "absolute",
-          top: 20,
-          left: 20,
-          zIndex: 1,
-          display: isOpen ? "none" : "block",
-        }}
-      >
-        <Toolbar>
-          <Button
-            appearance="subtle"
-            icon={
-              isExpandActions ? (
-                <ChevronLeft20Regular />
-              ) : (
-                <ChevronRight20Regular />
-              )
-            }
-            title={
-              isExpandActions ? "Collapse Action Bar" : "Expand Action Bar"
-            }
-            onClick={toggleExpandActions}
-          />
-          <Button
-            appearance="subtle"
-            icon={<DataFunnel20Regular />}
-            title="Filter Settings"
-            onClick={openPanel}
-          >
-            {isExpandActions ? "Filter" : ""}
-          </Button>
-          <Button
-            appearance="subtle"
-            icon={isExportingImage ? <SpinnerIos20Regular /> : <Save20Regular />}
-            disabled={isExportingImage}
-            title="Save"
-            onClick={onSave}
-          >
-            {isExpandActions ? "Save" : ""}
-          </Button>
-        </Toolbar>
-      </div>
     </div>
   );
 };
diff --git a/client/ControlledFormComponent/ControlledTextFieldArray.tsx b/client/ControlledFormComponent/ControlledTextFieldArray.tsx
@@ -79,7 +79,6 @@ export const ControlledTextFieldArray = (
                           value={value}
                           onBlur={onBlur}
                           name={fieldName}
-                          contentAfter={error && error.message}
                         />
                         {
                           error ? (

diff --git a/client/service/Graph.ts b/client/service/Graph.ts
@@ -10,13 +10,25 @@ class GraphService {
   private _bgGraph: cy.Core | undefined;
   private _bridge: BridgeService;
 
+  private _dagreLayoutConfig: Partial<CytoscapeDagreConfig>;
+
   private static instance: GraphService | undefined;
 
   private constructor(containerId: string) {
     this._containerId = containerId;
     this._bridge = BridgeService.getInstance();
 
     cy.use(dagre);
+
+    this._dagreLayoutConfig = {
+      name: "dagre",
+      nodeDimensionsIncludeLabels: true,
+      rankSep: 300,
+      // Direction - from Top to Bottom
+      rankDir: "TB",
+      edgeSep: 150,
+      ranker: "network-simplex",
+    }
   }
 
   public static getInstance(): GraphService {
@@ -133,14 +145,8 @@ class GraphService {
     });
 
     this._fgGraph
-      .layout({
-        name: "dagre",
-        nodeDimensionsIncludeLabels: true,
-        rankSep: 75,
-        rankDir: "TB",
-        edgeSep: 50,
-        ranker: "network-simplex",
-      } as CytoscapeDagreConfig)
+      .layout(
+        this._dagreLayoutConfig as CytoscapeDagreConfig)
       .run();
 
     this._fgGraph.fit().center().resize();

diff --git a/package.json b/package.json
@@ -71,7 +71,7 @@
     "pkgs-graph": "^7.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-hook-form": "^7.31.3",
+    "react-hook-form": "7.31.3",
     "rimraf": "^3.0.2",
     "ts-loader": "^9.3.0",
     "typescript": "^4.7.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml