@genspectrum/dashboard-components 0.13.6 → 0.13.7

package/dist/style.css

@@ -3319,6 +3319,9 @@ input.tab:checked + .tab-content,
 .gap-y-1 {
   row-gap: 0.25rem;
 }
+.overflow-visible {
+  overflow: visible;
+}
 .overflow-scroll {
   overflow: scroll;
 }
@@ -3328,6 +3331,9 @@ input.tab:checked + .tab-content,
 .whitespace-nowrap {
   white-space: nowrap;
 }
+.text-nowrap {
+  text-wrap: nowrap;
+}
 .break-words {
   overflow-wrap: break-word;
 }
@@ -3347,9 +3353,6 @@ input.tab:checked + .tab-content,
   border-bottom-right-radius: 0.375rem;
   border-bottom-left-radius: 0.375rem;
 }
-.rounded-tl-md {
-  border-top-left-radius: 0.375rem;
-}
 .rounded-tr-md {
   border-top-right-radius: 0.375rem;
 }
@@ -3359,6 +3362,9 @@ input.tab:checked + .tab-content,
 .border-2 {
   border-width: 2px;
 }
+.border-b {
+  border-bottom-width: 1px;
+}
 .border-b-2 {
   border-bottom-width: 2px;
 }
@@ -3374,9 +3380,9 @@ input.tab:checked + .tab-content,
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
 }
-.border-gray-400 {
+.border-gray-500 {
   --tw-border-opacity: 1;
-  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
+  border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
 }
 .border-slate-500 {
   --tw-border-opacity: 1;
@@ -3477,6 +3483,9 @@ input.tab:checked + .tab-content,
 .font-medium {
   font-weight: 500;
 }
+.font-semibold {
+  font-weight: 600;
+}
 .leading-5 {
   line-height: 1.25rem;
 }
@@ -3623,6 +3632,12 @@ input.tab:checked + .tab-content,
     visibility: visible;
   }
 }
+@container (min-width: 6rem) {
+
+  .\@\[6rem\]\:visible {
+    visibility: visible;
+  }
+}
 @media (min-width: 640px) {
 
   .sm\:max-w-5xl {

package/dist/util.d.ts

@@ -822,7 +822,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-app': App;
+        'gs-app': AppComponent;
     }
 }
 
@@ -918,7 +918,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -926,7 +926,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -934,7 +934,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -942,7 +942,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -950,7 +950,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -958,7 +958,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -966,7 +966,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -974,7 +974,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1037,10 +1037,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
+        'gs-mutation-filter': MutationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-text-input-changed': TextInputChangedEvent;
+        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1048,7 +1048,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1056,10 +1056,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
+        'gs-text-input': TextInputComponent;
     }
     interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': LineageFilterChangedEvent;
+        'gs-text-input-changed': TextInputChangedEvent;
     }
 }
 
@@ -1067,7 +1067,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1075,10 +1075,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
+        'gs-lineage-filter': LineageFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+        'gs-lineage-filter-changed': LineageFilterChangedEvent;
     }
 }
 
@@ -1086,7 +1086,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

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

package/src/preact/components/tabs.tsx

@@ -23,8 +23,8 @@ const Tabs: FunctionComponent<ComponentTabsProps> = ({ tabs, toolbar }) => {
                         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'
+                                ? 'border-b-2 border-gray-500'
+                                : 'border-b border-gray-300 text-gray-600 hover:bg-gray-100 hover:text-gray-700'
                         }`}
                         onClick={() => {
                             setActiveTab(tab.title);
@@ -45,9 +45,7 @@ const Tabs: FunctionComponent<ComponentTabsProps> = ({ tabs, toolbar }) => {
                 {tabElements}
                 {toolbar && <div className='py-2 flex flex-wrap gap-y-1'>{toolbarElement}</div>}
             </div>
-            <div
-                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'}`}
-            >
+            <div className={`p-2 flex-grow overflow-scroll border-2 border-gray-100 rounded-b-md rounded-tr-md`}>
                 {tabs.map((tab) => (
                     <div className='h-full' key={tab.title} hidden={activeTab !== tab.title}>
                         {tab.content}

package/src/preact/mutationFilter/ExampleMutation.tsx

@@ -0,0 +1,68 @@
+import { useContext } from 'preact/hooks';
+import type { FC } from 'react';
+
+import { type ReferenceGenome } from '../../lapisApi/ReferenceGenome';
+import type { SequenceType } from '../../types';
+import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
+
+type ExampleMutationProps = {
+    sequenceType: SequenceType;
+    mutationType: 'substitution' | 'insertion';
+};
+
+export const ExampleMutation: FC<ExampleMutationProps> = ({ sequenceType, mutationType }) => {
+    const referenceGenome = useContext(ReferenceGenomeContext);
+
+    return <b>{getExampleMutation(referenceGenome, sequenceType, mutationType)}</b>;
+};
+
+export function getExampleMutation(
+    referenceGenome: ReferenceGenome,
+    sequenceType: SequenceType,
+    mutationType: 'substitution' | 'insertion',
+) {
+    switch (sequenceType) {
+        case 'amino acid': {
+            if (referenceGenome.genes.length === 0) {
+                return '';
+            }
+
+            const firstGene = referenceGenome.genes[0].name;
+
+            switch (mutationType) {
+                case 'substitution':
+                    return `${firstGene}:57Q`;
+                case 'insertion':
+                    return `ins_${firstGene}:31:N`;
+            }
+        }
+        // Issue of linter https://github.com/typescript-eslint/typescript-eslint/issues/3455
+        // eslint-disable-next-line no-fallthrough
+        case 'nucleotide': {
+            switch (referenceGenome.nucleotideSequences.length) {
+                case 0: {
+                    return '';
+                }
+                case 1: {
+                    switch (mutationType) {
+                        case 'substitution':
+                            return '23T';
+                        case 'insertion':
+                            return 'ins_1046:A';
+                    }
+                }
+                // Issue of linter https://github.com/typescript-eslint/typescript-eslint/issues/3455
+                // eslint-disable-next-line no-fallthrough
+                default: {
+                    const firstSegment = referenceGenome.nucleotideSequences[0].name;
+                    switch (mutationType) {
+                        case 'substitution':
+                            return `${firstSegment}:23T`;
+                        case 'insertion':
+                            return `ins_${firstSegment}:10462:A`;
+                    }
+                }
+            }
+        }
+    }
+}