PyPI - lightning-pose-app - Versions diffs - 1.8.1a3__py3-none-any.whl → 1.8.1a4__py3-none-any.whl - Mend

lightning-pose-app 1.8.1a3py3-none-any.whl → 1.8.1a4py3-none-any.whl

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

litpose_app/ngdist/ng_app/index.html CHANGED Viewed

@@ -329,6 +329,7 @@
     --color-green-400: oklch(79.2% 0.209 151.711);
     --color-sky-100: oklch(95.1% 0.026 236.824);
     --color-sky-700: oklch(50% 0.134 242.749);
+    --color-gray-400: oklch(70.7% 0.022 261.325);
     --color-black: #000;
     --spacing: 0.25rem;
     --container-xs: 20rem;
@@ -444,8 +445,8 @@
     }
   }
 }
-</style><link rel="stylesheet" href="/static/styles-4V6RXJMC.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="/static/styles-4V6RXJMC.css"></noscript></head>
+</style><link rel="stylesheet" href="/static/styles-ZM27COY6.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="/static/styles-ZM27COY6.css"></noscript></head>
   <body>
     <app-root></app-root>
-  <script src="/static/main-LJHMLKBL.js" type="module"></script></body>
+  <script src="/static/main-VCJFCLFP.js" type="module"></script></body>
 </html>

litpose_app/ngdist/ng_app/{main-LJHMLKBL.js → main-VCJFCLFP.js} RENAMED Viewed

@@ -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__) {
@@ -54403,19 +54438,6 @@ 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([]);
@@ -54663,12 +54685,22 @@ 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 {
   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();
@@ -54699,6 +54731,11 @@ 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,
@@ -54729,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", "", 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();
@@ -54743,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(), "");
     }
-  }, styles: ["\n\n[_nghost-%COMP%] {\n  display: block;\n}\n/*# sourceMappingURL=/static/video-tile.component-XSYKMARQ.css.map */"], 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: '<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"] }]
+    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 }]
@@ -54770,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
@@ -58999,6 +59050,30 @@ 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) {
@@ -59034,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;
   }
@@ -59075,7 +59151,7 @@ var ViewerCenterPanelComponent = class _ViewerCenterPanelComponent {
     });
     return {
       id: sessionView.viewName,
-      videoSrc: this.getVideoSrc(sessionView),
+      videoSrc: this.fineVideoService.fineVideoPath(sessionView.videoPath),
       keypoints: filteredKeypoints
     };
   }
@@ -59112,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([]);
@@ -59194,7 +59267,7 @@ var ViewerCenterPanelComponent = class _ViewerCenterPanelComponent {
       VideoPlayerControlsComponent,
       VideoTileComponent,
       KeypointContainerComponent
-    ], 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' }]
+    ], 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
   }] });
@@ -59491,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-MRTIUFL2.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, [{
@@ -59500,116 +59573,116 @@ var ViewerPageComponent = class _ViewerPageComponent {
       ViewerSessionsPanelComponent,
       ViewerCenterPanelComponent,
       LoadingBarComponent
-    ], 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"] }]
+    ], 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>
+          <!-- 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>
+          <!-- 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>
+          <!-- 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/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
   }] });
@@ -66177,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-5IRK7U7U.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, [{
@@ -66261,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-5IRK7U7U.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);
 })();
 (() => {
@@ -66386,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-UHVEDPZR.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, [{
@@ -66396,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-UHVEDPZR.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);
 })();
 (() => {
@@ -66405,4 +66478,4 @@ var AppComponent = class _AppComponent {
 // src/main.ts
 bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));
-//# sourceMappingURL=main-LJHMLKBL.js.map
+//# sourceMappingURL=main-VCJFCLFP.js.map

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

lightning-pose-app 1.8.1a3py3-none-any.whl → 1.8.1a4py3-none-any.whl