Correct typo hierarchicalFlavours

duizendnegen · Nov 27, 2022 · 76d9026 · 76d9026
1 parent 408b344
commit 76d9026
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 17 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -17,7 +17,7 @@ const App = () => {
   const { t, i18n } = useTranslation();
 
   const [flavours, setFlavours] = useState<Flavour[]>([]);
-  const [hierchicalFlavours, setHierarchicalFlavours] = useState<d3.HierarchyNode<Flavour>>();
+  const [hierarchicalFlavours, setHierarchicalFlavours] = useState<d3.HierarchyNode<Flavour>>();
   const [editModalActive, setEditModalActive] = useState<boolean>(true);
 
   const changeLanguage = (lang) => {
@@ -98,7 +98,7 @@ const App = () => {
   const handleElementClick = (uuid: string) => {
     // find the target flavour
     let targetFlavour = flavours.find(flavour => flavour.uuid === uuid);
-    let targetHierarchicalFlavour = hierchicalFlavours.find(hierarchicalFlavour => hierarchicalFlavour.data.uuid === targetFlavour.uuid);
+    let targetHierarchicalFlavour = hierarchicalFlavours.find(hierarchicalFlavour => hierarchicalFlavour.data.uuid === targetFlavour.uuid);
 
     // ignore root click
     if (targetHierarchicalFlavour.ancestors().length === 1) {
@@ -117,7 +117,7 @@ const App = () => {
           if (flavour.uuid === uuid) {
             flavour.state = newState;
           } else {
-            let hierarchicalFlavour = hierchicalFlavours.find(hierarchicalFlavour => hierarchicalFlavour.data.uuid === flavour.uuid);
+            let hierarchicalFlavour = hierarchicalFlavours.find(hierarchicalFlavour => hierarchicalFlavour.data.uuid === flavour.uuid);
             if (hierarchicalFlavour.ancestors().some(ancestor => ancestor.data.uuid === targetFlavour.uuid)) {
               flavour.state = newState;
             }
@@ -135,8 +135,9 @@ const App = () => {
           if (flavour.uuid === uuid) {
             flavour.state = newState;
           } else {
-            let hierarchicalFlavour = hierchicalFlavours.find(hierarchicalFlavour => hierarchicalFlavour.data.uuid === flavour.uuid);
-            if (hierarchicalFlavour.descendants().some(child => child.data.uuid === targetFlavour.uuid)) {
+            let hierarchicalFlavour = hierarchicalFlavours.find(hierarchicalFlavour => hierarchicalFlavour.data.uuid === flavour.uuid);
+            if (hierarchicalFlavour.ancestors().some(ancestor => ancestor.data.uuid === targetFlavour.uuid)
+              || hierarchicalFlavour.descendants().some(child => child.data.uuid === targetFlavour.uuid)) {
               flavour.state = newState;
             }
           }
@@ -153,7 +154,7 @@ const App = () => {
           if (flavour.uuid === uuid) {
             flavour.state = newState;
           } else {
-            let hierarchicalFlavour = hierchicalFlavours.find(hierarchicalFlavour => hierarchicalFlavour.data.uuid === flavour.uuid);
+            let hierarchicalFlavour = hierarchicalFlavours.find(hierarchicalFlavour => hierarchicalFlavour.data.uuid === flavour.uuid);
             if (hierarchicalFlavour.ancestors().some(ancestor => ancestor.data.uuid === targetFlavour.uuid
                 && hierarchicalFlavour.data.state === 'YES')) {
               flavour.state = newState;
@@ -200,7 +201,7 @@ const App = () => {
           onClose={toggleEditMode}></EditModal>
         <div className="container content has-text-centered">
           <Smorgasbord
-            hierchicalFlavours={hierchicalFlavours}
+            hierarchicalFlavours={hierarchicalFlavours}
             onElementClick={handleElementClick}></Smorgasbord>
         </div>
       </section>

diff --git a/src/components/Smorgasbord/Smorgasbord.tsx b/src/components/Smorgasbord/Smorgasbord.tsx
@@ -6,11 +6,11 @@ import './Smorgasbord.css';
 import Flavour from "../../interfaces";
 
 interface  SmorgasbordProps {
-  hierchicalFlavours: d3.HierarchyNode<Flavour>,
+  hierarchicalFlavours: d3.HierarchyNode<Flavour>,
   onElementClick: (uuid: string) => void
 }
 
-const Smorgasbord = ({ hierchicalFlavours, onElementClick } : SmorgasbordProps) => {
+const Smorgasbord = ({ hierarchicalFlavours, onElementClick } : SmorgasbordProps) => {
   const { t } = useTranslation();
 
   const svgRef = React.useRef<SVGSVGElement>(null);
@@ -27,28 +27,28 @@ const Smorgasbord = ({ hierchicalFlavours, onElementClick } : SmorgasbordProps)
   const [ dragStart, setDragStart ] = useState({x: null, y: null});
 
   React.useEffect(() => {
-    if(!hierchicalFlavours) {
+    if(!hierarchicalFlavours) {
       return;
     }
 
-    hierchicalFlavours.sum(d => Math.max(0, d.value));
-    hierchicalFlavours.sort((a, b) => d3.descending(a.value, b.value));
+    hierarchicalFlavours.sum(d => Math.max(0, d.value));
+    hierarchicalFlavours.sort((a, b) => d3.descending(a.value, b.value));
 
-    const partition = d3.partition<Flavour>().size([2 * Math.PI, radius])(hierchicalFlavours);
+    const partition = d3.partition<Flavour>().size([2 * Math.PI, radius])(hierarchicalFlavours);
 
-    hierchicalFlavours.children.forEach((child: any, i: number) => {
+    hierarchicalFlavours.children.forEach((child: any, i: number) => {
       child.index = i;
     });
 
     // construct the color scale and set on each node
-    let colorScale = d3.scaleSequential([0, hierchicalFlavours.children.length], d3.interpolateRainbow).unknown("#1b1b1b");
-    hierchicalFlavours.descendants().forEach((child: any, _) => {
+    let colorScale = d3.scaleSequential([0, hierarchicalFlavours.children.length], d3.interpolateRainbow).unknown("#1b1b1b");
+    hierarchicalFlavours.descendants().forEach((child: any, _) => {
       child.color = d3.color(colorScale(child.ancestors().reverse()[1]?.index));
     });
 
     setNodes(partition.descendants());
 
-  }, [ hierchicalFlavours, radius ]);
+  }, [ hierarchicalFlavours, radius ]);
 
   // Construct an arc generator.
   const getArc = d3.arc<d3.HierarchyRectangularNode<Flavour>>()