@genspectrum/dashboard-components 0.6.10 → 0.6.12

package/dist/genspectrum-components.d.ts

@@ -990,14 +990,14 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate-component': AggregateComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-aggregate-component': AggregateComponent;
     }
 }
 
@@ -1041,21 +1041,21 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
+        'gs-lineage-filter': LineageFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
-        'gs-mutation-filter-on-blur': CustomEvent<SelectedMutationFilterStrings>;
+        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
     }
 }
 
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
+        'gs-mutation-filter': MutationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
+        'gs-mutation-filter-on-blur': CustomEvent<SelectedMutationFilterStrings>;
     }
 }
 

package/dist/style.css

@@ -376,7 +376,7 @@ input[type="range"] {
     background-color: #C6C6C6;
     pointer-events: none;
 }/*
-! tailwindcss v3.4.6 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.7 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -983,6 +983,39 @@ html {
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
 }
+.container {
+  width: 100%;
+}
+@media (min-width: 640px) {
+
+  .container {
+    max-width: 640px;
+  }
+}
+@media (min-width: 768px) {
+
+  .container {
+    max-width: 768px;
+  }
+}
+@media (min-width: 1024px) {
+
+  .container {
+    max-width: 1024px;
+  }
+}
+@media (min-width: 1280px) {
+
+  .container {
+    max-width: 1280px;
+  }
+}
+@media (min-width: 1536px) {
+
+  .container {
+    max-width: 1536px;
+  }
+}
 .alert {
   display: grid;
   width: 100%;
@@ -1024,6 +1057,15 @@ html {
     color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
   }
 
+  .menu li > *:not(ul, .menu-title, details, .btn):active,
+.menu li > *:not(ul, .menu-title, details, .btn).active,
+.menu li > details > summary:active {
+    --tw-bg-opacity: 1;
+    background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
+    --tw-text-opacity: 1;
+    color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
+  }
+
   .tab:hover {
     --tw-text-opacity: 1;
   }
@@ -1117,6 +1159,25 @@ html {
   container-type: inline-size;
   grid-template-columns: auto 1fr;
 }
+.divider {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-self: stretch;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  height: 1rem;
+  white-space: nowrap;
+}
+.divider:before,
+  .divider:after {
+  height: 0.125rem;
+  width: 100%;
+  flex-grow: 1;
+  --tw-content: '';
+  content: var(--tw-content);
+  background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
+}
 .dropdown {
   position: relative;
   display: inline-block;
@@ -1362,6 +1423,10 @@ html {
     border-radius: inherit;
   }
 }
+.link {
+  cursor: pointer;
+  text-decoration-line: underline;
+}
 .menu li.disabled {
   cursor: not-allowed;
   -webkit-user-select: none;
@@ -1629,6 +1694,11 @@ input.tab:checked + .tab-content,
   --alert-bg: var(--fallback-er,oklch(var(--er)/1));
   --alert-bg-mix: var(--fallback-b1,oklch(var(--b1)/1));
 }
+.btm-nav > *:where(.active) {
+  border-top-width: 2px;
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
+}
 .btm-nav > *.disabled,
     .btm-nav > *[disabled] {
   pointer-events: none;
@@ -1781,6 +1851,9 @@ input.tab:checked + .tab-content,
     background-position-y: 0;
   }
 }
+.divider:not(:empty) {
+  gap: 1rem;
+}
 .dropdown.dropdown-open .dropdown-content,
 .dropdown:focus .dropdown-content,
 .dropdown:focus-within .dropdown-content {
@@ -1858,6 +1931,14 @@ input.tab:checked + .tab-content,
 .join > :where(*:not(:first-child)):is(.btn) {
   margin-inline-start: calc(var(--border-btn) * -1);
 }
+.link:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.link:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
 .loading {
   pointer-events: none;
   display: inline-block;
@@ -1888,6 +1969,14 @@ input.tab:checked + .tab-content,
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.menu li > *:not(ul, .menu-title, details, .btn):active,
+.menu li > *:not(ul, .menu-title, details, .btn).active,
+.menu li > details > summary:active {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
+}
 .mockup-phone .display {
   overflow: hidden;
   border-radius: 40px;
@@ -2384,6 +2473,12 @@ input.tab:checked + .tab-content,
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
 }
+.table-zebra tr.active,
+    .table-zebra tr.active:nth-child(even),
+    .table-zebra-zebra tbody tr:nth-child(even) {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
+}
 .table :where(thead tr, tbody tr:not(:last-child), tbody tr:first-child:last-child) {
   border-bottom-width: 1px;
   --tw-border-opacity: 1;
@@ -2456,6 +2551,18 @@ input.tab:checked + .tab-content,
   --togglehandleborder: 0 0 0 3px var(--fallback-bc,oklch(var(--bc)/1)) inset,
       var(--handleoffsetcalculator) 0 0 3px var(--fallback-bc,oklch(var(--bc)/1)) inset;
 }
+.btm-nav-xs > *:where(.active) {
+  border-top-width: 1px;
+}
+.btm-nav-sm > *:where(.active) {
+  border-top-width: 2px;
+}
+.btm-nav-md > *:where(.active) {
+  border-top-width: 2px;
+}
+.btm-nav-lg > *:where(.active) {
+  border-top-width: 4px;
+}
 .btn-xs {
   height: 1.5rem;
   min-height: 1.5rem;
@@ -2875,6 +2982,9 @@ input.tab:checked + .tab-content,
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
+.mb-0 {
+  margin-bottom: 0px;
+}
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -2884,6 +2994,9 @@ input.tab:checked + .tab-content,
 .ml-1 {
   margin-left: 0.25rem;
 }
+.ml-2 {
+  margin-left: 0.5rem;
+}
 .ml-2\.5 {
   margin-left: 0.625rem;
 }
@@ -2896,6 +3009,9 @@ input.tab:checked + .tab-content,
 .mr-2 {
   margin-right: 0.5rem;
 }
+.mt-0 {
+  margin-top: 0px;
+}
 .mt-0\.5 {
   margin-top: 0.125rem;
 }
@@ -2935,12 +3051,24 @@ input.tab:checked + .tab-content,
 .w-16 {
   width: 4rem;
 }
+.w-20 {
+  width: 5rem;
+}
+.w-24 {
+  width: 6rem;
+}
 .w-32 {
   width: 8rem;
 }
+.w-44 {
+  width: 11rem;
+}
 .w-64 {
   width: 16rem;
 }
+.w-\[6rem\] {
+  width: 6rem;
+}
 .w-\[7\.5rem\] {
   width: 7.5rem;
 }
@@ -2977,6 +3105,12 @@ input.tab:checked + .tab-content,
 .resize {
   resize: both;
 }
+.list-inside {
+  list-style-position: inside;
+}
+.list-disc {
+  list-style-type: disc;
+}
 .flex-row {
   flex-direction: row;
 }
@@ -3007,6 +3141,9 @@ input.tab:checked + .tab-content,
 .overflow-auto {
   overflow: auto;
 }
+.overflow-x-auto {
+  overflow-x: auto;
+}
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -3016,6 +3153,9 @@ input.tab:checked + .tab-content,
 .rounded-full {
   border-radius: 9999px;
 }
+.rounded-lg {
+  border-radius: 0.5rem;
+}
 .rounded-md {
   border-radius: 0.375rem;
 }
@@ -3271,6 +3411,12 @@ input.tab:checked + .tab-content,
 }
 .peer:hover ~ .peer-hover\:visible {
   visibility: visible;
+}
+@media (min-width: 640px) {
+
+  .sm\:max-w-5xl {
+    max-width: 64rem;
+  }
 }.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{/*
       /*rtl:begin:ignore*/left:0/*
       /*rtl:end:ignore*/}/*

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.6.10",
+    "version": "0.6.12",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -90,7 +90,7 @@
         "@storybook/types": "^8.0.9",
         "@storybook/web-components": "^8.0.9",
         "@storybook/web-components-vite": "^8.0.9",
-        "@types/node": "^20.12.7",
+        "@types/node": "^22.0.0",
         "@types/object-hash": "^3.0.6",
         "@typescript-eslint/eslint-plugin": "^7.14.1",
         "@typescript-eslint/parser": "^7.14.1",

package/src/preact/aggregatedData/aggregate.tsx

@@ -9,7 +9,7 @@ import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
 import { Fullscreen } from '../components/fullscreen';
-import Info from '../components/info';
+import Info, { InfoHeadline1, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
 import { ResizeContainer } from '../components/resize-container';
@@ -94,18 +94,26 @@ const AggregatedDataTabs: FunctionComponent<AggregatedDataTabsProps> = ({ data,
 
     const tabs = views.map((view) => getTab(view));
 
-    return <Tabs tabs={tabs} toolbar={<Toolbar data={data} />} />;
+    return <Tabs tabs={tabs} toolbar={<Toolbar data={data} fields={fields} />} />;
 };
 
 type ToolbarProps = {
     data: AggregateData;
+    fields: string[];
 };
 
-const Toolbar: FunctionComponent<ToolbarProps> = ({ data }) => {
+const Toolbar: FunctionComponent<ToolbarProps> = ({ data, fields }) => {
     return (
         <div class='flex flex-row'>
             <CsvDownloadButton className='mx-1 btn btn-xs' getData={() => data} filename='aggregate.csv' />
-            <Info>Info for aggregate</Info>
+            <Info>
+                <InfoHeadline1>Aggregated data</InfoHeadline1>
+                <InfoParagraph>
+                    This table shows the number and proportion of sequences stratified by the following fields:{' '}
+                    {fields.join(', ')}. The proportion is calculated with respect to the total count within the
+                    filtered dataset.
+                </InfoParagraph>
+            </Info>
             <Fullscreen />
         </div>
     );

package/src/preact/components/checkbox-selector.stories.tsx

@@ -1,5 +1,7 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
 import { expect, fn, waitFor, within } from '@storybook/test';
+import { type FunctionComponent } from 'preact';
+import { useState } from 'preact/hooks';
 
 import { type CheckboxItem, CheckboxSelector, type CheckboxSelectorProps } from './checkbox-selector';
 
@@ -14,12 +16,33 @@ const meta: Meta<CheckboxSelectorProps> = {
 
 export default meta;
 
+const WrapperWithState: FunctionComponent<CheckboxSelectorProps> = ({
+    items: initialItems,
+    label,
+    setItems: setItemsMock,
+}) => {
+    const [items, setItems] = useState<CheckboxItem[]>(initialItems);
+
+    return (
+        <div className='w-32'>
+            <CheckboxSelector
+                items={items}
+                label={label}
+                setItems={(items: CheckboxItem[]) => {
+                    setItemsMock(items);
+                    setItems(items);
+                }}
+            />
+        </div>
+    );
+};
+
 export const CheckboxSelectorStory: StoryObj<CheckboxSelectorProps> = {
     render: (args) => {
         let wrapperStateItems = args.items;
 
         return (
-            <CheckboxSelector
+            <WrapperWithState
                 items={wrapperStateItems}
                 label={args.label}
                 setItems={(items: CheckboxItem[]) => {
@@ -37,20 +60,79 @@ export const CheckboxSelectorStory: StoryObj<CheckboxSelectorProps> = {
         label: 'Some label',
         setItems: fn(),
     },
-    play: async ({ canvasElement, args }) => {
+    play: async ({ canvasElement, args, step }) => {
         const canvas = within(canvasElement);
 
-        const open = () => canvas.getByText('Some label', { exact: false });
+        const open = () => canvas.getByText('Some label');
+        const selectAll = () => canvas.getByText('Select all');
+        const selectNone = () => canvas.getByText('Select none');
+        const firstItem = () => canvas.getByLabelText('item1');
         open().click();
 
-        const item1 = canvas.getByLabelText('item1', { exact: false });
-        item1.click();
+        await step('Select one item', async () => {
+            firstItem().click();
 
-        await waitFor(() =>
-            expect(args.setItems).toHaveBeenCalledWith([
-                { checked: true, label: 'item1' },
-                { checked: false, label: 'item2' },
-            ]),
-        );
+            await waitFor(() =>
+                expect(args.setItems).toHaveBeenCalledWith([
+                    { checked: true, label: 'item1' },
+                    { checked: false, label: 'item2' },
+                ]),
+            );
+        });
+
+        await step('Select all items with one item already selected', async () => {
+            selectAll().click();
+
+            await waitFor(() =>
+                expect(args.setItems).toHaveBeenCalledWith([
+                    { checked: true, label: 'item1' },
+                    { checked: true, label: 'item2' },
+                ]),
+            );
+        });
+
+        await step('Deselect one item', async () => {
+            firstItem().click();
+
+            await waitFor(() =>
+                expect(args.setItems).toHaveBeenCalledWith([
+                    { checked: false, label: 'item1' },
+                    { checked: true, label: 'item2' },
+                ]),
+            );
+        });
+
+        await step('Select none with one item already selected', async () => {
+            selectNone().click();
+
+            await waitFor(() =>
+                expect(args.setItems).toHaveBeenCalledWith([
+                    { checked: false, label: 'item1' },
+                    { checked: false, label: 'item2' },
+                ]),
+            );
+        });
+
+        await step('Select all items with none selected', async () => {
+            selectAll().click();
+
+            await waitFor(() =>
+                expect(args.setItems).toHaveBeenCalledWith([
+                    { checked: true, label: 'item1' },
+                    { checked: true, label: 'item2' },
+                ]),
+            );
+        });
+
+        await step('Select none with all items selected', async () => {
+            selectNone().click();
+
+            await waitFor(() =>
+                expect(args.setItems).toHaveBeenCalledWith([
+                    { checked: false, label: 'item1' },
+                    { checked: false, label: 'item2' },
+                ]),
+            );
+        });
     },
 };

package/src/preact/components/checkbox-selector.tsx

@@ -18,6 +18,25 @@ export const CheckboxSelector = <Item extends CheckboxItem>({
 }: CheckboxSelectorProps<Item>) => {
     return (
         <Dropdown buttonTitle={label} placement={'bottom-start'}>
+            <button
+                className='btn btn-xs btn-ghost'
+                onClick={() => {
+                    const newItems = items.map((item) => ({ ...item, checked: true }));
+                    setItems(newItems);
+                }}
+            >
+                Select all
+            </button>
+            <button
+                className='btn btn-xs btn-ghost'
+                onClick={() => {
+                    const newItems = items.map((item) => ({ ...item, checked: false }));
+                    setItems(newItems);
+                }}
+            >
+                Select none
+            </button>
+            <div className='divider mt-0 mb-0' />
             <ul>
                 {items.map((item, index) => (
                     <li className='flex flex-row items-center' key={item.label}>

package/src/preact/components/color-scale-selector-dropdown.tsx

@@ -10,8 +10,10 @@ export const ColorScaleSelectorDropdown: FunctionComponent<ColorScaleSelectorDro
     setColorScale,
 }) => {
     return (
-        <Dropdown buttonTitle={`Color scale`} placement={'bottom-start'}>
-            <ColorScaleSelector colorScale={colorScale} setColorScale={setColorScale} />
-        </Dropdown>
+        <div className='w-20'>
+            <Dropdown buttonTitle={`Color scale`} placement={'bottom-start'}>
+                <ColorScaleSelector colorScale={colorScale} setColorScale={setColorScale} />
+            </Dropdown>
+        </div>
     );
 };

package/src/preact/components/dropdown.tsx

@@ -28,13 +28,13 @@ export const Dropdown: FunctionComponent<DropdownProps> = ({ children, buttonTit
     };
 
     return (
-        <div>
-            <button type='button' className='btn btn-xs whitespace-nowrap' onClick={toggle} ref={referenceRef}>
+        <>
+            <button type='button' className='btn btn-xs whitespace-nowrap w-full' onClick={toggle} ref={referenceRef}>
                 {buttonTitle}
             </button>
             <div ref={floatingRef} className={`${dropdownClass} ${showContent ? '' : 'hidden'}`}>
                 {children}
             </div>
-        </div>
+        </>
     );
 };

package/src/preact/components/info.tsx

@@ -16,7 +16,7 @@ const Info: FunctionComponent<InfoProps> = ({ children }) => {
                 ?
             </button>
             <dialog ref={dialogRef} className={'modal modal-bottom sm:modal-middle'}>
-                <div className='modal-box'>
+                <div className='modal-box sm:max-w-5xl'>
                     <form method='dialog'>
                         <button className='btn btn-sm btn-circle btn-ghost absolute right-2 top-2'>✕</button>
                     </form>
@@ -55,4 +55,91 @@ export const InfoLink: FunctionComponent<{ href: string }> = ({ children, href }
     );
 };
 
+export type InfoComponentCodeProps = {
+    componentName: string;
+    params: object;
+    lapisUrl: string;
+};
+
+export const InfoComponentCode: FunctionComponent<InfoComponentCodeProps> = ({ componentName, params, lapisUrl }) => {
+    const componentCode = componentParametersToCode(componentName, params, lapisUrl);
+    const codePenData = {
+        title: 'GenSpectrum dashboard component',
+        html: generateFullExampleCode(componentCode, componentName),
+        layout: 'left',
+        editors: '100',
+    };
+    return (
+        <>
+            <InfoHeadline2>Use this component yourself</InfoHeadline2>
+            <InfoParagraph>
+                This component was created using the following parameters:
+                <div className='p-4 border border-gray-200 rounded-lg overflow-x-auto'>
+                    <pre>
+                        <code>{componentCode}</code>
+                    </pre>
+                </div>
+            </InfoParagraph>
+            <InfoParagraph>
+                You can add this component to your own website using the{' '}
+                <InfoLink href='https://github.com/GenSpectrum/dashboard-components'>
+                    GenSpectrum dashboard components library
+                </InfoLink>{' '}
+                and the code from above.
+            </InfoParagraph>
+            <InfoParagraph>
+                <form action='https://codepen.io/pen/define' method='POST' target='_blank'>
+                    <input
+                        type='hidden'
+                        name='data'
+                        value={JSON.stringify(codePenData).replace(/"/g, '&quot;').replace(/'/g, '&apos;')}
+                    />
+
+                    <button className='text-blue-600 hover:text-blue-800' type='submit'>
+                        Click here to try it out on CodePen.
+                    </button>
+                </form>
+            </InfoParagraph>
+        </>
+    );
+};
+
 export default Info;
+
+function componentParametersToCode(componentName: string, params: object, lapisUrl: string) {
+    const stringifyIfNeeded = (value: unknown) => {
+        return typeof value === 'object' ? JSON.stringify(value) : value;
+    };
+
+    const attributes = indentLines(
+        Object.entries(params)
+            .map(([key, value]) => `${key}='${stringifyIfNeeded(value)}'`)
+            .join('\n'),
+        4,
+    );
+    return `<gs-app lapis="${lapisUrl}">\n  <gs-${componentName}\n${attributes}\n  />\n</gs-app>`;
+}
+
+function generateFullExampleCode(componentCode: string, componentName: string) {
+    const storyBookPath = `/docs/visualization-${componentName}--docs`;
+    return `<html>
+<head>
+  <script type="module" src="https://unpkg.com/@genspectrum/dashboard-components@latest/dist/dashboard-components.js"></script>
+  <link rel="stylesheet" href="https://unpkg.com/@genspectrum/dashboard-components@latest/dist/style.css" />
+</head>
+
+<body>
+  <!-- Component documentation: https://genspectrum.github.io/dashboard-components/?path=${storyBookPath} -->
+${indentLines(componentCode, 2)}
+</body>
+</html>
+`;
+}
+
+function indentLines(text: string, numberSpaces: number) {
+    const spaces = ' '.repeat(numberSpaces);
+    return text
+        .split('\n')
+        .map((line) => spaces + line)
+        .join('\n');
+}