From 574d72dfcd9f27d434e284667f63b37f5ae2b596 Mon Sep 17 00:00:00 2001
From: Shruthi Rai <shruthi.rai@emerson.com>
Date: Thu, 13 Jan 2022 17:47:07 +0100
Subject: [PATCH] fix: modifying continuous legend code

---
 .../src/component/Legend/ContinuousLegend.tsx | 15 ++--
 .../src/component/Utils/continousLegend.ts    | 26 ++----
 .../src/component/WelllayerTemplateTypes.ts   | 15 ----
 .../src/component/welllayer_template.json     | 89 -------------------
 react-app/src/index.ts                        |  1 -
 .../ContinousLgends/MD.stories.jsx            |  4 +-
 .../ContinousLgends/NTG.stories.jsx           |  4 +-
 .../ContinousLgends/PermTot.stories.jsx       |  4 +-
 .../ContinousLgends/Permeability.stories.jsx  |  4 +-
 .../ContinousLgends/PoroTot.stories.jsx       |  4 +-
 .../ContinousLgends/Porosity.stories.jsx      |  4 +-
 .../ContinousLgends/SW.stories.jsx            |  4 +-
 .../DiscreteLegends/Facies.stories.jsx        |  1 -
 .../DiscreteLegends/RDE.stories.jsx           |  1 -
 14 files changed, 29 insertions(+), 147 deletions(-)
 delete mode 100644 react-app/src/component/WelllayerTemplateTypes.ts
 delete mode 100644 react-app/src/component/welllayer_template.json

diff --git a/react-app/src/component/Legend/ContinuousLegend.tsx b/react-app/src/component/Legend/ContinuousLegend.tsx
index 3d20b636..c97e78a8 100644
--- a/react-app/src/component/Legend/ContinuousLegend.tsx
+++ b/react-app/src/component/Legend/ContinuousLegend.tsx
@@ -1,7 +1,6 @@
 import * as React from "react";
 import { RGBToHex, colorsArray } from "../Utils/continousLegend";
 import { select, scaleLinear, scaleSequential, axisBottom } from "d3";
-import { templateArray } from "../WelllayerTemplateTypes";
 import { colorTablesArray } from "../ColorTableTypes";
 
 declare type legendProps = {
@@ -9,8 +8,7 @@ declare type legendProps = {
     max: number;
     dataObjectName: string;
     position: number[];
-    name: string;
-    template: templateArray;
+    colorName: string;
     colorTables: colorTablesArray;
     horizontal: boolean;
 }
@@ -25,19 +23,18 @@ export const ContinuousLegend: React.FC<legendProps> = ({
     max,
     dataObjectName,
     position,
-    name,
-    template,
+    colorName,
     colorTables,
     horizontal,
 }: legendProps) => {
     React.useEffect(() => {
         continuousLegend("#legend");
-    }, [min, max, template, colorTables, horizontal]);
+    }, [min, max, colorName, colorTables, horizontal]);
 
     function continuousLegend(selected_id: string) {
         const itemColor: ItemColor[] = [];
         // Return the matched colors array from color.tables.json file
-        const colorTableColors = colorsArray(name, template, colorTables);
+        const colorTableColors = colorsArray(colorName, colorTables);
         colorTableColors.forEach((value: [number, number, number, number]) => {
             // return the color and offset needed to draw the legend
             itemColor.push({
@@ -72,10 +69,10 @@ export const ContinuousLegend: React.FC<legendProps> = ({
             .data(itemColor)
             .enter()
             .append("stop")
-            .attr("offset", function (data: any) {
+            .attr("offset", function (data) {
                 return data.offset + "%";
             })
-            .attr("stop-color", function (data: any) {
+            .attr("stop-color", function (data) {
                 return data.color;
             });
 
diff --git a/react-app/src/component/Utils/continousLegend.ts b/react-app/src/component/Utils/continousLegend.ts
index 28328c1c..923266fc 100644
--- a/react-app/src/component/Utils/continousLegend.ts
+++ b/react-app/src/component/Utils/continousLegend.ts
@@ -4,37 +4,26 @@ import {
     colorTablesArray,
     colorTablesObj,
 } from "../ColorTableTypes";
-import {
-    templateArray,
-    propertiesObj,
-} from "../WelllayerTemplateTypes";
 
 // Based on objectName return the colors array from color.tables.json file
 export function colorsArray(
-    objectName: string,
-    template: templateArray,
+    colorName: string,
     colorTables: colorTablesArray
 ): [number, number, number, number][] {
-    const properties = template[0]["properties"];
-    const propertiesData = properties.filter(
-        (value: propertiesObj) => value.objectName == objectName
-    );
     const colorTableData = colorTables.filter(
         (value: colorTablesObj) =>
-            value.name.toLowerCase() ==
-            propertiesData[0].colorTable.toLowerCase()
+            value.name.toLowerCase() == colorName.toLowerCase()
     );
-    return colorTableData[0].colors;
+    return colorTableData.length > 0 ? colorTableData[0].colors : [];
 }
 
 // return the colors based on the point
 export function rgbValues(
-    objectName: string,
     point: number,
-    template: templateArray,
+    colorName: string,
     colorTables: colorTablesArray
 ): number[] | { r: number; g: number; b: number; opacity: number } | undefined {
-    const colorTableColors = colorsArray(objectName, template, colorTables);
+    const colorTableColors = colorsArray(colorName, colorTables);
     // compare the point and first value from colorTableColors
     const colorArrays = colorTableColors.find(
         (value: [number, number, number, number]) => {
@@ -57,10 +46,13 @@ export function rgbValues(
         const secondColorArray = colorTableColors[index];
 
         if ((firstColorArray || secondColorArray) != undefined) {
+            const t0 = firstColorArray[0];
+            const t1 = secondColorArray[0];
+            const t = (point - t0) / (t1 - t0); // t = 0.0 gives first color, t = 1.0 gives second color.
             const interpolatedValues = interpolateRgb(
                 RGBToHex(firstColorArray).color,
                 RGBToHex(secondColorArray).color
-            )(point);
+            )(t);
             return color(interpolatedValues)?.rgb();
         }
         return undefined;
diff --git a/react-app/src/component/WelllayerTemplateTypes.ts b/react-app/src/component/WelllayerTemplateTypes.ts
deleted file mode 100644
index 45c75f3a..00000000
--- a/react-app/src/component/WelllayerTemplateTypes.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export declare type propertiesObj = {
-    objectName: string;
-    colorTable: string;
-    context: string;
-    colorInterpolation: string;
-}
-
-type propertiesArr = Array<propertiesObj>;
-
-declare type template = {
-    name: string;
-    properties: propertiesArr;
-}
-
-export type templateArray = Array<template>;
diff --git a/react-app/src/component/welllayer_template.json b/react-app/src/component/welllayer_template.json
deleted file mode 100644
index 333709db..00000000
--- a/react-app/src/component/welllayer_template.json
+++ /dev/null
@@ -1,89 +0,0 @@
-[  
-    {
-        "name": "Welllayer Template",
-        "properties": [
-            {
-                "objectName" : "PORO",
-                "colorTable" : "Porosity",
-                "context" : "wells-layer",
-                "scale": "linear"
-            },
-            {
-                "objectName" : "PERM",
-                "colorTable" : "Permeability",
-                "context" : "wells-layer",
-                "scale": "linear"
-            },
-            {
-                "objectName" : "MD",
-                "colorTable" : "Time/Depth",
-                "context" : "wells-layer",
-                "scale": "linear"
-            },
-            {
-                "objectName" : "PORO_TOT",
-                "colorTable" : "Porosity",
-                "context" : "wells-layer",
-                "scale": "linear"
-            },
-            {
-                "objectName" : "NTG",
-                "colorTable" : "Rainbow",
-                "context" : "wells-layer",
-                "scale": "linear"
-            },
-            {
-                "objectName" : "PERM_TOT",
-                "colorTable" : "Permeability",
-                "context" : "wells-layer",
-                "scale": "linear"
-            },
-            {
-                "objectName" : "SW",
-                "colorTable" : "Physics",
-                "context" : "wells-layer",
-                "scale": "linear"
-            },
-            {
-                "objectName" : "ZONELOG",
-                "colorTable" : "Stratigraphy",
-                "context" : "wells-layer"
-            },
-            {
-                "objectName" : "RDE_ORIG",
-                "colorTable" : "Stratigraphy",
-                "context" : "wells-layer"
-            },
-            {
-                "objectName" : "FACIES",
-                "colorTable" : "Facies",
-                "context" : "wells-layer"
-            },
-            {
-                "objectName" : "ZONE_MAIN",
-                "colorTable" : "Stratigraphy",
-                "context" : "wells-layer"
-            },
-            {
-                "objectName" : "RDE",
-                "colorTable" : "Accent",
-                "context" : "wells-layer"
-            },
-            {
-                "objectName" : "FaultDistance_HUM",
-                "colorTable" : "Gas-Oil-Water",
-                "context" : "wells-layer"
-            },
-            {
-                "objectName" : "FAULT_PROXIMITY_FLAG",
-                "colorTable" : "Gas-Water",
-                "context" : "wells-layer"
-            },
-            {
-                "objectName" : "FACIES_NoCalcite",
-                "colorTable" : "Facies",
-                "context" : "wells-layer"
-            }
-        ]
-    }
-]
\ No newline at end of file
diff --git a/react-app/src/index.ts b/react-app/src/index.ts
index 6f9b750f..13987fb0 100644
--- a/react-app/src/index.ts
+++ b/react-app/src/index.ts
@@ -1,7 +1,6 @@
 export { ContinuousLegend } from './component/Legend/ContinuousLegend';
 export { colorsArray, rgbValues, RGBToHex} from './component/Utils/continousLegend';
 export { colorTableData, DiscreteColorLegend } from './component/Legend/DiscreteLegend';
-export { propertiesObj, templateArray } from './component/WelllayerTemplateTypes';
 export { colorTablesObj, colorTablesArray } from './component/ColorTableTypes';
 import * as colorTables from './component/color-tables.json';
 export default colorTables;
diff --git a/react-app/src/stories/ColorLegends/ContinousLgends/MD.stories.jsx b/react-app/src/stories/ColorLegends/ContinousLgends/MD.stories.jsx
index 88685be9..3dbe35eb 100644
--- a/react-app/src/stories/ColorLegends/ContinousLgends/MD.stories.jsx
+++ b/react-app/src/stories/ColorLegends/ContinousLgends/MD.stories.jsx
@@ -4,7 +4,6 @@ export default {
     component: ContinuousLegend,
     title: "Legends/ContinousLegend",
 };
-import template from "../../../component/welllayer_template.json";
 import colorTables from "../../../component/color-tables.json";
 
 const min = 2918;
@@ -13,6 +12,7 @@ const dataObjectName = "Wells / MD";
 const position = [16, 10];
 const name = "MD";
 const horizontal = true;
+const colorName = "Time/Depth";
 
 const Template = (args) => {
     return <ContinuousLegend {...args} />;
@@ -25,7 +25,7 @@ MDTemplate.args = {
     dataObjectName,
     position,
     name,
-    template,
+    colorName,
     colorTables,
     horizontal,
 };
\ No newline at end of file
diff --git a/react-app/src/stories/ColorLegends/ContinousLgends/NTG.stories.jsx b/react-app/src/stories/ColorLegends/ContinousLgends/NTG.stories.jsx
index c3ec998a..b08c1c6e 100644
--- a/react-app/src/stories/ColorLegends/ContinousLgends/NTG.stories.jsx
+++ b/react-app/src/stories/ColorLegends/ContinousLgends/NTG.stories.jsx
@@ -4,7 +4,6 @@ export default {
     component: ContinuousLegend,
     title: "Legends/ContinousLegend",
 };
-import template from "../../../component/welllayer_template.json";
 import colorTables from "../../../component/color-tables.json";
 
 const min = 0;
@@ -13,6 +12,7 @@ const dataObjectName = "Wells / NTG";
 const position = [16, 10];
 const name = "NTG";
 const horizontal = true;
+const colorName = "Rainbow";
 
 const Template = (args) => {
     return <ContinuousLegend {...args} />;
@@ -25,7 +25,7 @@ NTGTemplate.args = {
     dataObjectName,
     position,
     name,
-    template,
+    colorName,
     colorTables,
     horizontal,
 };
\ No newline at end of file
diff --git a/react-app/src/stories/ColorLegends/ContinousLgends/PermTot.stories.jsx b/react-app/src/stories/ColorLegends/ContinousLgends/PermTot.stories.jsx
index ede2b062..d7e57ce4 100644
--- a/react-app/src/stories/ColorLegends/ContinousLgends/PermTot.stories.jsx
+++ b/react-app/src/stories/ColorLegends/ContinousLgends/PermTot.stories.jsx
@@ -4,7 +4,6 @@ export default {
     component: ContinuousLegend,
     title: "Legends/ContinousLegend",
 };
-import template from "../../../component/welllayer_template.json";
 import colorTables from "../../../component/color-tables.json";
 
 const min = -999;
@@ -13,6 +12,7 @@ const dataObjectName = "Wells / PERMTOT";
 const position = [16, 10];
 const name = "PERM_TOT";
 const horizontal = true;
+const colorName = "Porosity";
 
 const Template = (args) => {
     return <ContinuousLegend {...args} />;
@@ -25,7 +25,7 @@ PermTotTemplate.args = {
     dataObjectName,
     position,
     name,
-    template,
+    colorName,
     colorTables,
     horizontal,
 };
\ No newline at end of file
diff --git a/react-app/src/stories/ColorLegends/ContinousLgends/Permeability.stories.jsx b/react-app/src/stories/ColorLegends/ContinousLgends/Permeability.stories.jsx
index dc5d2e1e..a5aa7802 100644
--- a/react-app/src/stories/ColorLegends/ContinousLgends/Permeability.stories.jsx
+++ b/react-app/src/stories/ColorLegends/ContinousLgends/Permeability.stories.jsx
@@ -4,7 +4,6 @@ export default {
     component: ContinuousLegend,
     title: "Legends/ContinousLegend",
 };
-import template from "../../../component/welllayer_template.json";
 import colorTables from "../../../component/color-tables.json";
 
 const min = -999;
@@ -13,6 +12,7 @@ const dataObjectName = "Wells / PERM";
 const position = [16, 10];
 const name = "PERM";
 const horizontal = true;
+const colorName = "Permeability";
 
 const Template = (args) => {
     return <ContinuousLegend {...args} />;
@@ -25,7 +25,7 @@ PermeabilityTemplate.args = {
     dataObjectName,
     position,
     name,
-    template,
+    colorName,
     colorTables,
     horizontal,
 };
\ No newline at end of file
diff --git a/react-app/src/stories/ColorLegends/ContinousLgends/PoroTot.stories.jsx b/react-app/src/stories/ColorLegends/ContinousLgends/PoroTot.stories.jsx
index 8b8327b3..8a586a28 100644
--- a/react-app/src/stories/ColorLegends/ContinousLgends/PoroTot.stories.jsx
+++ b/react-app/src/stories/ColorLegends/ContinousLgends/PoroTot.stories.jsx
@@ -4,7 +4,6 @@ export default {
     component: ContinuousLegend,
     title: "Legends/ContinousLegend",
 };
-import template from "../../../component/welllayer_template.json";
 import colorTables from "../../../component/color-tables.json";
 
 const min = 0;
@@ -13,6 +12,7 @@ const dataObjectName = "Wells / POROTOT";
 const position = [16, 10];
 const name = "PORO";
 const horizontal = true;
+const colorName = "Porosity";
 
 const Template = (args) => {
     return <ContinuousLegend {...args} />;
@@ -25,7 +25,7 @@ PoroTotTemplate.args = {
     dataObjectName,
     position,
     name,
-    template,
+    colorName,
     colorTables,
     horizontal,
 };
\ No newline at end of file
diff --git a/react-app/src/stories/ColorLegends/ContinousLgends/Porosity.stories.jsx b/react-app/src/stories/ColorLegends/ContinousLgends/Porosity.stories.jsx
index 0171f270..fd49faa6 100644
--- a/react-app/src/stories/ColorLegends/ContinousLgends/Porosity.stories.jsx
+++ b/react-app/src/stories/ColorLegends/ContinousLgends/Porosity.stories.jsx
@@ -4,7 +4,6 @@ export default {
     component: ContinuousLegend,
     title: "Legends/ContinousLegend",
 };
-import template from "../../../component/welllayer_template.json";
 import colorTables from "../../../component/color-tables.json";
 
 const min = 0;
@@ -13,6 +12,7 @@ const dataObjectName = "Wells / PORO";
 const position = [16, 10];
 const name = "PORO";
 const horizontal = true;
+const colorName = "Porosity";
 
 const Template = (args) => {
     return <ContinuousLegend {...args} />;
@@ -25,7 +25,7 @@ PorosityTemplate.args = {
     dataObjectName,
     position,
     name,
-    template,
+    colorName,
     colorTables,
     horizontal,
 };
\ No newline at end of file
diff --git a/react-app/src/stories/ColorLegends/ContinousLgends/SW.stories.jsx b/react-app/src/stories/ColorLegends/ContinousLgends/SW.stories.jsx
index 2f654a81..94fb4672 100644
--- a/react-app/src/stories/ColorLegends/ContinousLgends/SW.stories.jsx
+++ b/react-app/src/stories/ColorLegends/ContinousLgends/SW.stories.jsx
@@ -4,7 +4,6 @@ export default {
     component: ContinuousLegend,
     title: "Legends/ContinousLegend",
 };
-import template from "../../../component/welllayer_template.json";
 import colorTables from "../../../component/color-tables.json";
 
 const min = 0;
@@ -13,6 +12,7 @@ const dataObjectName = "Wells / SW";
 const position = [16, 10];
 const name = "SW";
 const horizontal = true;
+const colorName = "Physics";
 
 const Template = (args) => {
     return <ContinuousLegend {...args} />;
@@ -25,7 +25,7 @@ SWTemplate.args = {
     dataObjectName,
     position,
     name,
-    template,
+    Physics,
     colorTables,
     horizontal,
 };
\ No newline at end of file
diff --git a/react-app/src/stories/ColorLegends/DiscreteLegends/Facies.stories.jsx b/react-app/src/stories/ColorLegends/DiscreteLegends/Facies.stories.jsx
index ded873a3..d31d2567 100644
--- a/react-app/src/stories/ColorLegends/DiscreteLegends/Facies.stories.jsx
+++ b/react-app/src/stories/ColorLegends/DiscreteLegends/Facies.stories.jsx
@@ -1,6 +1,5 @@
 import React from "react";
 import {DiscreteColorLegend} from "../../../component/Legend/DiscreteLegend";
-import template from "../../../component/welllayer_template.json";
 import colorTables from "../../../component/color-tables.json";
 
 export default {
diff --git a/react-app/src/stories/ColorLegends/DiscreteLegends/RDE.stories.jsx b/react-app/src/stories/ColorLegends/DiscreteLegends/RDE.stories.jsx
index fe2c4260..f328ec5e 100644
--- a/react-app/src/stories/ColorLegends/DiscreteLegends/RDE.stories.jsx
+++ b/react-app/src/stories/ColorLegends/DiscreteLegends/RDE.stories.jsx
@@ -26,7 +26,6 @@ const Template = (args) => {
 export const RDETemplate = Template.bind({});
 RDETemplate.args = {
     discreteData,
-    name,
     dataObjectName,
     position,
     colorName,