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

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

@@ -7892,6 +7892,10 @@ var OutputEmitterRef = class {
     }
   }
 };
+function output(opts) {
+  ngDevMode && assertInInjectionContext(output);
+  return new OutputEmitterRef();
+}
 function inputFunction(initialValue, opts) {
   ngDevMode && assertInInjectionContext(input);
   return createInputSignal(initialValue, opts);
@@ -20793,13 +20797,13 @@ function listenToOutput(tNode, lView, directiveIndex, lookupName, eventName, lis
   const tView = lView[TVIEW];
   const def = tView.data[directiveIndex];
   const propertyName = def.outputs[lookupName];
-  const output = instance[propertyName];
-  if (ngDevMode && !isOutputSubscribable(output)) {
+  const output2 = instance[propertyName];
+  if (ngDevMode && !isOutputSubscribable(output2)) {
     throw new Error(`@Output ${propertyName} not initialized in '${instance.constructor.name}'.`);
   }
   const tCleanup = tView.firstCreatePass ? getOrCreateTViewCleanup(tView) : null;
   const lCleanup = getOrCreateLViewCleanup(lView);
-  const subscription = output.subscribe(listenerFn);
+  const subscription = output2.subscribe(listenerFn);
   const idx = lCleanup.length;
   lCleanup.push(listenerFn, subscription);
   tCleanup && tCleanup.push(eventName, tNode.index, idx, -(idx + 1));
@@ -39894,6 +39898,423 @@ function provideRouterInitializer() {
 // node_modules/@angular/router/fesm2022/router.mjs
 var VERSION4 = new Version("19.2.11");
 
+// src/app/rpc.service.ts
+var RpcService = class _RpcService {
+  http = inject(HttpClient);
+  call(method, params) {
+    const observable2 = this.http.post(`/app/v0/rpc/${method}`, params ?? null, {
+      headers: { "Content-type": "application/json" }
+    });
+    return firstValueFrom(observable2);
+  }
+  static \u0275fac = function RpcService_Factory(__ngFactoryType__) {
+    return new (__ngFactoryType__ || _RpcService)();
+  };
+  static \u0275prov = /* @__PURE__ */ \u0275\u0275defineInjectable({ token: _RpcService, factory: _RpcService.\u0275fac, providedIn: "root" });
+};
+(() => {
+  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(RpcService, [{
+    type: Injectable,
+    args: [{
+      providedIn: "root"
+    }]
+  }], null, null);
+})();
+
+// src/app/project-info.ts
+var ProjectInfo = class {
+  // absolute path on server filesystem
+  data_dir;
+  // absolute path on server filesystem
+  model_dir;
+  views;
+  constructor(projectInfo) {
+    this.data_dir = String(projectInfo.data_dir);
+    this.model_dir = String(projectInfo.model_dir);
+    this.views = projectInfo.views ?? [];
+  }
+};
+
+// node_modules/@angular/core/fesm2022/rxjs-interop.mjs
+function takeUntilDestroyed(destroyRef) {
+  if (!destroyRef) {
+    assertInInjectionContext(takeUntilDestroyed);
+    destroyRef = inject(DestroyRef);
+  }
+  const destroyed$ = new Observable((observer) => {
+    const unregisterFn = destroyRef.onDestroy(observer.next.bind(observer));
+    return unregisterFn;
+  });
+  return (source) => {
+    return source.pipe(takeUntil(destroyed$));
+  };
+}
+function toSignal(source, options) {
+  typeof ngDevMode !== "undefined" && ngDevMode && assertNotInReactiveContext(toSignal, "Invoking `toSignal` causes new subscriptions every time. Consider moving `toSignal` outside of the reactive context and read the signal value where needed.");
+  const requiresCleanup = !options?.manualCleanup;
+  requiresCleanup && !options?.injector && assertInInjectionContext(toSignal);
+  const cleanupRef = requiresCleanup ? options?.injector?.get(DestroyRef) ?? inject(DestroyRef) : null;
+  const equal = makeToSignalEqual(options?.equal);
+  let state;
+  if (options?.requireSync) {
+    state = signal({
+      kind: 0
+      /* StateKind.NoValue */
+    }, {
+      equal
+    });
+  } else {
+    state = signal({
+      kind: 1,
+      value: options?.initialValue
+    }, {
+      equal
+    });
+  }
+  const sub = source.subscribe({
+    next: (value) => state.set({
+      kind: 1,
+      value
+    }),
+    error: (error) => {
+      if (options?.rejectErrors) {
+        throw error;
+      }
+      state.set({
+        kind: 2,
+        error
+      });
+    }
+    // Completion of the Observable is meaningless to the signal. Signals don't have a concept of
+    // "complete".
+  });
+  if (options?.requireSync && state().kind === 0) {
+    throw new RuntimeError(601, (typeof ngDevMode === "undefined" || ngDevMode) && "`toSignal()` called with `requireSync` but `Observable` did not emit synchronously.");
+  }
+  cleanupRef?.onDestroy(sub.unsubscribe.bind(sub));
+  return computed(() => {
+    const current = state();
+    switch (current.kind) {
+      case 1:
+        return current.value;
+      case 2:
+        throw current.error;
+      case 0:
+        throw new RuntimeError(601, (typeof ngDevMode === "undefined" || ngDevMode) && "`toSignal()` called with `requireSync` but `Observable` did not emit synchronously.");
+    }
+  }, {
+    equal: options?.equal
+  });
+}
+function makeToSignalEqual(userEquality = Object.is) {
+  return (a, b) => a.kind === 1 && b.kind === 1 && userEquality(a.value, b.value);
+}
+
+// src/app/project-info.service.ts
+var ProjectInfoService = class _ProjectInfoService {
+  rpc = inject(RpcService);
+  // undefined means not yet requested
+  // null means requested and not present
+  _projectInfo = void 0;
+  async loadProjectInfo() {
+    const response = await this.rpc.call("getProjectInfo");
+    this._projectInfo = response.projectInfo ? new ProjectInfo(response.projectInfo) : null;
+    this.setAllViews(this._projectInfo?.views ?? []);
+  }
+  get projectInfo() {
+    return this._projectInfo;
+  }
+  async setProjectInfo(projectInfo) {
+    await this.rpc.call("setProjectInfo", { projectInfo });
+    window.location.reload();
+  }
+  // Newer style of models.
+  _allViews = new BehaviorSubject([]);
+  allViews$ = this._allViews.asObservable().pipe(distinctUntilChanged());
+  allViews = toSignal(this.allViews$, { requireSync: true });
+  setAllViews(views) {
+    this._allViews.next(views.concat(["unknown"]));
+  }
+  _allKeypoints = new BehaviorSubject([]);
+  allKeypoints$ = this._allKeypoints.asObservable().pipe(distinctUntilChanged());
+  allKeypoints = toSignal(this.allKeypoints$, { requireSync: true });
+  setAllKeypoints(keypoints) {
+    this._allKeypoints.next(keypoints);
+  }
+  _allModels = new BehaviorSubject([]);
+  allModels$ = this._allModels.asObservable().pipe(distinctUntilChanged());
+  allModels = toSignal(this.allModels$, { requireSync: true });
+  setAllModels(models) {
+    this._allModels.next(models);
+  }
+  static \u0275fac = function ProjectInfoService_Factory(__ngFactoryType__) {
+    return new (__ngFactoryType__ || _ProjectInfoService)();
+  };
+  static \u0275prov = /* @__PURE__ */ \u0275\u0275defineInjectable({ token: _ProjectInfoService, factory: _ProjectInfoService.\u0275fac, providedIn: "root" });
+};
+(() => {
+  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(ProjectInfoService, [{
+    type: Injectable,
+    args: [{
+      providedIn: "root"
+    }]
+  }], null, null);
+})();
+
+// src/app/csv-parser.service.ts
+var import_ndarray = __toESM(require_ndarray());
+var import_papaparse = __toESM(require_papaparse_min());
+var CsvParserService = class _CsvParserService {
+  /**
+   * Parses a CSV string from pose estimation into a 3D array (ndarray-like structure)
+   * using the PapaParse library.
+   * The output shape is (number of frames, number of bodyparts, 2 for x/y coordinates).
+   *
+   * @param csvString The CSV data as a string.
+   * @returns A 3D array of numbers: number[][][].
+   * Returns an empty array if the CSV is malformed, has no data, or PapaParse fails.
+   */
+  getBodyParts(csvString) {
+    const parseOutput = import_papaparse.default.parse(csvString.trim(), {
+      dynamicTyping: false,
+      skipEmptyLines: true
+    });
+    if (parseOutput.errors.length > 0) {
+      console.error("PapaParse errors:", parseOutput.errors);
+      return [];
+    }
+    const allRows = parseOutput.data;
+    if (allRows.length < 4) {
+      console.error("CSV must have at least 3 header lines and 1 data line.");
+      return [];
+    }
+    const bodypartsHeader = allRows[1];
+    if (!bodypartsHeader || bodypartsHeader.length <= 1 || (bodypartsHeader.length - 1) % 3 !== 0) {
+      console.error("Malformed bodyparts header line (line 2 of CSV).", bodypartsHeader);
+      return [];
+    }
+    return bodypartsHeader.filter((_element, index) => {
+      return (index - 1) % 3 === 0 && index >= 1;
+    });
+  }
+  parsePredictionFile(csvString) {
+    const parseOutput = import_papaparse.default.parse(csvString.trim(), {
+      dynamicTyping: false,
+      skipEmptyLines: true
+    });
+    if (parseOutput.errors.length > 0) {
+      console.error("PapaParse errors:", parseOutput.errors);
+      return (0, import_ndarray.default)(new Float64Array(0), [0, 0, 2]);
+    }
+    const allRows = parseOutput.data;
+    if (allRows.length < 4) {
+      console.error("CSV must have at least 3 header lines and 1 data line.");
+      return (0, import_ndarray.default)(new Float64Array(0), [0, 0, 2]);
+    }
+    const bodypartsHeader = allRows[1];
+    if (!bodypartsHeader || bodypartsHeader.length <= 1 || (bodypartsHeader.length - 1) % 3 !== 0) {
+      console.error("Malformed bodyparts header line (line 2 of CSV).", bodypartsHeader);
+      return (0, import_ndarray.default)(new Float64Array(0), [0, 0, 2]);
+    }
+    const numBodyParts = (bodypartsHeader.length - 1) / 3;
+    const coordsHeader = allRows[2];
+    if (!coordsHeader || coordsHeader.length !== bodypartsHeader.length) {
+      console.error("Coordinate header (line 3 of CSV) length mismatch with bodyparts header.");
+      return (0, import_ndarray.default)(new Float64Array(0), [
+        0,
+        numBodyParts > 0 ? numBodyParts : 0,
+        2
+      ]);
+    }
+    const dataRowsOnly = allRows.slice(3);
+    const numFrames = dataRowsOnly.length;
+    if (numFrames === 0 || numBodyParts === 0) {
+      return (0, import_ndarray.default)(new Float64Array(0), [numFrames, numBodyParts, 2]);
+    }
+    const flatData = new Float64Array(numFrames * numBodyParts * 2);
+    let flatIndex = 0;
+    for (let rowIndex = 0; rowIndex < numFrames; rowIndex++) {
+      const values = dataRowsOnly[rowIndex];
+      if (values.length < 1 + numBodyParts * 3) {
+        console.warn(`Skipping malformed data row ${rowIndex + 4} (not enough columns): "${values.slice(0, 5).join(",")}..."`);
+        for (let i = 0; i < numBodyParts; i++) {
+          flatData[flatIndex++] = NaN;
+          flatData[flatIndex++] = NaN;
+        }
+        continue;
+      }
+      for (let bodyPartIdx = 0; bodyPartIdx < numBodyParts; bodyPartIdx++) {
+        const xDataIndex = 1 + bodyPartIdx * 3;
+        const yDataIndex = 1 + bodyPartIdx * 3 + 1;
+        if (xDataIndex >= values.length || yDataIndex >= values.length) {
+          console.warn(`Skipping body part ${bodyPartIdx} in data row ${rowIndex + 4} due to insufficient data.`);
+          flatData[flatIndex++] = NaN;
+          flatData[flatIndex++] = NaN;
+          continue;
+        }
+        const xString = values[xDataIndex];
+        const yString = values[yDataIndex];
+        const x = parseFloat(xString);
+        const y = parseFloat(yString);
+        if (isNaN(x) || isNaN(y)) {
+          console.warn(`Could not parse x or y as number for body part ${bodyPartIdx} in data row ${rowIndex + 4}. Values: x='${xString}', y='${yString}'.`);
+          flatData[flatIndex++] = NaN;
+          flatData[flatIndex++] = NaN;
+        } else {
+          flatData[flatIndex++] = x;
+          flatData[flatIndex++] = y;
+        }
+      }
+    }
+    return (0, import_ndarray.default)(flatData, [numFrames, numBodyParts, 2]);
+  }
+  static \u0275fac = function CsvParserService_Factory(__ngFactoryType__) {
+    return new (__ngFactoryType__ || _CsvParserService)();
+  };
+  static \u0275prov = /* @__PURE__ */ \u0275\u0275defineInjectable({ token: _CsvParserService, factory: _CsvParserService.\u0275fac, providedIn: "root" });
+};
+(() => {
+  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(CsvParserService, [{
+    type: Injectable,
+    args: [{
+      providedIn: "root"
+    }]
+  }], null, null);
+})();
+
+// src/app/session.service.ts
+var SessionService = class _SessionService {
+  rpc = inject(RpcService);
+  httpClient = inject(HttpClient);
+  predictionFiles = [];
+  projectInfoService = inject(ProjectInfoService);
+  csvParser = inject(CsvParserService);
+  _allSessions = new BehaviorSubject([]);
+  allSessions$ = this._allSessions.asObservable();
+  allSessions = toSignal(this.allSessions$, { requireSync: true });
+  async loadSessions() {
+    const projectInfo = this.projectInfoService.projectInfo;
+    const response = await this.rpc.call("rglob", {
+      baseDir: projectInfo.data_dir,
+      pattern: "**/*.fine.mp4",
+      //temporary
+      noDirs: true
+    });
+    const mp4Files = response.entries.filter((entry) => entry.type === "file").map((entry) => entry.path);
+    const sessions = this.groupVideoFilesIntoSessions(mp4Files, this.projectInfoService.projectInfo.views);
+    return this._allSessions.next(sessions);
+  }
+  async loadPredictionIndex() {
+    const projectInfo = this.projectInfoService.projectInfo;
+    const response = await this.rpc.call("rglob", {
+      baseDir: projectInfo.model_dir,
+      pattern: "**/video_preds/**/*.csv",
+      noDirs: true
+    });
+    this.predictionFiles = response.entries.filter((entry) => {
+      if (entry.type !== "file")
+        return false;
+      if (entry.path.endsWith("_bbox.csv"))
+        return false;
+      if (entry.path.endsWith("_error.csv"))
+        return false;
+      if (entry.path.endsWith("_loss.csv"))
+        return false;
+      if (entry.path.endsWith("_norm.csv"))
+        return false;
+      return true;
+    }).map((entry) => {
+      let match2 = entry.path.match(/(.+)\/video_preds\/([^/]+)\.mp4\/predictions\.csv/);
+      if (!match2) {
+        match2 = entry.path.match(/(.+)\/video_preds\/([^/]+)\.csv/);
+      }
+      if (!match2)
+        return null;
+      const modelKey = match2[1];
+      const sessionView = match2[2];
+      const viewName = this.projectInfoService.allViews().find((v) => sessionView.includes(v));
+      if (!viewName)
+        return null;
+      const sessionKey = sessionView.replace(viewName, "*");
+      return {
+        path: entry.path,
+        modelKey,
+        sessionKey,
+        viewName
+      };
+    }).filter((entry) => entry != null);
+    this.initModels();
+    await this.initKeypoints();
+  }
+  initModels() {
+    const uniqueModels = new Set(this.predictionFiles.map((pfile) => pfile.modelKey).filter((x) => x));
+    this.projectInfoService.setAllModels(Array.from(uniqueModels).sort());
+  }
+  async initKeypoints() {
+    if (this.predictionFiles.length === 0)
+      return;
+    const csvFile = await this.getPredictionFile(this.predictionFiles[0]);
+    if (!csvFile)
+      return;
+    const allKeypoints = this.csvParser.getBodyParts(csvFile);
+    this.projectInfoService.setAllKeypoints(allKeypoints);
+  }
+  getPredictionFilesForSession(sessionKey) {
+    const predictionFiles = this.predictionFiles.filter((p) => p.sessionKey === sessionKey || p.sessionKey === sessionKey.replace(/\.fine$/, ""));
+    return predictionFiles;
+  }
+  async getPredictionFile(pfile) {
+    const modelDir = this.projectInfoService.projectInfo?.model_dir;
+    const src = "/app/v0/files/" + modelDir + "/" + pfile.path;
+    return await firstValueFrom(this.httpClient.get(src, { responseType: "text" }).pipe(catchError((error) => {
+      if (error.status === 404) {
+        return [null];
+      }
+      throw error;
+    })));
+  }
+  async ffprobe(file) {
+    const response = await this.rpc.call("ffprobe", {
+      path: file
+    });
+    return response;
+  }
+  groupVideoFilesIntoSessions(filenames, views) {
+    const sessionKeyToItsViewFiles = /* @__PURE__ */ new Map();
+    for (const filename of filenames) {
+      let viewName = views.find((v) => filename.includes(v));
+      if (!viewName) {
+        viewName = "unknown";
+      }
+      const sessionKey = viewName == "unknown" ? filename : filename.replace(viewName, "*");
+      if (!sessionKeyToItsViewFiles.has(sessionKey)) {
+        sessionKeyToItsViewFiles.set(sessionKey, []);
+      }
+      const projectInfo = this.projectInfoService.projectInfo;
+      sessionKeyToItsViewFiles.get(sessionKey).push({
+        viewName,
+        videoPath: projectInfo.data_dir + "/" + filename
+      });
+    }
+    return Array.from(sessionKeyToItsViewFiles.entries()).map(([key, sessionViews]) => ({
+      key: key.replace(/\.mp4$/, ""),
+      views: sessionViews
+    }));
+  }
+  static \u0275fac = function SessionService_Factory(__ngFactoryType__) {
+    return new (__ngFactoryType__ || _SessionService)();
+  };
+  static \u0275prov = /* @__PURE__ */ \u0275\u0275defineInjectable({ token: _SessionService, factory: _SessionService.\u0275fac, providedIn: "root" });
+};
+(() => {
+  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(SessionService, [{
+    type: Injectable,
+    args: [{
+      providedIn: "root"
+    }]
+  }], null, null);
+})();
+
 // node_modules/@angular/cdk/fesm2022/boolean-property-DaaVhX5A.mjs
 function coerceBooleanProperty(value) {
   return value != null && `${value}` !== "false";
@@ -40880,12 +41301,12 @@ var BreakpointObserver = class _BreakpointObserver {
       query,
       matches
     })), takeUntil(this._destroySubject));
-    const output = {
+    const output2 = {
       observable: queryObservable,
       mql
     };
-    this._queries.set(query, output);
-    return output;
+    this._queries.set(query, output2);
+    return output2;
   }
   static \u0275fac = function BreakpointObserver_Factory(__ngFactoryType__) {
     return new (__ngFactoryType__ || _BreakpointObserver)();
@@ -52946,14 +53367,14 @@ var ViewportRuler = class _ViewportRuler {
     if (!this._viewportSize) {
       this._updateViewportSize();
     }
-    const output = {
+    const output2 = {
       width: this._viewportSize.width,
       height: this._viewportSize.height
     };
     if (!this._platform.isBrowser) {
       this._viewportSize = null;
     }
-    return output;
+    return output2;
   }
   /** Gets a DOMRect for the viewport's bounds. */
   getViewportRect() {
@@ -53892,399 +54313,6 @@ var ScrollingModule = class _ScrollingModule {
   }], null, null);
 })();
 
-// node_modules/@angular/core/fesm2022/rxjs-interop.mjs
-function takeUntilDestroyed(destroyRef) {
-  if (!destroyRef) {
-    assertInInjectionContext(takeUntilDestroyed);
-    destroyRef = inject(DestroyRef);
-  }
-  const destroyed$ = new Observable((observer) => {
-    const unregisterFn = destroyRef.onDestroy(observer.next.bind(observer));
-    return unregisterFn;
-  });
-  return (source) => {
-    return source.pipe(takeUntil(destroyed$));
-  };
-}
-function toSignal(source, options) {
-  typeof ngDevMode !== "undefined" && ngDevMode && assertNotInReactiveContext(toSignal, "Invoking `toSignal` causes new subscriptions every time. Consider moving `toSignal` outside of the reactive context and read the signal value where needed.");
-  const requiresCleanup = !options?.manualCleanup;
-  requiresCleanup && !options?.injector && assertInInjectionContext(toSignal);
-  const cleanupRef = requiresCleanup ? options?.injector?.get(DestroyRef) ?? inject(DestroyRef) : null;
-  const equal = makeToSignalEqual(options?.equal);
-  let state;
-  if (options?.requireSync) {
-    state = signal({
-      kind: 0
-      /* StateKind.NoValue */
-    }, {
-      equal
-    });
-  } else {
-    state = signal({
-      kind: 1,
-      value: options?.initialValue
-    }, {
-      equal
-    });
-  }
-  const sub = source.subscribe({
-    next: (value) => state.set({
-      kind: 1,
-      value
-    }),
-    error: (error) => {
-      if (options?.rejectErrors) {
-        throw error;
-      }
-      state.set({
-        kind: 2,
-        error
-      });
-    }
-    // Completion of the Observable is meaningless to the signal. Signals don't have a concept of
-    // "complete".
-  });
-  if (options?.requireSync && state().kind === 0) {
-    throw new RuntimeError(601, (typeof ngDevMode === "undefined" || ngDevMode) && "`toSignal()` called with `requireSync` but `Observable` did not emit synchronously.");
-  }
-  cleanupRef?.onDestroy(sub.unsubscribe.bind(sub));
-  return computed(() => {
-    const current = state();
-    switch (current.kind) {
-      case 1:
-        return current.value;
-      case 2:
-        throw current.error;
-      case 0:
-        throw new RuntimeError(601, (typeof ngDevMode === "undefined" || ngDevMode) && "`toSignal()` called with `requireSync` but `Observable` did not emit synchronously.");
-    }
-  }, {
-    equal: options?.equal
-  });
-}
-function makeToSignalEqual(userEquality = Object.is) {
-  return (a, b) => a.kind === 1 && b.kind === 1 && userEquality(a.value, b.value);
-}
-
-// src/app/rpc.service.ts
-var RpcService = class _RpcService {
-  http = inject(HttpClient);
-  call(method, params) {
-    const observable2 = this.http.post(`/app/v0/rpc/${method}`, params ?? null, {
-      headers: { "Content-type": "application/json" }
-    });
-    return firstValueFrom(observable2);
-  }
-  static \u0275fac = function RpcService_Factory(__ngFactoryType__) {
-    return new (__ngFactoryType__ || _RpcService)();
-  };
-  static \u0275prov = /* @__PURE__ */ \u0275\u0275defineInjectable({ token: _RpcService, factory: _RpcService.\u0275fac, providedIn: "root" });
-};
-(() => {
-  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(RpcService, [{
-    type: Injectable,
-    args: [{
-      providedIn: "root"
-    }]
-  }], null, null);
-})();
-
-// src/app/project-info.service.ts
-var ProjectInfoService = class _ProjectInfoService {
-  rpc = inject(RpcService);
-  // inits to undefined, set to null if no project exists.
-  _projectInfo = void 0;
-  async loadProjectInfo() {
-    const response = await this.rpc.call("getProjectInfo");
-    this._projectInfo = response.projectInfo;
-    this.setAllViews(response.projectInfo.views);
-  }
-  get projectInfo() {
-    return this._projectInfo;
-  }
-  async setProjectInfo(projectInfo) {
-    await this.rpc.call("setProjectInfo", { projectInfo });
-  }
-  // Newer style of models.
-  _allViews = new BehaviorSubject([]);
-  allViews$ = this._allViews.asObservable().pipe(distinctUntilChanged());
-  allViews = toSignal(this.allViews$, { requireSync: true });
-  setAllViews(views) {
-    this._allViews.next(views);
-  }
-  _allKeypoints = new BehaviorSubject([]);
-  allKeypoints$ = this._allKeypoints.asObservable().pipe(distinctUntilChanged());
-  allKeypoints = toSignal(this.allKeypoints$, { requireSync: true });
-  setAllKeypoints(keypoints) {
-    this._allKeypoints.next(keypoints);
-  }
-  _allModels = new BehaviorSubject([]);
-  allModels$ = this._allModels.asObservable().pipe(distinctUntilChanged());
-  allModels = toSignal(this.allModels$, { requireSync: true });
-  setAllModels(models) {
-    this._allModels.next(models);
-  }
-  static \u0275fac = function ProjectInfoService_Factory(__ngFactoryType__) {
-    return new (__ngFactoryType__ || _ProjectInfoService)();
-  };
-  static \u0275prov = /* @__PURE__ */ \u0275\u0275defineInjectable({ token: _ProjectInfoService, factory: _ProjectInfoService.\u0275fac, providedIn: "root" });
-};
-(() => {
-  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(ProjectInfoService, [{
-    type: Injectable,
-    args: [{
-      providedIn: "root"
-    }]
-  }], null, null);
-})();
-
-// src/app/csv-parser.service.ts
-var import_ndarray = __toESM(require_ndarray());
-var import_papaparse = __toESM(require_papaparse_min());
-var CsvParserService = class _CsvParserService {
-  /**
-   * Parses a CSV string from pose estimation into a 3D array (ndarray-like structure)
-   * using the PapaParse library.
-   * The output shape is (number of frames, number of bodyparts, 2 for x/y coordinates).
-   *
-   * @param csvString The CSV data as a string.
-   * @returns A 3D array of numbers: number[][][].
-   * Returns an empty array if the CSV is malformed, has no data, or PapaParse fails.
-   */
-  getBodyParts(csvString) {
-    const parseOutput = import_papaparse.default.parse(csvString.trim(), {
-      dynamicTyping: false,
-      skipEmptyLines: true
-    });
-    if (parseOutput.errors.length > 0) {
-      console.error("PapaParse errors:", parseOutput.errors);
-      return [];
-    }
-    const allRows = parseOutput.data;
-    if (allRows.length < 4) {
-      console.error("CSV must have at least 3 header lines and 1 data line.");
-      return [];
-    }
-    const bodypartsHeader = allRows[1];
-    if (!bodypartsHeader || bodypartsHeader.length <= 1 || (bodypartsHeader.length - 1) % 3 !== 0) {
-      console.error("Malformed bodyparts header line (line 2 of CSV).", bodypartsHeader);
-      return [];
-    }
-    return bodypartsHeader.filter((_element, index) => {
-      return (index - 1) % 3 === 0 && index >= 1;
-    });
-  }
-  parsePredictionFile(csvString) {
-    const parseOutput = import_papaparse.default.parse(csvString.trim(), {
-      dynamicTyping: false,
-      skipEmptyLines: true
-    });
-    if (parseOutput.errors.length > 0) {
-      console.error("PapaParse errors:", parseOutput.errors);
-      return (0, import_ndarray.default)(new Float64Array(0), [0, 0, 2]);
-    }
-    const allRows = parseOutput.data;
-    if (allRows.length < 4) {
-      console.error("CSV must have at least 3 header lines and 1 data line.");
-      return (0, import_ndarray.default)(new Float64Array(0), [0, 0, 2]);
-    }
-    const bodypartsHeader = allRows[1];
-    if (!bodypartsHeader || bodypartsHeader.length <= 1 || (bodypartsHeader.length - 1) % 3 !== 0) {
-      console.error("Malformed bodyparts header line (line 2 of CSV).", bodypartsHeader);
-      return (0, import_ndarray.default)(new Float64Array(0), [0, 0, 2]);
-    }
-    const numBodyParts = (bodypartsHeader.length - 1) / 3;
-    const coordsHeader = allRows[2];
-    if (!coordsHeader || coordsHeader.length !== bodypartsHeader.length) {
-      console.error("Coordinate header (line 3 of CSV) length mismatch with bodyparts header.");
-      return (0, import_ndarray.default)(new Float64Array(0), [
-        0,
-        numBodyParts > 0 ? numBodyParts : 0,
-        2
-      ]);
-    }
-    const dataRowsOnly = allRows.slice(3);
-    const numFrames = dataRowsOnly.length;
-    if (numFrames === 0 || numBodyParts === 0) {
-      return (0, import_ndarray.default)(new Float64Array(0), [numFrames, numBodyParts, 2]);
-    }
-    const flatData = new Float64Array(numFrames * numBodyParts * 2);
-    let flatIndex = 0;
-    for (let rowIndex = 0; rowIndex < numFrames; rowIndex++) {
-      const values = dataRowsOnly[rowIndex];
-      if (values.length < 1 + numBodyParts * 3) {
-        console.warn(`Skipping malformed data row ${rowIndex + 4} (not enough columns): "${values.slice(0, 5).join(",")}..."`);
-        for (let i = 0; i < numBodyParts; i++) {
-          flatData[flatIndex++] = NaN;
-          flatData[flatIndex++] = NaN;
-        }
-        continue;
-      }
-      for (let bodyPartIdx = 0; bodyPartIdx < numBodyParts; bodyPartIdx++) {
-        const xDataIndex = 1 + bodyPartIdx * 3;
-        const yDataIndex = 1 + bodyPartIdx * 3 + 1;
-        if (xDataIndex >= values.length || yDataIndex >= values.length) {
-          console.warn(`Skipping body part ${bodyPartIdx} in data row ${rowIndex + 4} due to insufficient data.`);
-          flatData[flatIndex++] = NaN;
-          flatData[flatIndex++] = NaN;
-          continue;
-        }
-        const xString = values[xDataIndex];
-        const yString = values[yDataIndex];
-        const x = parseFloat(xString);
-        const y = parseFloat(yString);
-        if (isNaN(x) || isNaN(y)) {
-          console.warn(`Could not parse x or y as number for body part ${bodyPartIdx} in data row ${rowIndex + 4}. Values: x='${xString}', y='${yString}'.`);
-          flatData[flatIndex++] = NaN;
-          flatData[flatIndex++] = NaN;
-        } else {
-          flatData[flatIndex++] = x;
-          flatData[flatIndex++] = y;
-        }
-      }
-    }
-    return (0, import_ndarray.default)(flatData, [numFrames, numBodyParts, 2]);
-  }
-  static \u0275fac = function CsvParserService_Factory(__ngFactoryType__) {
-    return new (__ngFactoryType__ || _CsvParserService)();
-  };
-  static \u0275prov = /* @__PURE__ */ \u0275\u0275defineInjectable({ token: _CsvParserService, factory: _CsvParserService.\u0275fac, providedIn: "root" });
-};
-(() => {
-  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(CsvParserService, [{
-    type: Injectable,
-    args: [{
-      providedIn: "root"
-    }]
-  }], null, null);
-})();
-
-// src/app/session.service.ts
-var SessionService = class _SessionService {
-  rpc = inject(RpcService);
-  httpClient = inject(HttpClient);
-  allSessions = new BehaviorSubject([]);
-  predictionFiles = [];
-  projectInfoService = inject(ProjectInfoService);
-  csvParser = inject(CsvParserService);
-  getAllSessions() {
-    return this.allSessions.asObservable();
-  }
-  async loadSessions() {
-    const projectInfo = this.projectInfoService.projectInfo;
-    const response = await this.rpc.call("rglob", {
-      baseDir: projectInfo.data_dir,
-      pattern: "**/*.fine.mp4",
-      //temporary
-      noDirs: true
-    });
-    const mp4Files = response.entries.filter((entry) => entry.type === "file").map((entry) => entry.path);
-    const sessions = getUniqueSessionTemplates(mp4Files, this.projectInfoService.projectInfo.views).map((templateName) => {
-      return { key: templateName.replace(/\.mp4$/, "") };
-    });
-    return this.allSessions.next(sessions);
-  }
-  async loadPredictionIndex() {
-    const projectInfo = this.projectInfoService.projectInfo;
-    const response = await this.rpc.call("rglob", {
-      baseDir: projectInfo.model_dir,
-      pattern: "**/video_preds/**/*.csv",
-      noDirs: true
-    });
-    this.predictionFiles = response.entries.filter((entry) => {
-      if (entry.type !== "file")
-        return false;
-      if (entry.path.endsWith("_bbox.csv"))
-        return false;
-      if (entry.path.endsWith("_error.csv"))
-        return false;
-      if (entry.path.endsWith("_loss.csv"))
-        return false;
-      if (entry.path.endsWith("_norm.csv"))
-        return false;
-      return true;
-    }).map((entry) => {
-      let match2 = entry.path.match(/(.+)\/video_preds\/([^/]+)\.mp4\/predictions\.csv/);
-      if (!match2) {
-        match2 = entry.path.match(/(.+)\/video_preds\/([^/]+)\.csv/);
-      }
-      if (!match2)
-        return null;
-      const modelKey = match2[1];
-      const sessionView = match2[2];
-      const viewName = this.projectInfoService.allViews().find((v) => sessionView.includes(v));
-      if (!viewName)
-        return null;
-      const sessionKey = sessionView.replace(viewName, "*");
-      return {
-        path: entry.path,
-        modelKey,
-        sessionKey,
-        viewName
-      };
-    }).filter((entry) => entry != null);
-    this.initModels();
-    await this.initKeypoints();
-  }
-  initModels() {
-    const uniqueModels = new Set(this.predictionFiles.map((pfile) => pfile.modelKey).filter((x) => x));
-    this.projectInfoService.setAllModels(Array.from(uniqueModels).sort());
-  }
-  async initKeypoints() {
-    if (this.predictionFiles.length === 0)
-      return;
-    const csvFile = await this.getPredictionFile(this.predictionFiles[0]);
-    if (!csvFile)
-      return;
-    const allKeypoints = this.csvParser.getBodyParts(csvFile);
-    this.projectInfoService.setAllKeypoints(allKeypoints);
-  }
-  getPredictionFilesForSession(sessionKey) {
-    const predictionFiles = this.predictionFiles.filter((p) => p.sessionKey === sessionKey || p.sessionKey === sessionKey.replace(/\.fine$/, ""));
-    return predictionFiles;
-  }
-  async getPredictionFile(pfile) {
-    const modelDir = this.projectInfoService.projectInfo?.model_dir;
-    const src = "/app/v0/files/" + modelDir + "/" + pfile.path;
-    return await firstValueFrom(this.httpClient.get(src, { responseType: "text" }).pipe(catchError((error) => {
-      if (error.status === 404) {
-        return [null];
-      }
-      throw error;
-    })));
-  }
-  async ffprobe(file) {
-    const response = await this.rpc.call("ffprobe", {
-      path: file
-    });
-    return response;
-  }
-  static \u0275fac = function SessionService_Factory(__ngFactoryType__) {
-    return new (__ngFactoryType__ || _SessionService)();
-  };
-  static \u0275prov = /* @__PURE__ */ \u0275\u0275defineInjectable({ token: _SessionService, factory: _SessionService.\u0275fac, providedIn: "root" });
-};
-(() => {
-  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(SessionService, [{
-    type: Injectable,
-    args: [{
-      providedIn: "root"
-    }]
-  }], null, null);
-})();
-function getUniqueSessionTemplates(filenames, views) {
-  const sessionTemplates = /* @__PURE__ */ new Set();
-  for (const filename of filenames) {
-    const viewName = views.find((v) => filename.includes(v));
-    const sessionTemplate = viewName ? filename.replace(viewName, "*") : filename;
-    if (!sessionTemplates.has(sessionTemplate)) {
-      sessionTemplates.add(sessionTemplate);
-    }
-  }
-  return Array.from(sessionTemplates);
-}
-
 // src/app/viewer/viewer-left-panel/viewer-sessions-panel.component.ts
 var _c03 = (a0) => ["/viewer", a0];
 var _forTrack0 = ($index, $item) => $item.key;
@@ -54303,19 +54331,11 @@ function ViewerSessionsPanelComponent_For_16_Template(rf, ctx) {
   }
 }
 var ViewerSessionsPanelComponent = class _ViewerSessionsPanelComponent {
-  sessionService;
-  sessions;
-  constructor(sessionService) {
-    this.sessionService = sessionService;
-    this.sessions = toSignal(this.sessionService.getAllSessions(), {
-      requireSync: true
-    });
-  }
-  selectedSession = input(null);
+  sessionService = inject(SessionService);
   static \u0275fac = function ViewerSessionsPanelComponent_Factory(__ngFactoryType__) {
-    return new (__ngFactoryType__ || _ViewerSessionsPanelComponent)(\u0275\u0275directiveInject(SessionService));
+    return new (__ngFactoryType__ || _ViewerSessionsPanelComponent)();
   };
-  static \u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _ViewerSessionsPanelComponent, selectors: [["app-sessions-panel"]], inputs: { selectedSession: [1, "selectedSession"] }, decls: 17, vars: 0, consts: [[1, "flex", "justify-between"], [1, "px-2"], [1, "dropdown", "dropdown-end"], [1, "btn", "btn-xs", "btn-ghost"], [1, "material-icons", "text-base!"], ["tabindex", "0", 1, "dropdown-content", "menu", "menu-sm", "bg-base-100", "z-40", "w-52", "p-2", "shadow-sm"], [1, "panel-content", "inset-shadow-xs", "inset-shadow-black/30"], [1, "overflow-x-auto"], [1, "w-fit", "relative"], ["routerLinkActive", "bg-sky-700", 1, "text-nowrap"], [1, "p-1", "block", "hover:bg-base-content/10", "rounded-sm", 3, "routerLink"]], template: function ViewerSessionsPanelComponent_Template(rf, ctx) {
+  static \u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _ViewerSessionsPanelComponent, selectors: [["app-sessions-panel"]], decls: 17, vars: 0, consts: [[1, "flex", "justify-between"], [1, "px-2"], [1, "dropdown", "dropdown-end"], [1, "btn", "btn-xs", "btn-ghost"], [1, "material-icons", "text-base!"], ["tabindex", "0", 1, "dropdown-content", "menu", "menu-sm", "bg-base-100", "z-40", "w-52", "p-2", "shadow-sm"], [1, "panel-content", "inset-shadow-xs", "inset-shadow-black/30"], [1, "overflow-x-auto"], ["tabindex", "0", "role", "listbox", 1, "w-fit", "relative"], ["routerLinkActive", "bg-sky-700", 1, "text-nowrap"], ["role", "option", 1, "p-1", "block", "hover:bg-base-content/10", "rounded-sm", 3, "routerLink"]], template: function ViewerSessionsPanelComponent_Template(rf, ctx) {
     if (rf & 1) {
       \u0275\u0275elementStart(0, "div", 0)(1, "h1", 1);
       \u0275\u0275text(2, "Sessions");
@@ -54332,7 +54352,7 @@ var ViewerSessionsPanelComponent = class _ViewerSessionsPanelComponent {
     }
     if (rf & 2) {
       \u0275\u0275advance(15);
-      \u0275\u0275repeater(ctx.sessions());
+      \u0275\u0275repeater(ctx.sessionService.allSessions());
     }
   }, dependencies: [RouterLink, RouterLinkActive, MatListModule, ScrollingModule], encapsulation: 2, changeDetection: 0 });
 };
@@ -54361,10 +54381,11 @@ var ViewerSessionsPanelComponent = class _ViewerSessionsPanelComponent {
 <div class="panel-content inset-shadow-xs inset-shadow-black/30">
   <!--panel content-->
   <div class="overflow-x-auto">
-    <ul class="w-fit relative">
-      @for (session of sessions(); track session.key) {
+    <ul class="w-fit relative" tabindex="0" role="listbox">
+      @for (session of sessionService.allSessions(); track session.key) {
         <li class="text-nowrap" routerLinkActive="bg-sky-700">
           <a
+            role="option"
             class="p-1 block hover:bg-base-content/10 rounded-sm"
             [routerLink]="['/viewer', session.key]"
           >
@@ -54376,28 +54397,41 @@ var ViewerSessionsPanelComponent = class _ViewerSessionsPanelComponent {
   </div>
 </div>
 ` }]
-  }], () => [{ type: SessionService }], null);
+  }], null, null);
 })();
 (() => {
-  (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(ViewerSessionsPanelComponent, { className: "ViewerSessionsPanelComponent", filePath: "src/app/viewer/viewer-left-panel/viewer-sessions-panel.component.ts", lineNumber: 23 });
+  (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);
@@ -54630,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.
@@ -54638,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,
@@ -54648,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);
   }
@@ -54665,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);
   }
@@ -54686,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();
@@ -54713,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 }]
@@ -58960,22 +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());
-  }
-}
-function ViewerCenterPanelComponent_ForEmpty_4_Template(rf, ctx) {
-  if (rf & 1) {
-    \u0275\u0275elementStart(0, "p");
-    \u0275\u0275text(1, "Loading...");
-    \u0275\u0275elementEnd();
+    \u0275\u0275property("labelerMode", false)("keypointModels", w_r2.keypoints());
   }
 }
 var ViewerCenterPanelComponent = class _ViewerCenterPanelComponent {
@@ -58999,26 +59050,32 @@ var ViewerCenterPanelComponent = class _ViewerCenterPanelComponent {
     const sessionKey = this.sessionKey();
     if (!sessionKey)
       return;
-    this.widgetModels.set(this.projectInfoService.allViews().flatMap((view) => {
-      const keypointModels = this.projectInfoService.allModels().flatMap((modelKey) => {
-        const predictions = this.predictions.get(new Pair(view, modelKey).toMapKey());
-        if (predictions) {
-          return this.projectInfoService.allKeypoints().map((k) => this.buildKeypoint(k, predictions, modelKey));
-        } else {
-          return [];
-        }
-      });
-      const widget = this.buildWidget(sessionKey, view, keypointModels);
-      return widget;
-    }));
+    const session = this.sessionService.allSessions().find((session2) => session2.key === sessionKey);
+    if (!session)
+      return;
+    this.widgetModels.set(
+      //this.projectInfoService.allViews().flatMap((view) => {
+      session.views.flatMap((sessionView) => {
+        const keypointModels = this.projectInfoService.allModels().flatMap((modelKey) => {
+          const predictions = this.predictions.get(new Pair(sessionView.viewName, modelKey).toMapKey());
+          if (predictions) {
+            return this.projectInfoService.allKeypoints().map((k) => this.buildKeypoint(k, predictions, modelKey));
+          } else {
+            return [];
+          }
+        });
+        const widget = this.buildWidget(sessionView, keypointModels);
+        return widget;
+      })
+    );
   }
-  buildWidget(sessionKey, view, allKeypoints) {
+  buildWidget(sessionView, allKeypoints) {
     const filteredKeypoints = computed(() => {
       return allKeypoints.filter((k) => this.viewSettings.modelsShown().includes(k.modelKey) && this.viewSettings.keypointsShown().includes(k.name));
     });
     return {
-      id: view,
-      videoSrc: this.getVideoSrc(sessionKey, view),
+      id: sessionView.viewName,
+      videoSrc: this.getVideoSrc(sessionView),
       keypoints: filteredKeypoints
     };
   }
@@ -59055,8 +59112,8 @@ var ViewerCenterPanelComponent = class _ViewerCenterPanelComponent {
     const dataDir = this.projectInfoService.projectInfo?.data_dir;
     return dataDir + "/" + sessionKey.replace(/\*/g, view) + ".mp4";
   }
-  getVideoSrc(sessionKey, view) {
-    return "/app/v0/files/" + this.getVideoPath(sessionKey, view);
+  getVideoSrc(sessionView) {
+    return "/app/v0/files/" + sessionView.videoPath;
   }
   async loadSession(sessionKey) {
     this.sessionKey.set(sessionKey);
@@ -59071,7 +59128,7 @@ var ViewerCenterPanelComponent = class _ViewerCenterPanelComponent {
       this.loadPredictionFiles()
     ]);
     this.loadingService.isLoading.set(false);
-    this.buildWidgetModels();
+    await this.buildWidgetModels();
   }
   async loadPredictionFiles() {
     const sessionKey = this.sessionKey();
@@ -59105,15 +59162,19 @@ 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: 6, vars: 1, 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, false, ViewerCenterPanelComponent_ForEmpty_4_Template, 2, 0, "p");
+      \u0275\u0275repeaterCreate(2, ViewerCenterPanelComponent_For_3_Template, 8, 4, "div", 2, _forTrack03);
       \u0275\u0275elementEnd();
-      \u0275\u0275element(5, "app-video-player-controls");
+      \u0275\u0275element(4, "app-video-player-controls");
       \u0275\u0275elementEnd();
     }
     if (rf & 2) {
@@ -59133,13 +59194,13 @@ 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    } @empty {\n      <p>Loading...</p>\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
   }] });
 })();
 (() => {
-  (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(ViewerCenterPanelComponent, { className: "ViewerCenterPanelComponent", filePath: "src/app/viewer/viewer-center-panel/viewer-center-panel.component.ts", lineNumber: 36 });
+  (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(ViewerCenterPanelComponent, { className: "ViewerCenterPanelComponent", filePath: "src/app/viewer/viewer-center-panel/viewer-center-panel.component.ts", lineNumber: 38 });
 })();
 
 // src/app/loading-bar/loading-bar.component.ts
@@ -59182,19 +59243,14 @@ var LoadingBarComponent = class _LoadingBarComponent {
 
 // src/app/viewer/viewer-page/viewer-page.component.ts
 var _c05 = (a0) => [a0];
-function ViewerPageComponent_Conditional_0_Template(rf, ctx) {
-  if (rf & 1) {
-    \u0275\u0275text(0, " Loading...\n");
-  }
-}
-function ViewerPageComponent_Conditional_1_For_14_Template(rf, ctx) {
+function ViewerPageComponent_Conditional_0_For_14_Template(rf, ctx) {
   if (rf & 1) {
     const _r1 = \u0275\u0275getCurrentView();
-    \u0275\u0275elementStart(0, "li", 11)(1, "span");
+    \u0275\u0275elementStart(0, "li", 9)(1, "span");
     \u0275\u0275text(2);
     \u0275\u0275elementEnd();
-    \u0275\u0275elementStart(3, "input", 14);
-    \u0275\u0275listener("change", function ViewerPageComponent_Conditional_1_For_14_Template_input_change_3_listener($event) {
+    \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);
       return \u0275\u0275resetView(ctx_r2.onViewCheckboxChange($event, cam_r2));
@@ -59210,14 +59266,14 @@ function ViewerPageComponent_Conditional_1_For_14_Template(rf, ctx) {
     \u0275\u0275property("checked", ctx_r2.viewSelectionModel.isSelected(cam_r2));
   }
 }
-function ViewerPageComponent_Conditional_1_For_22_Template(rf, ctx) {
+function ViewerPageComponent_Conditional_0_For_22_Template(rf, ctx) {
   if (rf & 1) {
     const _r4 = \u0275\u0275getCurrentView();
-    \u0275\u0275elementStart(0, "li", 11)(1, "span");
+    \u0275\u0275elementStart(0, "li", 9)(1, "span");
     \u0275\u0275text(2);
     \u0275\u0275elementEnd();
-    \u0275\u0275elementStart(3, "input", 14);
-    \u0275\u0275listener("change", function ViewerPageComponent_Conditional_1_For_22_Template_input_change_3_listener($event) {
+    \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);
       return \u0275\u0275resetView(ctx_r2.onKeypointCheckboxChange($event, kp_r5));
@@ -59233,9 +59289,9 @@ function ViewerPageComponent_Conditional_1_For_22_Template(rf, ctx) {
     \u0275\u0275property("checked", ctx_r2.keypointSelectionModel.isSelected(kp_r5));
   }
 }
-function ViewerPageComponent_Conditional_1_For_31_For_5_Template(rf, ctx) {
+function ViewerPageComponent_Conditional_0_For_31_For_5_Template(rf, ctx) {
   if (rf & 1) {
-    \u0275\u0275elementStart(0, "option", 16);
+    \u0275\u0275elementStart(0, "option", 14);
     \u0275\u0275text(1);
     \u0275\u0275elementEnd();
   }
@@ -59247,19 +59303,19 @@ function ViewerPageComponent_Conditional_1_For_31_For_5_Template(rf, ctx) {
     \u0275\u0275textInterpolate1(" ", dropdownItem_r8, " ");
   }
 }
-function ViewerPageComponent_Conditional_1_For_31_Template(rf, ctx) {
+function ViewerPageComponent_Conditional_0_For_31_Template(rf, ctx) {
   if (rf & 1) {
     const _r6 = \u0275\u0275getCurrentView();
     \u0275\u0275declareLet(0);
-    \u0275\u0275elementStart(1, "li", 13)(2, "select", 15);
-    \u0275\u0275listener("change", function ViewerPageComponent_Conditional_1_For_31_Template_select_change_2_listener($event) {
+    \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);
       const ctx_r2 = \u0275\u0275nextContext(2);
       return \u0275\u0275resetView(ctx_r2.onModelDropdownItemClick(modelIndex_r7, $event));
     });
     \u0275\u0275declareLet(3);
-    \u0275\u0275repeaterCreate(4, ViewerPageComponent_Conditional_1_For_31_For_5_Template, 2, 2, "option", 16, \u0275\u0275repeaterTrackByIdentity);
+    \u0275\u0275repeaterCreate(4, ViewerPageComponent_Conditional_0_For_31_For_5_Template, 2, 2, "option", 14, \u0275\u0275repeaterTrackByIdentity);
     \u0275\u0275elementEnd()();
   }
   if (rf & 2) {
@@ -59273,45 +59329,43 @@ function ViewerPageComponent_Conditional_1_For_31_Template(rf, ctx) {
     \u0275\u0275repeater(options_r12);
   }
 }
-function ViewerPageComponent_Conditional_1_Template(rf, ctx) {
+function ViewerPageComponent_Conditional_0_Template(rf, ctx) {
   if (rf & 1) {
     \u0275\u0275elementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
-    \u0275\u0275element(3, "app-sessions-panel", 3);
+    \u0275\u0275element(3, "app-sessions-panel");
     \u0275\u0275elementEnd();
-    \u0275\u0275element(4, "app-loading-bar", 4);
+    \u0275\u0275element(4, "app-loading-bar", 3);
     \u0275\u0275elementEnd();
-    \u0275\u0275element(5, "app-viewer-center-panel", 5);
-    \u0275\u0275elementStart(6, "div", 6)(7, "div", 7)(8, "div", 8)(9, "h1", 9);
+    \u0275\u0275element(5, "app-viewer-center-panel", 4);
+    \u0275\u0275elementStart(6, "div", 5)(7, "div", 6)(8, "div")(9, "h1", 7);
     \u0275\u0275text(10, "Views");
     \u0275\u0275elementEnd()();
-    \u0275\u0275elementStart(11, "div", 10)(12, "ul");
-    \u0275\u0275repeaterCreate(13, ViewerPageComponent_Conditional_1_For_14_Template, 4, 2, "li", 11, \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", 7)(16, "div", 8)(17, "h1", 9);
+    \u0275\u0275elementStart(15, "div", 6)(16, "div")(17, "h1", 7);
     \u0275\u0275text(18, "Keypoints");
     \u0275\u0275elementEnd()();
-    \u0275\u0275elementStart(19, "div", 10)(20, "ul");
-    \u0275\u0275repeaterCreate(21, ViewerPageComponent_Conditional_1_For_22_Template, 4, 2, "li", 11, \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", 7)(24, "div", 8)(25, "h1", 9);
+    \u0275\u0275elementStart(23, "div", 6)(24, "div")(25, "h1", 7);
     \u0275\u0275text(26, "Models");
     \u0275\u0275elementEnd()();
-    \u0275\u0275elementStart(27, "div", 12)(28, "ul");
+    \u0275\u0275elementStart(27, "div", 10)(28, "ul");
     \u0275\u0275declareLet(29);
-    \u0275\u0275repeaterCreate(30, ViewerPageComponent_Conditional_1_For_31_Template, 6, 7, "li", 13, \u0275\u0275repeaterTrackByIndex);
+    \u0275\u0275repeaterCreate(30, ViewerPageComponent_Conditional_0_For_31_Template, 6, 7, "li", 11, \u0275\u0275repeaterTrackByIndex);
     \u0275\u0275elementEnd()()()()();
   }
   if (rf & 2) {
     const ctx_r2 = \u0275\u0275nextContext();
-    \u0275\u0275advance(3);
-    \u0275\u0275property("selectedSession", ctx_r2.selectedSession());
-    \u0275\u0275advance(2);
+    \u0275\u0275advance(5);
     \u0275\u0275property("viewSettings", ctx_r2.viewSettings);
     \u0275\u0275advance(8);
     \u0275\u0275repeater(ctx_r2.allViews);
     \u0275\u0275advance(8);
     \u0275\u0275repeater(ctx_r2.projectInfoService.allKeypoints());
-    const modelSelectors_r13 = ctx_r2.viewSettings.modelsShown().length < 2 ? ctx_r2.viewSettings.modelsShown().concat(\u0275\u0275pureFunction1(2, _c05, ctx_r2.noneOption)) : ctx_r2.viewSettings.modelsShown();
+    const modelSelectors_r13 = ctx_r2.viewSettings.modelsShown().length < 2 ? ctx_r2.viewSettings.modelsShown().concat(\u0275\u0275pureFunction1(1, _c05, ctx_r2.noneOption)) : ctx_r2.viewSettings.modelsShown();
     \u0275\u0275advance(9);
     \u0275\u0275repeater(modelSelectors_r13);
   }
@@ -59344,10 +59398,8 @@ var ViewerPageComponent = class _ViewerPageComponent {
   isIniting = signal(true);
   async ngOnInit() {
     this.loadingService.isLoading.set(true);
-    this.loadingService.maxProgress.set(3);
+    this.loadingService.maxProgress.set(2);
     this.loadingService.progress.set(0);
-    await this.projectInfoService.loadProjectInfo();
-    this.loadingService.progress.update((x) => x + 1);
     const p = this.sessionService.loadPredictionIndex();
     const s = this.sessionService.loadSessions().then(() => {
       this.loadingService.progress.update((x) => x + 1);
@@ -59380,20 +59432,16 @@ 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);
+    });
   }
-  selectedSession = computed(() => {
-    const sessionKey = this._sessionKey();
-    if (!sessionKey) {
-      return null;
-    } else {
-      return {
-        key: sessionKey
-      };
-    }
-  });
   onKeypointCheckboxChange(event, keypointName) {
     const target = event.target;
     if (target.checked) {
@@ -59432,18 +59480,18 @@ var ViewerPageComponent = class _ViewerPageComponent {
     if (rf & 2) {
       \u0275\u0275queryAdvance();
     }
-  }, inputs: { sessionKey: "sessionKey" }, features: [\u0275\u0275ProvidersFeature([VideoPlayerState, ViewSettings])], decls: 2, vars: 1, consts: [[1, "fixed", "top-0", "left-0", "h-screen", "w-screen", "flex", "flex-row", "items-stretch", "shadow-lg"], [1, "bg-base-300", "w-60", "xl:w-80", "flex", "flex-col", "justify-between"], [1, "p-4"], [3, "selectedSession"], [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, 1, 0)(1, ViewerPageComponent_Conditional_1_Template, 32, 4, "div", 0);
+      \u0275\u0275template(0, ViewerPageComponent_Conditional_0_Template, 32, 3, "div", 0);
     }
     if (rf & 2) {
-      \u0275\u0275conditional(ctx.isIniting() ? 0 : 1);
+      \u0275\u0275conditional(!ctx.isIniting() ? 0 : -1);
     }
   }, dependencies: [
     ViewerSessionsPanelComponent,
     ViewerCenterPanelComponent,
     LoadingBarComponent
-  ], encapsulation: 2, 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, [{
@@ -59452,116 +59500,122 @@ var ViewerPageComponent = class _ViewerPageComponent {
       ViewerSessionsPanelComponent,
       ViewerCenterPanelComponent,
       LoadingBarComponent
-    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [VideoPlayerState, ViewSettings], template: `@if (isIniting()) {
-  Loading...
-} @else {
-  <div
-    class="fixed top-0 left-0 h-screen w-screen flex flex-row items-stretch shadow-lg"
-  >
-    <!-- Left pane -->
-    <div class="bg-base-300 w-60 xl:w-80 flex flex-col justify-between">
-      <div class="p-4">
-        <app-sessions-panel
-          [selectedSession]="selectedSession()"
-        ></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>
-}
-` }]
+    ], 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
@@ -65999,36 +66053,356 @@ var appConfig = {
   ]
 };
 
+// src/app/project-settings/project-settings.component.ts
+function ProjectSettingsComponent_Conditional_1_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275text(0, " Setup ");
+  }
+}
+function ProjectSettingsComponent_Conditional_2_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275text(0, " Settings ");
+  }
+}
+function ProjectSettingsComponent_Conditional_31_Template(rf, ctx) {
+  if (rf & 1) {
+    const _r1 = \u0275\u0275getCurrentView();
+    \u0275\u0275elementStart(0, "button", 14);
+    \u0275\u0275listener("click", function ProjectSettingsComponent_Conditional_31_Template_button_click_0_listener() {
+      \u0275\u0275restoreView(_r1);
+      const ctx_r1 = \u0275\u0275nextContext();
+      return \u0275\u0275resetView(ctx_r1.done.emit(null));
+    });
+    \u0275\u0275text(1, " Cancel ");
+    \u0275\u0275elementEnd();
+  }
+}
+var ProjectSettingsComponent = class _ProjectSettingsComponent {
+  done = output();
+  setupMode = input(false);
+  projectInfoForm;
+  viewsInitialRows = signal(4);
+  projectInfoService = inject(ProjectInfoService);
+  fb = inject(FormBuilder);
+  constructor() {
+    this.projectInfoForm = this.fb.group({
+      dataDir: [""],
+      modelDir: [""],
+      views: [""]
+    });
+  }
+  ngOnInit() {
+    const projectInfo = this.projectInfoService.projectInfo;
+    if (projectInfo) {
+      this.projectInfoForm.patchValue({
+        dataDir: projectInfo.data_dir,
+        modelDir: projectInfo.model_dir,
+        views: projectInfo.views.join("\n")
+      });
+      this.viewsInitialRows.update((x) => Math.max(x, projectInfo.views.length));
+    }
+  }
+  async onSaveClick() {
+    const projectInfo = {};
+    projectInfo.data_dir = this.projectInfoForm.get("dataDir")?.value ?? "";
+    projectInfo.model_dir = this.projectInfoForm.get("modelDir")?.value ?? "";
+    projectInfo.views = this.parseMultilineText(this.projectInfoForm.get("views")?.value ?? "");
+    await this.projectInfoService.setProjectInfo(projectInfo);
+  }
+  parseMultilineText(text) {
+    return text.split("\n").map((x) => x.trim()).filter((x) => Boolean(x));
+  }
+  get cameraViewPlaceholder() {
+    return `view1
+view2
+...`;
+  }
+  static \u0275fac = function ProjectSettingsComponent_Factory(__ngFactoryType__) {
+    return new (__ngFactoryType__ || _ProjectSettingsComponent)();
+  };
+  static \u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _ProjectSettingsComponent, selectors: [["app-project-settings"]], inputs: { setupMode: [1, "setupMode"] }, outputs: { done: "done" }, decls: 34, vars: 6, consts: [[1, "text-xl", "font-bold"], [3, "formGroup"], [1, "fieldset", "my-6"], [1, "fieldset-legend", "text-md"], [1, "input", "w-full"], [1, "material-icons", "!text-sm", "opacity-50"], ["formControlName", "dataDir", "type", "text", "placeholder", "/", 1, "grow"], [1, "label"], [1, "fieldset", "my-4"], ["formControlName", "modelDir", "type", "text", "placeholder", "/", 1, "grow"], ["formControlName", "views", 1, "textarea", "w-full", 3, "rows", "placeholder"], [1, "modal-action"], [1, "btn", "btn-soft", "btn-secondary"], [1, "btn", "btn-soft", "btn-primary", 3, "click", "disabled"], [1, "btn", "btn-soft", "btn-secondary", 3, "click"]], template: function ProjectSettingsComponent_Template(rf, ctx) {
+    if (rf & 1) {
+      \u0275\u0275elementStart(0, "h3", 0);
+      \u0275\u0275template(1, ProjectSettingsComponent_Conditional_1_Template, 1, 0)(2, ProjectSettingsComponent_Conditional_2_Template, 1, 0);
+      \u0275\u0275elementEnd();
+      \u0275\u0275elementStart(3, "form", 1)(4, "fieldset", 2)(5, "label", 3);
+      \u0275\u0275text(6, "Data directory");
+      \u0275\u0275elementEnd();
+      \u0275\u0275elementStart(7, "div", 4)(8, "span", 5);
+      \u0275\u0275text(9, "folder");
+      \u0275\u0275elementEnd();
+      \u0275\u0275element(10, "input", 6);
+      \u0275\u0275elementEnd();
+      \u0275\u0275elementStart(11, "p", 7);
+      \u0275\u0275text(12, "Root of the data directory for the project.");
+      \u0275\u0275elementEnd()();
+      \u0275\u0275elementStart(13, "fieldset", 8)(14, "label", 3);
+      \u0275\u0275text(15, "Model directory");
+      \u0275\u0275elementEnd();
+      \u0275\u0275elementStart(16, "div", 4)(17, "span", 5);
+      \u0275\u0275text(18, "folder");
+      \u0275\u0275elementEnd();
+      \u0275\u0275element(19, "input", 9);
+      \u0275\u0275elementEnd();
+      \u0275\u0275elementStart(20, "p", 7);
+      \u0275\u0275text(21, "Root of the model directory for the project.");
+      \u0275\u0275elementEnd()();
+      \u0275\u0275elementStart(22, "fieldset", 8)(23, "label", 3);
+      \u0275\u0275text(24, "Camera Views");
+      \u0275\u0275elementEnd();
+      \u0275\u0275element(25, "textarea", 10);
+      \u0275\u0275elementStart(26, "p", 7);
+      \u0275\u0275text(27, " Names of views embedded in video filenames.");
+      \u0275\u0275element(28, "br");
+      \u0275\u0275text(29, " Used to group files into sessions. ");
+      \u0275\u0275elementEnd()();
+      \u0275\u0275elementStart(30, "div", 11);
+      \u0275\u0275template(31, ProjectSettingsComponent_Conditional_31_Template, 2, 0, "button", 12);
+      \u0275\u0275elementStart(32, "button", 13);
+      \u0275\u0275listener("click", function ProjectSettingsComponent_Template_button_click_32_listener() {
+        return ctx.onSaveClick();
+      });
+      \u0275\u0275text(33, " Save ");
+      \u0275\u0275elementEnd()()();
+    }
+    if (rf & 2) {
+      \u0275\u0275advance();
+      \u0275\u0275conditional(ctx.setupMode() ? 1 : 2);
+      \u0275\u0275advance(2);
+      \u0275\u0275property("formGroup", ctx.projectInfoForm);
+      \u0275\u0275advance(22);
+      \u0275\u0275property("rows", ctx.viewsInitialRows())("placeholder", ctx.cameraViewPlaceholder);
+      \u0275\u0275advance(6);
+      \u0275\u0275conditional(!ctx.setupMode() ? 31 : -1);
+      \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 });
+};
+(() => {
+  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(ProjectSettingsComponent, [{
+    type: Component,
+    args: [{ selector: "app-project-settings", imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `<style>
+  ::placeholder {
+    /** bring back the default style from daisy. dont know why it's getting overridden. */
+    color: color-mix(in oklch, currentColor 50%, #0000) !important;
+  }
+</style>
+
+<h3 class="text-xl font-bold">
+  @if (setupMode()) {
+    Setup
+  } @else {
+    Settings
+  }
+</h3>
+
+<form [formGroup]="projectInfoForm">
+  <fieldset class="fieldset my-6">
+    <!-- We like the fieldset / fieldset-legend styles from daisy, but
+        we're certainly not using it as intended. Daisy inputs
+        have no other good way of putting the label on top.
+        TODO fix properly. -->
+    <label class="fieldset-legend text-md">Data directory</label>
+    <div class="input w-full">
+      <span class="material-icons !text-sm opacity-50">folder</span>
+      <input
+        formControlName="dataDir"
+        type="text"
+        class="grow"
+        placeholder="/"
+      />
+    </div>
+    <p class="label">Root of the data directory for the project.</p>
+  </fieldset>
+
+  <fieldset class="fieldset my-4">
+    <label class="fieldset-legend text-md">Model directory</label>
+
+    <div class="input w-full">
+      <span class="material-icons !text-sm opacity-50">folder</span>
+      <input
+        formControlName="modelDir"
+        type="text"
+        class="grow"
+        placeholder="/"
+      />
+    </div>
+    <p class="label">Root of the model directory for the project.</p>
+  </fieldset>
+
+  <fieldset class="fieldset my-4">
+    <label class="fieldset-legend text-md">Camera Views</label>
+
+    <textarea
+      class="textarea w-full"
+      [rows]="viewsInitialRows()"
+      [placeholder]="cameraViewPlaceholder"
+      formControlName="views"
+    ></textarea>
+    <p class="label">
+      Names of views embedded in video filenames.<br />
+      Used to group files into sessions.
+    </p>
+  </fieldset>
+
+  <div class="modal-action">
+    @if (!setupMode()) {
+      <button class="btn btn-soft btn-secondary" (click)="done.emit(null)">
+        Cancel
+      </button>
+    }
+    <button
+      class="btn btn-soft btn-primary"
+      (click)="onSaveClick()"
+      [disabled]="!projectInfoForm.dirty"
+    >
+      Save
+    </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"] }]
+  }], () => [], null);
+})();
+(() => {
+  (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(ProjectSettingsComponent, { className: "ProjectSettingsComponent", filePath: "src/app/project-settings/project-settings.component.ts", lineNumber: 21 });
+})();
+
 // src/app/app.component.ts
+var _c08 = ["settingsDialog"];
+function AppComponent_Conditional_18_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275element(0, "router-outlet");
+  }
+}
+function AppComponent_Conditional_19_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275element(0, "app-project-settings", 12);
+  }
+  if (rf & 2) {
+    \u0275\u0275property("setupMode", true);
+  }
+}
+function AppComponent_Conditional_22_Template(rf, ctx) {
+  if (rf & 1) {
+    const _r2 = \u0275\u0275getCurrentView();
+    \u0275\u0275elementStart(0, "app-project-settings", 14);
+    \u0275\u0275listener("done", function AppComponent_Conditional_22_Template_app_project_settings_done_0_listener() {
+      \u0275\u0275restoreView(_r2);
+      const ctx_r2 = \u0275\u0275nextContext();
+      return \u0275\u0275resetView(ctx_r2.settingsDialogOpen.set(false));
+    });
+    \u0275\u0275elementEnd();
+    \u0275\u0275elementStart(1, "div", 15)(2, "button", 16);
+    \u0275\u0275listener("click", function AppComponent_Conditional_22_Template_button_click_2_listener() {
+      \u0275\u0275restoreView(_r2);
+      const ctx_r2 = \u0275\u0275nextContext();
+      return \u0275\u0275resetView(ctx_r2.settingsDialogOpen.set(false));
+    });
+    \u0275\u0275text(3, "close");
+    \u0275\u0275elementEnd()();
+  }
+}
 var AppComponent = class _AppComponent {
+  projectInfoService = inject(ProjectInfoService);
+  // Whether the required initial setup has been done.
+  // (Setting data directory, model directory, views).
+  projectInfoRequestCompleted = signal(false);
+  hasBeenSetup = signal(false);
+  settingsDialog = viewChild.required("settingsDialog");
+  settingsDialogOpen = signal(false);
+  async ngOnInit() {
+    await this.projectInfoService.loadProjectInfo();
+    this.hasBeenSetup.set(Boolean(this.projectInfoService.projectInfo));
+    this.projectInfoRequestCompleted.set(true);
+  }
+  constructor() {
+    effect(() => {
+      if (this.settingsDialogOpen()) {
+        this.openSettingsDialog();
+      } else {
+        this.closeSettingsDialog();
+      }
+    });
+  }
+  openSettingsDialog() {
+    const elementRef = this.settingsDialog();
+    elementRef.nativeElement.showModal();
+  }
+  closeSettingsDialog() {
+    const elementRef = this.settingsDialog();
+    elementRef.nativeElement.close();
+  }
   static \u0275fac = function AppComponent_Factory(__ngFactoryType__) {
     return new (__ngFactoryType__ || _AppComponent)();
   };
-  static \u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _AppComponent, selectors: [["app-root"]], decls: 11, vars: 0, consts: [[1, "flex"], ["routerLink", "/viewer", "routerLinkActive", "active", "ariaCurrentWhenActive", "page"], ["routerLink", "/labeler", "routerLinkActive", "active", "ariaCurrentWhenActive", "page"]], template: function AppComponent_Template(rf, ctx) {
+  static \u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _AppComponent, selectors: [["app-root"]], viewQuery: function AppComponent_Query(rf, ctx) {
     if (rf & 1) {
-      \u0275\u0275elementStart(0, "nav", 0)(1, "span");
-      \u0275\u0275text(2, "Lightning Pose");
-      \u0275\u0275elementEnd();
-      \u0275\u0275elementStart(3, "ul", 0)(4, "li")(5, "a", 1);
-      \u0275\u0275text(6, "Viewer");
+      \u0275\u0275viewQuerySignal(ctx.settingsDialog, _c08, 5);
+    }
+    if (rf & 2) {
+      \u0275\u0275queryAdvance();
+    }
+  }, decls: 23, vars: 4, consts: [["settingsDialog", ""], [1, "navbar", "bg-base-200", "shadow-lg"], [1, "navbar-start"], [1, "text-lg", "font-semibold"], [1, "navbar-center"], [1, "menu", "menu-horizontal", "p-0"], ["routerLink", "/viewer", "routerLinkActive", "menu-active", "ariaCurrentWhenActive", "page"], ["routerLink", "/labeler", "routerLinkActive", "menu-active", "ariaCurrentWhenActive", "page"], [1, "navbar-end"], ["tabindex", "0", 1, "btn", "btn-ghost", 3, "click", "keydown.enter"], [1, "material-icons"], [1, "flex-grow", "flex", "min-h-0"], [1, "w-lg", "mt-8", 3, "setupMode"], [1, "modal"], [1, "modal-box", 3, "done"], [1, "modal-backdrop"], [3, "click"]], template: function AppComponent_Template(rf, ctx) {
+    if (rf & 1) {
+      const _r1 = \u0275\u0275getCurrentView();
+      \u0275\u0275elementStart(0, "header")(1, "nav", 1)(2, "div", 2)(3, "span", 3);
+      \u0275\u0275text(4, "Lightning Pose");
       \u0275\u0275elementEnd()();
-      \u0275\u0275elementStart(7, "li")(8, "a", 2);
-      \u0275\u0275text(9, "Labeler");
+      \u0275\u0275elementStart(5, "div", 4)(6, "ul", 5)(7, "li")(8, "a", 6);
+      \u0275\u0275text(9, "Viewer");
+      \u0275\u0275elementEnd()();
+      \u0275\u0275elementStart(10, "li")(11, "a", 7);
+      \u0275\u0275text(12, "Labeler");
       \u0275\u0275elementEnd()()()();
-      \u0275\u0275element(10, "router-outlet");
+      \u0275\u0275elementStart(13, "div", 8)(14, "button", 9);
+      \u0275\u0275listener("click", function AppComponent_Template_button_click_14_listener() {
+        \u0275\u0275restoreView(_r1);
+        return \u0275\u0275resetView(ctx.settingsDialogOpen.set(true));
+      })("keydown.enter", function AppComponent_Template_button_keydown_enter_14_listener() {
+        \u0275\u0275restoreView(_r1);
+        return \u0275\u0275resetView(ctx.settingsDialogOpen.set(true));
+      });
+      \u0275\u0275elementStart(15, "span", 10);
+      \u0275\u0275text(16, "settings");
+      \u0275\u0275elementEnd()()()()();
+      \u0275\u0275elementStart(17, "main", 11);
+      \u0275\u0275template(18, AppComponent_Conditional_18_Template, 1, 0, "router-outlet")(19, AppComponent_Conditional_19_Template, 1, 1, "app-project-settings", 12);
+      \u0275\u0275elementEnd();
+      \u0275\u0275elementStart(20, "dialog", 13, 0);
+      \u0275\u0275template(22, AppComponent_Conditional_22_Template, 4, 0);
+      \u0275\u0275elementEnd();
+    }
+    if (rf & 2) {
+      \u0275\u0275advance(17);
+      \u0275\u0275classProp("justify-center", !ctx.hasBeenSetup());
+      \u0275\u0275advance();
+      \u0275\u0275conditional(ctx.hasBeenSetup() ? 18 : 19);
+      \u0275\u0275advance(4);
+      \u0275\u0275conditional(ctx.settingsDialogOpen() ? 22 : -1);
     }
-  }, dependencies: [RouterOutlet, RouterLink, RouterLinkActive], encapsulation: 2, changeDetection: 0 });
+  }, dependencies: [
+    RouterOutlet,
+    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 });
 };
 (() => {
   (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(AppComponent, [{
     type: Component,
-    args: [{ selector: "app-root", imports: [RouterOutlet, RouterLink, RouterLinkActive], changeDetection: ChangeDetectionStrategy.OnPush, template: '<nav class="flex">\n  <span>Lightning Pose</span>\n  <ul class="flex">\n    <li>\n      <a\n        routerLink="/viewer"\n        routerLinkActive="active"\n        ariaCurrentWhenActive="page"\n        >Viewer</a\n      >\n    </li>\n    <li>\n      <a\n        routerLink="/labeler"\n        routerLinkActive="active"\n        ariaCurrentWhenActive="page"\n        >Labeler</a\n      >\n    </li>\n  </ul>\n</nav>\n<router-outlet />\n' }]
-  }], null, null);
+    args: [{ selector: "app-root", imports: [
+      RouterOutlet,
+      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"] }]
+  }], () => [], null);
 })();
 (() => {
-  (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(AppComponent, { className: "AppComponent", filePath: "src/app/app.component.ts", lineNumber: 11 });
+  (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(AppComponent, { className: "AppComponent", filePath: "src/app/app.component.ts", lineNumber: 27 });
 })();
 
 // src/main.ts
 bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));
-//# sourceMappingURL=main-QMBNNDJG.js.map
+//# sourceMappingURL=main-LJHMLKBL.js.map