Skip to content

Commit 85a2b02

Browse files
shruthiraiShruthi Rai
shruthirai
and
Shruthi Rai
authored
Make legend to show for multiple color map layer (equinor#1025)
* changing layer specific code * fix for shoing legend for multiple color layer * Showing legends based on state update * fix for updating colormapname * remove setstate from draw method Co-authored-by: Shruthi Rai <shruthi.rai@emerson.com>
1 parent c1f65d6 commit 85a2b02

File tree

7 files changed

+205
-162
lines changed

7 files changed

+205
-162
lines changed

‎react/package-lock.json‎

Lines changed: 78 additions & 69 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎react/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
"license": "MPL",
5151
"dependencies": {
5252
"@danmarshall/deckgl-typings": "^4.9.0",
53-
"@emerson-eps/color-tables": "^0.2.30",
53+
"@emerson-eps/color-tables": "^0.2.33",
5454
"@equinor/eds-core-react": "^0.12.1",
5555
"@equinor/eds-icons": "^0.9.1",
5656
"@equinor/videx-wellog": "^0.7.0",

‎react/src/lib/components/DeckGLMap/components/ColorLegend.tsx‎

Lines changed: 36 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -20,69 +20,6 @@ const ColorLegend: React.FC<ColorLegendProps> = ({
2020
horizontal,
2121
layers,
2222
}: ColorLegendProps) => {
23-
const [legendProps, setLegendProps] = React.useState<
24-
[
25-
{
26-
title: string;
27-
colorName: string;
28-
discrete: boolean;
29-
metadata: { objects: Record<string, [number[], number]> };
30-
valueRange: number[];
31-
visible: boolean;
32-
}
33-
]
34-
>([
35-
{
36-
title: "",
37-
colorName: "string",
38-
discrete: false,
39-
metadata: { objects: {} },
40-
valueRange: [],
41-
visible: true,
42-
},
43-
]);
44-
45-
// Get color table for log curves.
46-
React.useEffect(() => {
47-
if (!layers) return;
48-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
49-
const getLegendData: any = [];
50-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
51-
layers.map((layer: any) => {
52-
if (
53-
layer?.id == "wells-layer" &&
54-
layer?.isLoaded &&
55-
Object.keys(layer?.state).length > 0
56-
) {
57-
getLegendData.push({
58-
title: layer?.state?.legend[0].title,
59-
colorName: layer?.props?.logColor,
60-
discrete: layer?.state?.legend[0].discrete,
61-
metadata: layer?.state?.legend[0].metadata,
62-
valueRange: layer?.state?.legend[0].valueRange,
63-
visible: layer?.props?.visible,
64-
});
65-
}
66-
if (
67-
layer?.id == "colormap-layer" &&
68-
layer?.isLoaded &&
69-
Object.keys(layer?.state).length > 0
70-
) {
71-
const min = layer?.state.model.uniforms.colorMapRangeMin;
72-
const max = layer?.state.model.uniforms.colorMapRangeMax;
73-
getLegendData.push({
74-
title: layer?.props?.name,
75-
colorName: layer?.props?.colorMapName,
76-
discrete: false,
77-
metadata: { objects: {} },
78-
valueRange: [min, max],
79-
visible: layer?.props?.visible,
80-
});
81-
}
82-
});
83-
setLegendProps(getLegendData);
84-
}, [layers]);
85-
8623
return (
8724
<div
8825
style={{
@@ -92,27 +29,46 @@ const ColorLegend: React.FC<ColorLegendProps> = ({
9229
...cssStyle,
9330
}}
9431
>
95-
{legendProps.map(
96-
(legend, index) =>
97-
legend.visible && (
98-
<div key={index}>
99-
{legend.discrete && (
32+
{layers.map(
33+
(layer, index) =>
34+
layer?.props?.visible &&
35+
layer?.state?.legend?.[0] && (
36+
<div style={{ marginTop: 30 }} key={index}>
37+
{layer?.state?.legend?.[0].discrete && (
10038
<DiscreteColorLegend
101-
discreteData={legend.metadata}
102-
dataObjectName={legend.title}
103-
colorName={legend.colorName}
104-
horizontal={horizontal}
105-
/>
106-
)}
107-
{legend.valueRange?.length > 0 && legend && (
108-
<ContinuousLegend
109-
min={legend.valueRange[0]}
110-
max={legend.valueRange[1]}
111-
dataObjectName={legend.title}
112-
colorName={legend.colorName}
39+
discreteData={
40+
layer.state.legend?.[0].metadata
41+
}
42+
dataObjectName={
43+
layer.state.legend?.[0].title
44+
}
45+
colorName={
46+
layer.state.legend?.[0].colorName
47+
}
11348
horizontal={horizontal}
11449
/>
11550
)}
51+
{layer?.state?.legend?.[0].valueRange?.length > 0 &&
52+
layer?.state?.legend?.[0] && (
53+
<ContinuousLegend
54+
min={
55+
layer.state.legend?.[0]
56+
.valueRange[0]
57+
}
58+
max={
59+
layer.state.legend?.[0]
60+
.valueRange[1]
61+
}
62+
dataObjectName={
63+
layer.state.legend?.[0].title
64+
}
65+
colorName={
66+
layer.state.legend?.[0].colorName
67+
}
68+
horizontal={horizontal}
69+
id={layer?.props?.id}
70+
/>
71+
)}
11672
</div>
11773
)
11874
)}

‎react/src/lib/components/DeckGLMap/components/Map.tsx‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { isEmpty } from "lodash";
2323
import ColorLegend from "./ColorLegend";
2424
import {
2525
applyPropsOnLayers,
26+
getLayersInViewport,
2627
getLayersWithDefaultProps,
2728
} from "../layers/utils/layerTools";
2829
import ViewFooter from "./ViewFooter";
@@ -32,7 +33,6 @@ import {
3233
validateLayers,
3334
} from "../../../inputSchema/schemaValidationUtil";
3435
import { DrawingPickInfo } from "../layers/drawing/drawingLayer";
35-
import { getLayersByType } from "../layers/utils/layerTools";
3636

3737
// eslint-disable-next-line @typescript-eslint/no-var-requires
3838
const colorTables = require("@emerson-eps/color-tables/dist/component/color-tables.json");
@@ -469,18 +469,13 @@ const Map: React.FC<MapProps> = ({
469469
{colorTables && legend?.visible && (
470470
<ColorLegend
471471
{...legend}
472-
layers={[
473-
getLayersByType(
472+
layers={
473+
getLayersInViewport(
474474
deckRef.current?.deck.props
475475
.layers as Layer<unknown>[],
476-
"WellsLayer"
477-
)?.[0],
478-
getLayersByType(
479-
deckRef.current?.deck.props
480-
.layers as Layer<unknown>[],
481-
"ColormapLayer"
482-
)?.[0],
483-
]}
476+
view.layerIds
477+
) as Layer<unknown>[]
478+
}
484479
colorTables={colorTables}
485480
/>
486481
)}

‎react/src/lib/components/DeckGLMap/layers/colormap/colormapLayer.ts‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,54 @@ export default class ColormapLayer extends BitmapLayer<
187187
propertyValue: val,
188188
};
189189
}
190+
191+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
192+
// eslint-disable-next-line
193+
initializeState(params: any): void {
194+
super.initializeState(params);
195+
const legendProps = [];
196+
197+
const valueRangeMin = this.props.valueRange[0] ?? 0.0;
198+
const valueRangeMax = this.props.valueRange[1] ?? 1.0;
199+
200+
// If specified color map will extend from colorMapRangeMin to colorMapRangeMax.
201+
// Otherwise it will extend from valueRangeMin to valueRangeMax.
202+
const min = this.props.colorMapRange?.[0] ?? valueRangeMin;
203+
const max = this.props.colorMapRange?.[1] ?? valueRangeMax;
204+
205+
legendProps.push({
206+
discrete: false,
207+
metadata: { objects: {} },
208+
valueRange: [min, max],
209+
colorName: this.props.colorMapName,
210+
title: "PropertyMapLayer",
211+
});
212+
213+
this.setState({ legend: legendProps });
214+
}
215+
216+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
217+
// eslint-disable-next-line
218+
updateState({ props, oldProps, context, changeFlags }: any) {
219+
super.updateState({ props, oldProps, context, changeFlags });
220+
const legendProps = [];
221+
const valueRangeMin = this.props.valueRange[0] ?? 0.0;
222+
const valueRangeMax = this.props.valueRange[1] ?? 1.0;
223+
224+
// If specified color map will extend from colorMapRangeMin to colorMapRangeMax.
225+
// Otherwise it will extend from valueRangeMin to valueRangeMax.
226+
const min = this.props.colorMapRange?.[0] ?? valueRangeMin;
227+
const max = this.props.colorMapRange?.[1] ?? valueRangeMax;
228+
229+
legendProps.push({
230+
discrete: false,
231+
metadata: { objects: {} },
232+
valueRange: [min, max],
233+
colorName: this.props.colorMapName,
234+
title: "PropertyMapLayer",
235+
});
236+
this.setState({ legend: legendProps });
237+
}
190238
}
191239

192240
ColormapLayer.layerName = "ColormapLayer";

‎react/src/lib/components/DeckGLMap/layers/utils/layerTools.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export function getLayersInViewport(
9494
layers: Record<string, unknown>[] | Layer<unknown>[],
9595
layerIds: string[] | undefined
9696
): Record<string, unknown>[] | Layer<unknown>[] {
97-
if (layerIds && layerIds.length > 0) {
97+
if (layerIds && layerIds.length > 0 && layers) {
9898
const layers_in_view = (layers as never[]).filter((layer) =>
9999
layerIds.includes(layer["id"] as string)
100100
);

‎react/src/lib/components/DeckGLMap/storybook/DeckGLMap.stories.jsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -657,3 +657,38 @@ export const MapInContainer = (args) => {
657657
MapInContainer.args = {
658658
...exampleData[0],
659659
};
660+
661+
export const MultiColorMap = EditDataTemplate.bind({});
662+
MultiColorMap.args = {
663+
...exampleData[0],
664+
legend: {
665+
visible: true,
666+
},
667+
zoom: -5,
668+
layers: [
669+
exampleData[0].layers[0],
670+
{
671+
...exampleData[0].layers[0],
672+
colorMapRange: [3000, 3100],
673+
id: "colormap-2-layer",
674+
},
675+
],
676+
views: {
677+
layout: [1, 2],
678+
showLabel: true,
679+
viewports: [
680+
{
681+
id: "view_1",
682+
name: "Colormap layer",
683+
show3D: false,
684+
layerIds: ["colormap-layer"],
685+
},
686+
{
687+
id: "view_2",
688+
name: "Colormap 2 layer",
689+
show3D: false,
690+
layerIds: ["colormap-2-layer"],
691+
},
692+
],
693+
},
694+
};

0 commit comments

Comments
 (0)