annotations/ improve infoboxes and labels

Author: mxfh

libraries/mapping/annotations/core/src/lib/types/annotationTypes.ts

@@ -68,6 +68,11 @@ type NodeChainAnnotationBase = {
   name?: string;
   hidden?: boolean;
   segmentLineMode?: LinearSegmentLineMode;
+  distanceLineVisibility?: {
+    direct: boolean;
+    vertical: boolean;
+    horizontal: boolean;
+  };
   verticalOffsetMeters?: number;
   nodeIds: string[];
   edgeRelationIds: string[];

libraries/mapping/annotations/core/src/lib/utils/annotationLabel.ts

@@ -256,33 +256,31 @@ export const buildStandaloneDistancePointSets = <
 
 type BuildDesiredPointLabelAnchorByIdParams<
   TPointMeasurement extends PointLabelMeasurementLike,
-  TPolyline extends PolylineLabelLike
+  TNodeChain extends { id: string; nodeIds: ReadonlyArray<string> }
 > = {
   pointMeasurements: ReadonlyArray<TPointMeasurement>;
-  polylines: ReadonlyArray<TPolyline>;
+  nodeChains: ReadonlyArray<TNodeChain>;
   focusedNodeChainAnnotationId: string | null;
   pointMarkerBadgeByPointId: Readonly<Record<string, PointMarkerBadgeLike>>;
   standaloneDistanceHighestPointIds: ReadonlySet<string>;
   unfocusedStandaloneDistanceNonHighestPointIds: ReadonlySet<string>;
   focusedStandaloneDistanceNonHighestPointIds: ReadonlySet<string>;
-  formatDistanceLabel: (distanceMeters: number) => string;
 };
 
 export const buildDesiredPointLabelAnchorById = <
   TPointMeasurement extends PointLabelMeasurementLike,
-  TPolyline extends PolylineLabelLike
+  TNodeChain extends { id: string; nodeIds: ReadonlyArray<string> }
 >({
   pointMeasurements,
-  polylines,
+  nodeChains,
   focusedNodeChainAnnotationId,
   pointMarkerBadgeByPointId,
   standaloneDistanceHighestPointIds,
   unfocusedStandaloneDistanceNonHighestPointIds,
   focusedStandaloneDistanceNonHighestPointIds,
-  formatDistanceLabel,
 }: BuildDesiredPointLabelAnchorByIdParams<
   TPointMeasurement,
-  TPolyline
+  TNodeChain
 >): Readonly<Record<string, AnnotationLabelAnchor | undefined>> => {
   const byPointId: Record<string, AnnotationLabelAnchor | undefined> = {};
   pointMeasurements.forEach((measurement) => {
@@ -317,19 +315,15 @@ export const buildDesiredPointLabelAnchorById = <
     };
   });
 
-  polylines.forEach((polyline) => {
-    if (polyline.id === focusedNodeChainAnnotationId) return;
-    polyline.nodeIds.forEach((pointId) => {
+  nodeChains.forEach((nodeChain) => {
+    if (nodeChain.id === focusedNodeChainAnnotationId) {
+      return;
+    }
+
+    nodeChain.nodeIds.forEach((pointId) => {
       if (!pointId) return;
       byPointId[pointId] = undefined;
     });
-    const lastPointId = polyline.nodeIds[polyline.nodeIds.length - 1] ?? null;
-    if (!lastPointId) return;
-    byPointId[lastPointId] = {
-      anchorPointId: lastPointId,
-      compactContent: `${formatDistanceLabel(polyline.totalLengthMeters)}m`,
-      collapseToCompact: true,
-    };
   });
 
   return byPointId;

libraries/mapping/annotations/core/src/lib/utils/annotationStateEquality.ts

@@ -20,6 +20,29 @@ const areStringArraysEqual = (
   return true;
 };
 
+const areDistanceLineVisibilityEqual = (
+  left:
+    | {
+        direct: boolean;
+        vertical: boolean;
+        horizontal: boolean;
+      }
+    | undefined,
+  right:
+    | {
+        direct: boolean;
+        vertical: boolean;
+        horizontal: boolean;
+      }
+    | undefined
+) =>
+  left === right ||
+  (!!left &&
+    !!right &&
+    left.direct === right.direct &&
+    left.vertical === right.vertical &&
+    left.horizontal === right.horizontal);
+
 const areOptionalNumbersEqual = (
   left: number | undefined,
   right: number | undefined,
@@ -95,6 +118,10 @@ export const arePolygonAnnotationsEquivalent = (
     left.hidden === right.hidden &&
     left.type === right.type &&
     left.segmentLineMode === right.segmentLineMode &&
+    areDistanceLineVisibilityEqual(
+      left.distanceLineVisibility,
+      right.distanceLineVisibility
+    ) &&
     areOptionalNumbersEqual(
       left.verticalOffsetMeters,
       right.verticalOffsetMeters,

libraries/mapping/annotations/core/src/lib/utils/syncNodeChainEdgeDistanceRelations.ts

@@ -39,6 +39,8 @@ export const syncNodeChainEdgeDistanceRelations = ({
       pointAId: string;
       pointBId: string;
       showDirectLine: boolean;
+      showVerticalLine: boolean;
+      showHorizontalLine: boolean;
       showComponentLines: boolean;
     }
   >();
@@ -53,15 +55,23 @@ export const syncNodeChainEdgeDistanceRelations = ({
         ? defaultPolylineSegmentLineMode
         : LINEAR_SEGMENT_LINE_MODE_DIRECT);
     const showDirectLine = isDistanceGroup
-      ? true
+      ? group.distanceLineVisibility?.direct ?? true
       : isPolylineGroup
       ? segmentLineMode === LINEAR_SEGMENT_LINE_MODE_DIRECT
       : true;
-    const showComponentLines = isDistanceGroup
-      ? false
+    const showVerticalLine = isDistanceGroup
+      ? group.distanceLineVisibility?.vertical ?? false
       : isPolylineGroup
       ? segmentLineMode === LINEAR_SEGMENT_LINE_MODE_COMPONENTS
       : false;
+    const showHorizontalLine = isDistanceGroup
+      ? group.distanceLineVisibility?.horizontal ?? false
+      : isPolylineGroup
+      ? segmentLineMode === LINEAR_SEGMENT_LINE_MODE_COMPONENTS
+      : false;
+    const showComponentLines = isDistanceGroup
+      ? showVerticalLine || showHorizontalLine
+      : showVerticalLine || showHorizontalLine;
     const orderedVertices = group.nodeIds;
     for (let index = 0; index < orderedVertices.length - 1; index += 1) {
       const pointAId = orderedVertices[index];
@@ -73,6 +83,8 @@ export const syncNodeChainEdgeDistanceRelations = ({
         pointAId,
         pointBId,
         showDirectLine,
+        showVerticalLine,
+        showHorizontalLine,
         showComponentLines,
       });
     }
@@ -86,6 +98,8 @@ export const syncNodeChainEdgeDistanceRelations = ({
           pointAId: last,
           pointBId: first,
           showDirectLine,
+          showVerticalLine,
+          showHorizontalLine,
           showComponentLines,
         });
       }
@@ -113,8 +127,8 @@ export const syncNodeChainEdgeDistanceRelations = ({
       anchorPointId: desired.pointAId,
       polygonGroupId: desired.groupId,
       showDirectLine: desired.showDirectLine,
-      showVerticalLine: desired.showComponentLines,
-      showHorizontalLine: desired.showComponentLines,
+      showVerticalLine: desired.showVerticalLine,
+      showHorizontalLine: desired.showHorizontalLine,
       showComponentLines: desired.showComponentLines,
       labelVisibilityByKind: {
         ...defaultDistanceRelationLabelVisibility,
@@ -134,8 +148,8 @@ export const syncNodeChainEdgeDistanceRelations = ({
       anchorPointId: desired.pointAId,
       polygonGroupId: desired.groupId,
       showDirectLine: desired.showDirectLine,
-      showVerticalLine: desired.showComponentLines,
-      showHorizontalLine: desired.showComponentLines,
+      showVerticalLine: desired.showVerticalLine,
+      showHorizontalLine: desired.showHorizontalLine,
       showComponentLines: desired.showComponentLines,
       labelVisibilityByKind: {
         ...defaultDistanceRelationLabelVisibility,

libraries/mapping/annotations/runtime/src/lib/components/annotation-info-box/AnnotationInfo.types.ts

@@ -4,7 +4,6 @@ export type AnnotationInfoBoxPayload = {
   pixelWidth: number;
   headingColor: string;
   headingTitle: string;
-  headingActions?: ReactNode;
   collapsible: boolean;
   footer: ReactNode;
   subtitle: ReactNode;

libraries/mapping/annotations/runtime/src/lib/components/annotation-info-box/AnnotationInfoBox.tsx

@@ -14,7 +14,6 @@ export function AnnotationInfoBox({
     pixelWidth: boxWidth,
     headingColor,
     headingTitle,
-    headingActions,
     collapsible,
     footer,
     subtitle,
@@ -31,11 +30,10 @@ export function AnnotationInfoBox({
         headingColor={headingColor}
         footer={footer}
         heading={
-          <div className="w-full px-2 flex items-center justify-between">
+          <div className="w-full px-2 flex items-center">
             <span className="truncate" title={headingTitle}>
               {headingTitle}
             </span>
-            {headingActions ?? null}
           </div>
         }
         subtitle={subtitle}

libraries/mapping/annotations/runtime/src/lib/components/annotation-info-box/annotationInfoBoxSlots.types.ts

@@ -85,7 +85,6 @@ export type AnnotationInfoBoxEntryPayload = {
 
 export type AnnotationSlots = {
   headingTitle: string;
-  headingActions?: ReactNode;
   subtitle: ReactNode;
   content: ReactNode;
   collapsible: boolean;

libraries/mapping/annotations/runtime/src/lib/components/annotation-info-box/components/AnnotationInfoBoxActionIcon.tsx

@@ -2,6 +2,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Tooltip } from "antd";
 import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import type { MouseEvent as ReactMouseEvent } from "react";
+import { annotationTooltipProps } from "../../shared/annotationTooltip";
 
 const DEFAULT_ICON_CLASSNAME =
   "cursor-pointer text-base text-[#808080] hover:text-[#a0a0a0]";
@@ -24,7 +25,7 @@ export const AnnotationInfoBoxActionIcon = ({
   ariaLabel,
 }: AnnotationInfoBoxActionIconProps) => {
   return (
-    <Tooltip title={title}>
+    <Tooltip {...annotationTooltipProps} title={title}>
       <FontAwesomeIcon
         onClick={onClick}
         className={className ?? DEFAULT_ICON_CLASSNAME}

libraries/mapping/annotations/runtime/src/lib/components/annotation-info-box/components/AnnotationJsonPreview.tsx

@@ -9,14 +9,14 @@ export const AnnotationJsonPreview = ({
 }: AnnotationJsonPreviewProps) => {
   if (value == null) {
     return (
-      <div className="mt-2 w-[90%] p-2 text-[#212529] font-normal text-xs leading-normal">
+      <div className="mt-2 w-[90%] p-2 text-[#212529] font-normal text-[12px] leading-normal">
         {emptyText}
       </div>
     );
   }
 
   return (
-    <pre className="m-0 w-full overflow-auto px-2 pb-2 text-[11px] leading-normal text-[#212529] whitespace-pre-wrap break-words">
+    <pre className="m-0 w-full overflow-auto px-2 pb-2 text-[12px] leading-normal text-[#212529] whitespace-pre-wrap break-words">
       {JSON.stringify(value, null, 2)}
     </pre>
   );

libraries/mapping/annotations/runtime/src/lib/components/annotation-info-box/content-generators/getDistanceAnnotationInfoBoxSlots.tsx

@@ -16,7 +16,7 @@ import type {
 import {
   DISTANCE_TITLE,
   getDistanceInstructionText,
-  getDistanceTitleToken,
+  getInfoBoxDistanceDefaultName,
   renderDistanceTableContent,
   renderEditableAnnotationSubtitle,
 } from "./shared";
@@ -244,8 +244,7 @@ export const getDistanceAnnotationInfoBoxSlots = (
   return {
     headingTitle: DISTANCE_TITLE,
     subtitle: renderEditableAnnotationSubtitle({
-      annotationTypeTitle: DISTANCE_TITLE,
-      titleToken: getDistanceTitleToken({
+      defaultDisplayName: getInfoBoxDistanceDefaultName({
         currentOrderToken,
         currentOrder,
         nextOrder,