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

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

@@ -1,6 +1,5 @@
 import { Dataset } from '_SchemaRoot'
-import { isEmpty } from 'lodash'
-import React, { useCallback } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { Button } from 'reactstrap'
 import { useRecoilValue } from 'recoil'
 import { useTranslationSafe } from 'src/helpers/useTranslationSafe'
@@ -11,6 +10,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()
@@ -45,13 +45,40 @@ export function ButtonLoadExample({ ...rest }) {
     setExampleSequences(datasetCurrent)
   }, [datasetCurrent, setExampleSequences])
 
-  if (isEmpty(datasetCurrent?.files?.examples)) {
-    return null
-  }
+  const title = useMemo(
+    () =>
+      datasetCurrent?.files?.examples
+        ? t('Load example sequence data (for demonstration)')
+        : t('There is no example data in this dataset'),
+    [datasetCurrent?.files?.examples, t],
+  )
 
   return (
-    <Button {...rest} color="link" onClick={onClick} disabled={hasInputErrors || !datasetCurrent}>
+    <ButtonStyled
+      {...rest}
+      color="link"
+      onClick={onClick}
+      title={title}
+      disabled={!datasetCurrent?.files?.examples || 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;
+
+  &:disabled {
+    text-decoration: none !important;
+    pointer-events: all !important;
+    cursor: not-allowed !important;
+    transition: none !important;
+  }
+
+  transition: none !important;
+`

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,63 @@
+import classNames from 'classnames'
+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])
+
+  const title = useMemo(
+    () =>
+      nextstrainOrgTreeUrl
+        ? t('Open reference tree for this dataset on nextstrain.org')
+        : t('There is no reference tree in this dataset'),
+    [nextstrainOrgTreeUrl, t],
+  )
+
+  return (
+    <LinkContainer className="mx-2">
+      <LinkExternalStyled
+        className={classNames(!nextstrainOrgTreeUrl && 'disabled')}
+        title={title}
+        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;
+
+  &.disabled {
+    color: #7b838a !important;
+    opacity: 0.65 !important;
+    text-decoration: none;
+    cursor: not-allowed !important;
+    transition: none !important;
+  }
+
+  transition: none !important;
+`