feat: allow custom files

graphnex · Oct 10, 2023 · f235bdd · f235bdd
1 parent 388e8ac
commit f235bdd
Show file tree

Hide file tree

Showing 6 changed files with 4,114 additions and 56 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -10,14 +10,16 @@ import Typography from '@mui/material/Typography';
 
 import Select from './Select';
 import View from './View';
+import privacyGraph from './data/privacyGraph';
+import { GraphData } from './data/types';
 
 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 [useCase, setUseCase] = React.useState('privacy');
   const [layout, setLayout] = React.useState('cola');
+  const [graph, setGraph] = React.useState(privacyGraph);
 
   const isStepOptional = (step: number) => {
     return false;
@@ -66,16 +68,15 @@ export default function HorizontalLinearStepper() {
       case 0:
         return (
           <Select
-            useCase={useCase}
             layout={layout}
-            handleChange={(v: string) => setUseCase(v)}
+            graph={graph}
             handleChangeLayout={(v: string) => setLayout(v)}
+            handleSetGraph={(g: GraphData) => setGraph(g)}
           />
         );
       case 1:
       default:
-        // @ts-ignore
-        return <View useCase={useCase} layout={layout} />;
+        return <View layout={layout} graph={graph} />;
     }
   };
 

diff --git a/src/Select.tsx b/src/Select.tsx
@@ -1,28 +1,46 @@
 import * as React from 'react';
+import { useEffect } from 'react';
 
 import CheckBoxSetting from './components/CheckBoxSetting';
+import ExplanationDataImporter from './components/ExplanationDataImporter';
 import SettingsWrapper from './components/SettingsWrapper';
+import genomicsGraph from './data/genomicsGraph';
+import privacyGraph from './data/privacyGraph';
+import { GraphData } from './data/types';
 
 type Props = {
   layout: string;
-  useCase: string;
-  handleChange: (useCase: string) => void;
+  graph: GraphData;
   handleChangeLayout: (layout: string) => void;
+  handleSetGraph: (graph: GraphData) => void;
 };
 
 export default function Select({
-  useCase,
-  handleChange,
   layout,
   handleChangeLayout,
+  handleSetGraph,
 }: Props) {
-  const handleUseCase = (event: React.FormEvent<HTMLDivElement>) => {
-    // @ts-ignore
+  const [useCase, setUseCase] = React.useState('privacy');
+
+  const handleUseCase = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value;
-    handleChange(layout);
+    setUseCase(value);
   };
 
-  const handleLayout = (event: React.FormEvent<HTMLDivElement>) => {
+  useEffect(() => {
+    switch (useCase) {
+      case 'genomics': {
+        handleSetGraph(genomicsGraph);
+        break;
+      }
+      case 'privacy': {
+        handleSetGraph(privacyGraph);
+        break;
+      }
+    }
+  }, [useCase]);
+
+  const handleLayout = (event: React.ChangeEvent<HTMLInputElement>) => {
     // @ts-ignore
     const value = event.target.value;
     handleChangeLayout(value);
@@ -35,13 +53,14 @@ export default function Select({
           <div>
             <SettingsWrapper title="Use Case">
               <div>
-                <div onChange={handleUseCase}>
+                <div>
                   <input
                     type="radio"
                     id="privacy"
                     name="useCase"
                     value="privacy"
                     checked={useCase === 'privacy'}
+                    onChange={handleUseCase}
                   />
                   <label htmlFor="privacy">Privacy</label>
                   <br />
@@ -51,10 +70,26 @@ export default function Select({
                     name="useCase"
                     value="genomics"
                     checked={useCase === 'genomics'}
+                    onChange={handleUseCase}
                   />
                   <label htmlFor="genomics">Genomics</label>
+                  <br />
+                  <input
+                    type="radio"
+                    id="custom"
+                    name="useCase"
+                    value="custom"
+                    checked={useCase === 'custom'}
+                    onChange={handleUseCase}
+                  />
+                  <label htmlFor="custom">Custom</label>
                 </div>
               </div>
+              {useCase === 'custom' ? (
+                <ExplanationDataImporter onSubmit={handleSetGraph} />
+              ) : (
+                <></>
+              )}
             </SettingsWrapper>
           </div>
           <div>

diff --git a/src/View.tsx b/src/View.tsx
@@ -18,16 +18,8 @@ import _ from 'lodash';
 import randomColor from 'randomcolor';
 import rgbHex from 'rgb-hex';
 
-import { ExplanationData } from './WordCloud';
 import CheckBoxSetting from './components/CheckBoxSetting';
-import ExplanationDataImporter from './components/ExplanationDataImporter';
 import SettingsWrapper from './components/SettingsWrapper';
-import UseCase from './components/UseCase';
-import { defaultWords1 } from './data';
-import genomicsGraphData from './data/genomicsGraph';
-import genomicsGraph from './data/genomicsGraph';
-import privacyGraphData from './data/privacyGraph';
-import privacyGraph from './data/privacyGraph';
 import { GraphData } from './data/types';
 
 Cytoscape.use(fcose);
@@ -67,29 +59,17 @@ const SHOW_EDGES_KEY = 'showEdges';
 const SHOW_LABELS = 'showLabels';
 
 type Props = {
-  useCase: string;
   layout: string;
+  graph: GraphData;
 };
 
-const View = ({ useCase, layout }: Props) => {
+const View = ({ layout, graph }: Props) => {
   const [settings, setSettings] = useState({
     [SHOW_NODES_KEY]: true,
     [SHOW_PARENT_NODES_KEY]: true,
     [SHOW_EDGES_KEY]: true,
     [SHOW_LABELS]: false,
   });
-  let graph;
-  switch (useCase) {
-    case 'privacy': {
-      graph = privacyGraph;
-      break;
-    }
-    case 'genomics':
-    default: {
-      graph = genomicsGraph;
-      break;
-    }
-  }
 
   const scores = graph.nodes.map((node) => node.data.score);
   const weights = graph.edges.map((edge) => edge.data.weight);
@@ -336,7 +316,7 @@ const View = ({ useCase, layout }: Props) => {
             stylesheet={stylesheet}
             style={{
               width: 'calc(100vw - 50px)',
-              height: 'calc(100vh - 200px)',
+              height: 'calc(100vh - 300px)',
             }}
             layout={{ name: layout }}
             cy={(cy) => {

diff --git a/src/components/ExplanationDataImporter.tsx b/src/components/ExplanationDataImporter.tsx
@@ -1,7 +1,8 @@
-import { useRef, useState } from "react";
-import { ExplanationData } from "../WordCloud";
-import { transformGPipelineData } from "./utils/transformations";
-import { Category, ExplainabilityNode } from "./types";
+import { useRef, useState } from 'react';
+
+import { ElementDefinition } from 'cytoscape';
+
+import { GraphData } from '../data/types';
 
 type SuccessButtonProps = {
   isSuccess: boolean;
@@ -17,7 +18,7 @@ const SuccessButton = ({
   return (
     <button
       className={`btn inline-flex justify-center items-center btn-${
-        isSuccess ? "green" : "blue"
+        isSuccess ? 'green' : 'blue'
       }`}
       onClick={onClick}
     >
@@ -85,14 +86,15 @@ const DataFileButton = <T,>({
     <>
       <input
         className="hidden"
+        style={{ display: 'none' }}
         ref={fileInputRef}
         onChange={handleFile}
         type="file"
         accept=".json,.txt,text/plain"
       />
       {error && (
-        <div className="w-min-content border bg-red-500 rounded-lg px-4 py-3">
-          <p className="text-white">{error}</p>
+        <div className="">
+          <p className="">{error}</p>
         </div>
       )}
       <SuccessButton isSuccess={!!data} onClick={triggerFileSelection}>
@@ -103,17 +105,22 @@ const DataFileButton = <T,>({
 };
 
 type Props = {
-  onSubmit: (data: ExplanationData) => void;
+  onSubmit: (data: GraphData) => void;
 };
 
 const ExplanationDataImporter = ({ onSubmit }: Props) => {
-  const [nodeData, setNodeData] = useState<ExplainabilityNode[]>();
-  const [categoryData, setCategoryData] = useState<Category[]>();
+  const [nodeData, setNodeData] = useState<ElementDefinition[]>();
+  const [categoryData, setCategoryData] = useState<ElementDefinition[]>();
+  const [edgeData, setEdgeData] = useState<ElementDefinition[]>();
   const [submitted, setSubmitted] = useState<boolean>();
 
-  const handleTransform = () => {
-    if (nodeData && categoryData) {
-      const xData = transformGPipelineData(nodeData, categoryData);
+  const handleSubmit = () => {
+    if (nodeData && categoryData && edgeData) {
+      const xData: GraphData = {
+        nodes: nodeData,
+        edges: edgeData,
+        parentNodes: categoryData,
+      };
       onSubmit(xData);
       setSubmitted(true);
     }
@@ -127,8 +134,11 @@ const ExplanationDataImporter = ({ onSubmit }: Props) => {
       <DataFileButton data={categoryData} setData={setCategoryData}>
         Load Categories
       </DataFileButton>
-      <SuccessButton isSuccess={!!submitted} onClick={handleTransform}>
-        Transform
+      <DataFileButton data={edgeData} setData={setEdgeData}>
+        Load Edges
+      </DataFileButton>
+      <SuccessButton isSuccess={!!submitted} onClick={handleSubmit}>
+        Submit
       </SuccessButton>
     </>
   );

diff --git a/src/data/privacyGraph.ts b/src/data/privacyGraph.ts
@@ -1,12 +1,10 @@
 import { ElementDefinition } from 'cytoscape';
 import randomColor from 'randomcolor';
 
-// import nodes from './genomic_nodes.json';
-import edges from './prior_graph_edges.json';
-// import nodes from './prior_graph_nodes.json';
 import categories from './privacy_categories.json';
+import edges from './privacy_edges.json';
 import nodes from './privacy_nodes.json';
-import { GraphData, GraphNode, NodeData } from './types';
+import { GraphData } from './types';
 
 // const edges: ElementDefinition[] = [];