-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: update "organisms" list action ui (#149)
- Loading branch information
Showing
15 changed files
with
151 additions
and
180 deletions.
There are no files selected for viewing
7 changes: 7 additions & 0 deletions
7
app/components/Home/components/Section/components/SectionHero/constants.ts
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,7 @@ | ||
| import { ButtonProps } from "@mui/material"; | ||
|
|
||
| export const BUTTON_PROPS: Partial<ButtonProps> = { | ||
| color: "primary", | ||
| size: "large", | ||
| variant: "contained", | ||
| }; |
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
8 changes: 0 additions & 8 deletions
8
app/components/Table/components/TableCell/components/AnalyzeGenome/analyzeGenome.styles.ts
This file was deleted.
Oops, something went wrong.
113 changes: 47 additions & 66 deletions
113
app/components/Table/components/TableCell/components/AnalyzeGenome/analyzeGenome.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 |
|---|---|---|
| @@ -1,76 +1,57 @@ | ||
| import { DropdownButton } from "@databiosphere/findable-ui/lib/components/common/Button/components/DropdownButton/dropdownButton"; | ||
| import { DropdownMenuButtonProps } from "@databiosphere/findable-ui/lib/components/common/DropdownMenu/common/entities"; | ||
| import { DropdownMenu } from "@databiosphere/findable-ui/lib/components/common/DropdownMenu/dropdownMenu"; | ||
| import { | ||
| ANCHOR_TARGET, | ||
| REL_ATTRIBUTE, | ||
| } from "@databiosphere/findable-ui/lib/components/Links/common/entities"; | ||
| import { Button, Tooltip } from "@mui/material"; | ||
| import Router from "next/router"; | ||
| import { ROUTES } from "../../../../../../../routes/constants"; | ||
| import { AnalyzeGenomeIcon } from "../../../../../common/CustomIcon/components/AnalyzeGenomeIcon/analyzeGenomeIcon"; | ||
| import { ViewGenomeIcon } from "../../../../../common/CustomIcon/components/ViewGenomeIcon/viewGenomeIcon"; | ||
| import { StyledButtonGroup } from "./analyzeGenome.styles"; | ||
| import { | ||
| BUTTON_GROUP_PROPS, | ||
| BUTTON_PROPS, | ||
| ICON_PROPS, | ||
| } from "./common/constants"; | ||
|
|
||
| export interface AnalyzeGenomeProps { | ||
| genomeVersionAssemblyId: string; | ||
| rowId?: string; | ||
| ucscBrowserUrl: string; | ||
| } | ||
| import { Button, Grid2, MenuItem } from "@mui/material"; | ||
| import NLink from "next/link"; | ||
| import { BUTTON_PROPS, GRID2_PROPS, MENU_PROPS } from "./constants"; | ||
| import { AnalyzeGenomeProps } from "./types"; | ||
|
|
||
| export const AnalyzeGenome = ({ | ||
| genomeVersionAssemblyId, | ||
| rowId, | ||
| ucscBrowserUrl, | ||
| analyze, | ||
| views, | ||
| }: AnalyzeGenomeProps): JSX.Element => { | ||
| const onAnalyze = (rowId?: string): void => { | ||
| if (!rowId) return; | ||
| Router.push(`${ROUTES.ORGANISMS}/${rowId}`); | ||
| }; | ||
|
|
||
| const onView = (url: string | null): void => { | ||
| if (!url) return; | ||
| window.open(url, ANCHOR_TARGET.BLANK, REL_ATTRIBUTE.NO_OPENER_NO_REFERRER); | ||
| }; | ||
|
|
||
| return ( | ||
| <StyledButtonGroup | ||
| {...BUTTON_GROUP_PROPS} | ||
| Buttons={[ | ||
| <Tooltip key="analyze" title="Analyze"> | ||
| <Button | ||
| {...BUTTON_PROPS} | ||
| disabled={!rowId} | ||
| onClick={(): void => onAnalyze(rowId)} | ||
| > | ||
| <AnalyzeGenomeIcon {...ICON_PROPS} /> | ||
| </Button> | ||
| </Tooltip>, | ||
| <Tooltip key="view-browser" title="UCSC Genome Browser"> | ||
| <Button | ||
| {...BUTTON_PROPS} | ||
| disabled={!ucscBrowserUrl} | ||
| onClick={(): void => onView(ucscBrowserUrl)} | ||
| > | ||
| <ViewGenomeIcon {...ICON_PROPS} /> | ||
| </Button> | ||
| </Tooltip>, | ||
| <Tooltip key="view-datasets" title="NCBI datasets"> | ||
| <Button | ||
| {...BUTTON_PROPS} | ||
| disabled={!genomeVersionAssemblyId} | ||
| onClick={(): void => | ||
| onView( | ||
| `https://www.ncbi.nlm.nih.gov/datasets/genome/${genomeVersionAssemblyId}` | ||
| ) | ||
| } | ||
| > | ||
| NCBI | ||
| </Button> | ||
| </Tooltip>, | ||
| ]} | ||
| /> | ||
| <Grid2 {...GRID2_PROPS}> | ||
| <Button | ||
| {...BUTTON_PROPS} | ||
| component={NLink} | ||
| disabled={!analyze.url} | ||
| href={analyze.url} | ||
| > | ||
| {analyze.label} | ||
| </Button> | ||
| <DropdownMenu {...MENU_PROPS} Button={renderButton}> | ||
| {({ closeMenu }): JSX.Element[] => | ||
| views.map((view, i) => ( | ||
| <MenuItem | ||
| key={i} | ||
| onClick={(): void => { | ||
| closeMenu(); | ||
| window.open( | ||
| view.url, | ||
| ANCHOR_TARGET.BLANK, | ||
| REL_ATTRIBUTE.NO_OPENER_NO_REFERRER | ||
| ); | ||
| }} | ||
| > | ||
| {view.label} | ||
| </MenuItem> | ||
| )) | ||
| } | ||
| </DropdownMenu> | ||
| </Grid2> | ||
| ); | ||
| }; | ||
|
|
||
| /** | ||
| * Render the dropdown button. | ||
| * @param props - Button props e.g. "onClick". | ||
| * @returns button element. | ||
| */ | ||
| function renderButton(props: DropdownMenuButtonProps): JSX.Element { | ||
| return <DropdownButton {...props}>View</DropdownButton>; | ||
| } |
20 changes: 0 additions & 20 deletions
20
app/components/Table/components/TableCell/components/AnalyzeGenome/common/constants.ts
This file was deleted.
Oops, something went wrong.
18 changes: 18 additions & 0 deletions
18
app/components/Table/components/TableCell/components/AnalyzeGenome/constants.ts
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,18 @@ | ||
| import { ButtonOwnProps, Grid2Props, MenuProps } from "@mui/material"; | ||
|
|
||
| export const BUTTON_PROPS: Partial<ButtonOwnProps> = { | ||
| color: "primary", | ||
| variant: "contained", | ||
| }; | ||
|
|
||
| export const GRID2_PROPS: Partial<Grid2Props> = { | ||
| container: true, | ||
| direction: "row", | ||
| spacing: 2, | ||
| wrap: "nowrap", | ||
| }; | ||
|
|
||
| export const MENU_PROPS: Partial<MenuProps> = { | ||
| anchorOrigin: { horizontal: "left", vertical: "bottom" }, | ||
| transformOrigin: { horizontal: "left", vertical: "top" }, | ||
| }; |
9 changes: 9 additions & 0 deletions
9
app/components/Table/components/TableCell/components/AnalyzeGenome/types.ts
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,9 @@ | ||
| export interface ActionItem { | ||
| label: string; | ||
| url: string; | ||
| } | ||
|
|
||
| export interface AnalyzeGenomeProps { | ||
| analyze: ActionItem; | ||
| views: ActionItem[]; | ||
| } |
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
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 |
|---|---|---|
| @@ -1,25 +1,24 @@ | ||
| import { PaletteColor } from "@mui/material"; | ||
| import { PaletteColorOptions } from "@mui/material"; | ||
|
|
||
| /** | ||
| * Palette "Hero" | ||
| * Palette "Primary" | ||
| */ | ||
| export const HERO = { | ||
| LIGHT: "#28285B", | ||
| const PRIMARY = { | ||
| DARK: "#1F1F47", | ||
| MAIN: "#28285B", | ||
| }; | ||
|
|
||
| /** | ||
| * Color constants | ||
| */ | ||
| export const heroLight = HERO.LIGHT; | ||
| export const heroMain = HERO.MAIN; | ||
| const primaryDark = PRIMARY.DARK; | ||
| const primaryMain = PRIMARY.MAIN; | ||
|
|
||
| /** | ||
| * Palette Option "Hero" | ||
| * Palette Option "Primary" | ||
| */ | ||
| export const hero: PaletteColor = { | ||
| export const primary: PaletteColorOptions = { | ||
| contrastText: "#FFFFFF", | ||
| dark: heroMain, | ||
| light: heroLight, | ||
| main: heroMain, | ||
| dark: primaryDark, | ||
| main: primaryMain, | ||
| }; |
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
1 change: 1 addition & 0 deletions
1
app/viewModelBuilders/catalog/brc-analytics-catalog/common/constants.ts
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 |
|---|---|---|
| @@ -1 +1,2 @@ | ||
| export const GENOME_BROWSER = "UCSC Genome Browser"; | ||
| export const NCBI_DATASETS_URL = "https://www.ncbi.nlm.nih.gov/datasets"; |
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.