Merge pull request #1 from seroanalytics/electron

Electron support

README.md

@@ -13,3 +13,5 @@ Based on the `remix` Javascript/Typescript framework.
 * Run `npm install` from this directory to install dependencies
 * Start the dev server with `npm run dev`. You should now see the app served at http://localhost:3000.
 
+## Electron app
+To start as an Electron app instead, run `npm run electron`.

app/components/LineChart.tsx

@@ -35,12 +35,6 @@ const colors = [{
     "alpha": "#44AA99",
     "delta": "#e2e2e2"
 }]
-// "#882255",
-// "#44AA99",
-// "#e2e2e2",
-// "#D95F02",
-// "#66A61E"
-
 
 export const useIsServerSide = () => {
     const [isServerSide, setIsServerSide] = useState(true);
@@ -69,7 +63,7 @@ export default function LineChart({data, history, titre_type}: Props) {
         (state.history == "Trace" || entry.infection_history == history) && (state.titre_type == "Trace" || entry.titre_type == titre_type)
     ).map(entry => ({
         ...entry,
-        range: [entry.hi, entry.lo]
+        CI: [entry.hi, entry.lo]
     }));
 
     const titre_types = [...new Set(allData.map(entry => entry.titre_type))]
@@ -107,7 +101,7 @@ export default function LineChart({data, history, titre_type}: Props) {
                         xAxisId={idx.join("x")}
                         key={idx.join("area")}
                         type="monotone"
-                        dataKey="range"
+                        dataKey="CI"
                         stroke="none"
                         fill={colors[histories.indexOf(idx[1])][idx[0].toLowerCase()]}
                         fillOpacity={0.3}

app/components/Sidebar.tsx

@@ -39,13 +39,13 @@ export default function Sidebar() {
 
                 <hr/>
                 <Form.Label htmlFor="data">Population fits</Form.Label>
-                <Form.Group className="mb-3" controlId="formPlaintextPassword">
+                <Form.Group className="mb-3">
                     <Form.Text id="help" muted>
                         Choose how each variable is displayed
                     </Form.Text>
                     <Row className={"mt-2"}>
                         <Form.Label column sm="6">
-                           Titre type
+                            Titre type
                         </Form.Label>
                         <Col sm="6">
                             <Form.Select value={state.titre_type} id="titre_type" onChange={onSelect}>
@@ -66,6 +66,10 @@ export default function Sidebar() {
                         </Col>
                     </Row>
                 </Form.Group>
+                <hr/>
+                <Form.Group className={"mb-3"}>
+                    <Form.Label htmlFor="data">Peak titre values</Form.Label>
+                </Form.Group>
             </fieldset>
         </Form>
     </Col>

app/components/TopNav.tsx

@@ -15,11 +15,10 @@ export default function TopNav({theme, setTheme}: Props) {
             <Navbar.Collapse id="basic-navbar-nav">
                 <Nav className="me-auto">
                     <Nav.Link href="#docs">Docs</Nav.Link>
-                    <Nav.Link href="#login" disabled>Login</Nav.Link>
-                    <Nav.Link href="#submit" disabled>Submit dataset</Nav.Link>
+                    <Nav.Link href="#submit" disabled>Add dataset</Nav.Link>
                 </Nav>
             </Navbar.Collapse>
             <ThemeSwitch theme={theme} setTheme={setTheme}></ThemeSwitch>
         </Container>
     </Navbar>
-}
+}

app/root.tsx

@@ -8,7 +8,7 @@ import {
 } from "@remix-run/react";
 
 import globalStyles from "./styles/global.css?url";
-import bootstrap from "bootstrap/dist/css/bootstrap.css?url";
+import bootstrap from "bootstrap/dist/css/bootstrap.min.css";
 import {Col, Container, Row} from "react-bootstrap";
 import React, {createContext, useMemo, useReducer} from "react";
 import usePersistedState from "./hooks/usePersistedState";

app/routes/_index.tsx

@@ -9,11 +9,11 @@ import LineChart from "../components/LineChart";
 import {ContextValue, RootContext} from "../RootContext";
 import {useContext} from "react";
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
+// const __filename = fileURLToPath(import.meta.url);
+// const __dirname = dirname(__filename);
 
 export const loader = async () => {
-    const jsonDirectory = __dirname + "/../../data";
+    const jsonDirectory = "./data";
     // Read the json data file data.json
     const fileContents = await fs.readFile(jsonDirectory + "/res.json", "utf8");
     // Parse the json data file contents into a json object

desktop/index.js

@@ -0,0 +1,20 @@
+const { initRemix } = require("remix-electron")
+const { app, BrowserWindow } = require("electron")
+const path = require("node:path")
+
+/** @param {string} url */
+async function createWindow(url) {
+    const win = new BrowserWindow()
+
+    await win.loadURL(url)
+}
+
+app.on("ready", async () => {
+    const url = await initRemix({
+        serverBuild: path.join(__dirname, "../build/index.js"),
+        publicFolder: path.join(__dirname, "../public"),
+    })
+    await createWindow(url)
+})
+
+app.disableHardwareAcceleration()