add csf line to individual plots (#15)

* wip - todo - remove dual diamond display * build helper function
USEPA · Apr 28, 2024 · aed9f52 · aed9f52
1 parent dcdb14e
commit aed9f52
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 17 deletions.
diff --git a/frontend/src/components/Output/Multitumor/MultitumorPlot.js b/frontend/src/components/Output/Multitumor/MultitumorPlot.js
@@ -3,7 +3,14 @@ import PropTypes from "prop-types";
 import React, {Component} from "react";
 
 import DoseResponsePlot from "@/components/common/DoseResponsePlot";
-import {colorCodes, getBmdDiamond, getDrLayout, getResponse} from "@/constants/plotting";
+import {
+    black,
+    colorCodes,
+    getBmdDiamond,
+    getCsfLine,
+    getDrLayout,
+    getResponse,
+} from "@/constants/plotting";
 
 const getLayout = function(datasets) {
     let layout;
@@ -63,21 +70,9 @@ const getData = function(ma, datasets, models) {
     });
 
     if (ma.bmdl) {
-        // add slope factor
-        data.push({
-            x: [0, ma.bmdl],
-            y: [0, bmd_y],
-            name: "Cancer Slope Factor",
-            legendgroup: "Cancer Slope Factor",
-            line: {
-                width: 5,
-                color: "#000000",
-                dash: "dot",
-            },
-        });
-        data.push(getBmdDiamond("Cancer Slope Factor", ma.bmd, ma.bmdl, ma.bmdu, bmd_y, "#000000"));
+        data.push(getBmdDiamond("Cancer Slope Factor", ma.bmd, ma.bmdl, ma.bmdu, bmd_y, black));
+        data.push(getCsfLine(ma.bmdl, bmd_y, black));
     }
-
     return data;
 };
 

diff --git a/frontend/src/constants/plotting.js b/frontend/src/constants/plotting.js
@@ -178,6 +178,21 @@ export const getResponse = dataset => {
             };
         }
     },
+    getCsfLine = function(bmdl, bmd_y, hexColor) {
+        if (bmdl > 0) {
+            return {
+                x: [0, bmdl],
+                y: [0, bmd_y],
+                name: "Cancer Slope Factor",
+                legendgroup: "Cancer Slope Factor",
+                line: {
+                    width: 5,
+                    color: hexToRgbA(hexColor, 0.7),
+                    dash: "dot",
+                },
+            };
+        }
+    },
     getDrBmdLine = function(model, hexColor) {
         // https://plotly.com/python/marker-style/
         // https://plotly.com/javascript/reference/scatter/
@@ -256,6 +271,7 @@ export const getResponse = dataset => {
     bmaColor = "#00008b",
     hoverColor = "#DA2CDA",
     selectedColor = "#4a9f2f",
+    black = "#000000",
     colorCodes = [
         // adapted from https://observablehq.com/@d3/color-schemes
         "#e41a1c",

diff --git a/frontend/src/stores/OutputStore.js b/frontend/src/stores/OutputStore.js
@@ -5,9 +5,12 @@ import {getHeaders} from "@/common";
 import {MODEL_MULTI_TUMOR, MODEL_NESTED_DICHOTOMOUS} from "@/constants/mainConstants";
 import {maIndex, modelClasses} from "@/constants/outputConstants";
 import {
+    black,
     bmaColor,
     colorCodes,
     getBayesianBMDLine,
+    getBmdDiamond,
+    getCsfLine,
     getDrBmdLine,
     getDrDatasetPlotData,
     getDrLayout,
@@ -357,8 +360,24 @@ class OutputStore {
 
     @computed get drIndividualMultitumorPlotData() {
         // a single model, shown in the modal
-        const model = this.modalModel;
-        return [getDrDatasetPlotData(this.modalDataset), ...getDrBmdLine(model, hoverColor)];
+        const model = this.modalModel,
+            data = [getDrDatasetPlotData(this.modalDataset), ...getDrBmdLine(model, hoverColor)];
+
+        if (model.results.bmdl) {
+            data.push(
+                getBmdDiamond(
+                    model.name,
+                    model.results.bmd,
+                    model.results.bmdl,
+                    model.results.bmdu,
+                    model.results.plotting.bmd_y,
+                    hoverColor
+                )
+            );
+            data.push(getCsfLine(model.results.bmdl, model.results.plotting.bmd_y, black));
+        }
+
+        return data;
     }
 
     @action.bound drPlotAddHover(model) {