wip

rubenthoms · Feb 16, 2025 · 6313508 · 6313508
1 parent ec6d025
commit 6313508
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 28 deletions.
diff --git a/frontend/src/modules/3DViewerNew/view/utils/LabelOrganizer/AnnotationOrganizer.tsx b/frontend/src/modules/3DViewerNew/view/utils/LabelOrganizer/AnnotationOrganizer.tsx
@@ -12,7 +12,13 @@ import { isEqual } from "lodash";
 
 import { Vec2 } from "./utils/definitions";
 import { mixVec2 } from "./utils/helpers";
-import { Annotation, AnnotationInstance, AnnotationInstanceState } from "./utils/types";
+import {
+    AnnotationInstance,
+    AnnotationInstanceState,
+    BaseAnnotation,
+    LabelAnnotation,
+    PieChartAnnotation,
+} from "./utils/types";
 import { postProcessInstances, preprocessInstances, updateInstanceDOMElements } from "./utils/update-annotations";
 
 export type AnnotationOrganizerParams = {
@@ -30,7 +36,7 @@ export type AnnotationOrganizerParams = {
 const defaultAnnotationOrganizerProps: Required<AnnotationOrganizerParams> = {
     labelOffset: 15,
     distanceFactor: 100,
-    minDistance: 10,
+    minDistance: 100,
     maxDistance: 10000,
     anchorOcclusionRadius: 10,
     anchorSize: 2,
@@ -48,7 +54,7 @@ export type AnnotationOrganizerTopicPayloads = {
 };
 
 export class AnnotationOrganizer implements PublishSubscribe<AnnotationOrganizerTopicPayloads> {
-    private _annotationsMap: Map<string, Annotation[]> = new Map();
+    private _annotationsMap: Map<string, BaseAnnotation[]> = new Map();
     private _annotationInstances: AnnotationInstance[] = [];
     private _params: Required<AnnotationOrganizerParams>;
     private _prevLayerIds: string[] = [];
@@ -213,7 +219,7 @@ export class AnnotationOrganizer implements PublishSubscribe<AnnotationOrganizer
         this._publishSubscribeDelegate.notifySubscribers(AnnotationOrganizerTopic.INSTANCES);
     }
 
-    registerAnnotations(layerId: string, annotations: Annotation[]) {
+    registerAnnotations(layerId: string, annotations: BaseAnnotation[]) {
         this._annotationsMap.set(layerId, annotations);
         this.updateAnnotationInstances();
     }
@@ -460,7 +466,7 @@ export function AnnotationComponentsContainer(props: AnnotationComponentsContain
 type AnnotationComponentProps = {
     id: string;
     state: AnnotationInstanceState;
-    annotation: Annotation;
+    annotation: BaseAnnotation;
 };
 
 const AnnotationComponent = React.forwardRef((props: AnnotationComponentProps, ref: React.Ref<HTMLDivElement>) => {
@@ -478,6 +484,8 @@ const AnnotationComponent = React.forwardRef((props: AnnotationComponentProps, r
         props.state.boost = true;
     }, [props.state]);
 
+    let cumulativePercent = 0;
+
     return (
         <div
             data-annotationid={props.id}
@@ -494,23 +502,72 @@ const AnnotationComponent = React.forwardRef((props: AnnotationComponentProps, r
             onPointerLeave={onPointerLeave}
             onClick={onPointerClick}
         >
-            <div
-                key={props.id}
-                id={`annotation_${props.id}`}
-                style={{
-                    minWidth: "100px",
-                    background: "#000",
-                    color: "white",
-                    textAlign: "center",
-                    overflow: "hidden",
-                    borderRadius: "4px",
-                    padding: "1px 2px",
-                    fontFamily: "sans-serif",
-                    fontSize: "10pt",
-                }}
-            >
-                <div style={{ whiteSpace: "nowrap" }}>{props.annotation.name}</div>
-            </div>
+            {props.annotation.type === "label" && (
+                <div
+                    key={props.id}
+                    id={`annotation_${props.id}`}
+                    style={{
+                        minWidth: "100px",
+                        background: "#000",
+                        color: "white",
+                        textAlign: "center",
+                        overflow: "hidden",
+                        borderRadius: "4px",
+                        padding: "1px 2px",
+                        fontFamily: "sans-serif",
+                        fontSize: "10pt",
+                    }}
+                >
+                    <div style={{ whiteSpace: "nowrap" }}>{(props.annotation as LabelAnnotation).name}</div>
+                </div>
+            )}
+            {props.annotation.type === "pie-chart" && (
+                <div
+                    key={props.id}
+                    id={`annotation_${props.id}`}
+                    style={{
+                        minWidth: "24px",
+                        border: "1px solid #000",
+                        background: "#fff",
+                        color: "white",
+                        textAlign: "center",
+                        overflow: "hidden",
+                        borderRadius: "4px",
+                        padding: "3px 3px",
+                        fontFamily: "sans-serif",
+                        fontSize: "10pt",
+                    }}
+                >
+                    <svg
+                        height="24"
+                        width="24"
+                        viewBox="-1 -1 2 2"
+                        style={{ transform: "rotate(-90deg)" }}
+                        key={props.id}
+                        id={`annotation_${props.id}`}
+                    >
+                        {(props.annotation as PieChartAnnotation).data.values.map((value: number, index: number) => {
+                            const [startX, startY] = getCoordinatesForPercent(cumulativePercent);
+                            cumulativePercent += value;
+                            const [endX, endY] = getCoordinatesForPercent(cumulativePercent);
+                            const largeArcFlag = value > 0.5 ? 1 : 0;
+                            return (
+                                <path
+                                    key={index}
+                                    d={`M ${startX} ${startY} A 1 1 0 ${largeArcFlag} 1 ${endX} ${endY} L 0 0`}
+                                    fill={(props.annotation as PieChartAnnotation).data.colors[index]}
+                                />
+                            );
+                        })}
+                    </svg>
+                </div>
+            )}
         </div>
     );
 });
+
+function getCoordinatesForPercent(percent: number): [number, number] {
+    const x = Math.cos(2 * Math.PI * percent);
+    const y = Math.sin(2 * Math.PI * percent);
+    return [x, y];
+}
diff --git a/frontend/src/modules/3DViewerNew/view/utils/LabelOrganizer/utils/types.ts b/frontend/src/modules/3DViewerNew/view/utils/LabelOrganizer/utils/types.ts
@@ -4,9 +4,9 @@ import { Vec2, Vec3 } from "./definitions";
 
 import { AnnotationOrganizer } from "../AnnotationOrganizer";
 
-export type Annotation = {
+export type BaseAnnotation = {
     id: string;
-    name: string;
+    type: "label" | "pie-chart";
     position: Vec3;
     alternativePositions?: Vec3[];
     scope?: string;
@@ -17,7 +17,21 @@ export type Annotation = {
     onMouseOut?: () => void;
 };
 
-export type AnnotationComponentProps = Annotation & {
+export type LabelAnnotation = BaseAnnotation & {
+    type: "label";
+    name: string;
+};
+
+export type PieChartAnnotation = BaseAnnotation & {
+    type: "pie-chart";
+    data: {
+        values: number[];
+        colors: string[];
+        labels: string[];
+    };
+};
+
+export type AnnotationComponentProps = BaseAnnotation & {
     instanceId: string;
 };
 
@@ -92,7 +106,7 @@ export type AnnotationInstance = {
     ref: RefObject<HTMLDivElement> | null;
     layerId: string;
     organizer: AnnotationOrganizer;
-    annotation: Annotation;
+    annotation: BaseAnnotation;
     priority: number;
     rank: number;
     state: AnnotationInstanceState;

diff --git a/frontend/src/modules/_shared/customDeckGlLayers/AdvancedWellsLayer.ts b/frontend/src/modules/_shared/customDeckGlLayers/AdvancedWellsLayer.ts
@@ -1,7 +1,7 @@
 import { FilterContext, Layer, LayersList, UpdateParameters } from "@deck.gl/core";
 import { GeoJsonLayer } from "@deck.gl/layers";
 import { Vec3 } from "@modules/3DViewerNew/view/utils/LabelOrganizer/utils/definitions";
-import { Annotation } from "@modules/3DViewerNew/view/utils/LabelOrganizer/utils/types";
+import { LabelAnnotation } from "@modules/3DViewerNew/view/utils/LabelOrganizer/utils/types";
 import { WellsLayer } from "@webviz/subsurface-viewer/dist/layers";
 
 import { FeatureCollection, GeometryCollection, LineString, Point } from "geojson";
@@ -28,7 +28,7 @@ export class AdvancedWellsLayer extends WellsLayer {
         const { data } = this.props;
 
         const featureCollection = data as FeatureCollection;
-        const annotations: Annotation[] = [];
+        const annotations: LabelAnnotation[] = [];
 
         let index = 0;
         for (const feature of featureCollection.features) {
@@ -55,6 +55,7 @@ export class AdvancedWellsLayer extends WellsLayer {
 
             annotations.push({
                 id: wellUuid,
+                type: "label",
                 name: wellName,
                 position: [startPoint[0], startPoint[1], -startPoint[2]],
                 alternativePositions: alternativePositions,

diff --git a/frontend/src/modules/_shared/customDeckGlLayers/WellborePicksLayer.ts b/frontend/src/modules/_shared/customDeckGlLayers/WellborePicksLayer.ts
@@ -89,8 +89,34 @@ export class WellborePicksLayer extends CompositeLayer<WellBorePicksLayerProps>
         this.props.reportAnnotations?.(
             this.id,
             this.props.data.map((wellPick, index) => {
+                if (index % 10 === 0) {
+                    return {
+                        id: `${wellPick.wellBoreUwi}_${wellPick.md}_${wellPick.tvdMsl}`,
+                        type: "pie-chart",
+                        data: {
+                            values: [0.2, 0.5, 0.3],
+                            colors: ["red", "green", "blue"],
+                            labels: ["A", "B", "C"],
+                        },
+                        name: wellPick.wellBoreUwi,
+                        position: [
+                            wellPick.easting,
+                            wellPick.northing,
+                            (zIncreaseDownwards ? -1.0 : 1.0) * wellPick.tvdMsl,
+                        ],
+                        priority: 0,
+                        direction: [0, 0, 1],
+                        onMouseOver: () => {
+                            this.setState({ hoveredIndex: index });
+                        },
+                        onMouseOut: () => {
+                            this.setState({ hoveredIndex: -1 });
+                        },
+                    };
+                }
                 return {
                     id: `${wellPick.wellBoreUwi}_${wellPick.md}_${wellPick.tvdMsl}`,
+                    type: "label",
                     name: wellPick.wellBoreUwi,
                     position: [
                         wellPick.easting,