From c530e7b07f9d1932b17b06ff47c3b06e6a3064b5 Mon Sep 17 00:00:00 2001
From: ivan-aksamentov <ivan.aksamentov@gmail.com>
Date: Fri, 1 Nov 2024 06:57:17 +0100
Subject: [PATCH] feat(web): adjust styling and title of "open tree" and "load
 example" buttons

---
 .../src/components/Main/ButtonLoadExample.tsx | 29 +++++++++++++++----
 .../src/components/Main/LinkOpenTree.tsx      | 24 +++++++++++++--
 2 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/packages/nextclade-web/src/components/Main/ButtonLoadExample.tsx b/packages/nextclade-web/src/components/Main/ButtonLoadExample.tsx
index 127fea70d..8baad1f68 100644
--- a/packages/nextclade-web/src/components/Main/ButtonLoadExample.tsx
+++ b/packages/nextclade-web/src/components/Main/ButtonLoadExample.tsx
@@ -1,6 +1,6 @@
 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'
@@ -46,12 +46,22 @@ 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 (
-    <ButtonStyled {...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')}
     </ButtonStyled>
   )
@@ -63,4 +73,13 @@ const ButtonStyled = styled(Button)`
   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;
 `
diff --git a/packages/nextclade-web/src/components/Main/LinkOpenTree.tsx b/packages/nextclade-web/src/components/Main/LinkOpenTree.tsx
index 6b9b81d68..1906ebbfb 100644
--- a/packages/nextclade-web/src/components/Main/LinkOpenTree.tsx
+++ b/packages/nextclade-web/src/components/Main/LinkOpenTree.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames'
 import type { Dataset } from 'src/types'
 import React, { HTMLProps, useMemo } from 'react'
 import { LinkExternal } from 'src/components/Link/LinkExternal'
@@ -18,11 +19,20 @@ export function LinkOpenTree({ dataset }: LinkOpenTreeProps) {
     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
-        disabled={!!nextstrainOrgTreeUrl}
-        title={t('Open reference tree for this dataset on nextstrain.org')}
+        className={classNames(!nextstrainOrgTreeUrl && 'disabled')}
+        title={title}
         href={nextstrainOrgTreeUrl}
       >
         {t('Open tree')}
@@ -40,4 +50,14 @@ const LinkContainer = styled.div`
 
 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;
 `