Update nerve cuff selection to be consistent with other selectable objects

src/flatmap.ts

@@ -245,6 +245,7 @@ export class FlatMap
     #taxonToFeatureIds: FeatureIdMap = new Map()
     #userInteractions: UserInteractions|null = null
     #uuid: string
+    #nerveToFeatureIds: Map<GeoJSONId, GeoJSONId[]> = new Map()
 
     constructor(container: string, mapServer: FlatMapServer, mapDescription: MapDescription)
     {
@@ -922,6 +923,21 @@ export class FlatMap
         return null
     }
 
+    /**
+     * Get feature GeoJSON ids given a nerve id.
+     *
+     * @param      {GeoJSONId}  nerveId  The nerve identifier
+     * @return     {GeoJSONId[]}          The feature GeoJSON ids
+     */
+    featureIdsByNerveId(nerveId: GeoJSONId): GeoJSONId[]
+    //=================================================
+    {
+        if (this.#nerveToFeatureIds.has(nerveId)) {
+            return this.#nerveToFeatureIds.get(nerveId) || []
+        }
+        return []
+    }
+
     /**
      * Flag the feature as having external annotation.
      *
@@ -1001,6 +1017,15 @@ export class FlatMap
         }
         this.#annIdToFeatureId.set(ann.id, featureId)
 
+        if ('nerveId' in ann && ann.nerveId && 'type' in ann && ann.type === 'nerve') {
+            const existingFeatureIds = this.#nerveToFeatureIds.get(ann.nerveId as GeoJSONId)
+            if (existingFeatureIds) {
+                existingFeatureIds.push(featureId)
+            } else {
+                this.#nerveToFeatureIds.set(ann.nerveId as GeoJSONId, [featureId])
+            }
+        }
+
         // Pre-compute LineStrings of centrelines in centreline maps
         if (this.options.style === FLATMAP_STYLE.CENTRELINE && ann.centreline) {
             try {

src/interactions.ts

@@ -816,6 +816,12 @@ export class UserInteractions
             if (!this.#activeFeatures.has(+feature.id!)) {
                 this.#activeFeatures.set(+feature.id!, feature)
             }
+            // If the feature is a nerve, activate its inner features too
+            for (const innerFeatureId of this.#flatmap.featureIdsByNerveId(+feature.id!)) {
+                if (+feature.id! !== innerFeatureId){
+                    this.activateFeature(this.mapFeature(+innerFeatureId))
+                }
+            }
         }
     }
 

src/layers/styling.ts

@@ -1110,30 +1110,34 @@ export class NervePolygonFill extends VectorStyleLayer
         const dimmed = options.dimmed || false
         const paintStyle: PaintSpecification = {
             'fill-color': [
-                'let', 'active', ['to-number', ['feature-state', 'active'], 0],
-                [ 'case',
-                    ['all',
-                        ['==', ['var', 'active'], 0],
-                        ['==', ['get', 'type'], 'arrow'],
-                        ['boolean', ['feature-state', 'selected'], false]
-                    ], COLOUR_SELECTED,
-                    ['==', ['get', 'kind'], 'bezier-end'], 'red',
-                    ['==', ['get', 'kind'], 'bezier-control'], 'green',
-                    // @ts-expect-error 2322
-                    ...PATH_STYLE_RULES, '#A5F160'
-                ]
+                'case',
+                ['boolean', ['feature-state', 'selected'], false], COLOUR_SELECTED,
+                ['all',
+                    ['==', ['case', ['has', 'shape-type'], ['get', 'shape-type'], 'component'], 'component'],
+                    ['boolean', ['feature-state', 'active'], false]
+                ], '#D88',
+                ['has', 'colour'], ['get', 'colour'],
+                ['==', ['get', 'kind'], 'bezier-end'], 'red',
+                ['==', ['get', 'kind'], 'bezier-control'], 'green',
+                // @ts-expect-error 2322
+                ...PATH_STYLE_RULES, '#00A0FF'
             ],
             'fill-opacity': [
                 'case',
                 ['boolean', ['feature-state', 'hidden'], false], 0.01,
-                ['boolean', ['feature-state', 'selected'], false], 0.8,
-                ['boolean', ['feature-state', 'active'], false], 0.9,
-                ['==', ['get', 'type'], 'bezier'], 0.9,
+                ['boolean', ['feature-state', 'selected'], false], 0.2,
+                ['has', 'opacity'], ['get', 'opacity'],
+                ['has', 'colour'], 1.0,
+                ['==', ['get', 'kind'], 'proxy'], 1.0,
+                ['all',
+                    ['==', ['case', ['has', 'shape-type'], ['get', 'shape-type'], 'component'], 'component'],
+                    ['boolean', ['feature-state', 'active'], false]
+                ], 0.7,
                 ['any',
                     ['==', ['get', 'type'], 'arrow'],
                     ['==', ['get', 'type'], 'junction']
                 ], dimmed ? 0.1 : 0.5,
-                1.0
+                0.5
             ]
         }
         return super.changedPaintStyle(paintStyle, changes)

src/legend.ts

@@ -23,6 +23,7 @@ export type FlatmapLegendEntry = {
     colour: string
     style: 'circle' | 'exoid' | 'hexagon' |'rounded-square' | 'square' | 'star'
     border?: string
+    borderStyle?: string
 }
 
 export const FLATMAP_LEGEND: FlatmapLegendEntry[] = [
@@ -51,6 +52,13 @@ export const FLATMAP_LEGEND: FlatmapLegendEntry[] = [
         colour: '#FFFF09',
         style: 'star',
         border: 'black'
+    },
+    {
+        prompt: 'Nerve',
+        colour: '#00A0FF80',
+        style: 'circle',
+        border: 'grey',
+        borderStyle: 'dashed'
     }
 ]