changed to generic scatter plot

weng-lab · Oct 10, 2024 · 74bfd4f · 74bfd4f
1 parent 34208a5
commit 74bfd4f
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 17 deletions.
diff --git a/screen2.0/src/app/_umapPlot/umapPlot.tsx → ...n2.0/src/app/_scatterPlot/scatterPlot.tsx b/screen2.0/src/app/_umapPlot/umapPlot.tsx → ...n2.0/src/app/_scatterPlot/scatterPlot.tsx
@@ -12,23 +12,33 @@ import { curveBasis } from '@visx/curve';
 import { Zoom } from '@visx/zoom';
 import { createPortal } from 'react-dom';
 
+/*
+    All information given to a point on the plot, including its coordinates(x and y), its radius, color, and opacity, and its metadata information
+    which can be any amount of strings used to display in the tooltip
+*/
 interface Point {
     x: number;
     y: number;
     r?: number;
     color: string;
     opacity?: number;
-    name: string;
-    accession: string;
+    metaData: Record<string, any>;
 }
 
+/*
+    Properties given to the minimap including if its visible or not (shown) and its positioon in relation to its reference (both optional)
+    If not position or reference is given, it will default to the bottom right corner of the screen if shown
+*/
 interface MiniMapProps {
     show: boolean;
     position?: {right: number; bottom: number};
     ref?: MutableRefObject<any>;
 }
 
-interface UmapProps {
+/*
+    Basic chart properties
+*/
+interface ChartProps {
     width: number;
     height: number;
     pointData: Point[];
@@ -37,6 +47,8 @@ interface UmapProps {
     onSelectionChange?: (selectedPoints: any[]) => void;
     zoomScale: { scaleX: number; scaleY: number };
     miniMap: MiniMapProps;
+    leftAxisLable: string;
+    bottomAxisLabel: string;
 }
 
 type TooltipData = Point;
@@ -52,7 +64,7 @@ const initialTransformMatrix={
     skewY: 0,
 }
 
-function Umap({ width: parentWidth, height: parentHeight, pointData: umapData, loading, selectionType, onSelectionChange, zoomScale, miniMap }: UmapProps) {
+function Chart({ width: parentWidth, height: parentHeight, pointData: umapData, loading, selectionType, onSelectionChange, zoomScale, miniMap, leftAxisLable, bottomAxisLabel }: ChartProps) {
     const [tooltipData, setTooltipData] = React.useState<TooltipData | null>(null);
     const [tooltipOpen, setTooltipOpen] = React.useState(false);
     const [lines, setLines] = useState<Lines>([]);
@@ -259,7 +271,7 @@ function Umap({ width: parentWidth, height: parentHeight, pointData: umapData, l
             x={0}
             dx={-50} //adjust to move outside of chart area
         >
-            UMAP-2
+            {leftAxisLable}
         </Text>
     );
 
@@ -272,7 +284,7 @@ function Umap({ width: parentWidth, height: parentHeight, pointData: umapData, l
             x={boundedWidth / 2}
             dy={50}
         >
-            UMAP-1
+            {bottomAxisLabel}
         </Text>
     );
 
@@ -479,12 +491,14 @@ function Umap({ width: parentWidth, height: parentHeight, pointData: umapData, l
                             {tooltipOpen && tooltipData && isHoveredPointWithinBounds &&(
                                 <Tooltip left={xScaleTransformed(tooltipData.x) + 50} top={yScaleTransformed(tooltipData.y) + 50}>
                                     <div>
-                                        <strong>Name: </strong> 
-                                        {tooltipData.name.replace(/_/g, " ").slice(0, 45)}
-                                        {tooltipData.name.length > 45 ? "..." : ""}
-                                    </div>
-                                    <div>
-                                        <strong>Accession:</strong> {tooltipData.accession}
+                                        {Object.entries(tooltipData.metaData).map(([key, value]) => (
+                                            <div key={key}>
+                                                <strong>{key.charAt(0).toUpperCase() + key.slice(1)}: </strong> 
+                                                {typeof value === "string" && value.length > 45 
+                                                    ? `${value.replace(/_/g, " ").slice(0, 45)}...` 
+                                                    : value.replace(/_/g, " ")}
+                                            </div>
+                                        ))}
                                     </div>
                                 </Tooltip>
                             )}
@@ -496,4 +510,4 @@ function Umap({ width: parentWidth, height: parentHeight, pointData: umapData, l
     );
 }
 
-export { Umap };
+export { Chart };
diff --git a/screen2.0/src/app/downloads/datamatrices.tsx b/screen2.0/src/app/downloads/datamatrices.tsx
@@ -32,7 +32,8 @@ import { client } from "../search/_ccredetails/client"
 import { UMAP_QUERY } from "./queries"
 import BiosampleTables from "../_biosampleTables/BiosampleTables"
 import { ParentSize } from '@visx/responsive';
-import { Umap } from '../_umapPlot/umapPlot'
+import { Chart } from '../_scatterPlot/scatterPlot'
+import { metadata } from "../layout"
 
 type Selected = {
   assembly: "Human" | "Mouse"
@@ -294,8 +295,10 @@ export function DataMatrices() {
           ? (colorBy === "sampleType" ? sampleTypeColors : ontologyColors)[x[colorBy]]
           : "#aaaaaa",
         opacity: biosampleIds.length === 0 ? 1 : (isInBiosample ? 1 : 0.1),
-        name: x.displayname,
-        accession: x.experimentAccession
+        metaData: {
+          name: x.displayname,
+          accession: x.experimentAccession
+        }
       };
     });
   }, [fData, searched, colorBy, sampleTypeColors, ontologyColors, isInbounds, biosamples]);
@@ -523,7 +526,7 @@ export function DataMatrices() {
                   </Stack>
                   <Stack justifyContent="center" alignItems="center" direction="row" sx={{ position: "relative", maxHeight: height }}>
                     <Box sx={{ width: squareSize, height: squareSize }} ref={graphRef}>
-                      <Umap
+                      <Chart
                         width={squareSize - 25}
                         height={squareSize - 25}
                         pointData={scatterData}
@@ -532,6 +535,8 @@ export function DataMatrices() {
                         onSelectionChange={handleSelectionChange}
                         zoomScale={zoom}
                         miniMap={map}
+                        leftAxisLable="UMAP-2"
+                        bottomAxisLabel="UMAP-1"
                       />
                     </Box>
                   </Stack>