From 3a7d67afd079691638f60d214f2d6a5f47c42899 Mon Sep 17 00:00:00 2001 From: Patrik Smeds Date: Tue, 23 Sep 2025 08:55:26 -0400 Subject: [PATCH 1/2] feat: add organism selector to ga2 landing page --- .../Section/components/SectionViz/data.ts | 15 ++++- .../sectionAssemblies.styles.ts | 26 +++++++++ .../SectionAssemblies/sectionAssemblies.tsx | 19 +++++++ app/views/HomeView/ga2/homeView.tsx | 2 + public/logo/genomeark2.svg | 56 +++++++++++++++++++ site-config/brc-analytics/local/config.ts | 7 ++- site-config/common/entities.ts | 2 + site-config/ga2/local/config.ts | 7 ++- 8 files changed, 129 insertions(+), 5 deletions(-) create mode 100644 app/components/Home/components/Section/components/ga2/SectionAssemblies/sectionAssemblies.styles.ts create mode 100644 app/components/Home/components/Section/components/ga2/SectionAssemblies/sectionAssemblies.tsx create mode 100644 public/logo/genomeark2.svg diff --git a/app/components/Home/components/Section/components/SectionViz/data.ts b/app/components/Home/components/Section/components/SectionViz/data.ts index 5d0e6664..c8df2510 100644 --- a/app/components/Home/components/Section/components/SectionViz/data.ts +++ b/app/components/Home/components/Section/components/SectionViz/data.ts @@ -1,4 +1,4 @@ -import data from "catalog/output/ncbi-taxa-tree.json"; +import { config } from "../../../../../../../app/config/config"; /** * Interface representing a node in the NCBI taxonomy tree @@ -32,6 +32,15 @@ export interface TaxonomyNode { } export function getData(): TaxonomyNode { - // Any data massaging can be done at this extension point. - return data; + const { taxTree } = config(); + if (!taxTree) { + return { + assembly_count: 0, + children: [], + name: "root", + ncbi_tax_id: "", + }; + } + + return taxTree; } diff --git a/app/components/Home/components/Section/components/ga2/SectionAssemblies/sectionAssemblies.styles.ts b/app/components/Home/components/Section/components/ga2/SectionAssemblies/sectionAssemblies.styles.ts new file mode 100644 index 00000000..9715df1e --- /dev/null +++ b/app/components/Home/components/Section/components/ga2/SectionAssemblies/sectionAssemblies.styles.ts @@ -0,0 +1,26 @@ +import styled from "@emotion/styled"; +import { sectionLayout } from "../../../../../../Layout/components/AppLayout/components/Section/section.styles"; +import { SectionHeadline } from "../../../section.styles"; +import { PALETTE } from "@databiosphere/findable-ui/lib/styles/common/constants/palette"; + +export const Section = styled.section` + background-color: ${PALETTE.SMOKE_LIGHTEST}; + border-top: 1px solid ${PALETTE.SMOKE_MAIN}; + overflow: hidden; + width: 100%; +`; + +export const SectionLayout = styled.div` + ${sectionLayout}; + display: flex; + flex-direction: column; + gap: 48px 16px; + padding: 64px 16px; +`; + +export const Headline = styled(SectionHeadline)` + align-self: center; + grid-column: 1 / -1; + max-width: 560px; + text-align: center; +`; diff --git a/app/components/Home/components/Section/components/ga2/SectionAssemblies/sectionAssemblies.tsx b/app/components/Home/components/Section/components/ga2/SectionAssemblies/sectionAssemblies.tsx new file mode 100644 index 00000000..f0f74c0a --- /dev/null +++ b/app/components/Home/components/Section/components/ga2/SectionAssemblies/sectionAssemblies.tsx @@ -0,0 +1,19 @@ +import { SectionSubtitle, SectionTitle } from "../../../section.styles"; +import { SectionViz as Sunburst } from "../../SectionViz/sunburst"; +import { Headline, Section, SectionLayout } from "./sectionAssemblies.styles"; + +export const SectionAssemblies = (): JSX.Element => { + return ( +
+ + + Browse Assemblies + + Browse assemblies by taxonomic lineage. + + + + +
+ ); +}; diff --git a/app/views/HomeView/ga2/homeView.tsx b/app/views/HomeView/ga2/homeView.tsx index a4a7d1f3..7447618c 100644 --- a/app/views/HomeView/ga2/homeView.tsx +++ b/app/views/HomeView/ga2/homeView.tsx @@ -1,5 +1,6 @@ import { Fragment } from "react"; import { SectionHero } from "../../../components/Home/components/Section/components/ga2/SectionHero/sectionHero"; +import { SectionAssemblies } from "../../../components/Home/components/Section/components/ga2/SectionAssemblies/sectionAssemblies"; import { SectionSubHero } from "../../../components/Home/components/Section/components/ga2/SectionSubHero/sectionSubHero"; import { SectionAnalyticsAndData } from "../../../components/Home/components/Section/components/ga2/SectionAnalyticsAndData/sectionAnalyticsAndData"; import { SectionHelp } from "../../../components/Home/components/Section/components/ga2/SectionHelp/sectionHelp"; @@ -9,6 +10,7 @@ export const HomeView = (): JSX.Element => { + diff --git a/public/logo/genomeark2.svg b/public/logo/genomeark2.svg new file mode 100644 index 00000000..2c110d42 --- /dev/null +++ b/public/logo/genomeark2.svg @@ -0,0 +1,56 @@ + + + + + + + GenomeArk2 + diff --git a/site-config/brc-analytics/local/config.ts b/site-config/brc-analytics/local/config.ts index 334d78b1..09ce747a 100644 --- a/site-config/brc-analytics/local/config.ts +++ b/site-config/brc-analytics/local/config.ts @@ -15,6 +15,8 @@ import { socialMenuItems, socialMedia } from "./socialMedia"; import { FILTER_SORT } from "@databiosphere/findable-ui/lib/common/filters/sort/config/types"; import { AppSiteConfig } from "../../common/entities"; import { APP_KEYS } from "../../common/constants"; +import data from "catalog/output/ncbi-taxa-tree.json"; +import { TaxonomyNode } from "../../../app/components/Home/components/Section/components/SectionViz/data"; const LOCALHOST = "http://localhost:3000"; const APP_TITLE = "BRC Analytics"; @@ -25,6 +27,7 @@ const GIT_HUB_REPO_URL = "https://github.com/galaxyproject/brc-analytics"; * Make site config object. * @param browserUrl - Browser URL. * @param gitHubUrl - GitHub URL. + * @param taxTreeData - Taxonomy tree data. * @remarks * The `genomeEntityConfig` is typecast to `EntityConfig` * because the `SiteConfig` interface from the `@databiosphere/findable-ui` package expects @@ -38,7 +41,8 @@ const GIT_HUB_REPO_URL = "https://github.com/galaxyproject/brc-analytics"; */ export function makeConfig( browserUrl: string, - gitHubUrl = GIT_HUB_REPO_URL + gitHubUrl = GIT_HUB_REPO_URL, + taxTreeData = data as TaxonomyNode ): AppSiteConfig { return { appKey: APP_KEYS.BRC_ANALYTICS, @@ -108,6 +112,7 @@ export function makeConfig( }, }, redirectRootToPath: "/", + taxTree: taxTreeData, themeOptions: {}, }; } diff --git a/site-config/common/entities.ts b/site-config/common/entities.ts index fc002e2e..8d448270 100644 --- a/site-config/common/entities.ts +++ b/site-config/common/entities.ts @@ -6,6 +6,7 @@ import { } from "@databiosphere/findable-ui/lib/config/entities"; import { SiteConfig as BaseSiteConfig } from "@databiosphere/findable-ui/lib/config/entities"; import { APP_KEYS } from "./constants"; +import { TaxonomyNode } from "../../app/components/Home/components/Section/components/SectionViz/data"; export interface AppBackPageConfig extends Omit { @@ -25,4 +26,5 @@ export interface AppEntityConfig export interface AppSiteConfig extends BaseSiteConfig { allowedPaths?: string[]; appKey?: (typeof APP_KEYS)[keyof typeof APP_KEYS]; + taxTree?: TaxonomyNode; } diff --git a/site-config/ga2/local/config.ts b/site-config/ga2/local/config.ts index aac6711b..f3fc6e7f 100644 --- a/site-config/ga2/local/config.ts +++ b/site-config/ga2/local/config.ts @@ -10,6 +10,8 @@ import { } from "../../../app/apis/catalog/ga2/entities"; import { AppSiteConfig } from "../../common/entities"; import { APP_KEYS } from "../../common/constants"; +import data from "catalog/ga2/output/ncbi-taxa-tree.json"; +import { TaxonomyNode } from "../../../app/components/Home/components/Section/components/SectionViz/data"; const ALLOWED_PATHS = [ ROUTES.ABOUT, @@ -26,6 +28,7 @@ const GIT_HUB_REPO_URL = "https://github.com/galaxyproject/ga2"; * Make site config object. * @param browserUrl - Browser URL. * @param gitHubUrl - GitHub URL. + * @param taxTreeData - Taxonomy tree data. * @remarks * The `genomeEntityConfig` is typecast to `EntityConfig` * because the `SiteConfig` interface from the `@databiosphere/findable-ui` package expects @@ -39,7 +42,8 @@ const GIT_HUB_REPO_URL = "https://github.com/galaxyproject/ga2"; */ export function makeConfig( browserUrl: string, - gitHubUrl = GIT_HUB_REPO_URL + gitHubUrl = GIT_HUB_REPO_URL, + taxTreeData = data as TaxonomyNode ): AppSiteConfig { return { allowedPaths: ALLOWED_PATHS, @@ -78,6 +82,7 @@ export function makeConfig( }, }, redirectRootToPath: "/", + taxTree: taxTreeData, themeOptions: {}, }; } From 8e3fcdd01999724c315385dee1821618f9463b8f Mon Sep 17 00:00:00 2001 From: Patrik Smeds Date: Wed, 24 Sep 2025 09:18:12 -0400 Subject: [PATCH 2/2] style: handle useEffect warning of missing dependencies 'DEPTH', 'LOGO_PATH', and 'startingNode' --- .../Home/components/Section/components/SectionViz/sunburst.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/Home/components/Section/components/SectionViz/sunburst.tsx b/app/components/Home/components/Section/components/SectionViz/sunburst.tsx index 4880e254..a9ad0f80 100644 --- a/app/components/Home/components/Section/components/SectionViz/sunburst.tsx +++ b/app/components/Home/components/Section/components/SectionViz/sunburst.tsx @@ -472,7 +472,7 @@ export const SectionViz = ({ tooltip.remove(); d3.select(svgNode).selectAll("*").remove(); }; - }, []); + }, [DEPTH, LOGO_PATH, startingNode]); // Handler for when a node is clicked in the NodeDetails component const handleNodeClick = (node: TreeNode): void => {