Merge pull request #23 from emerson-eps/Modify-Continuoud-Legend

fix: modifying continuous legend code
emerson-eps · Jan 13, 2022 · 5afe807 · 5afe807
2 parents 85ec3f0 + 574d72d
commit 5afe807
Show file tree

Hide file tree

Showing 14 changed files with 29 additions and 147 deletions.
diff --git a/react-app/src/component/Legend/ContinuousLegend.tsx b/react-app/src/component/Legend/ContinuousLegend.tsx
@@ -1,16 +1,14 @@
 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 = {
     min: number;
     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
@@ -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
diff --git a/react-app/src/component/welllayer_template.json b/react-app/src/component/welllayer_template.json
diff --git 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
@@ -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,
 };
diff --git 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,
 };
diff --git 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,
 };
diff --git 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,
 };
diff --git 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,
 };
diff --git 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,
 };