Skip to content

Commit

Permalink
feat(web): adjust styling and title of "open tree" and "load example"…
Browse files Browse the repository at this point in the history
… buttons
  • Loading branch information
ivan-aksamentov committed Nov 1, 2024
1 parent 0d41f01 commit c530e7b
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 7 deletions.
29 changes: 24 additions & 5 deletions packages/nextclade-web/src/components/Main/ButtonLoadExample.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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>
)
Expand All @@ -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;
`
24 changes: 22 additions & 2 deletions packages/nextclade-web/src/components/Main/LinkOpenTree.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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')}
Expand All @@ -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;
`

0 comments on commit c530e7b

Please sign in to comment.