feat: separate analysis methods into preview and coming soon (#137)

Author: hunterckx

app/components/Entity/components/AnalysisMethodsTitle/analysisMethodsTitle.tsx

@@ -0,0 +1,16 @@
+import { TEXT_HEADING } from "@databiosphere/findable-ui/lib/theme/common/typography";
+import { Typography } from "@mui/material";
+
+interface AnalysisMethodsTitleProps {
+  title: React.ReactNode;
+}
+
+export const AnalysisMethodsTitle = ({
+  title,
+}: AnalysisMethodsTitleProps): JSX.Element => {
+  return (
+    <Typography color="ink.main" component="h2" variant={TEXT_HEADING}>
+      {title}
+    </Typography>
+  );
+};

app/components/index.ts

@@ -23,6 +23,7 @@ export { Link } from "@databiosphere/findable-ui/lib/components/Links/components
 export { BasicCell } from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/BasicCell/basicCell";
 export { CopyText } from "./common/CopyText/copyText";
 export { AnalysisMethod } from "./Entity/components/AnalysisMethod/analysisMethod";
+export { AnalysisMethodsTitle } from "./Entity/components/AnalysisMethodsTitle/analysisMethodsTitle";
 export { AnalysisPortals } from "./Entity/components/AnalysisPortals/analysisPortals";
 export { DetailViewHero } from "./Layout/components/Detail/components/DetailViewHero/detailViewHero";
 export { GridPaperSection } from "./Layout/components/Detail/components/Section/section.styles";

site-config/brc-analytics/local/entity/genome/analysisMethodMainColumn.ts

@@ -7,6 +7,35 @@ import * as V from "../../../../../app/viewModelBuilders/catalog/brc-analytics-c
 export const mainColumn: ComponentsConfig = [
   {
     children: [
+      {
+        component: C.AnalysisMethodsTitle,
+        props: {
+          title: "Preview",
+        },
+      },
+      {
+        component: C.FluidAlert,
+        props: {
+          severity: "warning",
+          title: "Preview.",
+          variant: "banner",
+        },
+      },
+      {
+        component: C.AnalysisMethod,
+        viewBuilder: (r) =>
+          V.buildGenomeAnalysisMethod(r, {
+            analysisMethod: ANALYSIS_METHOD.REGULATION,
+            text: MDX.Regulation({}),
+            title: "Regulation",
+          }),
+      },
+      {
+        component: C.AnalysisMethodsTitle,
+        props: {
+          title: "Coming Soon",
+        },
+      },
       {
         component: C.FluidAlert,
         props: {
@@ -34,15 +63,6 @@ export const mainColumn: ComponentsConfig = [
             title: "Transcriptomics",
           }),
       },
-      {
-        component: C.AnalysisMethod,
-        viewBuilder: (r) =>
-          V.buildGenomeAnalysisMethod(r, {
-            analysisMethod: ANALYSIS_METHOD.REGULATION,
-            text: MDX.Regulation({}),
-            title: "Regulation",
-          }),
-      },
       {
         component: C.AnalysisMethod,
         viewBuilder: (r) =>