feat: allow matching full word

graphnex · Oct 20, 2023 · 56de50c · 56de50c
1 parent 05aa6ec
commit 56de50c
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 33 deletions.
diff --git a/src/Filter.tsx b/src/Filter.tsx
@@ -1,6 +1,7 @@
 import React, { ChangeEvent, useState } from 'react';
 
 import { FilterAlt as FilterIcon } from '@mui/icons-material';
+import TextFormatIcon from '@mui/icons-material/TextFormat';
 import {
   FormControl,
   FormHelperText,
@@ -13,10 +14,18 @@ import {
 type Props = {
   handleSetFilters: (filters: Set<string>) => void;
   filters: Set<string>;
+  handleSetMatchFullWord: () => void;
+  matchFullWord: boolean;
 };
 
-export default function Filters({ handleSetFilters, filters }: Props) {
+export default function Filters({
+  handleSetFilters,
+  filters,
+  handleSetMatchFullWord,
+  matchFullWord,
+}: Props) {
   const [query, setQuery] = useState<string>('');
+
   const handleSearch = () => {
     if (query) {
       const newSet = new Set(filters);
@@ -42,11 +51,24 @@ export default function Filters({ handleSetFilters, filters }: Props) {
         value={query}
         onChange={handleChangeQuery}
         endAdornment={
-          <InputAdornment position="end">
-            <IconButton aria-label="filter" onClick={handleSearch} edge="end">
-              <FilterIcon />
-            </IconButton>
-          </InputAdornment>
+          <>
+            <InputAdornment position="end">
+              <IconButton
+                aria-label="filter"
+                onClick={handleSetMatchFullWord}
+                edge="end"
+              >
+                <TextFormatIcon
+                  color={matchFullWord ? 'primary' : 'disabled'}
+                />
+              </IconButton>
+            </InputAdornment>
+            <InputAdornment position="end">
+              <IconButton aria-label="filter" onClick={handleSearch} edge="end">
+                <FilterIcon />
+              </IconButton>
+            </InputAdornment>
+          </>
         }
         label="Filter..."
         aria-describedby="helper-text"

diff --git a/src/Sizer.tsx b/src/Sizer.tsx
@@ -23,6 +23,7 @@ type Props = {
   maxWeight: number;
   settings: SettingsProps;
   filters: Set<string>;
+  matchFullWord: boolean;
 };
 
 export default function Sizer({
@@ -33,6 +34,7 @@ export default function Sizer({
   minWeight,
   maxWeight,
   filters,
+  matchFullWord,
 }: Props) {
   const [nodeSize, setNodeSize] = useState<number>(1);
   const [edgeSize, setEdgeSize] = useState<number>(1);
@@ -130,7 +132,7 @@ export default function Sizer({
         console.warn(`caught error: ${e}`);
       }
     }
-  }, [fontSize, nodeSize, edgeSize, cy, settings, filters]);
+  }, [fontSize, nodeSize, edgeSize, cy, settings, filters, matchFullWord]);
 
   const edgesDisabled = (n: number) => !settings[SHOW_EDGES_KEY] || n === 0;
   const nodesDisabled = !settings[SHOW_NODES_KEY] || settings[SHOW_LABELS_KEY];

diff --git a/src/View.tsx b/src/View.tsx
@@ -2,19 +2,15 @@ import React, { useEffect, useState } from 'react';
 import CytoscapeComponent from 'react-cytoscapejs';
 
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import SaveIcon from '@mui/icons-material/Save';
 import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
   Checkbox,
   Chip,
-  Fab,
   FormControlLabel,
   FormGroup,
   Grid,
-  IconButton,
-  Modal,
 } from '@mui/material';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
@@ -59,14 +55,6 @@ const selectTextOutlineColor = _.memoize(function (ele: NodeSingular) {
   return 'gray';
 });
 
-const convertToString = (obj?: any): string => {
-  return JSON.stringify(obj, null, 2);
-};
-
-const convertFromString = (obj?: any): any => {
-  return JSON.parse(obj);
-};
-
 export const SHOW_NODES_KEY = 'showNodes';
 export const SHOW_PARENT_NODES_KEY = 'showParentNodes';
 export const SHOW_EDGES_KEY = 'showEdges';
@@ -105,6 +93,7 @@ const View = ({ graph }: Props) => {
   const [minWeight, setMinWeight] = useState<number>(Math.min(...weights));
   const [maxWeight, setMaxWeight] = useState<number>(Math.max(...weights));
   const [filters, setFilters] = useState<Set<string>>(new Set());
+  const [matchFullWord, setMatchFullWord] = useState<boolean>(false);
 
   const stylesheet = [
     {
@@ -178,6 +167,23 @@ const View = ({ graph }: Props) => {
     setFilters(newSet);
   };
 
+  const handleSetMatchFullWord = (): void => {
+    setMatchFullWord(!matchFullWord);
+  };
+
+  const showElement = (ele: Cytoscape.NodeSingular): void => {
+    ele.style({ visibility: 'visible' });
+
+    // if node is a child
+    // todo: do not assume just one parent
+    const category = ele.parent();
+    category.style({ visibility: 'visible' });
+
+    // if node is a parent
+    const children = ele.children();
+    children.style({ visibility: 'visible' });
+  };
+
   useEffect(() => {
     // anything in here is fired on component mount.
     if (cyHandle) {
@@ -326,17 +332,15 @@ const View = ({ graph }: Props) => {
           // bring back relevant nodes
           cyHandle.nodes().forEach((ele) => {
             const cleanName = ele.data('name').trim().toLowerCase();
-            if (cleanName.includes(f)) {
-              ele.style({ visibility: 'visible' });
-
-              // if node is a child
-              // todo: do not assume just one parent
-              const category = ele.parent();
-              category.style({ visibility: 'visible' });
-
-              // if node is a parent
-              const children = ele.children();
-              children.style({ visibility: 'visible' });
+            if (matchFullWord) {
+              if (cleanName === f) {
+                showElement(ele);
+              }
+            } else {
+              // partial match
+              if (cleanName.includes(f)) {
+                showElement(ele);
+              }
             }
           });
           cyHandle.edges().style({ visibility: 'visible' });
@@ -356,11 +360,10 @@ const View = ({ graph }: Props) => {
         console.warn(`caught error: ${e}`);
       }
     }
-
     return () => {
       // anything in here is fired on component unmount.
     };
-  }, [settings, cyHandle, filters]);
+  }, [settings, cyHandle, filters, matchFullWord]);
 
   // keydown listener for deleting elements
   useEffect(() => {
@@ -443,7 +446,12 @@ const View = ({ graph }: Props) => {
                 </FormGroup>
               </Grid>
               <Grid item xs={4}>
-                <Filter handleSetFilters={setFilters} filters={filters} />
+                <Filter
+                  handleSetFilters={setFilters}
+                  filters={filters}
+                  matchFullWord={matchFullWord}
+                  handleSetMatchFullWord={handleSetMatchFullWord}
+                />
                 <div>
                   {Array.from(filters).map((f) => (
                     <Chip
@@ -464,6 +472,7 @@ const View = ({ graph }: Props) => {
                   maxWeight={maxWeight}
                   settings={settings}
                   filters={filters}
+                  matchFullWord={matchFullWord}
                 />
               </Grid>
             </Grid>