From 3b70426d4acb3a73c5c417d588f90ea89bab2d80 Mon Sep 17 00:00:00 2001 From: Fran McDade Date: Tue, 5 Nov 2024 18:06:05 +1000 Subject: [PATCH] feat: update "organisms" list action ui (#149) --- .../components/SectionHero/constants.ts | 7 ++ .../components/SectionHero/sectionHero.tsx | 7 +- .../AnalyzeGenome/analyzeGenome.styles.ts | 8 -- .../AnalyzeGenome/analyzeGenome.tsx | 113 ++++++++---------- .../AnalyzeGenome/common/constants.ts | 20 ---- .../components/AnalyzeGenome/constants.ts | 18 +++ .../components/AnalyzeGenome/types.ts | 9 ++ app/theme/common/components.ts | 42 ++++--- app/theme/common/palette.ts | 21 ++-- app/theme/theme.ts | 8 +- .../brc-analytics-catalog/common/constants.ts | 1 + .../common/viewModelBuilders.ts | 33 +++-- site-config/brc-analytics/local/config.ts | 7 +- .../local/index/genomeEntityConfig.ts | 4 +- types/theme.d.ts | 33 ----- 15 files changed, 151 insertions(+), 180 deletions(-) create mode 100644 app/components/Home/components/Section/components/SectionHero/constants.ts delete mode 100644 app/components/Table/components/TableCell/components/AnalyzeGenome/analyzeGenome.styles.ts delete mode 100644 app/components/Table/components/TableCell/components/AnalyzeGenome/common/constants.ts create mode 100644 app/components/Table/components/TableCell/components/AnalyzeGenome/constants.ts create mode 100644 app/components/Table/components/TableCell/components/AnalyzeGenome/types.ts delete mode 100644 types/theme.d.ts diff --git a/app/components/Home/components/Section/components/SectionHero/constants.ts b/app/components/Home/components/Section/components/SectionHero/constants.ts new file mode 100644 index 0000000..aaf1fe1 --- /dev/null +++ b/app/components/Home/components/Section/components/SectionHero/constants.ts @@ -0,0 +1,7 @@ +import { ButtonProps } from "@mui/material"; + +export const BUTTON_PROPS: Partial = { + color: "primary", + size: "large", + variant: "contained", +}; diff --git a/app/components/Home/components/Section/components/SectionHero/sectionHero.tsx b/app/components/Home/components/Section/components/SectionHero/sectionHero.tsx index 8cb8635..0069043 100644 --- a/app/components/Home/components/Section/components/SectionHero/sectionHero.tsx +++ b/app/components/Home/components/Section/components/SectionHero/sectionHero.tsx @@ -4,6 +4,7 @@ import { ROUTES } from "../../../../../../../routes/constants"; import { calculateGridSize } from "../../../../../Layout/components/Hero/common/utils"; import { Carousel } from "./components/Carousel/carousel"; import { Hero } from "./components/Hero/hero"; +import { BUTTON_PROPS } from "./constants"; import { Head, Headline, @@ -31,11 +32,7 @@ export const SectionHero = (): JSX.Element => { annotations and functional insights into disease-causing organisms and their carriers - diff --git a/app/components/Table/components/TableCell/components/AnalyzeGenome/analyzeGenome.styles.ts b/app/components/Table/components/TableCell/components/AnalyzeGenome/analyzeGenome.styles.ts deleted file mode 100644 index 6df771f..0000000 --- a/app/components/Table/components/TableCell/components/AnalyzeGenome/analyzeGenome.styles.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { ButtonGroup } from "@databiosphere/findable-ui/lib/components/common/ButtonGroup/buttonGroup"; -import styled from "@emotion/styled"; - -export const StyledButtonGroup = styled(ButtonGroup)` - .MuiButton-sizeSmall { - padding: 8px; - } -`; diff --git a/app/components/Table/components/TableCell/components/AnalyzeGenome/analyzeGenome.tsx b/app/components/Table/components/TableCell/components/AnalyzeGenome/analyzeGenome.tsx index 9b8ca19..41def85 100644 --- a/app/components/Table/components/TableCell/components/AnalyzeGenome/analyzeGenome.tsx +++ b/app/components/Table/components/TableCell/components/AnalyzeGenome/analyzeGenome.tsx @@ -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 ( - - - , - - - , - - - , - ]} - /> + + + + {({ closeMenu }): JSX.Element[] => + views.map((view, i) => ( + { + closeMenu(); + window.open( + view.url, + ANCHOR_TARGET.BLANK, + REL_ATTRIBUTE.NO_OPENER_NO_REFERRER + ); + }} + > + {view.label} + + )) + } + + ); }; + +/** + * Render the dropdown button. + * @param props - Button props e.g. "onClick". + * @returns button element. + */ +function renderButton(props: DropdownMenuButtonProps): JSX.Element { + return View; +} diff --git a/app/components/Table/components/TableCell/components/AnalyzeGenome/common/constants.ts b/app/components/Table/components/TableCell/components/AnalyzeGenome/common/constants.ts deleted file mode 100644 index 07f269a..0000000 --- a/app/components/Table/components/TableCell/components/AnalyzeGenome/common/constants.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { CustomSVGIconProps } from "@databiosphere/findable-ui/lib/components/common/CustomIcon/common/entities"; -import { - ButtonProps, - ButtonGroupProps as MButtonGroupProps, -} from "@mui/material"; - -export const BUTTON_PROPS: Partial = { - color: "secondary", - variant: "contained", -}; - -export const BUTTON_GROUP_PROPS: Partial = { - color: "secondary", - variant: "outlined", -}; - -export const ICON_PROPS: Partial = { - color: "inkLight", - fontSize: "small", -}; diff --git a/app/components/Table/components/TableCell/components/AnalyzeGenome/constants.ts b/app/components/Table/components/TableCell/components/AnalyzeGenome/constants.ts new file mode 100644 index 0000000..8a28f5f --- /dev/null +++ b/app/components/Table/components/TableCell/components/AnalyzeGenome/constants.ts @@ -0,0 +1,18 @@ +import { ButtonOwnProps, Grid2Props, MenuProps } from "@mui/material"; + +export const BUTTON_PROPS: Partial = { + color: "primary", + variant: "contained", +}; + +export const GRID2_PROPS: Partial = { + container: true, + direction: "row", + spacing: 2, + wrap: "nowrap", +}; + +export const MENU_PROPS: Partial = { + anchorOrigin: { horizontal: "left", vertical: "bottom" }, + transformOrigin: { horizontal: "left", vertical: "top" }, +}; diff --git a/app/components/Table/components/TableCell/components/AnalyzeGenome/types.ts b/app/components/Table/components/TableCell/components/AnalyzeGenome/types.ts new file mode 100644 index 0000000..f4e3503 --- /dev/null +++ b/app/components/Table/components/TableCell/components/AnalyzeGenome/types.ts @@ -0,0 +1,9 @@ +export interface ActionItem { + label: string; + url: string; +} + +export interface AnalyzeGenomeProps { + analyze: ActionItem; + views: ActionItem[]; +} diff --git a/app/theme/common/components.ts b/app/theme/common/components.ts index 91de79d..ba3bd06 100644 --- a/app/theme/common/components.ts +++ b/app/theme/common/components.ts @@ -4,28 +4,38 @@ import { Components, Theme } from "@mui/material"; /** * MuiButton Component - * @param theme - Theme. * @returns MuiButton component theme styles. */ -export const MuiButton = (theme: Theme): Components["MuiButton"] => { - return { - styleOverrides: { - containedHero: { +export const MuiButton: Components["MuiButton"] = { + styleOverrides: { + containedPrimary: { + boxShadow: `0px 1px 0px 0px rgba(0, 0, 0, 0.08), 0px -1px 0px 0px rgba(0, 0, 0, 0.20) inset`, + // eslint-disable-next-line sort-keys -- disabling key order for readability + "&:hover": { + boxShadow: `0px 1px 0px 0px rgba(0, 0, 0, 0.08), 0px -1px 0px 0px rgba(0, 0, 0, 0.20) inset`, + }, + // eslint-disable-next-line sort-keys -- disabling key order for readability + "&.Mui-disabled": { boxShadow: `0px 1px 0px 0px rgba(0, 0, 0, 0.08), 0px -1px 0px 0px rgba(0, 0, 0, 0.20) inset`, - color: theme.palette.common.white, - // eslint-disable-next-line sort-keys -- disabling key order for readability - "&:hover": { - backgroundColor: theme.palette.hero.main, - boxShadow: `0px 1px 0px 0px rgba(0, 0, 0, 0.08), 0px -1px 0px 0px rgba(0, 0, 0, 0.20) inset`, + }, + }, + root: { + variants: [ + { + props: { size: "large" }, + style: { + padding: "10px 16px", + }, }, - // eslint-disable-next-line sort-keys -- disabling key order for readability - "&:active": { - backgroundColor: theme.palette.hero.main, - boxShadow: "none", + { + props: { size: "medium" }, + style: { + padding: "8px 16px", + }, }, - }, + ], }, - }; + }, }; export const MuiButtonGroup = (theme: Theme): Components["MuiButtonGroup"] => { diff --git a/app/theme/common/palette.ts b/app/theme/common/palette.ts index 757012b..8ac328c 100644 --- a/app/theme/common/palette.ts +++ b/app/theme/common/palette.ts @@ -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, }; diff --git a/app/theme/theme.ts b/app/theme/theme.ts index afca5b3..197ad51 100644 --- a/app/theme/theme.ts +++ b/app/theme/theme.ts @@ -2,6 +2,7 @@ import { createAppTheme } from "@databiosphere/findable-ui/lib/theme/theme"; import { createTheme, Theme, ThemeOptions } from "@mui/material"; import { deepmerge } from "@mui/utils"; import * as C from "./common/components"; +import { primary } from "./common/palette"; /** * Returns BRC customized theme. @@ -14,13 +15,16 @@ export function mergeAppTheme( themeOptions?: ThemeOptions ): Theme { // Merge custom options (palette, shadows, typography). - const customOptions = deepmerge(baseThemeOptions, { ...themeOptions }); + const customOptions = deepmerge(baseThemeOptions, { + ...themeOptions, + palette: { ...themeOptions?.palette, primary }, + }); // Create base app theme with custom options. const baseAppTheme = createAppTheme(customOptions); // Merge app components with base app theme. const appTheme = createTheme(baseAppTheme, { components: { - MuiButton: C.MuiButton(baseAppTheme), + MuiButton: C.MuiButton, MuiButtonGroup: C.MuiButtonGroup(baseAppTheme), MuiCssBaseline: C.MuiCssBaseline(baseAppTheme), }, diff --git a/app/viewModelBuilders/catalog/brc-analytics-catalog/common/constants.ts b/app/viewModelBuilders/catalog/brc-analytics-catalog/common/constants.ts index 8874295..1ad762d 100644 --- a/app/viewModelBuilders/catalog/brc-analytics-catalog/common/constants.ts +++ b/app/viewModelBuilders/catalog/brc-analytics-catalog/common/constants.ts @@ -1 +1,2 @@ export const GENOME_BROWSER = "UCSC Genome Browser"; +export const NCBI_DATASETS_URL = "https://www.ncbi.nlm.nih.gov/datasets"; diff --git a/app/viewModelBuilders/catalog/brc-analytics-catalog/common/viewModelBuilders.ts b/app/viewModelBuilders/catalog/brc-analytics-catalog/common/viewModelBuilders.ts index e175fd8..5ad0a6b 100644 --- a/app/viewModelBuilders/catalog/brc-analytics-catalog/common/viewModelBuilders.ts +++ b/app/viewModelBuilders/catalog/brc-analytics-catalog/common/viewModelBuilders.ts @@ -12,7 +12,7 @@ import { BRCDataCatalogGenome, } from "../../../../apis/catalog/brc-analytics-catalog/common/entities"; import * as C from "../../../../components"; -import { GENOME_BROWSER } from "./constants"; +import { GENOME_BROWSER, NCBI_DATASETS_URL } from "./constants"; /** * Build props for the genome analysis cell. @@ -24,12 +24,26 @@ export const buildAnalyzeGenome = ( genome: BRCDataCatalogGenome, viewContext: ViewContext ): ComponentProps => { - const { cellContext } = viewContext; - const { row } = cellContext || {}; + const { genomeVersionAssemblyId, ncbiTaxonomyId, ucscBrowserUrl } = genome; + const rowId = viewContext.cellContext?.row?.id; return { - genomeVersionAssemblyId: genome.genomeVersionAssemblyId, - rowId: row?.id, - ucscBrowserUrl: genome.ucscBrowserUrl, + analyze: { + label: "Analyze", + url: rowId ? `${ROUTES.ORGANISMS}/${rowId}` : "", + }, + views: [ + { label: "UCSC Genome Browser", url: ucscBrowserUrl }, + { + label: "NCBI Genome Assembly", + url: `${NCBI_DATASETS_URL}/genome/${genomeVersionAssemblyId}`, + }, + { + label: "NCBI Taxonomy", + url: `${NCBI_DATASETS_URL}/taxonomy/${encodeURIComponent( + ncbiTaxonomyId + )}`, + }, + ], }; }; @@ -198,12 +212,9 @@ export const buildOrganismListHero = (): ComponentProps< */ export const buildSpecies = ( genome: BRCDataCatalogGenome -): ComponentProps => { +): ComponentProps => { return { - label: genome.species, - url: `https://www.ncbi.nlm.nih.gov/datasets/taxonomy/${encodeURIComponent( - genome.ncbiTaxonomyId - )}/`, + value: genome.species, }; }; diff --git a/site-config/brc-analytics/local/config.ts b/site-config/brc-analytics/local/config.ts index 1195212..114f293 100644 --- a/site-config/brc-analytics/local/config.ts +++ b/site-config/brc-analytics/local/config.ts @@ -2,7 +2,6 @@ import { SiteConfig } from "@databiosphere/findable-ui/lib/config/entities"; import { EntityConfig } from "@databiosphere/findable-ui/src/config/entities"; import { BRCDataCatalogGenome } from "../../../app/apis/catalog/brc-analytics-catalog/common/entities"; import * as C from "../../../app/components"; -import * as P from "../../../app/theme/common/palette"; import { ROUTES } from "../../../routes/constants"; import { floating } from "./floating/floating"; import { genomeEntityConfig } from "./index/genomeEntityConfig"; @@ -59,11 +58,7 @@ export function makeConfig(browserUrl: string): SiteConfig { }, }, redirectRootToPath: "/", - themeOptions: { - palette: { - hero: P.hero, - }, - }, + themeOptions: {}, }; } diff --git a/site-config/brc-analytics/local/index/genomeEntityConfig.ts b/site-config/brc-analytics/local/index/genomeEntityConfig.ts index 9bae725..63f37fa 100644 --- a/site-config/brc-analytics/local/index/genomeEntityConfig.ts +++ b/site-config/brc-analytics/local/index/genomeEntityConfig.ts @@ -82,9 +82,9 @@ export const genomeEntityConfig: BRCEntityConfig = { }, { componentConfig: { - component: C.Link, + component: C.BasicCell, viewBuilder: V.buildSpecies, - } as ComponentConfig, + } as ComponentConfig, header: BRC_DATA_CATALOG_CATEGORY_LABEL.SPECIES, id: BRC_DATA_CATALOG_CATEGORY_KEY.SPECIES, width: { max: "1fr", min: "284px" }, diff --git a/types/theme.d.ts b/types/theme.d.ts deleted file mode 100644 index 032f41d..0000000 --- a/types/theme.d.ts +++ /dev/null @@ -1,33 +0,0 @@ -import type {} from "@mui/material/Button"; -import { PaletteColorOptions } from "@mui/material/styles"; - -/** - * Palette definitions. - */ -declare module "@mui/material/styles/createPalette" { - interface Palette { - hero: PaletteColor; - } - - interface PaletteOptions { - hero?: PaletteColorOptions; - } -} - -/** - * Button prop options. - */ -declare module "@mui/material/Button" { - interface ButtonClasses { - containedHero: true; - } - interface ButtonPropsColorOverrides { - hero: true; - } -} - -declare module "@emotion/react" { - export interface Theme extends MTheme { - name: "EmotionTheme"; - } -}