feat: add organism selector to ga2 landing page (#863)

## Description

This will add the organism selector to the landing page of GA2, making
this pull-request dependent on #854 .

## Related Issue

#840

Author: Smeds

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;
 }

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 => {

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;
+`;

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 (
+    <Section>
+      <SectionLayout>
+        <Headline>
+          <SectionTitle>Browse Assemblies</SectionTitle>
+          <SectionSubtitle>
+            Browse assemblies by taxonomic lineage.
+          </SectionSubtitle>
+        </Headline>
+        <Sunburst logoPath="/logo/genomeark2.svg" startingNode="Metazoa" />
+      </SectionLayout>
+    </Section>
+  );
+};

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 => {
     <Fragment>
       <SectionHero />
       <SectionSubHero />
+      <SectionAssemblies />
       <SectionAnalyticsAndData />
     </Fragment>
   );

public/logo/genomeark2.svg

@@ -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<BRCDataCatalogGenome>`
  * 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: {},
   };
 }

site-config/brc-analytics/local/config.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<BaseBackPageConfig, "tabs" | "top"> {
@@ -25,4 +26,5 @@ export interface AppEntityConfig<R>
 export interface AppSiteConfig extends BaseSiteConfig {
   allowedPaths?: string[];
   appKey?: (typeof APP_KEYS)[keyof typeof APP_KEYS];
+  taxTree?: TaxonomyNode;
 }

site-config/common/entities.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<GA2AssemblyEntity>`
  * 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: {},
   };
 }