diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 35804b4bd..a933a3bb5 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -8,6 +8,7 @@ "name": "webviz", "version": "0.0.0", "dependencies": { + "@deck.gl/carto": "^8.9.35", "@equinor/eds-core-react": "^0.42.0", "@equinor/eds-icons": "^0.21.0", "@equinor/esv-intersection": "^3.0.10", @@ -504,6 +505,45 @@ "@luma.gl/core": "^8.0.0" } }, + "node_modules/@deck.gl/carto": { + "version": "8.9.35", + "resolved": "https://registry.npmjs.org/@deck.gl/carto/-/carto-8.9.35.tgz", + "integrity": "sha512-Ln9yFQqagQ5Zpfl5SUJl/09lw0S9zkpSVeay976aSPnQt9U7L4ES5lxOZZBQvxHmKATmar5B5V36vXaW2bAezQ==", + "dependencies": { + "@babel/runtime": "^7.0.0", + "@loaders.gl/gis": "^3.4.13", + "@loaders.gl/loader-utils": "^3.4.13", + "@loaders.gl/mvt": "^3.4.13", + "@loaders.gl/tiles": "^3.4.13", + "@luma.gl/constants": "^8.5.21", + "@math.gl/web-mercator": "^3.6.2", + "cartocolor": "^4.0.2", + "d3-array": "^3.2.0", + "d3-color": "^3.1.0", + "d3-format": "^3.1.0", + "d3-scale": "^4.0.0", + "h3-js": "^3.7.0", + "moment-timezone": "^0.5.33", + "pbf": "^3.2.1", + "quadbin": "^0.1.9" + }, + "peerDependencies": { + "@deck.gl/aggregation-layers": "^8.0.0", + "@deck.gl/core": "^8.0.0", + "@deck.gl/extensions": "^8.0.0", + "@deck.gl/geo-layers": "^8.0.0", + "@deck.gl/layers": "^8.0.0", + "@loaders.gl/core": "^3.4.13" + } + }, + "node_modules/@deck.gl/carto/node_modules/d3-format": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz", + "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==", + "engines": { + "node": ">=12" + } + }, "node_modules/@deck.gl/core": { "version": "8.9.35", "resolved": "https://registry.npmjs.org/@deck.gl/core/-/core-8.9.35.tgz", @@ -1999,6 +2039,14 @@ "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz", "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ==" }, + "node_modules/@mapbox/tile-cover": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@mapbox/tile-cover/-/tile-cover-3.0.1.tgz", + "integrity": "sha512-R8aoFY/87HWBOL9E2eBqzOY2lpfWYXCcTNgBpIxAv67rqQeD4IfnHD0iPXg/Z1cqXrklegEYZCp/7ZR/RsWqBQ==", + "dependencies": { + "tilebelt": "^1.0.1" + } + }, "node_modules/@mapbox/tiny-sdf": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.6.tgz", @@ -7187,6 +7235,14 @@ "element-size": "^1.1.1" } }, + "node_modules/cartocolor": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/cartocolor/-/cartocolor-4.0.2.tgz", + "integrity": "sha512-+Gh9mb6lFxsDOLQlBLPxAHCnWXlg2W8q3AcVwqRcy95TdBbcOU89Wrb6h2Hd/6Ww1Kc1pzXmUdpnWD+xeCG0dg==", + "dependencies": { + "colorbrewer": "1.0.0" + } + }, "node_modules/chai": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/chai/-/chai-4.4.0.tgz", @@ -7375,6 +7431,11 @@ "mumath": "^3.3.4" } }, + "node_modules/colorbrewer": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/colorbrewer/-/colorbrewer-1.0.0.tgz", + "integrity": "sha512-NZuIOVdErK/C6jDH3jWT/roxWJbJAinMiqEpbuWniKvQAoWdg6lGra3pPrSHvaIf8PlX8wLs/RAC6nULFJbgmg==" + }, "node_modules/combined-stream": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", @@ -11895,6 +11956,25 @@ "ufo": "^1.3.0" } }, + "node_modules/moment": { + "version": "2.30.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz", + "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==", + "engines": { + "node": "*" + } + }, + "node_modules/moment-timezone": { + "version": "0.5.46", + "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.46.tgz", + "integrity": "sha512-ZXm9b36esbe7OmdABqIWJuBBiLLwAjrN7CE+7sYdCCx82Nabt1wHDj8TVseS59QIlfFPbOoiBPm6ca9BioG4hw==", + "dependencies": { + "moment": "^2.29.4" + }, + "engines": { + "node": "*" + } + }, "node_modules/mouse-change": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/mouse-change/-/mouse-change-1.4.0.tgz", @@ -13092,6 +13172,17 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/quadbin": { + "version": "0.1.9", + "resolved": "https://registry.npmjs.org/quadbin/-/quadbin-0.1.9.tgz", + "integrity": "sha512-5V6m6+cL/6+uBl3hYL+CWF06rRvlHkIepYKGQjTLYaHhu9InPppql0+0ROiCaOQdz8gPNlgge3glk5Qg1mWOYw==", + "dependencies": { + "@mapbox/tile-cover": "3.0.1" + }, + "engines": { + "node": ">=14" + } + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -14559,6 +14650,12 @@ "xtend": "~4.0.1" } }, + "node_modules/tilebelt": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/tilebelt/-/tilebelt-1.0.1.tgz", + "integrity": "sha512-cxHzpa5JgsugY9NUVRH43gPaGJw/29LecAn4X7UGOP64+kB8pU4VQ3bIhSyfb5Mk4jDxwl3yk330L/EIhbJ5aw==", + "deprecated": "This module is now under the @mapbox namespace: install @mapbox/tilebelt instead" + }, "node_modules/tiny-emitter": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index d31c8eb9c..0b5fe086f 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -19,6 +19,7 @@ "test:ct:ui": "playwright test -c playwright.ct.config.ts --ui" }, "dependencies": { + "@deck.gl/carto": "^8.9.35", "@equinor/eds-core-react": "^0.42.0", "@equinor/eds-icons": "^0.21.0", "@equinor/esv-intersection": "^3.0.10", diff --git a/frontend/src/modules/2DViewer/view/utils/AdvancedWellsLayer.ts b/frontend/src/modules/2DViewer/view/customDeckGlLayers/AdvancedWellsLayer.ts similarity index 52% rename from frontend/src/modules/2DViewer/view/utils/AdvancedWellsLayer.ts rename to frontend/src/modules/2DViewer/view/customDeckGlLayers/AdvancedWellsLayer.ts index 3b62d3fcd..f8b8d0153 100644 --- a/frontend/src/modules/2DViewer/view/utils/AdvancedWellsLayer.ts +++ b/frontend/src/modules/2DViewer/view/customDeckGlLayers/AdvancedWellsLayer.ts @@ -35,10 +35,28 @@ export class AdvancedWellsLayer extends WellsLayer { } const newColorsLayer = new GeoJsonLayer({ - ...colorsLayer.props, - id: "colors2", - lineWidthMinPixels: 2, - lineWidthUnits: "pixels", + data: colorsLayer.props.data, + pickable: true, + stroked: false, + positionFormat: colorsLayer.props.positionFormat, + pointRadiusUnits: "meters", + lineWidthUnits: "meters", + pointRadiusScale: this.props.pointRadiusScale, + lineWidthScale: this.props.lineWidthScale, + getLineWidth: colorsLayer.props.getLineWidth, + getPointRadius: colorsLayer.props.getPointRadius, + lineBillboard: true, + pointBillboard: true, + parameters: colorsLayer.props.parameters, + visible: colorsLayer.props.visible, + id: "colors", + lineWidthMinPixels: 1, + lineWidthMaxPixels: 5, + extensions: colorsLayer.props.extensions, + getDashArray: colorsLayer.props.getDashArray, + getLineColor: colorsLayer.props.getLineColor, + getFillColor: colorsLayer.props.getFillColor, + autoHighlight: true, }); return [newColorsLayer, ...layers.filter((layer) => layer !== colorsLayer)]; diff --git a/frontend/src/modules/2DViewer/view/utils/WellborePicksLayer.ts b/frontend/src/modules/2DViewer/view/customDeckGlLayers/WellborePicksLayer.ts similarity index 73% rename from frontend/src/modules/2DViewer/view/utils/WellborePicksLayer.ts rename to frontend/src/modules/2DViewer/view/customDeckGlLayers/WellborePicksLayer.ts index 733b61389..960113e68 100644 --- a/frontend/src/modules/2DViewer/view/utils/WellborePicksLayer.ts +++ b/frontend/src/modules/2DViewer/view/customDeckGlLayers/WellborePicksLayer.ts @@ -11,10 +11,12 @@ export type WellBorePickLayerData = { tvdMsl: number; md: number; }; + type TextLayerData = { coordinates: [number, number, number]; name: string; }; + export type WellBorePicksLayerProps = { id: string; data: WellBorePickLayerData[]; @@ -22,6 +24,7 @@ export type WellBorePicksLayerProps = { export class WellborePicksLayer extends CompositeLayer { filterSubLayer(context: FilterContext): boolean { + return true; if (context.layer.id.includes("text")) { return context.viewport.zoom > -4; } @@ -54,6 +57,10 @@ export class WellborePicksLayer extends CompositeLayer }; }); + const fontSize = 12; + const sizeMinPixels = 12; + const sizeMaxPixels = 12; + return [ new GeoJsonLayer( this.getSubLayerProps({ @@ -61,17 +68,19 @@ export class WellborePicksLayer extends CompositeLayer data: pointsData, // pointType: 'circle+text', filled: true, - lineWidthMinPixels: 10, + lineWidthMinPixels: 5, + lineWidthMaxPixels: 5, lineWidthUnits: "meters", parameters: { depthTest: false, }, - getLineWidth: 10, + getLineWidth: 1, depthTest: false, pickable: true, getText: (d: Feature) => d.properties?.wellBoreUwi, getLineColor: [50, 50, 50], - extensions: [new CollisionFilterExtension()], + // extensions: [new CollisionFilterExtension()], + collisionGroup: "wellbore-picks", }) ), @@ -79,18 +88,33 @@ export class WellborePicksLayer extends CompositeLayer this.getSubLayerProps({ id: "text", data: textData, - depthTest: false, + depthTest: true, pickable: true, getColor: [0, 0, 0], + fontSettings: { + fontSize: fontSize * 2, + sdf: true, + }, + outlineColor: [255, 255, 255], + outlineWidth: 3, getSize: 10, + sizeScale: fontSize, sizeUnits: "meters", - sizeMinPixels: 12, + sizeMinPixels: sizeMinPixels, + sizeMaxPixels: sizeMaxPixels, getAlignmentBaseline: "top", getTextAnchor: "middle", - getPixelOffset: [0, 10], getPosition: (d: TextLayerData) => d.coordinates, getText: (d: TextLayerData) => d.name, + // maxWidth: 64 * 12, extensions: [new CollisionFilterExtension()], + collisionGroup: "wellbore-picks", + + collisionTestProps: { + sizeScale: fontSize * 2, + sizeMaxPixels: sizeMaxPixels * 2, + sizeMinPixels: sizeMinPixels * 2, + }, }) ), ]; diff --git a/frontend/src/modules/2DViewer/view/utils/layerFactory.ts b/frontend/src/modules/2DViewer/view/utils/layerFactory.ts index e2669bed7..193467a8a 100644 --- a/frontend/src/modules/2DViewer/view/utils/layerFactory.ts +++ b/frontend/src/modules/2DViewer/view/utils/layerFactory.ts @@ -13,9 +13,6 @@ import { Rgb, parse } from "culori"; import { Feature } from "geojson"; import { SurfaceDataPng } from "src/api/models/SurfaceDataPng"; -import { AdvancedWellsLayer } from "./AdvancedWellsLayer"; -import { WellBorePickLayerData, WellborePicksLayer } from "./WellborePicksLayer"; - import { DrilledWellTrajectoriesLayer } from "../../layers/implementations/layers/DrilledWellTrajectoriesLayer/DrilledWellTrajectoriesLayer"; import { DrilledWellborePicksLayer } from "../../layers/implementations/layers/DrilledWellborePicksLayer/DrilledWellborePicksLayer"; import { ObservedSurfaceLayer } from "../../layers/implementations/layers/ObservedSurfaceLayer/ObservedSurfaceLayer"; @@ -24,6 +21,8 @@ import { RealizationPolygonsLayer } from "../../layers/implementations/layers/Re import { RealizationSurfaceLayer } from "../../layers/implementations/layers/RealizationSurfaceLayer/RealizationSurfaceLayer"; import { StatisticalSurfaceLayer } from "../../layers/implementations/layers/StatisticalSurfaceLayer/StatisticalSurfaceLayer"; import { Layer as LayerInterface } from "../../layers/interfaces"; +import { AdvancedWellsLayer } from "../customDeckGlLayers/AdvancedWellsLayer"; +import { WellBorePickLayerData, WellborePicksLayer } from "../customDeckGlLayers/WellborePicksLayer"; export function makeLayer(layer: LayerInterface, colorScale?: ColorScaleWithName): Layer | null { const data = layer.getLayerDelegate().getData(); diff --git a/package-lock.json b/package-lock.json deleted file mode 100644 index ff5f2eb18..000000000 --- a/package-lock.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "webviz", - "lockfileVersion": 3, - "requires": true, - "packages": {} -}