feat(examples): add example React app to demonstrate how to use the c…

…omponents #133
GenSpectrum · Apr 10, 2024 · 8ab3d57 · 8ab3d57
1 parent 0a95979
commit 8ab3d57
Show file tree

Hide file tree

Showing 14 changed files with 192 additions and 6 deletions.
diff --git a/components/.eslintignore b/components/.eslintignore
@@ -1,8 +1,6 @@
 node_modules/*
 docs/*
 docs-src/*
-rollup-config.js
 custom-elements.json
-web-dev-server.config.js
 build/*
 storybook-static/*
diff --git a/components/package.json b/components/package.json
@@ -10,7 +10,8 @@
     "exports": {
         ".": "./dist/dashboard-components.js",
         "./custom-elements.json": "./custom-elements.json",
-        "./package.json": "./package.json"
+        "./package.json": "./package.json",
+        "./style.css": "./dist/style.css"
     },
     "files": [
         "dist",

diff --git a/components/src/web-components/app.ts b/components/src/web-components/app.ts
@@ -11,7 +11,11 @@ export class App extends LitElement {
     lapis: string = '';
 
     override render() {
-        return html`${this.childNodes}`;
+        const children = [];
+        for (const childNode of this.childNodes) {
+            children.push(html`${childNode}`);
+        }
+        return html`${children}`;
     }
 
     override createRenderRoot() {

diff --git a/examples/React/.gitignore b/examples/React/.gitignore
@@ -0,0 +1 @@
+package-lock.json
diff --git a/examples/React/README.md b/examples/React/README.md
@@ -0,0 +1,17 @@
+# GenSpectrum components in React
+
+This demonstrates how to use GenSpectrum components in React.
+
+Install the packed version of the components:
+
+```bash
+npm run import-components
+```
+
+Start a test server to see the components in action:
+
+```bash
+npm run start
+```
+
+Then, open http://localhost:5173/ in your browser.
diff --git a/examples/React/index.html b/examples/React/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>GenSpectrum Components with React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/React/package.json b/examples/React/package.json
@@ -0,0 +1,22 @@
+{
+    "name": "react",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc && vite build",
+        "preview": "vite preview",
+        "import-components": "npm --prefix ../../components/ run build-and-pack && npm install ../../components/genspectrum-dashboard-components.tgz"
+    },
+    "dependencies": {
+        "@genspectrum/dashboard-components": "file:../../components/genspectrum-dashboard-components.tgz",
+        "@types/react": "^18.2.66",
+        "@types/react-dom": "^18.2.22",
+        "@vitejs/plugin-react": "^4.2.1",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "typescript": "^5.2.2",
+        "vite": "^5.2.0"
+    }
+}
diff --git a/examples/React/src/App.tsx b/examples/React/src/App.tsx
@@ -0,0 +1,78 @@
+import {useEffect, useState} from 'react'
+import '@genspectrum/dashboard-components'
+import '@genspectrum/dashboard-components/style.css'
+
+function App() {
+    const [location, setLocation] = useState({
+        region: "Europe",
+        country: "Switzerland"
+    })
+    const [dateRange, setDateRange] = useState({
+        dateFrom: "2021-01-01",
+        dateTo: "2022-01-01"
+    })
+
+    useEffect(() => {
+        const handleLocationChange = (event: Event) => setLocation((event as CustomEvent).detail);
+        const handleDateRangeChange = (event: Event) => setDateRange((event as CustomEvent).detail);
+
+        const locationFilter = document.querySelector('gs-location-filter');
+        if (locationFilter) {
+            locationFilter.addEventListener('gs-location-changed', handleLocationChange);
+        }
+
+        const dateRangeSelector = document.querySelector('gs-date-range-selector');
+        if (dateRangeSelector) {
+            dateRangeSelector.addEventListener('gs-date-range-changed', handleDateRangeChange);
+        }
+
+        // Cleanup function to remove event listeners
+        return () => {
+            if (locationFilter) {
+                locationFilter.removeEventListener('gs-location-changed', handleLocationChange);
+            }
+            if (dateRangeSelector) {
+                dateRangeSelector.removeEventListener('gs-date-range-changed', handleDateRangeChange);
+            }
+        };
+    }, []);
+
+    const denominator = {
+        ...dateRange,
+        ...location,
+    };
+
+    const numerator = {
+        ...denominator,
+        displayName: "My variant",
+        pangoLineage: "B.1.1.7"
+    };
+
+    return (
+        <gs-app lapis="https://lapis.cov-spectrum.org/open/v1/sample">
+            <gs-location-filter
+                value="Europe / Switzerland"
+                fields='["region", "country", "division", "location"]'
+            ></gs-location-filter>
+            <gs-date-range-selector
+                selectedValue="last6Months"
+            ></gs-date-range-selector>
+            <gs-prevalence-over-time
+                numerator={JSON.stringify(numerator)}
+                denominator={JSON.stringify(denominator)}
+                granularity="day"
+                smoothingWindow="7"
+                views='["line", "table"]'
+            ></gs-prevalence-over-time>
+            <gs-prevalence-over-time
+                numerator={JSON.stringify(numerator)}
+                denominator={JSON.stringify(denominator)}
+                granularity="month"
+                smoothingWindow="0"
+                views='["bar", "table"]'
+            ></gs-prevalence-over-time>
+        </gs-app>
+    );
+}
+
+export default App
diff --git a/examples/React/src/main.tsx b/examples/React/src/main.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
diff --git a/examples/React/src/vite-env.d.ts b/examples/React/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/React/tsconfig.json b/examples/React/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/examples/React/tsconfig.node.json b/examples/React/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/examples/React/vite.config.ts b/examples/React/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
diff --git a/examples/plainJavascript/index.html b/examples/plainJavascript/index.html
@@ -23,14 +23,14 @@
                 selectedValue="last6Months"
             ></gs-date-range-selector>
             <gs-prevalence-over-time
-                numerator='{"country":"Switzerland", "pangoLineage":"B.1.1.7", "dateTo":"2022-01-01"}'
+                numerator='{"displayName": "My variant","country":"Switzerland", "pangoLineage":"B.1.1.7", "dateTo":"2022-01-01"}'
                 denominator='{"country":"Switzerland", "dateTo":"2022-01-01"}'
                 granularity="day"
                 smoothingWindow="7"
                 views='["line", "table"]'
             ></gs-prevalence-over-time>
             <gs-prevalence-over-time
-                numerator='{"country":"Switzerland", "pangoLineage":"B.1.1.7", "dateTo":"2022-01-01"}'
+                numerator='{"displayName": "My variant","country":"Switzerland", "pangoLineage":"B.1.1.7", "dateTo":"2022-01-01"}'
                 denominator='{"country":"Switzerland", "dateTo":"2022-01-01"}'
                 granularity="month"
                 smoothingWindow="0"