lightning-pose-app 1.8.1a2__py3-none-any.whl → 1.8.1a3__py3-none-any.whl

litpose_app/ngdist/ng_app/{main-WFYIUX2C.js → main-LJHMLKBL.js}

@@ -54403,22 +54403,35 @@ var ViewerSessionsPanelComponent = class _ViewerSessionsPanelComponent {
   (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(ViewerSessionsPanelComponent, { className: "ViewerSessionsPanelComponent", filePath: "src/app/viewer/viewer-left-panel/viewer-sessions-panel.component.ts", lineNumber: 24 });
 })();
 
+// src/app/utils/comparators.ts
+var compareStringArraysOrdered = (prev, curr) => {
+  if (prev.length !== curr.length) {
+    return false;
+  }
+  for (let i = 0; i < prev.length; i++) {
+    if (prev[i] !== curr[i]) {
+      return false;
+    }
+  }
+  return true;
+};
+
 // src/app/view-settings.model.ts
 var ViewSettings = class _ViewSettings {
   _viewsShown = new BehaviorSubject([]);
-  viewsShown$ = this._viewsShown.asObservable().pipe(distinctUntilChanged());
+  viewsShown$ = this._viewsShown.asObservable().pipe(distinctUntilChanged(compareStringArraysOrdered));
   viewsShown = toSignal(this.viewsShown$, { requireSync: true });
   setViewsShown(selected) {
     this._viewsShown.next(selected);
   }
   _keypointsShown = new BehaviorSubject([]);
-  keypointsShown$ = this._keypointsShown.asObservable().pipe(distinctUntilChanged());
+  keypointsShown$ = this._keypointsShown.asObservable().pipe(distinctUntilChanged(compareStringArraysOrdered));
   keypointsShown = toSignal(this.keypointsShown$, { requireSync: true });
   setKeypointsShown(selected) {
     this._keypointsShown.next(selected);
   }
   _modelsShown = new BehaviorSubject([]);
-  modelsShown$ = this._modelsShown.asObservable().pipe(distinctUntilChanged());
+  modelsShown$ = this._modelsShown.asObservable().pipe(distinctUntilChanged(compareStringArraysOrdered));
   modelsShown = toSignal(this.modelsShown$, { requireSync: true });
   setModelsShown(selected) {
     this._modelsShown.next(selected);
@@ -54651,7 +54664,7 @@ var VideoPlayerControlsComponent = class _VideoPlayerControlsComponent {
 var _c04 = ["videoEl"];
 var _c13 = ["*"];
 var VideoTileComponent = class _VideoTileComponent {
-  elementRef;
+  host;
   videoElement = null;
   src = input("");
   // Current time of the video element, for displaying for debug info.
@@ -54659,8 +54672,8 @@ var VideoTileComponent = class _VideoTileComponent {
   // the main state, injected from parent so it can be easily shared across video players
   videoPlayerState = inject(VideoPlayerState);
   contentEnd = new EventEmitter();
-  constructor(elementRef) {
-    this.elementRef = elementRef;
+  constructor(host) {
+    this.host = host;
     this.videoPlayerState.registerVideoPlayer(this);
     combineLatest([
       this.videoPlayerState.currentTime,
@@ -54669,6 +54682,12 @@ var VideoTileComponent = class _VideoTileComponent {
       this.updateLocalCurrentTime();
     });
   }
+  ngOnInit() {
+    const observer = new ResizeObserver(() => {
+      this.updateScaleFactorSignal();
+    });
+    observer.observe(this.host.nativeElement);
+  }
   ngOnDestroy() {
     this.videoPlayerState.unregisterVideoPlayer(this);
   }
@@ -54686,9 +54705,12 @@ var VideoTileComponent = class _VideoTileComponent {
       width: this.videoElement?.nativeElement.videoWidth ?? 1,
       duration: this.videoElement?.nativeElement.duration ?? 0
     });
-    this.scaleFactor.set(this.elementRef.nativeElement.clientWidth / this.videoMetadata.value.width);
+    this.updateScaleFactorSignal();
     this.showProjectedContent.set(true);
   }
+  updateScaleFactorSignal() {
+    this.scaleFactor.set(this.host.nativeElement.clientWidth / this.videoMetadata.value.width);
+  }
   updateLocalCurrentTime() {
     this.localCurrentTime.set(this.videoElement?.nativeElement.currentTime ?? 0);
   }
@@ -54707,7 +54729,7 @@ var VideoTileComponent = class _VideoTileComponent {
       let _t;
       \u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx.videoElement = _t.first);
     }
-  }, inputs: { src: [1, "src"] }, outputs: { contentEnd: "contentEnd" }, ngContentSelectors: _c13, decls: 6, vars: 3, consts: [["videoEl", ""], [1, "relative", "shadow-lg", "shadow-black/20", "bg-base-200"], ["preload", "auto", "muted", "", 1, "w-full", 3, "loadedmetadata", "timeupdate", "ended"], ["type", "video/mp4", 3, "src"]], template: function VideoTileComponent_Template(rf, ctx) {
+  }, inputs: { src: [1, "src"] }, outputs: { contentEnd: "contentEnd" }, ngContentSelectors: _c13, decls: 6, vars: 3, consts: [["videoEl", ""], [1, "relative", "shadow-lg", "shadow-black/20", "bg-base-200"], ["preload", "auto", "muted", "", 3, "loadedmetadata", "timeupdate", "ended"], ["type", "video/mp4", 3, "src"]], template: function VideoTileComponent_Template(rf, ctx) {
     if (rf & 1) {
       const _r1 = \u0275\u0275getCurrentView();
       \u0275\u0275projectionDef();
@@ -54734,12 +54756,12 @@ var VideoTileComponent = class _VideoTileComponent {
       \u0275\u0275advance();
       \u0275\u0275classProp("invisible", !ctx.showProjectedContent());
     }
-  }, encapsulation: 2, changeDetection: 0 });
+  }, styles: ["\n\n[_nghost-%COMP%] {\n  display: block;\n}\n/*# sourceMappingURL=/static/video-tile.component-XSYKMARQ.css.map */"], changeDetection: 0 });
 };
 (() => {
   (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(VideoTileComponent, [{
     type: Component,
-    args: [{ selector: "app-video-tile", imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: '<div class="relative shadow-lg shadow-black/20 bg-base-200">\n  <!-- bg is visible during loading state -->\n  <!-- wrapper to contain video + keypoints -->\n  <video\n    #videoEl\n    preload="auto"\n    (loadedmetadata)="onLoadedMetadata()"\n    muted\n    class="w-full"\n    (timeupdate)="updateLocalCurrentTime()"\n    (ended)="onEnd()"\n  >\n    <source [src]="src()" type="video/mp4" />\n  </video>\n  <div [class.invisible]="!showProjectedContent()">\n    <!-- wrapper to hide content until video inited -->\n    <ng-content></ng-content>\n  </div>\n</div>\n<!--<p>T: {{ localCurrentTime() }}</p>-->\n' }]
+    args: [{ selector: "app-video-tile", imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: '<style>\r\n  :host {\r\n    /* Display for angular elements is inline by default.\r\n  This is a problem when querying the host height, because it ends up being just 0.\r\n  */\r\n    display: block;\r\n  }\r\n</style>\r\n\r\n<div class="relative shadow-lg shadow-black/20 bg-base-200">\r\n  <!-- bg is visible during loading state -->\r\n  <!-- wrapper to contain video + keypoints -->\r\n  <video\r\n    #videoEl\r\n    preload="auto"\r\n    (loadedmetadata)="onLoadedMetadata()"\r\n    muted\r\n    (timeupdate)="updateLocalCurrentTime()"\r\n    (ended)="onEnd()"\r\n  >\r\n    <source [src]="src()" type="video/mp4" />\r\n  </video>\r\n  <div [class.invisible]="!showProjectedContent()">\r\n    <!-- wrapper to hide content until video inited -->\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n<!--<p>T: {{ localCurrentTime() }}</p>-->\r\n', styles: ["/* angular:styles/component:css;cca0ce7e24de60b661844ed36e56ee3734a21f5d38966246b6b69d25889a81d9;/home/ksikka/lightning-pose-app/web_ui/src/app/components/video-player/video-tile/video-tile.component.html */\n:host {\n  display: block;\n}\n/*# sourceMappingURL=/static/video-tile.component-XSYKMARQ.css.map */\n"] }]
   }], () => [{ type: ElementRef }], { videoElement: [{
     type: ViewChild,
     args: ["videoEl", { static: true }]
@@ -58981,15 +59003,30 @@ var Pair = class _Pair {
 var _forTrack03 = ($index, $item) => $item.videoSrc;
 function ViewerCenterPanelComponent_For_3_Template(rf, ctx) {
   if (rf & 1) {
-    \u0275\u0275elementStart(0, "app-video-tile", 2);
-    \u0275\u0275element(1, "app-keypoint-container", 3);
+    const _r1 = \u0275\u0275getCurrentView();
+    \u0275\u0275elementStart(0, "div", 2)(1, "div", 3)(2, "h3");
+    \u0275\u0275text(3);
     \u0275\u0275elementEnd();
+    \u0275\u0275elementStart(4, "span", 4);
+    \u0275\u0275listener("click", function ViewerCenterPanelComponent_For_3_Template_span_click_4_listener() {
+      const w_r2 = \u0275\u0275restoreView(_r1).$implicit;
+      const ctx_r2 = \u0275\u0275nextContext();
+      return \u0275\u0275resetView(ctx_r2.onWidgetCloseClick(w_r2));
+    });
+    \u0275\u0275text(5, "close");
+    \u0275\u0275elementEnd()();
+    \u0275\u0275elementStart(6, "app-video-tile", 5);
+    \u0275\u0275element(7, "app-keypoint-container", 6);
+    \u0275\u0275elementEnd()();
   }
   if (rf & 2) {
-    const w_r1 = ctx.$implicit;
-    \u0275\u0275property("src", w_r1.videoSrc);
+    const w_r2 = ctx.$implicit;
+    \u0275\u0275advance(3);
+    \u0275\u0275textInterpolate(w_r2.id);
+    \u0275\u0275advance(3);
+    \u0275\u0275property("src", w_r2.videoSrc);
     \u0275\u0275advance();
-    \u0275\u0275property("labelerMode", false)("keypointModels", w_r1.keypoints());
+    \u0275\u0275property("labelerMode", false)("keypointModels", w_r2.keypoints());
   }
 }
 var ViewerCenterPanelComponent = class _ViewerCenterPanelComponent {
@@ -59125,13 +59162,17 @@ var ViewerCenterPanelComponent = class _ViewerCenterPanelComponent {
     this.videoPlayerState.duration.set(data.duration);
     this.videoPlayerState.fps.set(data.fps);
   }
+  onWidgetCloseClick(w) {
+    const nextViewsShown = this.viewSettings.viewsShown().filter((v) => v != w.id);
+    this.viewSettings.setViewsShown(nextViewsShown);
+  }
   static \u0275fac = function ViewerCenterPanelComponent_Factory(__ngFactoryType__) {
     return new (__ngFactoryType__ || _ViewerCenterPanelComponent)();
   };
-  static \u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _ViewerCenterPanelComponent, selectors: [["app-viewer-center-panel"]], inputs: { viewSettings: "viewSettings" }, decls: 5, vars: 0, consts: [[1, "flex", "flex-col", "h-full"], [1, "video-tile", "w-full", "grow", "flex", "flex-wrap", "overflow-y-auto", "gap-4", "*:grow", "*:shrink-0", "*:max-w-xs", "justify-start", "content-start", "p-4"], [3, "src"], [3, "labelerMode", "keypointModels"]], template: function ViewerCenterPanelComponent_Template(rf, ctx) {
+  static \u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _ViewerCenterPanelComponent, selectors: [["app-viewer-center-panel"]], inputs: { viewSettings: "viewSettings" }, decls: 5, vars: 0, consts: [[1, "flex", "flex-col", "h-full"], [1, "w-full", "grow", "flex", "flex-wrap", "overflow-y-auto", "gap-4", "*:max-w-xs", "justify-start", "items-start", "content-start", "p-4"], [1, "panel", "!border-none"], [1, "px-2", "py-1", "text-sm", "flex", "justify-between"], [1, "btn", "btn-circle", "btn-xs", "material-icons", "!text-sm", 3, "click"], [1, "w-auto", 3, "src"], [3, "labelerMode", "keypointModels"]], template: function ViewerCenterPanelComponent_Template(rf, ctx) {
     if (rf & 1) {
       \u0275\u0275elementStart(0, "div", 0)(1, "div", 1);
-      \u0275\u0275repeaterCreate(2, ViewerCenterPanelComponent_For_3_Template, 2, 3, "app-video-tile", 2, _forTrack03);
+      \u0275\u0275repeaterCreate(2, ViewerCenterPanelComponent_For_3_Template, 8, 4, "div", 2, _forTrack03);
       \u0275\u0275elementEnd();
       \u0275\u0275element(4, "app-video-player-controls");
       \u0275\u0275elementEnd();
@@ -59153,7 +59194,7 @@ var ViewerCenterPanelComponent = class _ViewerCenterPanelComponent {
       VideoPlayerControlsComponent,
       VideoTileComponent,
       KeypointContainerComponent
-    ], changeDetection: ChangeDetectionStrategy.OnPush, template: '<div class="flex flex-col h-full">\n  <!-- Video content area -->\n  <div\n    class="video-tile w-full grow flex flex-wrap overflow-y-auto gap-4 *:grow *:shrink-0 *:max-w-xs justify-start content-start p-4"\n  >\n    <!-- `track videosrc` makes the widget component get\n     destroyed and recreated if videoSrc changes. Reactively\n     changing videoSrc of an existing video does not work unfortunately. -->\n    @for (w of filteredWidgetModels(); track w.videoSrc) {\n      <!--@if (viewSettings.viewsShown().indexOf(w.id) >= 0) {-->\n      <app-video-tile [src]="w.videoSrc">\n        <app-keypoint-container\n          [labelerMode]="false"\n          [keypointModels]="w.keypoints()"\n        ></app-keypoint-container>\n      </app-video-tile>\n    }\n  </div>\n\n  <app-video-player-controls></app-video-player-controls>\n</div>\n' }]
+    ], changeDetection: ChangeDetectionStrategy.OnPush, template: '<div class="flex flex-col h-full">\r\n  <!-- Video content area -->\r\n  <div\r\n    class="w-full grow flex flex-wrap overflow-y-auto gap-4 *:max-w-xs justify-start items-start content-start p-4"\r\n  >\r\n    <!-- `track videosrc` makes the widget component get\r\n     destroyed and recreated if videoSrc changes. Reactively\r\n     changing videoSrc of an existing video does not work unfortunately. -->\r\n    @for (w of filteredWidgetModels(); track w.videoSrc) {\r\n      <div class="panel !border-none">\r\n        <div class="px-2 py-1 text-sm flex justify-between">\r\n          <h3>{{ w.id }}</h3>\r\n          <span\r\n            class="btn btn-circle btn-xs material-icons !text-sm"\r\n            (click)="onWidgetCloseClick(w)"\r\n            >close</span\r\n          >\r\n        </div>\r\n        <app-video-tile [src]="w.videoSrc" class="w-auto">\r\n          <app-keypoint-container\r\n            [labelerMode]="false"\r\n            [keypointModels]="w.keypoints()"\r\n          ></app-keypoint-container>\r\n        </app-video-tile>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <app-video-player-controls></app-video-player-controls>\r\n</div>\r\n' }]
   }], null, { viewSettings: [{
     type: Input
   }] });
@@ -59205,10 +59246,10 @@ var _c05 = (a0) => [a0];
 function ViewerPageComponent_Conditional_0_For_14_Template(rf, ctx) {
   if (rf & 1) {
     const _r1 = \u0275\u0275getCurrentView();
-    \u0275\u0275elementStart(0, "li", 10)(1, "span");
+    \u0275\u0275elementStart(0, "li", 9)(1, "span");
     \u0275\u0275text(2);
     \u0275\u0275elementEnd();
-    \u0275\u0275elementStart(3, "input", 13);
+    \u0275\u0275elementStart(3, "input", 12);
     \u0275\u0275listener("change", function ViewerPageComponent_Conditional_0_For_14_Template_input_change_3_listener($event) {
       const cam_r2 = \u0275\u0275restoreView(_r1).$implicit;
       const ctx_r2 = \u0275\u0275nextContext(2);
@@ -59228,10 +59269,10 @@ function ViewerPageComponent_Conditional_0_For_14_Template(rf, ctx) {
 function ViewerPageComponent_Conditional_0_For_22_Template(rf, ctx) {
   if (rf & 1) {
     const _r4 = \u0275\u0275getCurrentView();
-    \u0275\u0275elementStart(0, "li", 10)(1, "span");
+    \u0275\u0275elementStart(0, "li", 9)(1, "span");
     \u0275\u0275text(2);
     \u0275\u0275elementEnd();
-    \u0275\u0275elementStart(3, "input", 13);
+    \u0275\u0275elementStart(3, "input", 12);
     \u0275\u0275listener("change", function ViewerPageComponent_Conditional_0_For_22_Template_input_change_3_listener($event) {
       const kp_r5 = \u0275\u0275restoreView(_r4).$implicit;
       const ctx_r2 = \u0275\u0275nextContext(2);
@@ -59250,7 +59291,7 @@ function ViewerPageComponent_Conditional_0_For_22_Template(rf, ctx) {
 }
 function ViewerPageComponent_Conditional_0_For_31_For_5_Template(rf, ctx) {
   if (rf & 1) {
-    \u0275\u0275elementStart(0, "option", 15);
+    \u0275\u0275elementStart(0, "option", 14);
     \u0275\u0275text(1);
     \u0275\u0275elementEnd();
   }
@@ -59266,7 +59307,7 @@ function ViewerPageComponent_Conditional_0_For_31_Template(rf, ctx) {
   if (rf & 1) {
     const _r6 = \u0275\u0275getCurrentView();
     \u0275\u0275declareLet(0);
-    \u0275\u0275elementStart(1, "li", 12)(2, "select", 14);
+    \u0275\u0275elementStart(1, "li", 11)(2, "select", 13);
     \u0275\u0275listener("change", function ViewerPageComponent_Conditional_0_For_31_Template_select_change_2_listener($event) {
       \u0275\u0275restoreView(_r6);
       const modelIndex_r7 = \u0275\u0275readContextLet(0);
@@ -59274,7 +59315,7 @@ function ViewerPageComponent_Conditional_0_For_31_Template(rf, ctx) {
       return \u0275\u0275resetView(ctx_r2.onModelDropdownItemClick(modelIndex_r7, $event));
     });
     \u0275\u0275declareLet(3);
-    \u0275\u0275repeaterCreate(4, ViewerPageComponent_Conditional_0_For_31_For_5_Template, 2, 2, "option", 15, \u0275\u0275repeaterTrackByIdentity);
+    \u0275\u0275repeaterCreate(4, ViewerPageComponent_Conditional_0_For_31_For_5_Template, 2, 2, "option", 14, \u0275\u0275repeaterTrackByIdentity);
     \u0275\u0275elementEnd()();
   }
   if (rf & 2) {
@@ -59296,24 +59337,24 @@ function ViewerPageComponent_Conditional_0_Template(rf, ctx) {
     \u0275\u0275element(4, "app-loading-bar", 3);
     \u0275\u0275elementEnd();
     \u0275\u0275element(5, "app-viewer-center-panel", 4);
-    \u0275\u0275elementStart(6, "div", 5)(7, "div", 6)(8, "div", 7)(9, "h1", 8);
+    \u0275\u0275elementStart(6, "div", 5)(7, "div", 6)(8, "div")(9, "h1", 7);
     \u0275\u0275text(10, "Views");
     \u0275\u0275elementEnd()();
-    \u0275\u0275elementStart(11, "div", 9)(12, "ul");
-    \u0275\u0275repeaterCreate(13, ViewerPageComponent_Conditional_0_For_14_Template, 4, 2, "li", 10, \u0275\u0275repeaterTrackByIdentity);
+    \u0275\u0275elementStart(11, "div", 8)(12, "ul");
+    \u0275\u0275repeaterCreate(13, ViewerPageComponent_Conditional_0_For_14_Template, 4, 2, "li", 9, \u0275\u0275repeaterTrackByIdentity);
     \u0275\u0275elementEnd()()();
-    \u0275\u0275elementStart(15, "div", 6)(16, "div", 7)(17, "h1", 8);
+    \u0275\u0275elementStart(15, "div", 6)(16, "div")(17, "h1", 7);
     \u0275\u0275text(18, "Keypoints");
     \u0275\u0275elementEnd()();
-    \u0275\u0275elementStart(19, "div", 9)(20, "ul");
-    \u0275\u0275repeaterCreate(21, ViewerPageComponent_Conditional_0_For_22_Template, 4, 2, "li", 10, \u0275\u0275repeaterTrackByIdentity);
+    \u0275\u0275elementStart(19, "div", 8)(20, "ul");
+    \u0275\u0275repeaterCreate(21, ViewerPageComponent_Conditional_0_For_22_Template, 4, 2, "li", 9, \u0275\u0275repeaterTrackByIdentity);
     \u0275\u0275elementEnd()()();
-    \u0275\u0275elementStart(23, "div", 6)(24, "div", 7)(25, "h1", 8);
+    \u0275\u0275elementStart(23, "div", 6)(24, "div")(25, "h1", 7);
     \u0275\u0275text(26, "Models");
     \u0275\u0275elementEnd()();
-    \u0275\u0275elementStart(27, "div", 11)(28, "ul");
+    \u0275\u0275elementStart(27, "div", 10)(28, "ul");
     \u0275\u0275declareLet(29);
-    \u0275\u0275repeaterCreate(30, ViewerPageComponent_Conditional_0_For_31_Template, 6, 7, "li", 12, \u0275\u0275repeaterTrackByIndex);
+    \u0275\u0275repeaterCreate(30, ViewerPageComponent_Conditional_0_For_31_Template, 6, 7, "li", 11, \u0275\u0275repeaterTrackByIndex);
     \u0275\u0275elementEnd()()()()();
   }
   if (rf & 2) {
@@ -59391,9 +59432,15 @@ var ViewerPageComponent = class _ViewerPageComponent {
     this.viewSelectionModel.changed.asObservable().pipe(takeUntilDestroyed()).subscribe(() => {
       this.viewSettings.setViewsShown(this.viewSelectionModel.selected);
     });
+    this.viewSettings.viewsShown$.pipe(takeUntilDestroyed()).subscribe((viewsShown) => {
+      this.viewSelectionModel.setSelection(...viewsShown);
+    });
     this.keypointSelectionModel.changed.asObservable().pipe(takeUntilDestroyed()).subscribe(() => {
       this.viewSettings.setKeypointsShown(this.keypointSelectionModel.selected);
     });
+    this.viewSettings.keypointsShown$.pipe(takeUntilDestroyed()).subscribe((keypointsShown) => {
+      this.keypointSelectionModel.setSelection(...keypointsShown);
+    });
   }
   onKeypointCheckboxChange(event, keypointName) {
     const target = event.target;
@@ -59433,7 +59480,7 @@ var ViewerPageComponent = class _ViewerPageComponent {
     if (rf & 2) {
       \u0275\u0275queryAdvance();
     }
-  }, inputs: { sessionKey: "sessionKey" }, features: [\u0275\u0275ProvidersFeature([VideoPlayerState, ViewSettings])], decls: 1, vars: 1, consts: [[1, "grow", "flex", "flex-row", "items-stretch"], [1, "bg-base-200", "w-60", "xl:w-80", "flex", "flex-col", "justify-between", "shadow-lg"], [1, "p-4"], [1, "h-20", "p-4"], [1, "grow", "z-30", 3, "viewSettings"], [1, "shrink-0", "w-40", "xl:w-60", "h-full"], [1, "panel", "m-4"], [1, "panel-header"], [1, "px-2", "mb-1"], [1, "panel-content", "max-h-60", "overflow-y-auto"], [1, "p-1", "flex", "justify-between", "items-center"], [1, "panel-content", "max-h-60", "overflow-y-visible"], [1, "p-1", "w-full"], ["type", "checkbox", 1, "checkbox", "checkbox-xs", 3, "change", "checked"], [1, "select", "select-sm", "w-full", "flex-grow", 3, "change"], [3, "selected"]], template: function ViewerPageComponent_Template(rf, ctx) {
+  }, inputs: { sessionKey: "sessionKey" }, features: [\u0275\u0275ProvidersFeature([VideoPlayerState, ViewSettings])], decls: 1, vars: 1, consts: [[1, "grow", "flex", "flex-row", "items-stretch"], [1, "bg-base-200", "w-60", "xl:w-80", "flex", "flex-col", "justify-between", "shadow-lg"], [1, "p-4"], [1, "h-20", "p-4"], [1, "grow", "z-30", 3, "viewSettings"], [1, "shrink-0", "w-40", "xl:w-60", "h-full"], [1, "panel", "m-4"], [1, "px-2", "mb-1"], [1, "panel-content", "max-h-60", "overflow-y-auto"], [1, "p-1", "flex", "justify-between", "items-center"], [1, "panel-content", "max-h-60", "overflow-y-visible"], [1, "p-1", "w-full"], ["type", "checkbox", 1, "checkbox", "checkbox-xs", 3, "change", "checked"], [1, "select", "select-sm", "w-full", "flex-grow", 3, "change"], [3, "selected"]], template: function ViewerPageComponent_Template(rf, ctx) {
     if (rf & 1) {
       \u0275\u0275template(0, ViewerPageComponent_Conditional_0_Template, 32, 3, "div", 0);
     }
@@ -59444,7 +59491,7 @@ var ViewerPageComponent = class _ViewerPageComponent {
     ViewerSessionsPanelComponent,
     ViewerCenterPanelComponent,
     LoadingBarComponent
-  ], styles: ["\n\n[_nghost-%COMP%] {\n  flex-grow: 1;\n  display: flex;\n}\n/*# sourceMappingURL=/static/viewer-page.component-KIYG73MW.css.map */"], changeDetection: 0 });
+  ], styles: ["\n\n[_nghost-%COMP%] {\n  flex-grow: 1;\n  display: flex;\n}\n/*# sourceMappingURL=/static/viewer-page.component-MRTIUFL2.css.map */"], changeDetection: 0 });
 };
 (() => {
   (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(ViewerPageComponent, [{
@@ -59453,119 +59500,122 @@ var ViewerPageComponent = class _ViewerPageComponent {
       ViewerSessionsPanelComponent,
       ViewerCenterPanelComponent,
       LoadingBarComponent
-    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [VideoPlayerState, ViewSettings], template: `<style>
-  :host {
-    flex-grow: 1;
-    display: flex;
-  }
-</style>
-
-@if (!isIniting()) {
-  <div class="grow flex flex-row items-stretch">
-    <!-- Left pane -->
-    <div
-      class="bg-base-200 w-60 xl:w-80 flex flex-col justify-between shadow-lg"
-    >
-      <div class="p-4">
-        <app-sessions-panel></app-sessions-panel>
-      </div>
-      <app-loading-bar class="h-20 p-4"></app-loading-bar>
-    </div>
-
-    <!-- Center content -->
-    <app-viewer-center-panel
-      class="grow z-30"
-      [viewSettings]="viewSettings"
-    ></app-viewer-center-panel>
-
-    <!-- Right pane -->
-    <div class="shrink-0 w-40 xl:w-60 h-full">
-      <div class="panel m-4">
-        <div class="panel-header">
-          <h1 class="px-2 mb-1">Views</h1>
-        </div>
-        <div class="panel-content max-h-60 overflow-y-auto">
-          <ul>
-            @for (cam of allViews; track cam) {
-              <li class="p-1 flex justify-between items-center">
-                <span>{{ cam }}</span>
-                <input
-                  type="checkbox"
-                  [checked]="viewSelectionModel.isSelected(cam)"
-                  class="checkbox checkbox-xs"
-                  (change)="onViewCheckboxChange($event, cam)"
-                />
-              </li>
-            }
-          </ul>
-        </div>
-      </div>
-
-      <div class="panel m-4">
-        <div class="panel-header">
-          <h1 class="px-2 mb-1">Keypoints</h1>
-        </div>
-        <div class="panel-content max-h-60 overflow-y-auto">
-          <ul>
-            @for (kp of projectInfoService.allKeypoints(); track kp) {
-              <li class="p-1 flex justify-between items-center">
-                <span>{{ kp }}</span>
-                <input
-                  type="checkbox"
-                  [checked]="keypointSelectionModel.isSelected(kp)"
-                  class="checkbox checkbox-xs"
-                  (change)="onKeypointCheckboxChange($event, kp)"
-                />
-              </li>
-            }
-          </ul>
-        </div>
-      </div>
-
-      <div class="panel m-4">
-        <div class="panel-header">
-          <h1 class="px-2 mb-1">Models</h1>
-        </div>
-        <div class="panel-content max-h-60 overflow-y-visible">
-          <ul>
-            @let modelSelectors =
-              viewSettings.modelsShown().length < 2
-                ? viewSettings.modelsShown().concat([noneOption])
-                : viewSettings.modelsShown();
-            <!-- it's important to track index, not model.
-             if we put model here, something weird happens when you clear all models and then set a model. -->
-            @for (model of modelSelectors; track $index) {
-              @let modelIndex = $index;
-              <li class="p-1 w-full">
-                <select
-                  class="select select-sm w-full flex-grow"
-                  [class.border-red-300]="modelIndex === 0"
-                  [class.border-green-300]="modelIndex === 1"
-                  (change)="onModelDropdownItemClick(modelIndex, $event)"
-                >
-                  @let options =
-                    [noneOption].concat(projectInfoService.allModels());
-                  @for (dropdownItem of options; track dropdownItem) {
-                    <option [selected]="dropdownItem === model">
-                      {{ dropdownItem }}
-                    </option>
-                  }
-                </select>
-              </li>
-            }
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
-}
-`, styles: ["/* angular:styles/component:css;1fa15f7a0ae1b0259233282b2d49fb361834bf7fd726c58584c186240f9d8f04;/home/ksikka/lightning-pose/app/web_ui/src/app/viewer/viewer-page/viewer-page.component.html */\n:host {\n  flex-grow: 1;\n  display: flex;\n}\n/*# sourceMappingURL=/static/viewer-page.component-KIYG73MW.css.map */\n"] }]
+    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [VideoPlayerState, ViewSettings], template: `<style>\r
+  :host {\r
+    flex-grow: 1;\r
+    display: flex;\r
+  }\r
+</style>\r
+\r
+@if (!isIniting()) {\r
+  <div class="grow flex flex-row items-stretch">\r
+    <!-- Left pane -->\r
+    <div\r
+      class="bg-base-200 w-60 xl:w-80 flex flex-col justify-between shadow-lg"\r
+    >\r
+      <div class="p-4">\r
+        <app-sessions-panel></app-sessions-panel>\r
+      </div>\r
+      <app-loading-bar class="h-20 p-4"></app-loading-bar>\r
+    </div>\r
+\r
+    <!-- Center content -->\r
+    <app-viewer-center-panel\r
+      class="grow z-30"\r
+      [viewSettings]="viewSettings"\r
+    ></app-viewer-center-panel>\r
+\r
+    <!-- Right pane -->\r
+    <div class="shrink-0 w-40 xl:w-60 h-full">\r
+      <div class="panel m-4">\r
+        <div>\r
+          <!-- panel header -->\r
+          <h1 class="px-2 mb-1">Views</h1>\r
+        </div>\r
+        <div class="panel-content max-h-60 overflow-y-auto">\r
+          <ul>\r
+            @for (cam of allViews; track cam) {\r
+              <li class="p-1 flex justify-between items-center">\r
+                <span>{{ cam }}</span>\r
+                <input\r
+                  type="checkbox"\r
+                  [checked]="viewSelectionModel.isSelected(cam)"\r
+                  class="checkbox checkbox-xs"\r
+                  (change)="onViewCheckboxChange($event, cam)"\r
+                />\r
+              </li>\r
+            }\r
+          </ul>\r
+        </div>\r
+      </div>\r
+\r
+      <div class="panel m-4">\r
+        <div>\r
+          <!-- panel header -->\r
+          <h1 class="px-2 mb-1">Keypoints</h1>\r
+        </div>\r
+        <div class="panel-content max-h-60 overflow-y-auto">\r
+          <ul>\r
+            @for (kp of projectInfoService.allKeypoints(); track kp) {\r
+              <li class="p-1 flex justify-between items-center">\r
+                <span>{{ kp }}</span>\r
+                <input\r
+                  type="checkbox"\r
+                  [checked]="keypointSelectionModel.isSelected(kp)"\r
+                  class="checkbox checkbox-xs"\r
+                  (change)="onKeypointCheckboxChange($event, kp)"\r
+                />\r
+              </li>\r
+            }\r
+          </ul>\r
+        </div>\r
+      </div>\r
+\r
+      <div class="panel m-4">\r
+        <div>\r
+          <!-- panel header -->\r
+          <h1 class="px-2 mb-1">Models</h1>\r
+        </div>\r
+        <div class="panel-content max-h-60 overflow-y-visible">\r
+          <ul>\r
+            @let modelSelectors =\r
+              viewSettings.modelsShown().length < 2\r
+                ? viewSettings.modelsShown().concat([noneOption])\r
+                : viewSettings.modelsShown();\r
+            <!-- it's important to track index, not model.\r
+             if we put model here, something weird happens when you clear all models and then set a model. -->\r
+            @for (model of modelSelectors; track $index) {\r
+              @let modelIndex = $index;\r
+              <li class="p-1 w-full">\r
+                <select\r
+                  class="select select-sm w-full flex-grow"\r
+                  [class.border-red-300]="modelIndex === 0"\r
+                  [class.border-green-300]="modelIndex === 1"\r
+                  (change)="onModelDropdownItemClick(modelIndex, $event)"\r
+                >\r
+                  @let options =\r
+                    [noneOption].concat(projectInfoService.allModels());\r
+                  @for (dropdownItem of options; track dropdownItem) {\r
+                    <option [selected]="dropdownItem === model">\r
+                      {{ dropdownItem }}\r
+                    </option>\r
+                  }\r
+                </select>\r
+              </li>\r
+            }\r
+          </ul>\r
+        </div>\r
+      </div>\r
+    </div>\r
+  </div>\r
+}\r
+`, styles: ["/* angular:styles/component:css;1fa15f7a0ae1b0259233282b2d49fb361834bf7fd726c58584c186240f9d8f04;/home/ksikka/lightning-pose-app/web_ui/src/app/viewer/viewer-page/viewer-page.component.html */\n:host {\n  flex-grow: 1;\n  display: flex;\n}\n/*# sourceMappingURL=/static/viewer-page.component-MRTIUFL2.css.map */\n"] }]
   }], () => [], { sessionKey: [{
     type: Input
   }] });
 })();
 (() => {
-  (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(ViewerPageComponent, { className: "ViewerPageComponent", filePath: "src/app/viewer/viewer-page/viewer-page.component.ts", lineNumber: 37 });
+  (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(ViewerPageComponent, { className: "ViewerPageComponent", filePath: "src/app/viewer/viewer-page/viewer-page.component.ts", lineNumber: 35 });
 })();
 
 // src/app/labeler/labeler-page.component.ts
@@ -66127,7 +66177,7 @@ view2
       \u0275\u0275advance();
       \u0275\u0275property("disabled", !ctx.projectInfoForm.dirty);
     }
-  }, dependencies: [ReactiveFormsModule, \u0275NgNoValidate, DefaultValueAccessor, NgControlStatus, NgControlStatusGroup, FormGroupDirective, FormControlName], styles: ["\n\n[_ngcontent-%COMP%]::placeholder {\n  color: color-mix(in oklch, currentColor 50%, #0000) !important;\n}\n/*# sourceMappingURL=/static/project-settings.component-BXKZMYM3.css.map */"], changeDetection: 0 });
+  }, dependencies: [ReactiveFormsModule, \u0275NgNoValidate, DefaultValueAccessor, NgControlStatus, NgControlStatusGroup, FormGroupDirective, FormControlName], styles: ["\n\n[_ngcontent-%COMP%]::placeholder {\n  color: color-mix(in oklch, currentColor 50%, #0000) !important;\n}\n/*# sourceMappingURL=/static/project-settings.component-5IRK7U7U.css.map */"], changeDetection: 0 });
 };
 (() => {
   (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(ProjectSettingsComponent, [{
@@ -66211,7 +66261,7 @@ view2
     </button>
   </div>
 </form>
-`, styles: ["/* angular:styles/component:css;5c3484fa86afc1ad339d983c727d8801928706c064dd49a4001f42c8eac3d364;/home/ksikka/lightning-pose/app/web_ui/src/app/project-settings/project-settings.component.html */\n::placeholder {\n  color: color-mix(in oklch, currentColor 50%, #0000) !important;\n}\n/*# sourceMappingURL=/static/project-settings.component-BXKZMYM3.css.map */\n"] }]
+`, styles: ["/* angular:styles/component:css;5c3484fa86afc1ad339d983c727d8801928706c064dd49a4001f42c8eac3d364;/home/ksikka/lightning-pose-app/web_ui/src/app/project-settings/project-settings.component.html */\n::placeholder {\n  color: color-mix(in oklch, currentColor 50%, #0000) !important;\n}\n/*# sourceMappingURL=/static/project-settings.component-5IRK7U7U.css.map */\n"] }]
   }], () => [], null);
 })();
 (() => {
@@ -66336,7 +66386,7 @@ var AppComponent = class _AppComponent {
     RouterLink,
     RouterLinkActive,
     ProjectSettingsComponent
-  ], styles: ["\n\n[_nghost-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n}\n.navbar[_ngcontent-%COMP%] {\n  min-height: 3rem;\n}\n/*# sourceMappingURL=/static/app.component-IZ5OUDH2.css.map */"], changeDetection: 0 });
+  ], styles: ["\n\n[_nghost-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n}\n.navbar[_ngcontent-%COMP%] {\n  min-height: 3rem;\n}\n/*# sourceMappingURL=/static/app.component-UHVEDPZR.css.map */"], changeDetection: 0 });
 };
 (() => {
   (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(AppComponent, [{
@@ -66346,7 +66396,7 @@ var AppComponent = class _AppComponent {
       RouterLink,
       RouterLinkActive,
       ProjectSettingsComponent
-    ], changeDetection: ChangeDetectionStrategy.OnPush, template: '<style>\n  :host {\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n  }\n  .navbar {\n    min-height: 3rem; /* reduce from default of 4rem */\n  }\n</style>\n<header>\n  <nav class="navbar bg-base-200 shadow-lg">\n    <div class="navbar-start">\n      <span class="text-lg font-semibold">Lightning Pose</span>\n    </div>\n\n    <div class="navbar-center">\n      <ul class="menu menu-horizontal p-0">\n        <li>\n          <a\n            routerLink="/viewer"\n            routerLinkActive="menu-active"\n            ariaCurrentWhenActive="page"\n            >Viewer</a\n          >\n        </li>\n        <li>\n          <a\n            routerLink="/labeler"\n            routerLinkActive="menu-active"\n            ariaCurrentWhenActive="page"\n            >Labeler</a\n          >\n        </li>\n      </ul>\n    </div>\n\n    <div class="navbar-end">\n      <button\n        class="btn btn-ghost"\n        tabindex="0"\n        (click)="settingsDialogOpen.set(true)"\n        (keydown.enter)="settingsDialogOpen.set(true)"\n      >\n        <span class="material-icons">settings</span>\n      </button>\n    </div>\n  </nav>\n</header>\n\n<!-- Set min-height: 0 to allow it to shrink if its content is too large.\n  Default min-height for flex items is auto. -->\n<main class="flex-grow flex min-h-0" [class.justify-center]="!hasBeenSetup()">\n  @if (hasBeenSetup()) {\n    <router-outlet />\n  } @else {\n    <app-project-settings\n      [setupMode]="true"\n      class="w-lg mt-8"\n    ></app-project-settings>\n  }\n</main>\n\n<!-- Settings dialog -->\n<dialog #settingsDialog class="modal">\n  @if (settingsDialogOpen()) {\n    <app-project-settings\n      class="modal-box"\n      (done)="settingsDialogOpen.set(false)"\n    ></app-project-settings>\n\n    <!-- Makes the dialog close when clicked from outside. -->\n    <div class="modal-backdrop">\n      <button (click)="settingsDialogOpen.set(false)">close</button>\n    </div>\n  }\n</dialog>\n', styles: ["/* angular:styles/component:css;22d8514f1dd5b50f33b3fb93fdb69668f78eeb349bd672e238e3ac9acfbbda19;/home/ksikka/lightning-pose/app/web_ui/src/app/app.component.html */\n:host {\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n}\n.navbar {\n  min-height: 3rem;\n}\n/*# sourceMappingURL=/static/app.component-IZ5OUDH2.css.map */\n"] }]
+    ], changeDetection: ChangeDetectionStrategy.OnPush, template: '<style>\n  :host {\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n  }\n  .navbar {\n    min-height: 3rem; /* reduce from default of 4rem */\n  }\n</style>\n<header>\n  <nav class="navbar bg-base-200 shadow-lg">\n    <div class="navbar-start">\n      <span class="text-lg font-semibold">Lightning Pose</span>\n    </div>\n\n    <div class="navbar-center">\n      <ul class="menu menu-horizontal p-0">\n        <li>\n          <a\n            routerLink="/viewer"\n            routerLinkActive="menu-active"\n            ariaCurrentWhenActive="page"\n            >Viewer</a\n          >\n        </li>\n        <li>\n          <a\n            routerLink="/labeler"\n            routerLinkActive="menu-active"\n            ariaCurrentWhenActive="page"\n            >Labeler</a\n          >\n        </li>\n      </ul>\n    </div>\n\n    <div class="navbar-end">\n      <button\n        class="btn btn-ghost"\n        tabindex="0"\n        (click)="settingsDialogOpen.set(true)"\n        (keydown.enter)="settingsDialogOpen.set(true)"\n      >\n        <span class="material-icons">settings</span>\n      </button>\n    </div>\n  </nav>\n</header>\n\n<!-- Set min-height: 0 to allow it to shrink if its content is too large.\n  Default min-height for flex items is auto. -->\n<main class="flex-grow flex min-h-0" [class.justify-center]="!hasBeenSetup()">\n  @if (hasBeenSetup()) {\n    <router-outlet />\n  } @else {\n    <app-project-settings\n      [setupMode]="true"\n      class="w-lg mt-8"\n    ></app-project-settings>\n  }\n</main>\n\n<!-- Settings dialog -->\n<dialog #settingsDialog class="modal">\n  @if (settingsDialogOpen()) {\n    <app-project-settings\n      class="modal-box"\n      (done)="settingsDialogOpen.set(false)"\n    ></app-project-settings>\n\n    <!-- Makes the dialog close when clicked from outside. -->\n    <div class="modal-backdrop">\n      <button (click)="settingsDialogOpen.set(false)">close</button>\n    </div>\n  }\n</dialog>\n', styles: ["/* angular:styles/component:css;22d8514f1dd5b50f33b3fb93fdb69668f78eeb349bd672e238e3ac9acfbbda19;/home/ksikka/lightning-pose-app/web_ui/src/app/app.component.html */\n:host {\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n}\n.navbar {\n  min-height: 3rem;\n}\n/*# sourceMappingURL=/static/app.component-UHVEDPZR.css.map */\n"] }]
   }], () => [], null);
 })();
 (() => {
@@ -66355,4 +66405,4 @@ var AppComponent = class _AppComponent {
 
 // src/main.ts
 bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));
-//# sourceMappingURL=main-WFYIUX2C.js.map
+//# sourceMappingURL=main-LJHMLKBL.js.map