@genspectrum/dashboard-components 0.11.4 → 0.11.5

package/dist/style.css

@@ -3155,9 +3155,6 @@ input.tab:checked + .tab-content,
 .cursor-pointer {
   cursor: pointer;
 }
-.resize {
-  resize: both;
-}
 .list-inside {
   list-style-position: inside;
 }
@@ -3194,8 +3191,8 @@ input.tab:checked + .tab-content,
 .gap-y-1 {
   row-gap: 0.25rem;
 }
-.overflow-auto {
-  overflow: auto;
+.overflow-scroll {
+  overflow: scroll;
 }
 .overflow-x-auto {
   overflow-x: auto;

package/dist/util.d.ts

@@ -787,7 +787,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -795,7 +795,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -803,7 +803,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-mutations-component': MutationsComponent;
     }
 }
 
@@ -811,7 +811,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -819,7 +819,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -827,7 +827,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -835,7 +835,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -843,7 +843,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -851,7 +851,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -859,7 +859,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -867,7 +867,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -875,7 +875,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -883,7 +883,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -891,7 +891,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -899,7 +899,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -907,7 +907,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.11.4",
+    "version": "0.11.5",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",

package/src/preact/components/tabs.tsx

@@ -1,5 +1,5 @@
-import { Fragment, type FunctionComponent } from 'preact';
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { type FunctionComponent } from 'preact';
+import { useState } from 'preact/hooks';
 import { type JSXInternal } from 'preact/src/jsx';
 
 type Tab = {
@@ -14,43 +14,24 @@ interface ComponentTabsProps {
 
 const Tabs: FunctionComponent<ComponentTabsProps> = ({ tabs, toolbar }) => {
     const [activeTab, setActiveTab] = useState(tabs[0]?.title);
-    const [heightOfTabs, setHeightOfTabs] = useState('3rem');
-    const tabRef = useRef<HTMLDivElement>(null);
-
-    const updateHeightOfTabs = () => {
-        if (tabRef.current) {
-            const heightOfTabs = tabRef.current.getBoundingClientRect().height;
-            setHeightOfTabs(`${heightOfTabs}px`);
-        }
-    };
-
-    useEffect(() => {
-        updateHeightOfTabs();
-
-        window.addEventListener('resize', updateHeightOfTabs);
-        return () => {
-            window.removeEventListener('resize', updateHeightOfTabs);
-        };
-    }, []);
 
     const tabElements = (
         <div className='flex flex-row'>
             {tabs.map((tab) => {
                 return (
-                    <Fragment key={tab.title}>
-                        <button
-                            className={`px-4 py-2 text-sm font-medium leading-5 transition-colors duration-150 ${
-                                activeTab === tab.title
-                                    ? 'border-b-2 border-gray-400'
-                                    : 'text-gray-600 hover:bg-gray-100 hover:text-gray-700'
-                            }`}
-                            onClick={() => {
-                                setActiveTab(tab.title);
-                            }}
-                        >
-                            {tab.title}
-                        </button>
-                    </Fragment>
+                    <button
+                        key={tab.title}
+                        className={`px-4 py-2 text-sm font-medium leading-5 transition-colors duration-150 ${
+                            activeTab === tab.title
+                                ? 'border-b-2 border-gray-400'
+                                : 'text-gray-600 hover:bg-gray-100 hover:text-gray-700'
+                        }`}
+                        onClick={() => {
+                            setActiveTab(tab.title);
+                        }}
+                    >
+                        {tab.title}
+                    </button>
                 );
             })}
         </div>
@@ -59,17 +40,16 @@ const Tabs: FunctionComponent<ComponentTabsProps> = ({ tabs, toolbar }) => {
     const toolbarElement = typeof toolbar === 'function' ? toolbar(activeTab) : toolbar;
 
     return (
-        <div className='h-full w-full'>
-            <div ref={tabRef} className='flex flex-row justify-between flex-wrap'>
+        <div className='h-full w-full flex flex-col'>
+            <div className='flex flex-row justify-between flex-wrap'>
                 {tabElements}
                 {toolbar && <div className='py-2 flex flex-wrap gap-y-1'>{toolbarElement}</div>}
             </div>
             <div
-                className={`p-2 border-2 border-gray-100 rounded-b-md rounded-tr-md ${activeTab === tabs[0]?.title ? '' : 'rounded-tl-md'}`}
-                style={{ height: `calc(100% - ${heightOfTabs})` }}
+                className={`p-2 flex-grow overflow-scroll border-2 border-gray-100 rounded-b-md rounded-tr-md ${activeTab === tabs[0]?.title ? '' : 'rounded-tl-md'}`}
             >
                 {tabs.map((tab) => (
-                    <div className='h-full overflow-auto' key={tab.title} hidden={activeTab !== tab.title}>
+                    <div className='h-full' key={tab.title} hidden={activeTab !== tab.title}>
                         {tab.content}
                     </div>
                 ))}

package/src/utils/temporal.spec.ts

@@ -68,15 +68,69 @@ describe('YearMonthDay', () => {
 });
 
 describe('YearWeek', () => {
-    it('should parse from string', () => {
-        const underTest = YearWeekClass.parse('2020-W02', cache);
+    const examples = [
+        {
+            string: '2020-W01',
+            expectedYear: 2020,
+            expectedWeek: 1,
+            expectedFirstDay: '2019-12-30',
+            expectedLastDay: '2020-01-05',
+            expectedText: '2020-W01',
+        },
+        {
+            string: '2020-W53',
+            expectedYear: 2020,
+            expectedWeek: 53,
+            expectedFirstDay: '2020-12-28',
+            expectedLastDay: '2021-01-03',
+            expectedText: '2020-W53',
+        },
+        {
+            string: '2021-W01',
+            expectedYear: 2021,
+            expectedWeek: 1,
+            expectedFirstDay: '2021-01-04',
+            expectedLastDay: '2021-01-10',
+            expectedText: '2021-W01',
+        },
+        {
+            string: '2021-W53',
+            expectedYear: 2021,
+            expectedWeek: 53,
+            expectedFirstDay: '2022-01-03',
+            expectedLastDay: '2022-01-09',
+            expectedText: '2022-W01',
+        },
+        {
+            string: '2022-W01',
+            expectedYear: 2022,
+            expectedWeek: 1,
+            expectedFirstDay: '2022-01-03',
+            expectedLastDay: '2022-01-09',
+            expectedText: '2022-W01',
+        },
+        {
+            string: '2024-W01',
+            expectedYear: 2024,
+            expectedWeek: 1,
+            expectedFirstDay: '2024-01-01',
+            expectedLastDay: '2024-01-07',
+            expectedText: '2024-W01',
+        },
+    ];
 
-        expect(underTest.isoYearNumber).equal(2020);
-        expect(underTest.isoWeekNumber).equal(2);
-        expect(underTest.firstDay.text).equal('2020-01-06');
-        expect(underTest.text).equal('2020-W02');
-        expect(underTest.lastDay.text).equal('2020-01-12');
-    });
+    for (const example of examples) {
+        const { string, expectedYear, expectedWeek, expectedFirstDay, expectedLastDay, expectedText } = example;
+        it(`should parse ${string} from string`, () => {
+            const underTest = YearWeekClass.parse(string, cache);
+
+            expect(underTest.isoYearNumber).equal(expectedYear);
+            expect(underTest.isoWeekNumber).equal(expectedWeek);
+            expect(underTest.firstDay.text).equal(expectedFirstDay);
+            expect(underTest.text).equal(expectedText);
+            expect(underTest.lastDay.text).equal(expectedLastDay);
+        });
+    }
 });
 
 describe('YearMonth', () => {

package/src/utils/temporalClass.ts

@@ -171,14 +171,7 @@ export class YearWeekClass implements YearWeek {
     }
 
     get lastDay(): YearMonthDayClass {
-        const firstDay = dayjs()
-            .year(this.isoYearNumber)
-            .startOf('year')
-            .add((this.isoWeekNumber - 1) * 7, 'day')
-            .startOf('week')
-            .add(1, 'day');
-        const lastDay = firstDay.add(6, 'day');
-
+        const lastDay = this.firstDay.dayjs.add(6, 'days');
         return this.cache.getYearMonthDay(lastDay.format('YYYY-MM-DD'));
     }