Refactor useRuleGraph hook into RuleGraph functional component.

bcgov · Dec 17, 2024 · 2c53f11 · 2c53f11
1 parent c5602f5
commit 2c53f11
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 41 deletions.
diff --git a/app/components/RuleRelationsDisplay/RuleRelationsDisplay.tsx b/app/components/RuleRelationsDisplay/RuleRelationsDisplay.tsx
@@ -3,8 +3,8 @@ import { CategoryObject } from "@/app/types/ruleInfo";
 import { RuleMapRule, RuleNode } from "@/app/types/rulemap";
 import styles from "./RuleRelationsDisplay.module.css";
 import { RuleGraphControls } from "./subcomponents/RuleGraphControls";
-import { useRuleGraph } from "../../hooks/useRuleGraph";
 import { DescriptionManager } from "./subcomponents/DescriptionManager";
+import { RuleGraph } from "./subcomponents/RuleGraph";
 
 interface RuleModalContextType {
   selectedRule: RuleNode | null;
@@ -27,31 +27,6 @@ export interface RuleGraphProps {
   basicLegend?: boolean;
 }
 
-export interface GraphContentProps {
-  rules: RuleMapRule[];
-  svgRef: RefObject<SVGSVGElement>;
-  dimensions: { width: number; height: number };
-  searchTerm: string;
-  categoryFilter: string | string[] | undefined;
-  showDraftRules: boolean;
-}
-
-// Renders the actual SVG graph visualization using D3.js
-// Separated from the main component for better readability
-// and to utilize the modal context provider
-function GraphContent({ rules, svgRef, dimensions, searchTerm, categoryFilter, showDraftRules }: GraphContentProps) {
-  useRuleGraph({
-    rules,
-    svgRef,
-    dimensions,
-    searchTerm,
-    categoryFilter,
-    showDraftRules,
-  });
-
-  return <svg ref={svgRef} className={styles.svg} />;
-}
-
 /**
  * Manages the visualization of rule relationships in a graph format
  * Includes search, category filtering and draft rules toggle
@@ -142,7 +117,7 @@ export default function RuleRelationsGraph({
           location={location}
           basicLegend={basicLegend}
         />
-        <GraphContent
+        <RuleGraph
           rules={rules}
           svgRef={svgRef}
           dimensions={dimensions}

diff --git a/app/hooks/useRuleGraph.ts → ...ationsDisplay/subcomponents/RuleGraph.tsx b/app/hooks/useRuleGraph.ts → ...ationsDisplay/subcomponents/RuleGraph.tsx
@@ -6,12 +6,13 @@ import {
   getNodesForCategory,
   isNodeVisible,
   isLinkVisible,
-} from "../components/RuleRelationsDisplay/subcomponents/RuleFilters";
-import { GraphNavigation } from "../components/RuleRelationsDisplay/subcomponents/GraphNavigation";
-import { RuleNodesGroup } from "../components/RuleRelationsDisplay/subcomponents/RuleNodesGroup";
-import { RuleModalContext } from "../components/RuleRelationsDisplay/RuleRelationsDisplay";
+} from "@/app/components/RuleRelationsDisplay/subcomponents/RuleFilters";
+import { GraphNavigation } from "@/app/components/RuleRelationsDisplay/subcomponents/GraphNavigation";
+import { RuleNodesGroup } from "@/app/components/RuleRelationsDisplay/subcomponents/RuleNodesGroup";
+import { RuleModalContext } from "@/app/components/RuleRelationsDisplay/RuleRelationsDisplay";
+import styles from "@/app/components/RuleRelationsDisplay/RuleRelationsDisplay.module.css";
 
-interface UseRuleGraphProps {
+interface RuleGraphProps {
   rules: RuleMapRule[];
   svgRef: RefObject<SVGSVGElement>;
   dimensions: { width: number; height: number };
@@ -21,17 +22,10 @@ interface UseRuleGraphProps {
 }
 
 // Manages the rule graph visualization using D3.js
-export const useRuleGraph = ({
-  rules,
-  svgRef,
-  dimensions,
-  searchTerm,
-  categoryFilter,
-  showDraftRules,
-}: UseRuleGraphProps) => {
+const useRuleGraph = ({ rules, svgRef, dimensions, searchTerm, categoryFilter, showDraftRules }: RuleGraphProps) => {
   const context = useContext(RuleModalContext);
   if (!context) {
-    throw new Error("useRuleGraph must be used within a RuleModalContext Provider");
+    throw new Error("RuleGraph must be used within a RuleModalContext Provider");
   }
   const { openModal } = context;
 
@@ -360,3 +354,17 @@ export const useRuleGraph = ({
     [rules, dimensions, searchTerm, categoryFilter, showDraftRules]
   );
 };
+
+// GraphContent component that renders the SVG element as a functional component
+export function RuleGraph({ rules, svgRef, dimensions, searchTerm, categoryFilter, showDraftRules }: RuleGraphProps) {
+  useRuleGraph({
+    rules,
+    svgRef,
+    dimensions,
+    searchTerm,
+    categoryFilter,
+    showDraftRules,
+  });
+
+  return <svg ref={svgRef} className={styles.svg} />;
+}