Skip to content

Commit

Permalink
Multi view annotation (#1339)
Browse files Browse the repository at this point in the history 
* Updated multi view story to use MapLayer instead of ColorMap layer.

* Replaced old color legend and toolbar annotations.

* Cleaning up and fixing lint conditions.

Co-authored-by: Havard Bjerke <[email protected]>
  • Loading branch information
@hkfb
hkfb and Havard Bjerke authored Dec 6, 2022
1 parent c6767d2 commit 8b08056
Show file tree
Hide file tree
Showing 6 changed files with 85 additions and 101 deletions.
71 changes: 70 additions & 1 deletion react/src/lib/components/DeckGLMap/DeckGLMap.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import { format } from "d3-format";
import { PickingInfo, View } from "@deck.gl/core/typed";
import { ContinuousLegend } from "@emerson-eps/color-tables";
import DeckGLMap from "./DeckGLMap";
import {
TooltipCallback,
Expand All @@ -10,8 +12,8 @@ import {
PropertyDataType,
FeatureCollection,
} from "../..";
import { PickingInfo } from "@deck.gl/core/typed";
import { ViewStateType } from "./components/Map";
import ViewFooter from "./components/ViewFooter";

export default {
component: DeckGLMap,
Expand Down Expand Up @@ -198,3 +200,70 @@ customizedCameraPosition.args = {
...defaultProps,
cameraPosition,
};

const mapLayer = {
"@@type": "MapLayer",
id: "hugin",
meshUrl: "hugin_depth_25_m.float32",
frame: {
origin: [432150, 6475800],
count: [291, 229],
increment: [25, 25],
rotDeg: 0,
},
propertiesUrl: "kh_netmap_25_m.float32",
contours: [0, 100],
material: false,
};

const MultiViewAnnotationTemplate: ComponentStory<typeof DeckGLMap> = (
args
) => (
<DeckGLMap {...args}>
{
// @ts-expect-error This is demonstrated to work with js, but with ts it gives error
<View id="view_1">
<ContinuousLegend min={-3071} max={41048} />
<ViewFooter>kH netmap</ViewFooter>
</View>
}
{
// @ts-expect-error This is demonstrated to work with js, but with ts it gives error
<View id="view_2">
<ContinuousLegend min={2725} max={3396} />
<ViewFooter>Hugin</ViewFooter>
</View>
}
</DeckGLMap>
);

export const MultiViewAnnotation = MultiViewAnnotationTemplate.bind({});

MultiViewAnnotation.args = {
id: "multi_view_annotation",
legend: {
visible: true,
},
layers: [
mapLayer,
{
...mapLayer,
id: "kh_netmap",
propertiesUrl: "hugin_depth_25_m.float32",
},
],
views: {
layout: [1, 2],
showLabel: true,
viewports: [
{
id: "view_1",
layerIds: ["hugin"],
},
{
id: "view_2",
layerIds: ["kh_netmap"],
},
],
},
};
19 changes: 14 additions & 5 deletions react/src/lib/components/DeckGLMap/DeckGLMap.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,8 @@ export interface DeckGLMapProps {
*/
getTooltip?: TooltipCallback;
cameraPosition?: ViewStateType | undefined;

children?: React.ReactNode;
}

const DeckGLMap: React.FC<DeckGLMapProps> = ({
Expand All @@ -83,7 +85,13 @@ const DeckGLMap: React.FC<DeckGLMapProps> = ({
coords,
scale,
coordinateUnit,
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
// eslint-disable-next-line @typescript-eslint/no-unused-vars
legend,
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
// eslint-disable-next-line @typescript-eslint/no-unused-vars
toolbar,
colorTables,
editedData,
Expand All @@ -96,6 +104,7 @@ const DeckGLMap: React.FC<DeckGLMapProps> = ({
getCameraPosition,
triggerHome,
triggerResetMultipleWells,
children,
}: DeckGLMapProps) => {
// Contains layers data received from map layers by user interaction
const [layerEditedData, setLayerEditedData] = React.useState(editedData);
Expand Down Expand Up @@ -147,8 +156,6 @@ const DeckGLMap: React.FC<DeckGLMapProps> = ({
coords={coords}
scale={scale}
coordinateUnit={coordinateUnit}
toolbar={toolbar}
legend={legend}
colorTables={colorTables}
editedData={editedData}
setEditedData={setEditedData}
Expand All @@ -160,7 +167,9 @@ const DeckGLMap: React.FC<DeckGLMapProps> = ({
getCameraPosition={getCameraPosition}
triggerHome={triggerHome}
triggerResetMultipleWells={triggerResetMultipleWells}
/>
>
{children}
</Map>
</ReduxProvider>
);
};
Expand Down Expand Up @@ -273,7 +282,7 @@ DeckGLMap.propTypes = {
coordinateUnit: PropTypes.string,

/**
* Parameters to control toolbar
* @deprecated Toolbar should be added as annotation. This prop has no function.
*/
toolbar: PropTypes.shape({
/**
Expand All @@ -283,7 +292,7 @@ DeckGLMap.propTypes = {
}),

/**
* Parameters for the legend
* @deprecated Legends should be added as annotations. This prop has no function.
*/
legend: PropTypes.shape({
/**
Expand Down
2 changes: 0 additions & 2 deletions react/src/lib/components/DeckGLMap/components/Map.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ describe("Test Map component", () => {
coords={mapData[0].coords}
scale={mapData[0].scale}
coordinateUnit={mapData[0].coordinateUnit}
legend={mapData[0].legend}
editedData={mapData[0].editedData}
views={{
layout: [1, 1],
Expand Down Expand Up @@ -55,7 +54,6 @@ describe("Test Map component", () => {
coords={mapData[0].coords}
scale={mapData[0].scale}
coordinateUnit={mapData[0].coordinateUnit}
legend={mapData[0].legend}
editedData={{}}
views={{
layout: [1, 1],
Expand Down
57 changes: 1 addition & 56 deletions react/src/lib/components/DeckGLMap/components/Map.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import {
} from "@deck.gl/core/typed";
import { Feature, FeatureCollection } from "geojson";
import React, { useEffect, useState, useCallback, useRef } from "react";
import Settings from "./settings/Settings";
import JSON_CONVERTER_CONFIG from "../utils/configuration";
import { MapState } from "../redux/store";
import { useSelector, useDispatch } from "react-redux";
Expand All @@ -23,14 +22,10 @@ import InfoCard from "./InfoCard";
import DistanceScale from "./DistanceScale";
import StatusIndicator from "./StatusIndicator";
import { colorTablesArray } from "@emerson-eps/color-tables/";
import ColorLegends from "./ColorLegends";
import {
applyPropsOnLayers,
ExtendedLayer,
getLayersInViewport,
getLayersWithDefaultProps,
} from "../layers/utils/layerTools";
import ViewFooter from "./ViewFooter";
import fitBounds from "../utils/fit-bounds";
import {
validateColorTables,
Expand Down Expand Up @@ -216,12 +211,6 @@ export interface MapProps {
visible?: boolean | null;
};

legend?: {
visible?: boolean | null;
cssStyle?: Record<string, unknown> | null;
horizontal?: boolean | null;
};

/**
* Prop containing color table data
*/
Expand Down Expand Up @@ -321,8 +310,6 @@ const Map: React.FC<MapProps> = ({
coords,
scale,
coordinateUnit,
toolbar,
legend,
colorTables,
editedData,
setEditedData,
Expand Down Expand Up @@ -979,42 +966,6 @@ const Map: React.FC<MapProps> = ({
onAfterRender={onAfterRender}
>
{children}
{views?.viewports &&
views.viewports.map((view, index) => (
// @ts-expect-error This is demonstrated to work with js, but with ts it gives error
<View
key={`${view.id}_${view.show3D ? "3D" : "2D"}`}
id={`${view.id}_${view.show3D ? "3D" : "2D"}`}
>
{legend?.visible && (
<ColorLegends
{...legend}
layers={
getLayersInViewport(
deckGLLayers,
view.layerIds
) as ExtendedLayer<unknown>[]
}
colorTables={colorTables}
/>
)}
{toolbar?.visible && (
<Settings
viewportId={view.id}
layerIds={view.layerIds}
/>
)}
{views.showLabel && (
<ViewFooter>
{`${
view.name
? view.name
: `View_${index + 1}`
} `}
</ViewFooter>
)}
</View>
))}
</DeckGL>
{scale?.visible ? (
<DistanceScale
Expand Down Expand Up @@ -1060,11 +1011,6 @@ Map.defaultProps = {
toolbar: {
visible: false,
},
legend: {
visible: true,
cssStyle: { top: 5, right: 10 },
horizontal: false,
},
coordinateUnit: "m",
views: {
layout: [1, 1],
Expand Down Expand Up @@ -1234,8 +1180,7 @@ function getViews(
: cur_viewport.id === "intersection_view"
? "IntersectionView"
: "OrthographicView";
const id_suffix = cur_viewport.show3D ? "_3D" : "_2D";
const view_id: string = cur_viewport.id + id_suffix;
const view_id: string = cur_viewport.id;

const far = 99999;
const near = cur_viewport.show3D ? 0.01 : -99999;
Expand Down
1 change: 0 additions & 1 deletion react/src/lib/components/DeckGLMap/components/ViewFooter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,5 +29,4 @@ const ViewFooter: React.FC<ViewFooterProps> = ({
return <div className={classes.viewFooter}>{children}</div>;
};

ViewFooter.displayName = "ViewFooter";
export default ViewFooter;
36 changes: 0 additions & 36 deletions react/src/lib/components/DeckGLMap/storybook/DeckGLMap.stories.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -610,42 +610,6 @@ MapInContainer.args = {
...exampleData[0],
};

export const MultiColorMap = EditDataTemplate.bind({});
MultiColorMap.args = {
...exampleData[0],
legend: {
visible: true,
},
zoom: -5,
layers: [
exampleData[0].layers[0],
{
...exampleData[0].layers[0],
colorMapRange: [3000, 3100],
valueRange: [3000, 3100],
id: "colormap-2-layer",
},
],
views: {
layout: [1, 2],
showLabel: true,
viewports: [
{
id: "view_1",
name: "Colormap layer",
show3D: false,
layerIds: ["colormap-layer"],
},
{
id: "view_2",
name: "Colormap 2 layer",
show3D: false,
layerIds: ["colormap-2-layer"],
},
],
},
};

// ColormapLayer with color selector component
const defaultProps = {
id: "DeckGlMap",
Expand Down

0 comments on commit 8b08056

Please sign in to comment.