From af37863f35cf3716941cc268e75fe90fbce42a5b Mon Sep 17 00:00:00 2001 From: ivan-aksamentov Date: Thu, 9 Jun 2022 15:03:36 +0200 Subject: [PATCH 1/2] feat(web): remove overflow gradient in dataset selector It was not functioning as expected - did not disappear fully when there is no overflow --- .../src/components/Main/DatasetSelectorList.tsx | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/packages_rs/nextclade-web/src/components/Main/DatasetSelectorList.tsx b/packages_rs/nextclade-web/src/components/Main/DatasetSelectorList.tsx index 0e9e04c3b..57fc0a44a 100644 --- a/packages_rs/nextclade-web/src/components/Main/DatasetSelectorList.tsx +++ b/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 }>` From 144e5fbaabab6657318b4a4e7c06bff2a532a843 Mon Sep 17 00:00:00 2001 From: ivan-aksamentov Date: Fri, 10 Jun 2022 04:41:26 +0200 Subject: [PATCH 2/2] feat(web): display dataset attributes in the web app --- .../src/components/Main/DatasetCurrent.tsx | 8 +- .../src/components/Main/DatasetInfo.tsx | 98 ++++++++++++++++--- .../src/components/Main/DatasetSelector.tsx | 2 +- .../src/components/Main/MainInputForm.tsx | 3 +- 4 files changed, 90 insertions(+), 21 deletions(-) diff --git a/packages_rs/nextclade-web/src/components/Main/DatasetCurrent.tsx b/packages_rs/nextclade-web/src/components/Main/DatasetCurrent.tsx index 155865d69..786d34ae1 100644 --- a/packages_rs/nextclade-web/src/components/Main/DatasetCurrent.tsx +++ b/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 { diff --git a/packages_rs/nextclade-web/src/components/Main/DatasetInfo.tsx b/packages_rs/nextclade-web/src/components/Main/DatasetInfo.tsx index 022aef894..1efc3bca8 100644 --- a/packages_rs/nextclade-web/src/components/Main/DatasetInfo.tsx +++ b/packages_rs/nextclade-web/src/components/Main/DatasetInfo.tsx @@ -1,4 +1,6 @@ +import copy from 'fast-copy' import React, { useMemo } from 'react' +import { Col, Container, Row } from 'reactstrap' import styled from 'styled-components' @@ -6,21 +8,27 @@ 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]) => ( + + {`${key}: `} + {val.valueFriendly ?? val.value} + + )), + [attributes], + ) return ( - - {name.valueFriendly ?? name.value} - - {t('Reference: {{ name }} ({{ accession }})', { - name: reference.valueFriendly ?? 'Untitled', - accession: reference.value, - })} - - {t('Updated: {{updated}}', { updated: tagFormatted })} - + + + + {name.valueFriendly ?? name.value} + + + + + +
+ + {t('Reference: ')} + + {t('{{ name }} ({{ accession }})', { + name: reference.valueFriendly ?? 'Untitled', + accession: reference.value, + })} + + + {t('Last update: ')} + {t('{{updated}}', { updated: tagFormatted })} + + + {t('Last changes: ')} + {t('{{changes}}', { changes: dataset.comment })} + +
+ + {attrComponents} + + ) } diff --git a/packages_rs/nextclade-web/src/components/Main/DatasetSelector.tsx b/packages_rs/nextclade-web/src/components/Main/DatasetSelector.tsx index dd682cb09..8d5196393 100644 --- a/packages_rs/nextclade-web/src/components/Main/DatasetSelector.tsx +++ b/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>` diff --git a/packages_rs/nextclade-web/src/components/Main/MainInputForm.tsx b/packages_rs/nextclade-web/src/components/Main/MainInputForm.tsx index 8e62de067..b8ae93c6c 100644 --- a/packages_rs/nextclade-web/src/components/Main/MainInputForm.tsx +++ b/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() {