From f235bdd032fd208a7d603392881e1582bdfc5809 Mon Sep 17 00:00:00 2001 From: Juan Carlos Farah Date: Tue, 10 Oct 2023 10:28:21 +0200 Subject: [PATCH] feat: allow custom files --- src/App.tsx | 11 +- src/Select.tsx | 53 +- src/View.tsx | 26 +- src/components/ExplanationDataImporter.tsx | 40 +- src/data/privacyGraph.ts | 6 +- src/data/privacy_edges.json | 4034 ++++++++++++++++++++ 6 files changed, 4114 insertions(+), 56 deletions(-) create mode 100644 src/data/privacy_edges.json diff --git a/src/App.tsx b/src/App.tsx index 104df30..a54a118 100644 --- 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()); - 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 (
@@ -51,10 +70,26 @@ export default function Select({ name="useCase" value="genomics" checked={useCase === 'genomics'} + onChange={handleUseCase} /> +
+ + + {useCase === 'custom' ? ( + + ) : ( + <> + )}
diff --git a/src/View.tsx b/src/View.tsx index 83d6a99..dbd87f8 100644 --- 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 index ed2d1a8..51fb7ea 100644 --- 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 (