feat(web): add link to view reference tree on nextstrain org

Author: ivan-aksamentov

packages/nextclade-web/src/components/Main/ButtonLoadExample.tsx

@@ -3,6 +3,7 @@ import { isEmpty } from 'lodash'
 import React, { useCallback } from 'react'
 import { Button } from 'reactstrap'
 import { useRecoilValue } from 'recoil'
+import { LinkExternal } from 'src/components/Link/LinkExternal'
 import { useTranslationSafe } from 'src/helpers/useTranslationSafe'
 import { useRunSeqAutodetect } from 'src/hooks/useRunSeqAutodetect'
 import { useRunAnalysis } from 'src/hooks/useRunAnalysis'
@@ -11,6 +12,7 @@ import { datasetCurrentAtom } from 'src/state/dataset.state'
 import { hasInputErrorsAtom } from 'src/state/error.state'
 import { useQuerySeqInputs } from 'src/state/inputs.state'
 import { shouldRunAutomaticallyAtom, shouldSuggestDatasetsOnDatasetPageAtom } from 'src/state/settings.state'
+import styled from 'styled-components'
 
 export function useSetExampleSequences() {
   const { addQryInputs } = useQuerySeqInputs()
@@ -50,8 +52,16 @@ export function ButtonLoadExample({ ...rest }) {
   }
 
   return (
-    <Button {...rest} color="link" onClick={onClick} disabled={hasInputErrors || !datasetCurrent}>
+    <ButtonStyled {...rest} color="link" onClick={onClick} disabled={hasInputErrors || !datasetCurrent}>
       {t('Load example')}
-    </Button>
+    </ButtonStyled>
   )
 }
+
+const ButtonStyled = styled(Button)`
+  margin: 0 0.5rem;
+  max-width: 300px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`

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

@@ -1,7 +1,9 @@
 import React from 'react'
 import { Col, Row, Container as ContainerBase } from 'reactstrap'
 import { useRecoilValue } from 'recoil'
+import { ButtonLoadExample } from 'src/components/Main/ButtonLoadExample'
 import { ButtonRun } from 'src/components/Main/ButtonRun'
+import { LinkOpenTree } from 'src/components/Main/LinkOpenTree'
 import { useRunAnalysis } from 'src/hooks/useRunAnalysis'
 import styled from 'styled-components'
 import { useUpdatedDataset } from 'src/io/fetchDatasets'
@@ -87,6 +89,15 @@ export function DatasetCurrent() {
                 <DatasetInfo dataset={dataset} />
               </Col>
             </Row>
+
+            <Row noGutters className="d-flex w-100">
+              <Col className="d-flex">
+                <div className="d-flex ml-auto">
+                  <LinkOpenTree className="my-auto" dataset={dataset} />
+                  <ButtonLoadExample />
+                </div>
+              </Col>
+            </Row>
           </CurrentDatasetInfoBody>
         </Header>
 

packages/nextclade-web/src/components/Main/DatasetCurrentSummary.tsx

@@ -5,6 +5,7 @@ import { MdClear as IconClearBase } from 'react-icons/md'
 import { ButtonTransparent } from 'src/components/Common/ButtonTransparent'
 import { ButtonLoadExample } from 'src/components/Main/ButtonLoadExample'
 import { DatasetCustomizationsIndicatorLink } from 'src/components/Main/DatasetCustomizationIndicator'
+import { LinkOpenTree } from 'src/components/Main/LinkOpenTree'
 import { useTranslationSafe } from 'src/helpers/useTranslationSafe'
 import styled from 'styled-components'
 import { useUpdatedDataset } from 'src/io/fetchDatasets'
@@ -51,9 +52,13 @@ export function DatasetCurrentSummary() {
                 <DatasetCustomizationsIndicatorLink />
               </DatasetCustomizationWrapper>
             </Col>
-
-            <Col className="d-flex ml-auto mt-2">
-              <ButtonLoadExample className="ml-auto" />
+          </Row>
+          <Row noGutters className="d-flex w-100">
+            <Col className="d-flex">
+              <div className="d-flex ml-auto">
+                <LinkOpenTree className="my-auto" dataset={dataset} />
+                <ButtonLoadExample />
+              </div>
             </Col>
           </Row>
         </Col>

packages/nextclade-web/src/components/Main/LinkOpenTree.tsx

@@ -0,0 +1,43 @@
+import type { Dataset } from 'src/types'
+import React, { HTMLProps, useMemo } from 'react'
+import { LinkExternal } from 'src/components/Link/LinkExternal'
+import { useTranslationSafe } from 'src/helpers/useTranslationSafe'
+import styled from 'styled-components'
+import urljoin from 'url-join'
+
+export interface LinkOpenTreeProps extends HTMLProps<HTMLDivElement> {
+  dataset: Dataset
+}
+
+export function LinkOpenTree({ dataset }: LinkOpenTreeProps) {
+  const { t } = useTranslationSafe()
+  const nextstrainOrgTreeUrl = useMemo(() => {
+    if (!dataset.files?.treeJson) {
+      return undefined
+    }
+    const path = dataset.files.treeJson.replace(/^https?:\/\//, '')
+    return urljoin('https://nextstrain.org/fetch', path)
+  }, [dataset.files?.treeJson])
+  return (
+    <LinkContainer className="mx-2">
+      <LinkExternalStyled
+        disabled={!!nextstrainOrgTreeUrl}
+        title={t('Open reference tree for this dataset on nextstrain.org')}
+        href={nextstrainOrgTreeUrl}
+      >
+        {t('Open tree')}
+      </LinkExternalStyled>
+    </LinkContainer>
+  )
+}
+
+const LinkContainer = styled.div`
+  margin: auto 0;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`
+
+const LinkExternalStyled = styled(LinkExternal)`
+  white-space: nowrap;
+`