seroanalytics · hillalex · Sep 23, 2024 · Sep 20, 2024 · Sep 20, 2024 · Sep 20, 2024
diff --git a/public/index.html b/public/index.html
@@ -27,24 +27,7 @@
     <title>SeroViz</title>
 </head>
 <body>
-<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
-    <symbol id="github" viewBox="0 0 24 24">
-        <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
-    </symbol>
-</svg>
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root"></div>
-<div class="container-fluid">
-    <footer class="row py-3 border-top bg-light d-flex flex-wrap justify-content-between align-items-center">
-        <div class="col-md-4 d-flex align-items-center small">Logo created with BioRender.com</div>
-        <ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
-            <li class="ms-3"><a class="text-body-secondary" href="https://github.com/seroanalytics/seroviz">
-                <svg class="bi" width="24" height="24">
-                    <use xlink:href="#github"></use>
-                </svg></a>
-            </li>
-        </ul>
-    </footer>
-</div>
 </body>
 </html>
diff --git a/public/logo.png b/public/logo.png
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/logolight.png b/public/logolight.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -6,16 +6,6 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x103"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

diff --git a/src/RootContext.ts b/src/RootContext.ts
@@ -21,6 +21,7 @@ export enum ActionType {
     DATASET_NAMES_FETCHED = "DATASET_NAMES_FETCHED",
     DATASET_METADATA_FETCHED = "DATASET_METADATA_FETCHED",
     DATASET_SELECTED = "DATASET_SELECTED",
+    DATASET_DELETED = "DATASET_DELETED",
     PLOT_SELECTED = "PLOT_SELECTED",
     SELECT_COVARIATE = "SELECT_COVARIATE",
     UNSELECT_COVARIATE = "UNSELECT_COVARIATE",

diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -1,7 +1,7 @@
 import React, {useEffect, useReducer} from 'react';
 import {Container} from "react-bootstrap";
 import TopNav from "./TopNav";
-import {ChooseOrUploadDataset} from "./ChooseOrUploadDataset";
+import {ManageDatasets} from "./ManageDatasets";
 import usePersistedState from "../hooks/usePersistedState";
 import {
     initialState,
@@ -40,7 +40,7 @@ export default function App() {
             {state.genericErrors.map((e, index) => <AppError error={e}
                                                               key={"error" + index}/>)}
             <Container fluid>
-                {!state.selectedDataset && <ChooseOrUploadDataset/>}
+                {!state.selectedDataset && <ManageDatasets/>}
                 <ExploreDataset/>
             </Container>
         </RootDispatchContext.Provider>

diff --git a/src/components/ChooseOrUploadDataset.tsx b/src/components/ChooseOrUploadDataset.tsx
diff --git a/src/components/IndividualPlots.tsx b/src/components/IndividualPlots.tsx
@@ -7,6 +7,7 @@ import {useDebouncedEffect} from "../hooks/useDebouncedEffect";
 import {dataService} from "../services/dataService";
 import {ErrorDetail} from "../generated";
 import PlotError from "./PlotError";
+import {toFilename} from "../services/utils";
 
 export function IndividualPlots() {
     const state = useContext(RootContext);
@@ -75,7 +76,8 @@ export function IndividualPlots() {
                                                                 minWidth: "400px",
                                                                 width: "100%",
                                                                 height: "800px"
-                                                            }}></Plot>
+                                                            }}
+                                                            config={{toImageButtonOptions: {filename: toFilename(title)}}} />
                 }
                 {!settings.pid &&
                     <p className={"mt-3"}>Please select an id column</p>}

diff --git a/src/components/ListDatasets.tsx b/src/components/ListDatasets.tsx
@@ -0,0 +1,42 @@
+import Form from "react-bootstrap/Form";
+import React, {useContext} from "react";
+import {ActionType, RootContext, RootDispatchContext} from "../RootContext";
+import {Button} from "react-bootstrap";
+import {dataService} from "../services/dataService";
+
+function DatasetListItem({dataset, onSelectDataset, onRemoveDataset}: {
+    dataset: string,
+    onSelectDataset: (d: string) => void
+    onRemoveDataset: (d: string) => void
+}) {
+    return <li key={dataset}>
+        <Button href="#" variant={"link"} className={"ps-0"}
+                onClick={() => onSelectDataset(dataset)}>{dataset}</Button>
+        <Button href="#" variant={"close"}
+                onClick={() => onRemoveDataset(dataset)}></Button>
+    </li>
+}
+
+export default function ListDatasets() {
+
+    const state = useContext(RootContext);
+    const dispatch = useContext(RootDispatchContext);
+
+    const onSelectData = (dataset: string) => {
+        dispatch({type: ActionType.DATASET_SELECTED, payload: dataset})
+    }
+    const onRemoveData = async (dataset: string) => {
+        await dataService(state.language, dispatch)
+            .deleteDataset(dataset);
+    }
+
+    return <Form.Group key="choose-dataset" className={"mb-5"}>
+        <h4>Available datasets</h4>
+        <ul className={"list-unstyled"}>
+            {state.datasetNames.map((d: string) =>
+                <DatasetListItem key={d} dataset={d}
+                                 onSelectDataset={onSelectData}
+                                 onRemoveDataset={onRemoveData}/>)}
+        </ul>
+    </Form.Group>
+}
diff --git a/src/components/ManageDatasets.tsx b/src/components/ManageDatasets.tsx
@@ -0,0 +1,38 @@
+import React, {useContext, useEffect} from 'react';
+import {Col, Row} from "react-bootstrap";
+import Form from "react-bootstrap/Form";
+import {RootContext, RootDispatchContext} from "../RootContext";
+import {api} from "../services/apiService";
+import {DataService} from "../services/dataService";
+import UploadDataset from "./UploadDataset";
+import ListDatasets from "./ListDatasets";
+import {Info} from "lucide-react";
+
+export function ManageDatasets() {
+
+    const state = useContext(RootContext);
+    const dispatch = useContext(RootDispatchContext);
+
+    useEffect(() => {
+        (new DataService(api(state.language, dispatch)))
+            .getDatasetNames();
+
+    }, [state.language, dispatch]);
+
+    return <Row className={"mt-5"}>
+        <Col xs={12} sm={{span: 6, offset: 3}}>
+            <Form>
+                <p><Info className={"me-2"}/>Files you upload are
+                    only accessible to you and
+                    will be deleted automatically when you close your
+                    browser.</p>
+                <fieldset>
+                    {state.datasetNames.length > 0 &&
+                        <ListDatasets/>
+                    }
+                    <UploadDataset/>
+                </fieldset>
+            </Form>
+        </Col>
+    </Row>
+}
diff --git a/src/components/TopNav.tsx b/src/components/TopNav.tsx
@@ -7,21 +7,37 @@ interface Props {
     setTheme: (theme: string) => void
 }
 
-export default function TopNav({theme, setTheme}: Props) {
+function GithubLogo() {
+    return <svg
+        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path
+            d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+    </svg>
+}
+
+export default function TopNav({
+                                   theme, setTheme
+                               }: Props) {
     return <Navbar expand="lg" className={"bg-light"}>
         <Container fluid>
             <img alt="SeroViz logo"
-                 src={theme === "dark" ? "logolight.png": "logo.png"}
+                 src={theme === "dark" ? "logolight.png" : "logo.png"}
                  width={120}
                  className={"me-3"}></img>
             <Navbar.Toggle aria-controls="basic-navbar-nav"/>
             <Navbar.Collapse id="basic-navbar-nav">
-                <Nav className="me-auto pt-4">
+                <Nav className="me-auto">
+                    <Nav.Link href="/">Manage datasets</Nav.Link>
                     <Nav.Link href="/docs">Docs</Nav.Link>
-                    <Nav.Link href="/">Upload dataset</Nav.Link>
                 </Nav>
             </Navbar.Collapse>
             <ThemeSwitch theme={theme} setTheme={setTheme}></ThemeSwitch>
+            <a className="text-body-secondary"
+               href="https://github.com/seroanalytics/seroviz">
+                <svg className="bi" width="24" height="24">
+                    <GithubLogo/>
+                </svg>
+            </a>
         </Container>
     </Navbar>
 }