feat(web): dataset selector v2 (list version)

packages_rs/nextclade-web/src/components/Main/DatasetCurrent.tsx

@@ -40,15 +40,17 @@ export const CurrentDatasetInfoBody = styled.section`
 `
 
 export const Left = styled.section`
-  flex: 1 1 auto;
+  flex: 1 0 auto;
   display: flex;
+  margin-right: 0.25rem;
 `
 
 export const Right = styled.section`
-  flex: 0 0 250px;
+  flex: 0 0 100px;
   display: flex;
   flex-direction: column;
   height: 100%;
+  margin-left: 0.25rem;
 `
 
 export const ChangeButton = styled(Button)`
@@ -59,7 +61,7 @@ export const ChangeButton = styled(Button)`
 `
 
 export const AdvancedModeExplanationWrapper = styled.div`
-  max-width: 550px;
+  //max-width: 550px;
   margin-top: 0.5rem;
 
   > p {

packages_rs/nextclade-web/src/components/Main/DatasetInfo.tsx

@@ -1,26 +1,34 @@
+import copy from 'fast-copy'
 import React, { useMemo } from 'react'
+import { Col, Container, Row } from 'reactstrap'
 
 import styled from 'styled-components'
 
 import type { Dataset } from 'src/algorithms/types'
 import { formatDateIsoUtcSimple } from 'src/helpers/formatDate'
 import { useTranslationSafe } from 'src/helpers/useTranslationSafe'
 
-export const DatasetinfoContainer = styled.div``
+export const DatasetInfoContainer = styled(Container)`
+  padding: 0;
+`
 
-export const DatasetName = styled.h6`
-  font-size: 1.3rem;
+export const DatasetName = styled.h5`
   font-weight: bold;
-  padding: 0;
+  padding: 0.25rem 0;
   margin: 0;
 `
 
 export const DatasetInfoLine = styled.p`
-  font-size: 0.8rem;
+  text-align: start;
+  font-size: 0.9rem;
   padding: 0;
   margin: 0;
 `
 
+export const DatasetInfoLineTitle = styled.span`
+  font-weight: bold;
+`
+
 export interface DatasetInfoProps {
   dataset: Dataset
 }
@@ -29,18 +37,76 @@ export function DatasetInfo({ dataset }: DatasetInfoProps) {
   const { t } = useTranslationSafe()
   const tagFormatted = useMemo(() => dataset && formatDateIsoUtcSimple(dataset.attributes.tag.value), [dataset])
 
-  const { name, reference } = dataset.attributes
+  const attributes = {
+    ...copy(dataset.attributes),
+    'Animal': {
+      isDefault: false,
+      value: 'unicorn',
+      valueFriendly: 'Unicorn',
+    },
+    'Color': {
+      isDefault: false,
+      value: 'rainbow-stripes',
+      valueFriendly: 'Rainbow stripes',
+    },
+    'Favourite ice cream': {
+      isDefault: false,
+      value: 'strawberry-banana',
+      valueFriendly: 'Strawberry & banana',
+    },
+    'Has Magic': {
+      isDefault: false,
+      value: 'yes',
+      valueFriendly: 'Yes',
+    },
+  }
+
+  const { name, reference } = attributes
+
+  const attrComponents = useMemo(
+    () =>
+      Object.entries(attributes)
+        .filter(([key]) => !['name', 'reference', 'tag'].includes(key))
+        .map(([key, val]) => (
+          <DatasetInfoLine key={key}>
+            <DatasetInfoLineTitle>{`${key}: `}</DatasetInfoLineTitle>
+            {val.valueFriendly ?? val.value}
+          </DatasetInfoLine>
+        )),
+    [attributes],
+  )
 
   return (
-    <DatasetinfoContainer>
-      <DatasetName>{name.valueFriendly ?? name.value}</DatasetName>
-      <DatasetInfoLine>
-        {t('Reference: {{ name }} ({{ accession }})', {
-          name: reference.valueFriendly ?? 'Untitled',
-          accession: reference.value,
-        })}
-      </DatasetInfoLine>
-      <DatasetInfoLine>{t('Updated: {{updated}}', { updated: tagFormatted })}</DatasetInfoLine>
-    </DatasetinfoContainer>
+    <DatasetInfoContainer>
+      <Row noGutters>
+        <Col>
+          <DatasetName>{name.valueFriendly ?? name.value}</DatasetName>
+        </Col>
+      </Row>
+
+      <Row noGutters>
+        <Col md={8}>
+          <div className="mr-2">
+            <DatasetInfoLine>
+              <DatasetInfoLineTitle>{t('Reference: ')}</DatasetInfoLineTitle>
+
+              {t('{{ name }} ({{ accession }})', {
+                name: reference.valueFriendly ?? 'Untitled',
+                accession: reference.value,
+              })}
+            </DatasetInfoLine>
+            <DatasetInfoLine>
+              <DatasetInfoLineTitle>{t('Last update: ')}</DatasetInfoLineTitle>
+              {t('{{updated}}', { updated: tagFormatted })}
+            </DatasetInfoLine>
+            <DatasetInfoLine>
+              <DatasetInfoLineTitle>{t('Last changes: ')}</DatasetInfoLineTitle>
+              {t('{{changes}}', { changes: dataset.comment })}
+            </DatasetInfoLine>
+          </div>
+        </Col>
+        <Col md={4}>{attrComponents}</Col>
+      </Row>
+    </DatasetInfoContainer>
   )
 }

packages_rs/nextclade-web/src/components/Main/DatasetSelector.tsx

@@ -27,7 +27,7 @@ const DatasetSelectorTitle = styled.h4`
 const DatasetSelectorListContainer = styled.section`
   display: flex;
   width: 100%;
-  height: 300px;
+  height: 500px;
 `
 
 const SpinnerWrapper = styled.div<HTMLProps<HTMLDivElement>>`

packages_rs/nextclade-web/src/components/Main/DatasetSelectorList.tsx

@@ -20,17 +20,6 @@ export const DatasetSelectorContainer = styled.div`
 export const DatasetSelectorUl = styled(ListGroup)`
   flex: 1;
   overflow-y: scroll;
-
-  // prettier-ignore
-  background:
-    linear-gradient(#eaeaea 25%, rgba(255,255,255, 0)),
-    linear-gradient(rgba(255,255,255, 0), #eaeaea 90%) 0 100%,
-    radial-gradient(farthest-side at 50% 0, rgba(100,100,100, 0.25), rgba(0,0,0,0)),
-    radial-gradient(farthest-side at 50% 100%, rgba(100,100,100, 0.25), rgba(0,0,0,0)) 0 100%;
-  background-color: transparent;
-  background-repeat: no-repeat;
-  background-attachment: local, local, scroll, scroll;
-  background-size: 100% 70px, 100% 70px, 100% 30px, 100% 30px;
 `
 
 export const DatasetSelectorLi = styled(ListGroupItem)<{ $isDimmed?: boolean }>`

packages_rs/nextclade-web/src/components/Main/MainInputForm.tsx

@@ -18,6 +18,7 @@ export const Centered = styled.section`
   margin: auto;
 
   @media (min-width: 768px) {
+    width: 1000px;
     min-width: 600px;
   }
 
@@ -26,7 +27,7 @@ export const Centered = styled.section`
     width: 100%;
   }
 
-  max-width: 800px;
+  max-width: 1000px;
 `
 
 export function MainInputForm() {