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/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 => { 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 0964d3a8..7e6eca4f 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"; @@ -8,6 +9,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: {}, }; }