optica-core 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "optica-core",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Shared frontend core of the Optica viewers",
   "license": "GPL-3.0-or-later",
   "type": "module",
@@ -30,7 +30,6 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "color": "^4.2.3",
-    "embla-carousel-vue": "^8.6.0",
     "mathjs": "^15.2.0",
     "reka-ui": "^2.11.0",
     "tailwind-merge": "^2.6.1",
@@ -41,9 +40,6 @@
     "vuedraggable": "^4.1.0"
   },
   "peerDependenciesMeta": {
-    "embla-carousel-vue": {
-      "optional": true
-    },
     "vee-validate": {
       "optional": true
     },
@@ -61,7 +57,6 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "color": "^4.2.3",
-    "embla-carousel-vue": "^8.6.0",
     "mathjs": "^15.2.0",
     "reka-ui": "^2.11.0",
     "tailwind-merge": "^2.6.1",

package/src/components/ui/app-menu/AppMenu.vue

@@ -143,7 +143,7 @@ function onSubmit(event: Event) {
       <DialogContent class="flex h-[85vh] w-[50vw] max-w-none sm:max-w-none flex-col overflow-hidden">
         <DialogHeader class="shrink-0">
           <DialogTitle>Credits</DialogTitle>
-          <DialogDescription>Thank to everyone that contributed to this project</DialogDescription>
+          <DialogDescription>Thanks to everyone that contributed to this project</DialogDescription>
         </DialogHeader>
         <div class="min-h-0 h-full w-full flex-1 overflow-y-auto overflow-x-hidden">
           <slot name="credits">

package/src/components/ui/distance/DistanceIteration.vue

@@ -3,14 +3,13 @@ import { computed, ref, useTemplateRef } from "vue"
 import { round } from "mathjs"
 import draggable from "vuedraggable"
 import { PhEraser, PhEye, PhEyeSlash, PhX } from "@phosphor-icons/vue"
-import { ROUNDING, toScale, type ScaleUnit } from "../../../lib/utils"
+import { ROUNDING, Scale, toScale, type ScaleUnit } from "../../../lib/utils"
 import { Button } from "../button"
 import { Input } from "../input"
 import { Label } from "../label"
 import { LandmarkIteration } from "../landmark"
 import { SelectScale } from "../select-scale"
-import { defaultMeasure } from "./measure"
-import type { ListDistance, Measure } from "./types"
+import type { ListDistance } from "./types"
 
 const scale = defineModel<ScaleUnit>('scale', { required: true })
 
@@ -20,7 +19,6 @@ const props = withDefaults(defineProps<{
   // the selected distance shows its landmarks and its length
   selected?: boolean
   adjustFactor?: number
-  measure?: Measure<D>
   // units of the scale select
   units?: ScaleUnit[]
 }>(), {
@@ -46,8 +44,8 @@ const input = useTemplateRef('input')
 const scrollSnapType = ref<boolean>(true)
 
 const length = computed(() => {
-  const value = (props.measure ?? defaultMeasure)(props.distance, scale.value)
-  return value == undefined ? 0 : round(toScale(value, props.adjustFactor, scale.value), ROUNDING)
+  const value = props.distance.length(scale.value)
+  return value == undefined ? 0 : round(toScale(value, props.adjustFactor) / Scale[scale.value], ROUNDING)
 })
 
 function changeColor(event: Event) {

package/src/components/ui/distance/DistanceList.vue

@@ -6,7 +6,7 @@ import { PhCircle } from "@phosphor-icons/vue"
 import { Button } from "../button"
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../select"
 import DistanceIteration from "./DistanceIteration.vue"
-import type { ListDistance, Measure } from "./types"
+import type { ListDistance } from "./types"
 
 const distances = defineModel<D[]>({ required: true })
 // index of the selected distance, -1: the next landmark creates a new distance
@@ -15,7 +15,6 @@ const scale = defineModel<ScaleUnit>('scale', { required: true })
 
 withDefaults(defineProps<{
   adjustFactor?: number
-  measure?: Measure<D>
   // units of the scale select
   units?: ScaleUnit[]
 }>(), {
@@ -78,13 +77,13 @@ function deleteDistance(index: number) {
       <Button variant="secondary" @click="select(-1)">New..</Button>
     </div>
     <DistanceIteration v-if="selectedDistance" v-model:scale="scale" :distance="selectedDistance"
-      :index="selectedIndex" :selected="true" :adjust-factor="adjustFactor" :measure="measure" :units="units"
+      :index="selectedIndex" :selected="true" :adjust-factor="adjustFactor" :units="units"
       @delete="deleteDistance">
       <template v-if="$slots.info" #info="slotProps"><slot name="info" v-bind="slotProps" /></template>
       <template v-if="$slots['landmark-info']" #landmark-info="slotProps"><slot name="landmark-info" v-bind="slotProps" /></template>
     </DistanceIteration>
     <DistanceIteration v-for="{ distance, index } in others" :key="index" v-model:scale="scale" :distance="distance"
-      :index="index" :selected="false" :adjust-factor="adjustFactor" :measure="measure" :units="units" @delete="deleteDistance"
+      :index="index" :selected="false" :adjust-factor="adjustFactor" :units="units" @delete="deleteDistance"
       @select="select">
       <template v-if="$slots.info" #info="slotProps"><slot name="info" v-bind="slotProps" /></template>
     </DistanceIteration>

package/src/components/ui/distance/index.ts

@@ -1,5 +1,3 @@
 export { default as DistanceIteration } from "./DistanceIteration.vue"
 export { default as DistanceList } from "./DistanceList.vue"
-export { default as DistanceMeasures } from "./DistanceMeasures.vue"
-export { defaultMeasure } from "./measure"
 export type * from "./types"

package/src/components/ui/distance/types.ts

@@ -1,22 +1,17 @@
 import type { ScaleUnit } from "../../../lib/utils"
 import type { ListLandmark } from "../landmark/types"
 
-// What the measures table needs from a distance
-export interface MeasuredDistance {
+// What the distance lists need, the core Distance fits
+export interface ListDistance<L extends ListLandmark = ListLandmark> {
   label: string
   edit_label: boolean
   edit_distance: boolean
-  getColorHEX(): string
-}
-
-// What the distance lists need, the core Distance fits
-export interface ListDistance<L extends ListLandmark = ListLandmark> extends MeasuredDistance {
   landmarks: L[]
   show: boolean
+  getColorHEX(): string
   setColorHEX(color: string): void
   reset(): void
   remove(landmark: L | string): void
+  // length in image units for a scale, undefined while it can't be measured
+  length(scale?: ScaleUnit): number | undefined
 }
-
-// length of a distance in image units for a scale, undefined while it can't be measured
-export type Measure<D> = (distance: D, scale: ScaleUnit) => number | undefined

package/src/components/ui/image-overview/ImageOverview.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { PhArrowsOut } from "@phosphor-icons/vue"
+import { cn } from "../../../lib/utils"
+import { fitCamera, type Camera } from "../../../data/models/camera"
+import type { ProjectImage, Size } from "../../../data/models/image"
+import type { Coordinates } from "../../../data/models/coordinates"
+import { Button } from "../button"
+import { Label } from "../label"
+import { ThumbnailViewer } from "../thumbnail-viewer"
+
+// Top of the sidebars: the thumbnail of the shown image with the visible part of the viewer,
+// and under it its label, its position in the group and the fit to screen button
+const props = defineProps<{
+  image: ProjectImage
+  // size of the full image, the zoom rect of the camera is in its pixels
+  size: Size
+  // camera of the ImageViewer: the thumbnail shows its zoom rect, the button refits it
+  camera: Camera
+  // position of the image in its group (stack: "3/12"), hidden without it
+  counter?: string
+  class?: HTMLAttributes["class"]
+  thumbnailClass?: HTMLAttributes["class"]
+}>()
+
+const emit = defineEmits<{
+  // drag on the thumbnail, as a fraction of its size (sphaer turns it into a rotation)
+  drag: [movement: Coordinates]
+}>()
+
+const slots = defineSlots<{
+  // shown left of the thumbnail, which then takes half of the width (polar: the circular slider)
+  aside?(): any
+}>()
+</script>
+
+<template>
+  <div :class="cn('flex justify-center', props.class)">
+    <div class="flex flex-col gap-2" :class="slots.aside ? 'w-[350px] max-w-full' : 'w-4/5'">
+      <div class="flex items-center">
+        <div v-if="slots.aside" class="w-1/2">
+          <slot name="aside" />
+        </div>
+        <ThumbnailViewer :class="cn(slots.aside ? 'w-1/2 shrink' : 'w-full', props.thumbnailClass)"
+          :src="image.thumbnail || image.image" :alt="image.label" :size="size" :zoom-rect="camera.zoomRect"
+          @drag="(movement) => emit('drag', movement)" />
+      </div>
+      <div class="flex items-center gap-2">
+        <Label class="block min-w-0 truncate leading-normal" :title="image.label">{{ image.label }}</Label>
+        <Label v-if="counter" class="ml-auto flex-none tabular-nums text-muted-foreground">{{ counter }}</Label>
+        <Button variant="ghost" size="icon-sm" class="flex-none" :class="{ 'ml-auto': !counter }" title="Fit to screen"
+          aria-label="Fit to screen" @click="fitCamera(camera)">
+          <PhArrowsOut />
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/ui/image-overview/index.ts

@@ -0,0 +1 @@
+export { default as ImageOverview } from "./ImageOverview.vue"

package/src/components/ui/image-viewer/drawing.ts

@@ -1,4 +1,5 @@
 import type { Coordinates } from "../../../data/models/coordinates"
+import type { Landmark } from "../../../data/models/landmark"
 import { degreesToRad, SPACE_TARGET } from "../../../lib/utils"
 
 export function posCircle(center: Coordinates, angle: number, radius: number): Coordinates {

package/src/components/ui/project-loader/ProjectLoader.vue

@@ -17,6 +17,11 @@ defineSlots<{
 const { isPending, isError, data, error } = useQuery({
   queryKey: props.queryKey,
   queryFn: () => props.load(),
+  // load() replaces the project of the store (shown image back to the first one):
+  // the images do not change during a session, never load them again on their own
+  staleTime: Infinity,
+  refetchOnWindowFocus: false,
+  refetchOnReconnect: false,
 })
 </script>
 

package/src/components/ui/slider/Slider.vue

@@ -5,10 +5,16 @@ import { reactiveOmit } from "@vueuse/core"
 import { cn } from "../../../lib/utils"
 import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from "reka-ui"
 
-const props = defineProps<SliderRootProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<SliderRootProps & {
+  class?: HTMLAttributes["class"]
+  // e.g. bg-transparent to show what is behind the slider (spectral: the colours of the wavelengths)
+  trackClass?: HTMLAttributes["class"]
+  rangeClass?: HTMLAttributes["class"]
+  thumbClass?: HTMLAttributes["class"]
+}>()
 const emits = defineEmits<SliderRootEmits>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class", "trackClass", "rangeClass", "thumbClass")
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
@@ -25,11 +31,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   >
     <SliderTrack
       data-slot="slider-track"
-      class="bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+      :class="cn(
+        'bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5',
+        props.trackClass,
+      )"
     >
       <SliderRange
         data-slot="slider-range"
-        class="bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+        :class="cn('bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full', props.rangeClass)"
       />
     </SliderTrack>
 
@@ -37,7 +46,10 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-for="(_, key) in modelValue"
       :key="key"
       data-slot="slider-thumb"
-      class="bg-white border-primary ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+      :class="cn(
+        'bg-white border-primary ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',
+        props.thumbClass,
+      )"
     />
   </SliderRoot>
 </template>

package/src/components/ui/toggle-image/ToggleImage.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ToggleGroup, ToggleGroupItem } from "../toggle-group"
+import type { ToggleImageItem } from "./types"
+
+// value of the shown image (depth: acquisition id, stack: stack or a stacked image)
+const selected = defineModel<string>()
+
+defineProps<{
+  items: ToggleImageItem[]
+}>()
+
+// clicking the active button unselects it: keep the shown image
+function select(value: unknown) {
+  if (typeof value == "string") {
+    selected.value = value
+  }
+}
+</script>
+
+<template>
+  <div class="flex justify-center p-4">
+    <ToggleGroup type="single" variant="outline" :spacing="5" class="w-auto max-w-full flex-wrap justify-center"
+      :model-value="selected" @update:model-value="select">
+      <ToggleGroupItem v-for="item in items" :key="item.value" :value="item.value">
+        {{ item.label }}
+      </ToggleGroupItem>
+    </ToggleGroup>
+  </div>
+</template>

package/src/components/ui/toggle-image/index.ts

@@ -0,0 +1,2 @@
+export { default as ToggleImage } from "./ToggleImage.vue"
+export type * from "./types"

package/src/components/ui/toggle-image/types.ts

@@ -0,0 +1,5 @@
+// one button of the image toggle
+export interface ToggleImageItem {
+  value: string
+  label: string
+}

package/src/data/models/annotations.ts

@@ -1,13 +1,19 @@
-import { isScaleUnit, type ScaleUnit } from "../../lib/utils"
+import { round } from "mathjs"
+import { adjustFactorFor, isScaleUnit, randomID, ROUNDING, Scale, toScale, type ScaleUnit } from "../../lib/utils"
 import { Distance, type DistanceObject } from "./distance"
 import { Landmark, type LandmarkObject } from "./landmark"
 
+// Saved form of a distance of the annotations: with its length shown in the scale of the annotations (not read back)
+export type DistanceAnnotationObject = DistanceObject & {
+    value: number
+}
+
 // Saved form of the annotations of an acquisition (scale_factor: key of the first polar exports)
 export type AnnotationsObject = {
     scale_factor: number
     scale?: ScaleUnit
     landmarks: LandmarkObject[]
-    distances: DistanceObject[]
+    distances: DistanceAnnotationObject[]
 }
 
 // Sidebar state of the annotations: kept across reloads, not exported
@@ -16,7 +22,24 @@ export type AnnotationsSelection = {
     selectedDistanceIndex: number
 }
 
-export const ANNOTATIONS_CSV_HEADER = ["Group", "Group Label", "Landmark Label", "Color", "Pose_X", "Pose_Y", "Image", "ImageLabel", "X", "Y", "Z"]
+// What a Project needs from the annotations of an acquisition (export, import, persistence):
+// the core Annotations, or an app's own set when its landmarks differ (sphaer: one pose per view)
+export interface AnnotationsSet {
+    // saved form, also what merge and restore read back
+    toJSON(): object
+    // adds saved annotations (import)
+    merge(object: any): void
+    // replaces these annotations by saved ones (persistence)
+    restore(object: any): void
+    // sidebar state, kept across reloads but not exported
+    getSelection(): object
+    setSelection(selection: any): void
+    // the header of toCSVRows
+    csvHeader(): string[]
+    toCSVRows(): string[][]
+}
+
+export const ANNOTATIONS_CSV_HEADER =["Group", "Group Label", "Landmark Label", "Color", "Pose_X", "Pose_Y", "Image", "ImageLabel", "X", "Y", "Z"]
 
 // one CSV row (ANNOTATIONS_CSV_HEADER), `group`: label of the distance or profile of the landmark
 export function landmarkCSVRow(type: string, group: string, landmark: Landmark): string[] {
@@ -28,7 +51,7 @@ export function landmarkCSVRow(type: string, group: string, landmark: Landmark):
 
 // Landmarks and distances of an acquisition: all its images (group and standalone) share
 // one coordinate space, so one calibration. Apps with more annotations or rules extend it.
-export class Annotations {
+export class Annotations implements AnnotationsSet {
     landmarks: Landmark[] = []
     distances: Distance[] = []
     // calibration of the coordinate space
@@ -51,7 +74,7 @@ export class Annotations {
         const used = new Set(this.allLandmarks.map((landmark) => landmark.id))
         let id: string
         do {
-            id = (Math.random() + 1).toString(36).substring(2)
+            id = randomID()
         } while (used.has(id))
         return id
     }
@@ -68,6 +91,19 @@ export class Annotations {
         return this.distances[index]!
     }
 
+    // length in image units shown in the current scale, corrected by the calibration and rounded
+    scaled(length: number): number {
+        return round(toScale(length, this.adjustFactor) / Scale[this.scale], ROUNDING)
+    }
+
+    // typing a known length on a distance calibrates the coordinate space
+    calibrate(distance: Distance, target: number) {
+        const value = distance.length(this.scale)
+        if (value && target > 0) {
+            this.adjustFactor = adjustFactorFor(value, target, this.scale)
+        }
+    }
+
     removeLandmark(id: string) {
         this.distances.forEach((distance) => distance.remove(id))
         this.landmarks = this.landmarks.filter((landmark) => !landmark.equals(id))
@@ -91,7 +127,10 @@ export class Annotations {
             scale_factor: this.adjustFactor,
             scale: this.scale,
             landmarks: this.landmarks.map((landmark) => landmark.toJSON()),
-            distances: this.distances.map((distance) => distance.toJSON()),
+            distances: this.distances.map((distance) => ({
+                ...distance.toJSON(),
+                value: this.scaled(distance.length(this.scale) ?? 0),
+            })),
         }
     }
 
@@ -100,7 +139,7 @@ export class Annotations {
     protected claimIDs(landmarks: Landmark[], used: Set<string>) {
         landmarks.forEach((landmark) => {
             while (used.has(landmark.id)) {
-                landmark.id = (Math.random() + 1).toString(36).substring(2)
+                landmark.id = randomID()
             }
             used.add(landmark.id)
         })
@@ -146,9 +185,12 @@ export class Annotations {
         }
     }
 
+    csvHeader(): string[] {
+        return ANNOTATIONS_CSV_HEADER
+    }
+
     // one row per landmark, the ones of a distance carry its label (no header)
     toCSVRows(): string[][] {
-        console.log("toCSVRows", this.landmarks, this.distances)
         return [
             ...this.landmarks.map((landmark) => landmarkCSVRow("Landmark", "", landmark)),
             ...this.distances.flatMap((distance) => distance.landmarks.map((landmark) => landmarkCSVRow("Distance", distance.label, landmark))),

package/src/data/models/camera.ts

@@ -15,6 +15,11 @@ export type Camera = {
     zoomRect: ZoomRect
 }
 
+// The ImageViewer showing this camera fits the whole image on its next update
+export function fitCamera(camera: Camera) {
+    camera.zoom = 0
+}
+
 export function createCamera(): Camera {
     return {
         zoom: 0,

package/src/data/models/distance.ts

@@ -1,12 +1,12 @@
 import Color from "color"
 import { Landmark, type LandmarkObject } from "./landmark"
 import { distanceVector, type Coordinates, type Position } from "./coordinates"
-import { computeDistance, randomColorRGB } from "../../lib/utils"
+import { computeDistance, randomColorRGB, type ScaleUnit } from "../../lib/utils"
 
 export type DistanceObject = {
     label: string
     landmarks: Array<LandmarkObject>
-    color: string
+    color: string,
 }
 
 export class Distance {
@@ -50,9 +50,11 @@ export class Distance {
         return distance
     }
 
-    get length() : number | undefined {
-        const distance = this.distance
-        return distance === undefined ? undefined : computeDistance(distance)
+    // length in image units: pixel length for the "px" scale, physical length otherwise.
+    // undefined while it can't be measured
+    length(scale?: ScaleUnit) : number | undefined {
+        const intervals = scale == "px" ? this.distancePx : this.distance
+        return intervals === undefined ? undefined : computeDistance(intervals)
     }
 
     in(landmark : Landmark | string) : boolean{
@@ -80,6 +82,7 @@ export class Distance {
         this.color = Color.rgb(color[0], color[1], color[2])
     }
 
+    // the value (shown length) needs the calibration: Annotations.toJSON adds it
     toJSON() : DistanceObject {
         return { label: this.label, color: this.color.hex(), landmarks : this.landmarks.map((x) => x.toJSON())}
     }

package/src/data/models/project.ts

@@ -1,9 +1,9 @@
-import { ANNOTATIONS_CSV_HEADER, Annotations, type AnnotationsObject } from "./annotations"
+import { Annotations, type AnnotationsSet } from "./annotations"
 import { createCamera, type Camera } from "./camera"
 import type { ProjectImage, Size } from "./image"
 
 // One acquisition as sent by the backend
-export type AcquisitionObject<TImage extends ProjectImage> = {
+export type AcquisitionObject<TImage extends ProjectImage = ProjectImage> = {
     id: string
     label?: string
     // images taken together, in order: the stack, the rotation, the spectral images, the sphere of views
@@ -14,8 +14,9 @@ export type AcquisitionObject<TImage extends ProjectImage> = {
     thumbnails: boolean
 }
 
-// Images taken together, with the viewer state and the annotations of the acquisition
-export class Acquisition<TImage extends ProjectImage> {
+// Images taken together, with the viewer state and the annotations of the acquisition.
+// TAnnotations: an app's own set when its landmarks are not the core ones (sphaer)
+export class Acquisition<TImage extends ProjectImage = ProjectImage, TAnnotations extends AnnotationsSet = Annotations> {
     id: string
     label: string
     images: TImage[]
@@ -24,7 +25,7 @@ export class Acquisition<TImage extends ProjectImage> {
     thumbnails: boolean
     camera: Camera
     // shared by the images of the group and the standalone ones
-    annotations: Annotations
+    annotations: TAnnotations
     // position in images
     index: number
     // name of the shown standalone image, null when an image of the group is shown
@@ -44,9 +45,9 @@ export class Acquisition<TImage extends ProjectImage> {
         this.standalone = (this.images.length == 0) ? (this.standaloneImages[0]?.name ?? null) : null
     }
 
-    // apps with their own Annotations subclass override it (and `declare` the annotations type)
-    protected createAnnotations(): Annotations {
-        return new Annotations()
+    // apps with their own annotations override it (and `declare` the annotations type, or pass TAnnotations)
+    protected createAnnotations(): TAnnotations {
+        return new Annotations() as AnnotationsSet as TAnnotations
     }
 
     get hasGroup(): boolean {
@@ -126,7 +127,7 @@ export class Acquisition<TImage extends ProjectImage> {
 }
 
 // An object and its acquisitions
-export class Project<TImage extends ProjectImage = ProjectImage, TAcquisition extends Acquisition<TImage> = Acquisition<TImage>> {
+export class Project<TImage extends ProjectImage = ProjectImage, TAcquisition extends Acquisition<TImage, AnnotationsSet> = Acquisition<TImage>> {
     objectPath: string
     acquisitions: TAcquisition[]
     // position in acquisitions
@@ -168,14 +169,14 @@ export class Project<TImage extends ProjectImage = ProjectImage, TAcquisition ex
     }
 
     // annotations of every acquisition, by acquisition id (export and persistence)
-    annotationsToJSON(): Record<string, AnnotationsObject> {
-        return Object.fromEntries(this.acquisitions.map((acquisition) => [acquisition.id, acquisition.annotations.toJSON()]))
+    annotationsToJSON(): Record<string, ReturnType<TAcquisition["annotations"]["toJSON"]>> {
+        return Object.fromEntries(this.acquisitions.map((acquisition) => [acquisition.id, acquisition.annotations.toJSON()])) as Record<string, ReturnType<TAcquisition["annotations"]["toJSON"]>>
     }
 
     // Reads annotationsToJSON(), or the annotations of a single acquisition (exports made before
     // the acquisitions) which go to the selected one. replace: restore instead of adding.
-    importAnnotations(object: Record<string, Partial<AnnotationsObject>> | Partial<AnnotationsObject>, replace: boolean = false) {
-        const apply = (acquisition: TAcquisition | undefined, annotations: Partial<AnnotationsObject>) => {
+    importAnnotations(object: Record<string, object> | object, replace: boolean = false) {
+        const apply = (acquisition: TAcquisition | undefined, annotations: object) => {
             if (replace) {
                 acquisition?.annotations.restore(annotations)
             } else {
@@ -183,18 +184,18 @@ export class Project<TImage extends ProjectImage = ProjectImage, TAcquisition ex
             }
         }
         if ("landmarks" in object || "distances" in object) {
-            apply(this.acquisition, object as Partial<AnnotationsObject>)
+            apply(this.acquisition, object)
             return
         }
-        Object.entries(object as Record<string, Partial<AnnotationsObject>>).forEach(([id, annotations]) => {
+        Object.entries(object as Record<string, object>).forEach(([id, annotations]) => {
             apply(this.getAcquisition(id), annotations)
         })
     }
 
-    // one row per landmark of every acquisition, with a header
+    // one row per landmark of every acquisition, with a header (the one of the annotations of the first acquisition)
     annotationsToCSVRows(): string[][] {
         return [
-            ["Acquisition", ...ANNOTATIONS_CSV_HEADER],
+            ["Acquisition", ...(this.acquisitions[0]?.annotations.csvHeader() ?? new Annotations().csvHeader())],
             ...this.acquisitions.flatMap((acquisition) => acquisition.annotations.toCSVRows().map((row) => [acquisition.id, ...row])),
         ]
     }

package/src/data/providers/orthanc_providers.ts

@@ -1,6 +1,7 @@
 import axios, { type AxiosResponse } from "axios";
 import type { DataProvider } from "./providers";
 import type { Coordinates } from "../models/coordinates";
+import { segment } from "./routes";
 
 // Orthanc plugins serve the images by instance id under /<plugin>/
 export class OrthancProvider implements DataProvider {
@@ -18,11 +19,11 @@ export class OrthancProvider implements DataProvider {
 
     // the instance id is enough to find the image
     imageUrl(objectPath: string, imageName: string, action: string): string {
-        return this.url(imageName + "/" + action)
+        return this.url(segment(imageName) + "/" + action)
     }
 
     async getImages(objectPath: string): Promise<AxiosResponse> {
-        return axios.get(this.url(objectPath + "/images"))
+        return axios.get(this.url(segment(objectPath) + "/images"))
     }
 
     getFullImage(objectPath: string, imageName : string): string {

package/src/data/providers/routes.ts

@@ -1,8 +1,11 @@
+// An id is one segment of the route: encoded, so an object path or image name can't point to another route
+export const segment = encodeURIComponent
+
 // Routes exposed by every Optica backend (see core/api/optica_core/routes.py)
 export const routes = {
-    images: (objectPath: string) => `${objectPath}/images`,
+    images: (objectPath: string) => `${segment(objectPath)}/images`,
     // a route about one image: the common ones below, and the app ones (depth: "profile")
-    image: (objectPath: string, imageName: string, action: string) => `${objectPath}/${imageName}/${action}`,
+    image: (objectPath: string, imageName: string, action: string) => `${segment(objectPath)}/${segment(imageName)}/${action}`,
     fullImage: (objectPath: string, imageName: string) => routes.image(objectPath, imageName, "full-image"),
     thumbnail: (objectPath: string, imageName: string) => routes.image(objectPath, imageName, "thumbnail"),
     position: (objectPath: string, imageName: string) => routes.image(objectPath, imageName, "position"),

package/src/data/repositories/project_repository.ts

@@ -1,13 +1,14 @@
 import type { DataProvider } from "../providers/providers";
 import type { ProjectImage } from "../models/image";
 import { Acquisition, Project, type AcquisitionObject } from "../models/project";
+import type { AnnotationsSet } from "../models/annotations";
 import { DataRepository } from "./data_repository";
 
 // /images payload -> acquisitions; the default reads { acquisitions: [...] }
 export type ProjectParser<TImage extends ProjectImage> = (data: any) => AcquisitionObject<TImage>[]
 
 // builds the acquisitions, apps with their own Acquisition subclass pass one
-export type AcquisitionFactory<TImage extends ProjectImage, TAcquisition extends Acquisition<TImage>> =
+export type AcquisitionFactory<TImage extends ProjectImage, TAcquisition extends Acquisition<TImage, AnnotationsSet>> =
     (object: AcquisitionObject<TImage>) => TAcquisition
 
 export function parseAcquisitions<TImage extends ProjectImage>(data: any): AcquisitionObject<TImage>[] {
@@ -15,7 +16,7 @@ export function parseAcquisitions<TImage extends ProjectImage>(data: any): Acqui
 }
 
 // Loads /images as a Project, apps whose payload differs pass a parser
-export class ProjectRepository<TImage extends ProjectImage = ProjectImage, TAcquisition extends Acquisition<TImage> = Acquisition<TImage>>
+export class ProjectRepository<TImage extends ProjectImage = ProjectImage, TAcquisition extends Acquisition<TImage, AnnotationsSet> = Acquisition<TImage>>
     extends DataRepository<Project<TImage, TAcquisition>> {
     parse: ProjectParser<TImage>
     createAcquisition: AcquisitionFactory<TImage, TAcquisition>
@@ -23,7 +24,7 @@ export class ProjectRepository<TImage extends ProjectImage = ProjectImage, TAcqu
     constructor(
         provider: DataProvider,
         parse: ProjectParser<TImage> = parseAcquisitions,
-        createAcquisition: AcquisitionFactory<TImage, TAcquisition> = (object) => new Acquisition<TImage>(object) as TAcquisition,
+        createAcquisition: AcquisitionFactory<TImage, TAcquisition> = (object) => new Acquisition<TImage>(object) as unknown as TAcquisition,
     ) {
         super(provider)
         this.parse = parse

package/src/lib/persistence.ts

@@ -1,14 +1,14 @@
 import { watch } from "vue"
-import type { AnnotationsObject, AnnotationsSelection } from "../data/models/annotations"
 import type { Project } from "../data/models/project"
 
 // What is stored: the annotations (same as an export) and the sidebar state, by acquisition id
 type SavedAnnotations = {
-    annotations: Record<string, AnnotationsObject>
-    selection: Record<string, AnnotationsSelection>
+    annotations: Record<string, object>
+    selection: Record<string, object>
 }
 
-// Keeps the annotations of the loaded project in `storage`, by object, across reloads.
+// Keeps the annotations of the loaded project in `storage`, by object, across reloads
+// (any AnnotationsSet: the core Annotations or an app's own).
 // The project itself is loaded again from the backend: only the annotations are saved.
 // Call it in a component setup, `project` returns the project of the store.
 export function usePersistedAnnotations(project: () => Project<any, any> | null | undefined, storage: Storage = sessionStorage) {

package/src/lib/utils.ts

@@ -31,6 +31,11 @@ export function randomColorRGB(): [number, number, number] {
   return [Math.floor(Math.random() * 256), Math.floor(Math.random() * 256), Math.floor(Math.random() * 256)]
 }
 
+// short random base-36 id (landmarks)
+export function randomID(): string {
+  return (Math.random() + 1).toString(36).substring(7)
+}
+
 export enum Scale {
   px = 1,
   m = 1000,
@@ -59,8 +64,8 @@ export const SPACE_TARGET = 0.2
 export const ROUNDING = 2
 
 // length in image units -> length shown in `scale`, corrected by the calibration factor
-export function toScale(length: number, adjustFactor: number, scale: ScaleUnit): number {
-  return length * adjustFactor / Scale[scale]
+export function toScale(length: number, adjustFactor: number): number {
+  return length * adjustFactor
 }
 
 // calibration factor so that `length` is shown as `target` in `scale`

package/tests/annotations.test.ts

@@ -90,7 +90,7 @@ describe("Project annotations", () => {
   it("lets an app use its own Annotations", () => {
     const a = new TaggedAcquisition({ id: "a", images: [image("i0")], size, thumbnails: false })
     expect(a.annotations.tagged).toBe(true)
-    a.annotations.restore({ distances: [{ label: "d", color: "#00ff00", landmarks: [] }] })
+    a.annotations.restore({ distances: [{ label: "d", color: "#00ff00", landmarks: [], value: 0 }] })
     expect(a.annotations.distances[0]).toBeInstanceOf(Distance)
   })
 

package/src/components/ui/carousel/Carousel.vue

@@ -1,52 +0,0 @@
-<script setup lang="ts">
-import type { CarouselEmits, CarouselProps, WithClassAsProps } from "./interface"
-import { cn } from "../../../lib/utils"
-import { useProvideCarousel } from "./useCarousel"
-
-const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
-  orientation: "horizontal",
-})
-
-const emits = defineEmits<CarouselEmits>()
-
-const { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits)
-
-defineExpose({
-  canScrollNext,
-  canScrollPrev,
-  carouselApi,
-  carouselRef,
-  orientation,
-  scrollNext,
-  scrollPrev,
-})
-
-function onKeyDown(event: KeyboardEvent) {
-  const prevKey = props.orientation === "vertical" ? "ArrowUp" : "ArrowLeft"
-  const nextKey = props.orientation === "vertical" ? "ArrowDown" : "ArrowRight"
-
-  if (event.key === prevKey) {
-    event.preventDefault()
-    scrollPrev()
-
-    return
-  }
-
-  if (event.key === nextKey) {
-    event.preventDefault()
-    scrollNext()
-  }
-}
-</script>
-
-<template>
-  <div
-    :class="cn('relative', props.class)"
-    role="region"
-    aria-roledescription="carousel"
-    tabindex="0"
-    @keydown="onKeyDown"
-  >
-    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />
-  </div>
-</template>

package/src/components/ui/carousel/CarouselContent.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import type { WithClassAsProps } from "./interface"
-import { cn } from "../../../lib/utils"
-import { useCarousel } from "./useCarousel"
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = defineProps<WithClassAsProps>()
-
-const { carouselRef, orientation } = useCarousel()
-</script>
-
-<template>
-  <div ref="carouselRef" class="h-full overflow-hidden">
-    <div
-      :class="
-        cn(
-          'flex h-full',
-          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
-          props.class,
-        )"
-      v-bind="$attrs"
-    >
-      <slot />
-    </div>
-  </div>
-</template>

package/src/components/ui/carousel/CarouselItem.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import type { WithClassAsProps } from "./interface"
-import { cn } from "../../../lib/utils"
-import { useCarousel } from "./useCarousel"
-
-const props = defineProps<WithClassAsProps>()
-
-const { orientation } = useCarousel()
-</script>
-
-<template>
-  <div
-    role="group"
-    aria-roledescription="slide"
-    :class="cn(
-      'min-w-0 shrink-0 grow-0 basis-full',
-      orientation === 'horizontal' ? 'pl-4' : 'pt-4',
-      props.class,
-    )"
-  >
-    <slot />
-  </div>
-</template>

package/src/components/ui/carousel/CarouselNext.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import type { WithClassAsProps } from "./interface"
-import { PhArrowRight } from '@phosphor-icons/vue'
-import { cn } from "../../../lib/utils"
-import { Button } from '../button'
-import { useCarousel } from "./useCarousel"
-
-const props = defineProps<WithClassAsProps>()
-
-const { orientation, canScrollNext, scrollNext } = useCarousel()
-</script>
-
-<template>
-  <Button
-    :disabled="!canScrollNext"
-    :class="cn(
-      'touch-manipulation absolute h-8 w-8 rounded-full p-0',
-      orientation === 'horizontal'
-        ? '-right-12 top-1/2 -translate-y-1/2'
-        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
-      props.class,
-    )"
-    variant="outline"
-    @click="scrollNext"
-  >
-    <slot>
-      <PhArrowRight class="h-4 w-4 text-current" />
-      <span class="sr-only">Next Slide</span>
-    </slot>
-  </Button>
-</template>

package/src/components/ui/carousel/CarouselPrevious.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import type { WithClassAsProps } from "./interface"
-import { PhArrowLeft } from '@phosphor-icons/vue'
-import { cn } from "../../../lib/utils"
-import { Button } from '../button'
-import { useCarousel } from "./useCarousel"
-
-const props = defineProps<WithClassAsProps>()
-
-const { orientation, canScrollPrev, scrollPrev } = useCarousel()
-</script>
-
-<template>
-  <Button
-    :disabled="!canScrollPrev"
-    :class="cn(
-      'touch-manipulation absolute h-8 w-8 rounded-full p-0',
-      orientation === 'horizontal'
-        ? '-left-12 top-1/2 -translate-y-1/2'
-        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
-      props.class,
-    )"
-    variant="outline"
-    @click="scrollPrev"
-  >
-    <slot>
-      <PhArrowLeft class="h-4 w-4 text-current" />
-      <span class="sr-only">Previous Slide</span>
-    </slot>
-  </Button>
-</template>

package/src/components/ui/carousel/index.ts

@@ -1,10 +0,0 @@
-export { default as Carousel } from "./Carousel.vue"
-export { default as CarouselContent } from "./CarouselContent.vue"
-export { default as CarouselItem } from "./CarouselItem.vue"
-export { default as CarouselNext } from "./CarouselNext.vue"
-export { default as CarouselPrevious } from "./CarouselPrevious.vue"
-export type {
-  UnwrapRefCarouselApi as CarouselApi,
-} from "./interface"
-
-export { useCarousel } from "./useCarousel"

package/src/components/ui/carousel/interface.ts

@@ -1,26 +0,0 @@
-import type useEmblaCarousel from "embla-carousel-vue"
-import type {
-  EmblaCarouselVueType,
-} from "embla-carousel-vue"
-import type { HTMLAttributes, UnwrapRef } from "vue"
-
-type CarouselApi = EmblaCarouselVueType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
-
-export type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>
-
-export interface CarouselProps {
-  opts?: CarouselOptions
-  plugins?: CarouselPlugin
-  orientation?: "horizontal" | "vertical"
-}
-
-export interface CarouselEmits {
-  (e: "init-api", payload: UnwrapRefCarouselApi): void
-}
-
-export interface WithClassAsProps {
-  class?: HTMLAttributes["class"]
-}

package/src/components/ui/carousel/useCarousel.ts

@@ -1,56 +0,0 @@
-import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from "./interface"
-import { createInjectionState } from "@vueuse/core"
-import emblaCarouselVue from "embla-carousel-vue"
-import { onMounted, ref } from "vue"
-
-const [useProvideCarousel, useInjectCarousel] = createInjectionState(
-  ({
-    opts,
-    orientation,
-    plugins,
-  }: CarouselProps, emits: CarouselEmits) => {
-    const [emblaNode, emblaApi] = emblaCarouselVue({
-      ...opts,
-      axis: orientation === "horizontal" ? "x" : "y",
-    }, plugins)
-
-    function scrollPrev() {
-      emblaApi.value?.scrollPrev()
-    }
-    function scrollNext() {
-      emblaApi.value?.scrollNext()
-    }
-
-    const canScrollNext = ref(false)
-    const canScrollPrev = ref(false)
-
-    function onSelect(api: CarouselApi) {
-      canScrollNext.value = api?.canScrollNext() || false
-      canScrollPrev.value = api?.canScrollPrev() || false
-    }
-
-    onMounted(() => {
-      if (!emblaApi.value)
-        return
-
-      emblaApi.value?.on("init", onSelect)
-      emblaApi.value?.on("reInit", onSelect)
-      emblaApi.value?.on("select", onSelect)
-
-      emits("init-api", emblaApi.value)
-    })
-
-    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }
-  },
-)
-
-function useCarousel() {
-  const carouselState = useInjectCarousel()
-
-  if (!carouselState)
-    throw new Error("useCarousel must be used within a <Carousel />")
-
-  return carouselState
-}
-
-export { useCarousel, useProvideCarousel }

package/src/components/ui/distance/DistanceMeasures.vue

@@ -1,87 +0,0 @@
-<script setup lang="ts" generic="D extends MeasuredDistance">
-import { round } from "mathjs"
-import { PhCircle, PhX } from "@phosphor-icons/vue"
-import { adjustFactorFor, toScale, type ScaleUnit } from "../../../lib/utils"
-import { Button } from "../button"
-import { Input } from "../input"
-import { Label } from "../label"
-import { Separator } from "../separator"
-import { SelectScale } from "../select-scale"
-import { defaultMeasure } from "./measure"
-import type { MeasuredDistance, Measure } from "./types"
-
-const distances = defineModel<D[]>({ required: true })
-const scale = defineModel<ScaleUnit>('scale', { required: true })
-// calibration: typing a known length on a distance sets it
-const adjustFactor = defineModel<number>('adjustFactor', { required: true })
-
-const props = withDefaults(defineProps<{
-  measure?: Measure<D>
-  // units of the scale select
-  units?: ScaleUnit[]
-  // header with the scale select and the reset button, hidden when empty
-  title?: string
-  rounding?: number
-}>(), {
-  title: "Measures",
-  rounding: 5,
-})
-
-const STEP = 0.01
-
-function length(distance: D): number {
-  const value = (props.measure ?? defaultMeasure)(distance, scale.value)
-  return value == undefined ? 0 : toScale(value, adjustFactor.value, scale.value)
-}
-
-function calibrate(payload: string | number, distance: D) {
-  const value = (props.measure ?? defaultMeasure)(distance, scale.value)
-  const target = Number(payload)
-  if (value && target > 0) {
-    adjustFactor.value = adjustFactorFor(value, target, scale.value)
-  }
-}
-
-function changeLabel(payload: string | number, distance: D) {
-  distance.label = payload.toString()
-}
-</script>
-
-<template>
-  <div class="w-full">
-    <div v-if="title" class="flex flex-row">
-      <h2 class="flex items-center px-7 text-lg font-semibold tracking-tight">{{ title }}</h2>
-      <div class="w-full h-full flex justify-end space-x-2">
-        <SelectScale v-model="scale" :units="units" />
-        <Button variant="secondary" @click="adjustFactor = 1">Reset Scale</Button>
-      </div>
-    </div>
-    <div class="flex min-h-48 min-w-full w-fit flex-col border">
-      <div v-for="(distance, index) in distances" :key="index" class="flex flex-col min-w-full w-fit h-10">
-        <div class="flex flex-row items-center justify-between space-x-3 px-3 w-full h-full">
-          <div class="flex flex-row items-center justify-start space-x-3">
-            <PhCircle weight="fill" :color="distance.getColorHEX()" />
-            <Label v-show="!distance.edit_label" class="flex whitespace-nowrap w-auto"
-              @dblclick="distance.edit_label = true">{{ distance.label }}</Label>
-            <Input v-show="distance.edit_label" type="text" :model-value="distance.label" class="flex h-auto w-36 px-0"
-              @focusout="distance.edit_label = false" @keyup.enter="distance.edit_label = false"
-              @update:model-value="changeLabel($event, distance)" />
-          </div>
-          <div class="flex flex-row items-center justify-end space-x-3">
-            <Label v-show="!distance.edit_distance" class="flex whitespace-nowrap w-auto"
-              @dblclick="distance.edit_distance = true">
-              {{ round(length(distance), rounding) }} {{ scale }}
-            </Label>
-            <Input v-show="distance.edit_distance" type="number" :min="0" :step="STEP" :model-value="length(distance)"
-              class="flex h-auto w-auto px-0" @focusout="distance.edit_distance = false"
-              @keyup.enter="distance.edit_distance = false" @update:model-value="calibrate($event, distance)" />
-            <Button class="relative w-6 h-6 p-0" variant="destructive" @click="distances.splice(index, 1)">
-              <PhX class="relative w-4 h-4 p-0" />
-            </Button>
-          </div>
-        </div>
-        <Separator class="w-full" />
-      </div>
-    </div>
-  </div>
-</template>

package/src/components/ui/distance/measure.ts

@@ -1,9 +0,0 @@
-import type { Coordinates } from "../../../data/models/coordinates"
-import { computeDistance, type ScaleUnit } from "../../../lib/utils"
-
-// Measure of the core Distance: physical length, pixel length for the "px" scale
-export function defaultMeasure(distance: unknown, scale: ScaleUnit): number | undefined {
-  const d = distance as { distance?: Coordinates[], distancePx?: Coordinates[] }
-  const intervals = scale == "px" ? d.distancePx : d.distance
-  return Array.isArray(intervals) ? computeDistance(intervals) : undefined
-}