From b795906a4bea6afc8c71682992749eafe48ea394 Mon Sep 17 00:00:00 2001 From: shruthirai <44650767+shruthirai@users.noreply.github.com> Date: Fri, 19 Nov 2021 09:18:36 +0100 Subject: [PATCH] Moved legend logic from DeckGlWrapper to welllayer (#646) * Moved logic from DeckGlWrapper to welllayer * Removed commented lines Co-authored-by: Shruthi Rai --- .../DeckGLMap/components/DeckGLWrapper.tsx | 56 +++++-------------- .../DeckGLMap/layers/wells/wellsLayer.ts | 43 +++++++++++++- 2 files changed, 55 insertions(+), 44 deletions(-) diff --git a/react/src/lib/components/DeckGLMap/components/DeckGLWrapper.tsx b/react/src/lib/components/DeckGLMap/components/DeckGLWrapper.tsx index d716b73af..45893555c 100644 --- a/react/src/lib/components/DeckGLMap/components/DeckGLWrapper.tsx +++ b/react/src/lib/components/DeckGLMap/components/DeckGLWrapper.tsx @@ -8,15 +8,13 @@ import JSON_CONVERTER_CONFIG from "../utils/configuration"; import { MapState } from "../redux/store"; import { useDispatch, useSelector } from "react-redux"; import { updateLayerProp } from "../redux/actions"; -import { WellsPickInfo, getLogInfo } from "../layers/wells/wellsLayer"; +import { WellsPickInfo } from "../layers/wells/wellsLayer"; import InfoCard from "./InfoCard"; import DistanceScale from "../components/DistanceScale"; import DiscreteColorLegend from "../components/DiscreteLegend"; import ContinuousLegend from "../components/ContinuousLegend"; -import { colorsArray } from "../utils/continuousLegend"; import StatusIndicator from "./StatusIndicator"; import { DrawingLayer, WellsLayer, PieChartLayer } from "../layers"; -import { getLogValues, LogCurveDataType } from "../layers/wells/wellsLayer"; import { Layer } from "deck.gl"; import ToggleButton from "./settings/ToggleButton"; @@ -207,9 +205,6 @@ const DeckGLWrapper: React.FC = ({ ); const [isLoaded, setIsLoaded] = React.useState(false); - const [colorsArrays, setcolorsArrays] = React.useState< - [number, number, number, number][] - >([]); const [is3D, setIs3D] = useState(false); @@ -219,12 +214,14 @@ const DeckGLWrapper: React.FC = ({ discrete: boolean; metadata: { objects: Record }; valueRange: number[]; + colorsArray: [number, number, number, number][]; }>({ title: "", logName: "", discrete: false, metadata: { objects: {} }, valueRange: [], + colorsArray: [], }); const onAfterRender = React.useCallback(() => { @@ -239,42 +236,15 @@ const DeckGLWrapper: React.FC = ({ // Get color table for log curves. React.useEffect(() => { if (!wellsLayer?.isLoaded) return; - const logName = wellsLayer.props.logName; - const pathLayer = wellsLayer.internalState.subLayers[1]; - if (!pathLayer.isLoaded) return; - const logs = pathLayer?.props.data; - const logData = logs[0]; - const logInfo = getLogInfo(logData, logData.header.name, logName); - const title = "Wells / " + logName; - if (logInfo?.description == "discrete") { - const meta = logData["metadata_discrete"]; - const metadataDiscrete = meta[logName].objects; - setLegendProps({ - title: title, - discrete: true, - metadata: metadataDiscrete, - logName: logName, - valueRange: [], - }); - } else { - const minArray: number[] = []; - const maxArray: number[] = []; - logs.forEach(function (log: LogCurveDataType) { - const logValues = getLogValues(log, log.header.name, logName); - - minArray.push(Math.min(...logValues)); - maxArray.push(Math.max(...logValues)); - }); - - setLegendProps({ - title: title, - logName: logName, - discrete: false, - metadata: { objects: {} }, - valueRange: [Math.min(...minArray), Math.max(...maxArray)], - }); - setcolorsArrays(colorsArray(wellsLayer?.props?.logName)); - } + const legend = wellsLayer.state.legend[0]; + setLegendProps({ + title: legend.title, + logName: legend.logName, + discrete: legend.discrete, + metadata: legend.metadata, + valueRange: legend.valueRange, + colorsArray: legend.colorsArray, + }); }, [isLoaded, legend, wellsLayer?.props?.logName]); // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -349,7 +319,7 @@ const DeckGLWrapper: React.FC = ({ max={legendProps.valueRange[1]} dataObjectName={legendProps.title} position={legend.position} - colorTableColors={colorsArrays} + colorTableColors={legendProps.colorsArray} /> )} {deckGLLayers && ( diff --git a/react/src/lib/components/DeckGLMap/layers/wells/wellsLayer.ts b/react/src/lib/components/DeckGLMap/layers/wells/wellsLayer.ts index fb9c874b7..9f5a04aed 100644 --- a/react/src/lib/components/DeckGLMap/layers/wells/wellsLayer.ts +++ b/react/src/lib/components/DeckGLMap/layers/wells/wellsLayer.ts @@ -3,7 +3,7 @@ import { ExtendedLayerProps } from "../utils/layerTools"; import { GeoJsonLayer, PathLayer } from "@deck.gl/layers"; import { RGBAColor } from "@deck.gl/core/utils/color"; import { subtract, distance, dot } from "mathjs"; -import { rgbValues } from "../../utils/continuousLegend"; +import { rgbValues, colorsArray } from "../../utils/continuousLegend"; import { Feature, GeometryCollection, @@ -169,6 +169,11 @@ export default class WellsLayer extends CompositeLayer< getColor: [this.props.logName], getWidth: [this.props.logName, this.props.logRadius], }, + onDataLoad: (value: LogCurveDataType[]) => { + this.setState({ + legend: getLegendData(value, this.props.logName), + }); + }, }) ); @@ -564,3 +569,39 @@ function getLogProperty( ); } else return null; } + +function getLegendData(logs: LogCurveDataType[], logName: string) { + const logInfo = getLogInfo(logs[0], logs[0].header.name, logName); + const title = "Wells / " + logName; + const legendProps = []; + if (logInfo?.description == "discrete") { + const meta = logs[0]["metadata_discrete"]; + const metadataDiscrete = meta[logName].objects; + legendProps.push({ + title: title, + logName: logName, + discrete: true, + metadata: metadataDiscrete, + valueRange: [], + colorsArray: [], + }); + return legendProps; + } else { + const minArray: number[] = []; + const maxArray: number[] = []; + logs.forEach(function (log: LogCurveDataType) { + const logValues = getLogValues(log, log.header.name, logName); + minArray.push(Math.min(...logValues)); + maxArray.push(Math.max(...logValues)); + }); + legendProps.push({ + title: title, + logName: "", + discrete: false, + metadata: { objects: {} }, + valueRange: [Math.min(...minArray), Math.max(...maxArray)], + colorsArray: colorsArray(logName), + }); + return legendProps; + } +}