diff --git a/components/.eslintignore b/components/.eslintignore
index f58d7f7f..e7d9a7cf 100644
--- 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/*
\ No newline at end of file
diff --git a/components/package.json b/components/package.json
index 537fbf2a..6d5e8667 100644
--- 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
index a89489b6..60f3ff29 100644
--- 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
new file mode 100644
index 00000000..d8b83df9
--- /dev/null
+++ b/examples/React/.gitignore
@@ -0,0 +1 @@
+package-lock.json
diff --git a/examples/React/README.md b/examples/React/README.md
new file mode 100644
index 00000000..fcd7ef1b
--- /dev/null
+++ b/examples/React/README.md
@@ -0,0 +1,16 @@
+# GenSpectrum components in React
+
+This demonstrates how to use GenSpectrum components in React.
+It was created using `npm create vite@latest React --template react-ts`.
+
+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 dev
+```
diff --git a/examples/React/index.html b/examples/React/index.html
new file mode 100644
index 00000000..96d938d1
--- /dev/null
+++ b/examples/React/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ GenSpectrum Components with React
+
+
+
+
+
+
diff --git a/examples/React/package.json b/examples/React/package.json
new file mode 100644
index 00000000..e1b21055
--- /dev/null
+++ b/examples/React/package.json
@@ -0,0 +1,21 @@
+{
+ "name": "react",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "start": "vite",
+ "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
new file mode 100644
index 00000000..ed1f07a6
--- /dev/null
+++ b/examples/React/src/App.tsx
@@ -0,0 +1,77 @@
+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);
+ }
+
+ 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 (
+
+
+
+
+
+
+ );
+}
+
+export default App
diff --git a/examples/React/src/main.tsx b/examples/React/src/main.tsx
new file mode 100644
index 00000000..e63eef4a
--- /dev/null
+++ 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(
+
+
+ ,
+)
diff --git a/examples/React/src/vite-env.d.ts b/examples/React/src/vite-env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/examples/React/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/examples/React/tsconfig.json b/examples/React/tsconfig.json
new file mode 100644
index 00000000..a7fc6fbf
--- /dev/null
+++ 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
new file mode 100644
index 00000000..97ede7ee
--- /dev/null
+++ 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
new file mode 100644
index 00000000..5a33944a
--- /dev/null
+++ 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/README.md b/examples/plainJavascript/README.md
index deda1bec..f6152f15 100644
--- a/examples/plainJavascript/README.md
+++ b/examples/plainJavascript/README.md
@@ -11,7 +11,5 @@ npm run import-components
Start a test server to see the components in action:
```bash
-npm run start
+npm run dev
```
-
-Then, open http://localhost:5173/ in your browser.
diff --git a/examples/plainJavascript/index.html b/examples/plainJavascript/index.html
index 4e88f87f..cc4b74ae 100644
--- a/examples/plainJavascript/index.html
+++ b/examples/plainJavascript/index.html
@@ -23,14 +23,14 @@
selectedValue="last6Months"
>