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

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

@@ -40016,10 +40016,18 @@ var ProjectInfoService = class _ProjectInfoService {
   // undefined means not yet requested
   // null means requested and not present
   _projectInfo = void 0;
+  // The directory that we are storing fine videos in.
+  fineVideoDir = "";
   async loadProjectInfo() {
-    const response = await this.rpc.call("getProjectInfo");
-    this._projectInfo = response.projectInfo ? new ProjectInfo(response.projectInfo) : null;
-    this.setAllViews(this._projectInfo?.views ?? []);
+    const promises = [];
+    promises.push(this.rpc.call("getProjectInfo").then((response) => {
+      this._projectInfo = response.projectInfo ? new ProjectInfo(response.projectInfo) : null;
+      this.setAllViews(this._projectInfo?.views ?? []);
+    }));
+    promises.push(this.rpc.call("getFineVideoDir").then((response) => {
+      this.fineVideoDir = response.path;
+    }));
+    return Promise.allSettled(promises);
   }
   get projectInfo() {
     return this._projectInfo;
@@ -40182,6 +40190,32 @@ var CsvParserService = class _CsvParserService {
   }], null, null);
 })();
 
+// 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;
+};
+var createSessionViewComparator = (allViewsOrder) => {
+  return (a, b) => {
+    const indexA = allViewsOrder.indexOf(a.viewName);
+    const indexB = allViewsOrder.indexOf(b.viewName);
+    if (indexA === -1 && indexB === -1)
+      return 0;
+    if (indexA === -1)
+      return 1;
+    if (indexB === -1)
+      return -1;
+    return indexA - indexB;
+  };
+};
+
 // src/app/session.service.ts
 var SessionService = class _SessionService {
   rpc = inject(RpcService);
@@ -40196,7 +40230,7 @@ var SessionService = class _SessionService {
     const projectInfo = this.projectInfoService.projectInfo;
     const response = await this.rpc.call("rglob", {
       baseDir: projectInfo.data_dir,
-      pattern: "**/*.fine.mp4",
+      pattern: "**/*.mp4",
       //temporary
       noDirs: true
     });
@@ -40260,7 +40294,7 @@ var SessionService = class _SessionService {
     this.projectInfoService.setAllKeypoints(allKeypoints);
   }
   getPredictionFilesForSession(sessionKey) {
-    const predictionFiles = this.predictionFiles.filter((p) => p.sessionKey === sessionKey || p.sessionKey === sessionKey.replace(/\.fine$/, ""));
+    const predictionFiles = this.predictionFiles.filter((p) => p.sessionKey === sessionKey);
     return predictionFiles;
   }
   async getPredictionFile(pfile) {
@@ -40296,9 +40330,10 @@ var SessionService = class _SessionService {
         videoPath: projectInfo.data_dir + "/" + filename
       });
     }
+    const cmp = createSessionViewComparator(this.projectInfoService.allViews());
     return Array.from(sessionKeyToItsViewFiles.entries()).map(([key, sessionViews]) => ({
       key: key.replace(/\.mp4$/, ""),
-      views: sessionViews
+      views: [...sessionViews].sort(cmp)
     }));
   }
   static \u0275fac = function SessionService_Factory(__ngFactoryType__) {
@@ -54406,19 +54441,19 @@ var ViewerSessionsPanelComponent = class _ViewerSessionsPanelComponent {
 // 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);
@@ -54650,17 +54685,27 @@ var VideoPlayerControlsComponent = class _VideoPlayerControlsComponent {
 // src/app/components/video-player/video-tile/video-tile.component.ts
 var _c04 = ["videoEl"];
 var _c13 = ["*"];
+var videoErrorMessages = {
+  [MediaError.MEDIA_ERR_ABORTED]: "Error: aborted.",
+  [MediaError.MEDIA_ERR_NETWORK]: "Error: network error.",
+  [MediaError.MEDIA_ERR_DECODE]: "Error: decoding error.",
+  [MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED]: "Error: 404 or unsupported video format."
+};
 var VideoTileComponent = class _VideoTileComponent {
-  elementRef;
+  host;
   videoElement = null;
   src = input("");
   // Current time of the video element, for displaying for debug info.
   localCurrentTime = signal(0);
+  videoErrorMessage = linkedSignal(() => {
+    this.src();
+    return "";
+  });
   // 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 +54714,12 @@ var VideoTileComponent = class _VideoTileComponent {
       this.updateLocalCurrentTime();
     });
   }
+  ngOnInit() {
+    const observer = new ResizeObserver(() => {
+      this.updateScaleFactorSignal();
+    });
+    observer.observe(this.host.nativeElement);
+  }
   ngOnDestroy() {
     this.videoPlayerState.unregisterVideoPlayer(this);
   }
@@ -54680,15 +54731,23 @@ var VideoTileComponent = class _VideoTileComponent {
   scaleFactor = signal(1);
   // signal to hide content until video inited
   showProjectedContent = signal(false);
+  onVideoTagError() {
+    const code = this.videoElement?.nativeElement.error?.code;
+    const videoErrorMessage = code ? videoErrorMessages[code] : "Unknown error, check dev logs.";
+    this.videoErrorMessage.set(videoErrorMessage);
+  }
   onLoadedMetadata() {
     this.videoMetadata.next({
       height: this.videoElement?.nativeElement.videoHeight ?? 1,
       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 +54766,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: 10, vars: 7, consts: [["videoEl", ""], [1, "relative", "shadow-lg", "shadow-black/20", "bg-base-200"], ["preload", "auto", "muted", "", 3, "loadedmetadata", "timeupdate", "ended", "error", "src"], [1, "absolute", "inset-0", "overflow-auto", "p-2"], [1, "text-sm", "text-gray-400", "mt-2"]], template: function VideoTileComponent_Template(rf, ctx) {
     if (rf & 1) {
       const _r1 = \u0275\u0275getCurrentView();
       \u0275\u0275projectionDef();
@@ -54721,25 +54780,39 @@ var VideoTileComponent = class _VideoTileComponent {
       })("ended", function VideoTileComponent_Template_video_ended_1_listener() {
         \u0275\u0275restoreView(_r1);
         return \u0275\u0275resetView(ctx.onEnd());
+      })("error", function VideoTileComponent_Template_video_error_1_listener() {
+        \u0275\u0275restoreView(_r1);
+        return \u0275\u0275resetView(ctx.onVideoTagError());
       });
-      \u0275\u0275element(3, "source", 3);
+      \u0275\u0275text(3, " Your browser does not support the video tag. ");
       \u0275\u0275elementEnd();
       \u0275\u0275elementStart(4, "div");
       \u0275\u0275projection(5);
-      \u0275\u0275elementEnd()();
+      \u0275\u0275elementEnd();
+      \u0275\u0275elementStart(6, "div", 3);
+      \u0275\u0275text(7);
+      \u0275\u0275elementStart(8, "p", 4);
+      \u0275\u0275text(9);
+      \u0275\u0275elementEnd()()();
     }
     if (rf & 2) {
-      \u0275\u0275advance(3);
-      \u0275\u0275property("src", ctx.src(), \u0275\u0275sanitizeUrl);
       \u0275\u0275advance();
+      \u0275\u0275property("src", ctx.src(), \u0275\u0275sanitizeUrl);
+      \u0275\u0275advance(3);
       \u0275\u0275classProp("invisible", !ctx.showProjectedContent());
+      \u0275\u0275advance(2);
+      \u0275\u0275classProp("invisible", !ctx.videoErrorMessage());
+      \u0275\u0275advance();
+      \u0275\u0275textInterpolate1(" ", ctx.videoErrorMessage(), " ");
+      \u0275\u0275advance(2);
+      \u0275\u0275textInterpolate1("Source: ", ctx.src(), "");
     }
-  }, encapsulation: 2, changeDetection: 0 });
+  }, styles: ["\n\n[_nghost-%COMP%] {\n  display: block;\n}\n/*# sourceMappingURL=/static/video-tile.component-RDL4BSJ4.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>\n  :host {\n    /* Display for angular elements is inline by default.\n  This is a problem when querying the host height, because it ends up being just 0.\n  */\n    display: block;\n  }\n</style>\n\n<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    (timeupdate)="updateLocalCurrentTime()"\n    (ended)="onEnd()"\n    (error)="onVideoTagError()"\n    [src]="src()"\n  >\n    Your browser does not support the video tag.\n  </video>\n  <div [class.invisible]="!showProjectedContent()">\n    <!-- wrapper to hide content until video inited -->\n    <ng-content></ng-content>\n  </div>\n\n  <div\n    class="absolute inset-0 overflow-auto p-2"\n    [class.invisible]="!videoErrorMessage()"\n  >\n    {{ videoErrorMessage() }}\n    <p class="text-sm text-gray-400 mt-2">Source: {{ src() }}</p>\n  </div>\n</div>\n<!--<p>T: {{ localCurrentTime() }}</p>-->\n', styles: ["/* angular:styles/component:css;cca0ce7e24de60b661844ed36e56ee3734a21f5d38966246b6b69d25889a81d9;/home/ksikka/work/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-RDL4BSJ4.css.map */\n"] }]
   }], () => [{ type: ElementRef }], { videoElement: [{
     type: ViewChild,
     args: ["videoEl", { static: true }]
@@ -54748,7 +54821,7 @@ var VideoTileComponent = class _VideoTileComponent {
   }] });
 })();
 (() => {
-  (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(VideoTileComponent, { className: "VideoTileComponent", filePath: "src/app/components/video-player/video-tile/video-tile.component.ts", lineNumber: 39 });
+  (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(VideoTileComponent, { className: "VideoTileComponent", filePath: "src/app/components/video-player/video-tile/video-tile.component.ts", lineNumber: 49 });
 })();
 
 // node_modules/@angular/cdk/fesm2022/drag-drop.mjs
@@ -58977,19 +59050,58 @@ var Pair = class _Pair {
   }
 };
 
+// src/app/utils/fine-video.service.ts
+var FineVideoService = class _FineVideoService {
+  projectInfoService = inject(ProjectInfoService);
+  fineVideoPath(videoPath) {
+    if (!this.projectInfoService.fineVideoDir) {
+      throw new Error("ProjectInfoService.fineVideoDir called but not yet initialized");
+    }
+    const filename = videoPath.split("/").pop();
+    return "/app/v0/files/" + this.projectInfoService.fineVideoDir + "/" + filename;
+  }
+  static \u0275fac = function FineVideoService_Factory(__ngFactoryType__) {
+    return new (__ngFactoryType__ || _FineVideoService)();
+  };
+  static \u0275prov = /* @__PURE__ */ \u0275\u0275defineInjectable({ token: _FineVideoService, factory: _FineVideoService.\u0275fac, providedIn: "root" });
+};
+(() => {
+  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(FineVideoService, [{
+    type: Injectable,
+    args: [{
+      providedIn: "root"
+    }]
+  }], null, null);
+})();
+
 // src/app/viewer/viewer-center-panel/viewer-center-panel.component.ts
 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 {
@@ -58997,6 +59109,7 @@ var ViewerCenterPanelComponent = class _ViewerCenterPanelComponent {
   csvParser = inject(CsvParserService);
   projectInfoService = inject(ProjectInfoService);
   loadingService = inject(LoadingService);
+  fineVideoService = inject(FineVideoService);
   get currentFrame() {
     return this.videoPlayerState.currentFrameSignal;
   }
@@ -59038,7 +59151,7 @@ var ViewerCenterPanelComponent = class _ViewerCenterPanelComponent {
     });
     return {
       id: sessionView.viewName,
-      videoSrc: this.getVideoSrc(sessionView),
+      videoSrc: this.fineVideoService.fineVideoPath(sessionView.videoPath),
       keypoints: filteredKeypoints
     };
   }
@@ -59075,9 +59188,6 @@ var ViewerCenterPanelComponent = class _ViewerCenterPanelComponent {
     const dataDir = this.projectInfoService.projectInfo?.data_dir;
     return dataDir + "/" + sessionKey.replace(/\*/g, view) + ".mp4";
   }
-  getVideoSrc(sessionView) {
-    return "/app/v0/files/" + sessionView.videoPath;
-  }
   async loadSession(sessionKey) {
     this.sessionKey.set(sessionKey);
     this.widgetModels.set([]);
@@ -59125,13 +59235,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 +59267,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">\n  <!-- Video content area -->\n  <div\n    class="w-full grow flex flex-wrap overflow-y-auto gap-4 *:max-w-xs justify-start items-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      <div class="panel !border-none">\n        <div class="px-2 py-1 text-sm flex justify-between">\n          <h3>{{ w.id }}</h3>\n          <span\n            class="btn btn-circle btn-xs material-icons !text-sm"\n            (click)="onWidgetCloseClick(w)"\n            >close</span\n          >\n        </div>\n        <app-video-tile [src]="w.videoSrc" class="w-auto">\n          <app-keypoint-container\n            [labelerMode]="false"\n            [keypointModels]="w.keypoints()"\n          ></app-keypoint-container>\n        </app-video-tile>\n      </div>\n    }\n  </div>\n\n  <app-video-player-controls></app-video-player-controls>\n</div>\n' }]
   }], null, { viewSettings: [{
     type: Input
   }] });
@@ -59205,10 +59319,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 +59342,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 +59364,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 +59380,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 +59388,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 +59410,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 +59505,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 +59553,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 +59564,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-KDHT6XH5.css.map */"], changeDetection: 0 });
 };
 (() => {
   (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(ViewerPageComponent, [{
@@ -59481,7 +59601,8 @@ var ViewerPageComponent = class _ViewerPageComponent {
     <!-- Right pane -->
     <div class="shrink-0 w-40 xl:w-60 h-full">
       <div class="panel m-4">
-        <div class="panel-header">
+        <div>
+          <!-- panel header -->
           <h1 class="px-2 mb-1">Views</h1>
         </div>
         <div class="panel-content max-h-60 overflow-y-auto">
@@ -59502,7 +59623,8 @@ var ViewerPageComponent = class _ViewerPageComponent {
       </div>
 
       <div class="panel m-4">
-        <div class="panel-header">
+        <div>
+          <!-- panel header -->
           <h1 class="px-2 mb-1">Keypoints</h1>
         </div>
         <div class="panel-content max-h-60 overflow-y-auto">
@@ -59523,7 +59645,8 @@ var ViewerPageComponent = class _ViewerPageComponent {
       </div>
 
       <div class="panel m-4">
-        <div class="panel-header">
+        <div>
+          <!-- panel header -->
           <h1 class="px-2 mb-1">Models</h1>
         </div>
         <div class="panel-content max-h-60 overflow-y-visible">
@@ -59559,13 +59682,13 @@ var ViewerPageComponent = class _ViewerPageComponent {
     </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"] }]
+`, styles: ["/* angular:styles/component:css;1fa15f7a0ae1b0259233282b2d49fb361834bf7fd726c58584c186240f9d8f04;/home/ksikka/work/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-KDHT6XH5.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 +66250,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-HKHIVUJR.css.map */"], changeDetection: 0 });
 };
 (() => {
   (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(ProjectSettingsComponent, [{
@@ -66211,7 +66334,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/work/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-HKHIVUJR.css.map */\n"] }]
   }], () => [], null);
 })();
 (() => {
@@ -66336,7 +66459,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-UAQUAGNZ.css.map */"], changeDetection: 0 });
 };
 (() => {
   (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(AppComponent, [{
@@ -66346,7 +66469,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/work/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-UAQUAGNZ.css.map */\n"] }]
   }], () => [], null);
 })();
 (() => {
@@ -66355,4 +66478,4 @@ var AppComponent = class _AppComponent {
 
 // src/main.ts
 bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));
-//# sourceMappingURL=main-WFYIUX2C.js.map
+//# sourceMappingURL=main-VCJFCLFP.js.map