-
Notifications
You must be signed in to change notification settings - Fork 61
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
32fd71f
commit 200432d
Showing
10 changed files
with
334 additions
and
404 deletions.
There are no files selected for viewing
58 changes: 58 additions & 0 deletions
58
packages_rs/nextclade-web/src/components/Main/ButtonChangeDataset.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import { isNil } from 'lodash' | ||
| import React, { useMemo } from 'react' | ||
| import { Button, ButtonProps } from 'reactstrap' | ||
| import styled from 'styled-components' | ||
| import { useRecoilValue } from 'recoil' | ||
| import { useTranslationSafe } from 'src/helpers/useTranslationSafe' | ||
| import { datasetCurrentAtom } from 'src/state/dataset.state' | ||
|
|
||
| export interface DatasetNoneSectionProps { | ||
| toDatasetSelection(): void | ||
| } | ||
|
|
||
| export function DatasetNoneSection({ toDatasetSelection }: DatasetNoneSectionProps) { | ||
| return ( | ||
| <Container> | ||
| <ButtonChangeDataset onClick={toDatasetSelection} /> | ||
| </Container> | ||
| ) | ||
| } | ||
|
|
||
| const Container = styled.div` | ||
| display: flex; | ||
| flex: 1; | ||
| flex-direction: column; | ||
| overflow: hidden; | ||
| padding: 12px; | ||
| border: 1px #ccc9 solid; | ||
| border-radius: 5px; | ||
| max-width: 100%; | ||
| height: 110px; | ||
| ` | ||
|
|
||
| export interface ChangeDatasetButtonProps extends ButtonProps { | ||
| onClick(): void | ||
| } | ||
|
|
||
| export function ButtonChangeDataset({ onClick, ...restProps }: ChangeDatasetButtonProps) { | ||
| const { t } = useTranslationSafe() | ||
| const dataset = useRecoilValue(datasetCurrentAtom) | ||
|
|
||
| const { color, text, tooltip } = useMemo(() => { | ||
| const hasDataset = !isNil(dataset) | ||
| const text = hasDataset ? t('Change dataset') : t('Select dataset') | ||
| return { | ||
| color: hasDataset ? 'secondary' : 'primary', | ||
| text, | ||
| tooltip: text, | ||
| } | ||
| }, [dataset, t]) | ||
|
|
||
| return ( | ||
| <Button className="m-auto" color={color} title={tooltip} onClick={onClick} {...restProps}> | ||
| {text} | ||
| </Button> | ||
| ) | ||
| } |
39 changes: 39 additions & 0 deletions
39
packages_rs/nextclade-web/src/components/Main/ButtonRun.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import React, { useMemo } from 'react' | ||
| import { Button, ButtonProps } from 'reactstrap' | ||
| import { useRecoilValue } from 'recoil' | ||
| import { useTranslationSafe } from 'src/helpers/useTranslationSafe' | ||
| import { hasInputErrorsAtom } from 'src/state/error.state' | ||
| import { hasRequiredInputsAtom } from 'src/state/inputs.state' | ||
| import { canRunAtom } from 'src/state/results.state' | ||
| import styled from 'styled-components' | ||
|
|
||
| export interface ButtonRunProps extends ButtonProps { | ||
| onClick(): void | ||
| } | ||
|
|
||
| export function ButtonRun({ onClick, ...restProps }: ButtonRunProps) { | ||
| const canRun = useRecoilValue(canRunAtom) | ||
| const hasRequiredInputs = useRecoilValue(hasRequiredInputsAtom) | ||
| const hasInputErrors = useRecoilValue(hasInputErrorsAtom) | ||
|
|
||
| const { t } = useTranslationSafe() | ||
| const { isDisabled, color, tooltip } = useMemo(() => { | ||
| const isDisabled = !(canRun && hasRequiredInputs) || hasInputErrors | ||
| return { | ||
| isDisabled, | ||
| color: isDisabled ? 'secondary' : 'success', | ||
| tooltip: isDisabled ? t('Please provide sequence data first') : t('Launch the algorithm!'), | ||
| } | ||
| }, [canRun, hasInputErrors, hasRequiredInputs, t]) | ||
|
|
||
| return ( | ||
| <ButtonStyled disabled={isDisabled} color={color} onClick={onClick} title={tooltip} {...restProps}> | ||
| {t('Run')} | ||
| </ButtonStyled> | ||
| ) | ||
| } | ||
|
|
||
| const ButtonStyled = styled(Button)` | ||
| min-width: 150px; | ||
| min-height: 45px; | ||
| ` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
65 changes: 65 additions & 0 deletions
65
packages_rs/nextclade-web/src/components/Main/DatasetCurrentSummary.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import React from 'react' | ||
| import { Col, Row } from 'reactstrap' | ||
| import { useRecoilValue } from 'recoil' | ||
| import { ButtonChangeDataset } from 'src/components/Main/ButtonChangeDataset' | ||
| import { ButtonRun } from 'src/components/Main/ButtonRun' | ||
| import { useRunAnalysis } from 'src/hooks/useRunAnalysis' | ||
| import { useUpdatedDataset } from 'src/io/fetchDatasets' | ||
| import { datasetCurrentAtom } from 'src/state/dataset.state' | ||
| import { DatasetCurrentUpdateNotification } from 'src/components/Main/DatasetCurrentUpdateNotification' | ||
| import { DatasetInfo } from 'src/components/Main/DatasetInfo' | ||
| import styled from 'styled-components' | ||
|
|
||
| export interface DatasetCurrentSummaryProps { | ||
| toDatasetSelection(): void | ||
| } | ||
|
|
||
| export function DatasetCurrentSummary({ toDatasetSelection }: DatasetCurrentSummaryProps) { | ||
| // Periodically checks if there's local update for the current dataset | ||
| useUpdatedDataset() | ||
|
|
||
| const dataset = useRecoilValue(datasetCurrentAtom) | ||
| const run = useRunAnalysis() | ||
|
|
||
| if (!dataset) { | ||
| return null | ||
| } | ||
|
|
||
| return ( | ||
| <Container> | ||
| <DatasetCurrentUpdateNotification /> | ||
|
|
||
| <Row noGutters className="w-100"> | ||
| <Col className="d-flex"> | ||
| <FlexLeft> | ||
| <DatasetInfo dataset={dataset} /> | ||
| </FlexLeft> | ||
|
|
||
| <FlexRight> | ||
| <div className="d-flex flex-column"> | ||
| <ButtonChangeDataset className="mb-2" onClick={toDatasetSelection} /> | ||
| <ButtonRun onClick={run} /> | ||
| </div> | ||
| </FlexRight> | ||
| </Col> | ||
| </Row> | ||
| </Container> | ||
| ) | ||
| } | ||
|
|
||
| const Container = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| padding: 12px; | ||
| border: 1px #ccc9 solid; | ||
| border-radius: 5px; | ||
| margin: 0.5rem auto; | ||
| ` | ||
|
|
||
| const FlexLeft = styled.div` | ||
| flex: 1; | ||
| ` | ||
|
|
||
| const FlexRight = styled.div` | ||
| margin-left: 1rem; | ||
| ` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.