New peddep landing page graph

frontend/packages/portal-frontend/src/peddepLandingPage/components/GroupedBarSuplots.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useRef } from "react";
+import Plotly, { Config, Layout, PlotData } from "plotly.js";
+import { BarSubplotData } from "../models/subplotData";
+
+interface GroupedBarSuplotsProp {
+  subplotsData: BarSubplotData[];
+}
+
+export default function GroupedBarSuplots(props: GroupedBarSuplotsProp) {
+  const { subplotsData } = props;
+
+  const plotRef = useRef(null);
+
+  useEffect(() => {
+    if (plotRef.current) {
+      const plotlyData: Partial<PlotData>[] = subplotsData.map(
+        (subplotData) => {
+          return {
+            x: subplotData.xAxisLabels,
+            y: subplotData.values,
+            text: subplotData.labels,
+            name: subplotData.name,
+            type: "bar",
+            marker: {
+              color: subplotData.color,
+              line: {
+                color: subplotData.lineColor,
+                width: 2,
+              },
+            },
+            hoverinfo: "y+text",
+          };
+        }
+      );
+
+      const layout: Partial<Layout> = {
+        title: "",
+        xaxis: {
+          tickangle: -50,
+          tickfont: {
+            size: 10,
+          },
+        },
+        yaxis: {
+          title: "",
+          //   zeroline: false,
+          gridwidth: 1,
+        },
+        barmode: "group",
+        legend: {
+          orientation: "h",
+          xanchor: "right",
+          x: 1,
+          y: 1.05,
+        },
+        showlegend: true,
+        margin: {
+          l: 50,
+          r: 100,
+          b: 200,
+          t: 50,
+          pad: 4,
+        },
+      };
+
+      const config: Partial<Config> = {
+        // Automatically resizes the plot when the window is resized.
+        responsive: true,
+        // hides hover widget toolbar
+        displayModeBar: false,
+      };
+
+      Plotly.react(plotRef.current, plotlyData, layout, config);
+    }
+  }, [subplotsData]);
+
+  return (
+    <div>
+      <div ref={plotRef} />
+    </div>
+  );
+}

frontend/packages/portal-frontend/src/peddepLandingPage/components/PeddepPage.tsx

@@ -1,79 +1,10 @@
 import * as React from "react";
-import { useEffect, useContext, useState } from "react";
 import { Button } from "react-bootstrap";
 import { toStaticUrl } from "@depmap/globals";
 import styles from "src/peddepLandingPage/styles/PeddepPage.scss";
-import { ApiContext } from "@depmap/api";
-import SubGroupPlot from "./SubgroupPlot";
+import SubGroupsPlot from "./SubgroupsPlot";
 
 export default function PeddepPage() {
-  const { getApi } = useContext(ApiContext);
-  const [bapi] = useState(() => getApi());
-
-  const [data, setData] = useState<{
-    "CNS/Brain": any[];
-    Heme: any[];
-    Solid: any[];
-  } | null>(null);
-  const [hasError, setHasError] = useState(false);
-
-  useEffect(() => {
-    (async () => {
-      try {
-        const dimensionType = await bapi.getDimensionType("depmap with peddep");
-        if (dimensionType.metadata_dataset_id) {
-          const modelSubsetColData = await bapi.getTabularDatasetData(
-            dimensionType.metadata_dataset_id,
-            {
-              columns: [
-                "OncotreeLineage",
-                "OncotreeSubtype",
-                "PediatricSubtype",
-              ],
-            }
-          );
-          const modelSubsetIndexData: { [key: string]: any } = {};
-
-          // eslint-disable-next-line no-restricted-syntax
-          for (const [colName, colData] of Object.entries(modelSubsetColData)) {
-            // eslint-disable-next-line no-restricted-syntax
-            for (const [index, value] of Object.entries(colData)) {
-              if (!modelSubsetIndexData[index]) {
-                modelSubsetIndexData[index] = {};
-              }
-              modelSubsetIndexData[index][colName] = value;
-            }
-          }
-
-          const pedModelData = Object.entries(modelSubsetIndexData).reduce(
-            (acc, [, modelData]) => {
-              if (modelData.PediatricSubtype === "True") {
-                const subtype = modelData.OncotreeSubtype;
-                if (modelData.OncotreeLineage === "CNS/Brain") {
-                  acc["CNS/Brain"].push(subtype);
-                } else if (
-                  ["Myeloid", "Lymphoid"].includes(modelData.OncotreeLineage)
-                ) {
-                  acc["Heme"].push(subtype);
-                } else {
-                  acc["Solid"].push(subtype);
-                }
-              }
-              return acc;
-            },
-            { "CNS/Brain": [] as any[], Heme: [] as any[], Solid: [] as any[] }
-          );
-          setData(pedModelData);
-        } else {
-          setHasError(true);
-        }
-      } catch (e) {
-        console.log(e);
-        setHasError(true);
-      }
-    })();
-  }, [bapi]);
-
   const imagePath = toStaticUrl("img/peddep_landing_page/pedepwave.png");
 
   const umapImage = (
@@ -122,37 +53,10 @@ export default function PeddepPage() {
             successful approaches as well as investing in exploratory science
             with transformative potential.
           </h4>
+          <div>
+            <SubGroupsPlot />
+          </div>
 
-          {hasError ? (
-            <div
-              style={{
-                display: "flex",
-                height: "200px",
-                justifyContent: "center",
-                alignItems: "center",
-              }}
-            >
-              <i>
-                Unexpected error. If you get this error consistently, please
-                contact us with a screenshot and the actions that lead to this
-                error.
-              </i>
-            </div>
-          ) : (
-            <div className={styles.dataPlotContainer}>
-              {data
-                ? Object.entries(data).map(([subgroup, values]) => {
-                    return (
-                      <SubGroupPlot
-                        key={subgroup}
-                        subgroup={subgroup}
-                        subtypes={values}
-                      />
-                    );
-                  })
-                : "Loading..."}
-            </div>
-          )}
           <div className={styles.dataInfo}>
             <div>
               <h4>Dependency Screening</h4>