feat: improve changing layout

graphnex · Oct 11, 2023 · 02e64c9 · 02e64c9
1 parent fe4616c
commit 02e64c9
Show file tree

Hide file tree

Showing 11 changed files with 408 additions and 643 deletions.
diff --git a/index.css b/index.css
@@ -0,0 +1,3 @@
+body {
+    margin: 0;
+}
diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="/GraphNEx_logo.png" />
+    <link rel="stylesheet" type="text/css" href="./index.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>G-interface</title>
   </head>

diff --git a/package.json b/package.json
@@ -45,7 +45,6 @@
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.24",
     "prettier": "^3.0.3",
-    "tailwindcss": "^3.3.2",
     "typescript": "^5.1.3",
     "vite": "^4.3.9",
     "vite-plugin-checker": "^0.6.0",

diff --git a/postcss.config.js b/postcss.config.js
diff --git a/src/App.tsx b/src/App.tsx
@@ -18,7 +18,6 @@ const steps = ['Select Data', 'Visualize', 'Export'];
 export default function HorizontalLinearStepper() {
   const [activeStep, setActiveStep] = React.useState(0);
   const [skipped, setSkipped] = React.useState(new Set<number>());
-  const [layout, setLayout] = React.useState('cola');
   const [graph, setGraph] = React.useState(privacyGraph);
 
   const isStepOptional = (step: number) => {
@@ -68,15 +67,13 @@ export default function HorizontalLinearStepper() {
       case 0:
         return (
           <Select
-            layout={layout}
             graph={graph}
-            handleChangeLayout={(v: string) => setLayout(v)}
             handleSetGraph={(g: GraphData) => setGraph(g)}
           />
         );
       case 1:
       default:
-        return <View layout={layout} graph={graph} />;
+        return <View graph={graph} />;
     }
   };
 
@@ -106,40 +103,44 @@ export default function HorizontalLinearStepper() {
 
       {renderSwitch(activeStep)}
 
-      {activeStep === steps.length ? (
-        <React.Fragment>
-          <Typography sx={{ mt: 2, mb: 1 }}>
-            All steps completed - you&apos;re finished
-          </Typography>
-          <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
-            <Box sx={{ flex: '1 1 auto' }} />
-            <Button onClick={handleReset}>Reset</Button>
-          </Box>
-        </React.Fragment>
-      ) : (
-        <React.Fragment>
-          <Divider sx={{ mt: 5 }} />
-          <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
-            <Button
-              color="inherit"
-              disabled={activeStep === 0}
-              onClick={handleBack}
-              sx={{ mr: 1 }}
-            >
-              Back
-            </Button>
-            <Box sx={{ flex: '1 1 auto' }} />
-            {isStepOptional(activeStep) && (
-              <Button color="inherit" onClick={handleSkip} sx={{ mr: 1 }}>
-                Skip
+      <Box
+        sx={{ height: '100px', position: 'fixed', width: '100vw', bottom: 0 }}
+      >
+        <Divider sx={{ mt: 5 }} />
+        {activeStep === steps.length ? (
+          <React.Fragment>
+            <Typography sx={{ mt: 2, mb: 1 }}>
+              All steps completed - you&apos;re finished
+            </Typography>
+            <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
+              <Box sx={{ flex: '1 1 auto' }} />
+              <Button onClick={handleReset}>Reset</Button>
+            </Box>
+          </React.Fragment>
+        ) : (
+          <React.Fragment>
+            <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
+              <Button
+                color="inherit"
+                disabled={activeStep === 0}
+                onClick={handleBack}
+                sx={{ mr: 1 }}
+              >
+                Back
               </Button>
-            )}
-            <Button onClick={handleNext}>
-              {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
-            </Button>
-          </Box>
-        </React.Fragment>
-      )}
+              <Box sx={{ flex: '1 1 auto' }} />
+              {isStepOptional(activeStep) && (
+                <Button color="inherit" onClick={handleSkip} sx={{ mr: 1 }}>
+                  Skip
+                </Button>
+              )}
+              <Button onClick={handleNext}>
+                {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
+              </Button>
+            </Box>
+          </React.Fragment>
+        )}
+      </Box>
     </Box>
   );
 }
diff --git a/src/Filter.tsx b/src/Filter.tsx
@@ -0,0 +1,51 @@
+import React, { ChangeEvent, useState } from 'react';
+
+import { FilterAlt as FilterIcon } from '@mui/icons-material';
+import {
+  FormControl,
+  IconButton,
+  InputAdornment,
+  InputLabel,
+  OutlinedInput,
+} from '@mui/material';
+
+type Props = {
+  handleSetFilters: (filters: Set<string>) => void;
+  filters: Set<string>;
+};
+
+export default function Filters({ handleSetFilters, filters }: Props) {
+  const [query, setQuery] = useState<string>('');
+  const handleSearch = () => {
+    if (query) {
+      const cleanQuery = query.trim().toLowerCase();
+      const newSet = new Set(filters);
+      newSet.add(cleanQuery);
+      handleSetFilters(newSet);
+      setQuery('');
+    }
+  };
+
+  const handleChangeQuery = (event: ChangeEvent<HTMLInputElement>) => {
+    setQuery(event.target.value);
+  };
+  return (
+    <FormControl sx={{ m: 1, width: '25ch' }} variant="outlined">
+      <InputLabel htmlFor="filter">Filter</InputLabel>
+      <OutlinedInput
+        id="filter"
+        type="text"
+        value={query}
+        onChange={handleChangeQuery}
+        endAdornment={
+          <InputAdornment position="end">
+            <IconButton aria-label="filter" onClick={handleSearch} edge="end">
+              <FilterIcon />
+            </IconButton>
+          </InputAdornment>
+        }
+        label="Filter..."
+      />
+    </FormControl>
+  );
+}
diff --git a/src/Layout.tsx b/src/Layout.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+
+import {
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+} from '@mui/material';
+import Button from '@mui/material/Button';
+
+import Cytoscape from 'cytoscape';
+
+import { DEFAULT_LAYOUT } from './constants';
+
+type Props = {
+  cy: Cytoscape.Core | undefined;
+};
+export default function Layout({ cy }: Props) {
+  const handleCenter = () => {
+    if (cy) {
+      const n = cy.nodes();
+      cy.fit(n);
+    }
+  };
+
+  const handleFit = () => {
+    if (cy) {
+      const visibleNodes = cy.nodes(':visible');
+      const l = visibleNodes.layout({
+        name: layout,
+      });
+      l.run();
+    }
+  };
+  const handleLayout = (event: SelectChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value;
+    setLayout(String(value));
+  };
+
+  const [layout, setLayout] = React.useState<string>(DEFAULT_LAYOUT);
+
+  return (
+    <>
+      <FormControl fullWidth>
+        <InputLabel id="layout">Layout</InputLabel>
+        <Select
+          labelId="layout"
+          id="layout-id"
+          // @ts-ignore
+          value={layout}
+          label="Layout"
+          onChange={handleLayout}
+        >
+          <MenuItem value={'cola'}>Cola</MenuItem>
+          <MenuItem value={'cose'}>Cose</MenuItem>
+          <MenuItem value={'fcose'}>Fcose</MenuItem>
+          <MenuItem value={'circle'}>Circle</MenuItem>
+          <MenuItem value={'concentric'}>Concentric</MenuItem>
+          <MenuItem value={'avsdf'}>Avsdf</MenuItem>
+          <MenuItem value={'cise'}>Cise</MenuItem>
+          <MenuItem value={'cise'}>Grid</MenuItem>
+          <MenuItem value={'random'}>Random</MenuItem>
+        </Select>
+      </FormControl>
+      <Button variant="outlined" onClick={handleCenter}>
+        Center
+      </Button>
+      <Button variant="outlined" onClick={handleFit}>
+        Fit
+      </Button>
+    </>
+  );
+}