feat(web): wasm justified layout (#19150)

* wasm justified layout

* fix tests

* redundant layout generation

* raw position

web/src/lib/utils/layout-utils.ts

@@ -1,16 +1,13 @@
-// import { TUNABLES } from '$lib/utils/tunables';
-// note: it's important that this is not imported in more than one file due to https://github.com/sveltejs/kit/issues/7805
-// import { JustifiedLayout, type LayoutOptions } from '@immich/justified-layout-wasm';
+import { TUNABLES } from '$lib/utils/tunables';
 
 import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
 import { getAssetRatio } from '$lib/utils/asset-utils';
-import { isTimelineAsset } from '$lib/utils/timeline-util';
+import { isTimelineAsset, isTimelineAssets } from '$lib/utils/timeline-util';
+import { JustifiedLayout, type LayoutOptions } from '@immich/justified-layout-wasm';
 import type { AssetResponseDto } from '@immich/sdk';
 import createJustifiedLayout from 'justified-layout';
 
-export type getJustifiedLayoutFromAssetsFunction = typeof getJustifiedLayoutFromAssets;
-
-// let useWasm = TUNABLES.LAYOUT.WASM;
+const useWasm = TUNABLES.LAYOUT.WASM;
 
 export type CommonJustifiedLayout = {
   containerWidth: number;
@@ -19,6 +16,12 @@ export type CommonJustifiedLayout = {
   getLeft(boxIdx: number): number;
   getWidth(boxIdx: number): number;
   getHeight(boxIdx: number): number;
+  getPosition(boxIdx: number): {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+  };
 };
 
 export type CommonLayoutOptions = {
@@ -29,25 +32,32 @@ export type CommonLayoutOptions = {
 };
 
 export function getJustifiedLayoutFromAssets(
-  assets: (TimelineAsset | AssetResponseDto)[],
+  assets: AssetResponseDto[] | TimelineAsset[],
   options: CommonLayoutOptions,
-): CommonJustifiedLayout {
-  // if (useWasm) {
-  //   return wasmJustifiedLayout(assets, options);
-  // }
+) {
+  if (useWasm) {
+    return isTimelineAssets(assets) ? wasmLayoutFromTimeline(assets, options) : wasmLayoutFromDto(assets, options);
+  }
+
   return justifiedLayout(assets, options);
 }
 
-// commented out until a solution for top level awaits on safari is fixed
-// function wasmJustifiedLayout(assets: AssetResponseDto[], options: LayoutOptions) {
-//   const aspectRatios = new Float32Array(assets.length);
-//   // eslint-disable-next-line unicorn/no-for-loop
-//   for (let i = 0; i < assets.length; i++) {
-//     const { width, height } = getAssetRatio(assets[i]);
-//     aspectRatios[i] = width / height;
-//   }
-//   return new JustifiedLayout(aspectRatios, options);
-// }
+function wasmLayoutFromTimeline(assets: TimelineAsset[], options: LayoutOptions) {
+  const aspectRatios = new Float32Array(assets.length);
+  for (let i = 0; i < assets.length; i++) {
+    aspectRatios[i] = assets[i].ratio;
+  }
+  return new JustifiedLayout(aspectRatios, options);
+}
+
+function wasmLayoutFromDto(assets: AssetResponseDto[], options: LayoutOptions) {
+  const aspectRatios = new Float32Array(assets.length);
+  for (let i = 0; i < assets.length; i++) {
+    const { width, height } = getAssetRatio(assets[i]);
+    aspectRatios[i] = width / height;
+  }
+  return new JustifiedLayout(aspectRatios, options);
+}
 
 type Geometry = ReturnType<typeof createJustifiedLayout>;
 class Adapter {
@@ -88,9 +98,13 @@ class Adapter {
   getHeight(boxIdx: number) {
     return this.result.boxes[boxIdx]?.height;
   }
+
+  getPosition(boxIdx: number): CommonPosition {
+    return this.result.boxes[boxIdx];
+  }
 }
 
-export function justifiedLayout(assets: (TimelineAsset | AssetResponseDto)[], options: CommonLayoutOptions) {
+export function justifiedLayout(assets: TimelineAsset[] | AssetResponseDto[], options: CommonLayoutOptions) {
   const adapter = {
     targetRowHeight: options.rowHeight,
     containerWidth: options.rowWidth,
@@ -105,25 +119,9 @@ export function justifiedLayout(assets: (TimelineAsset | AssetResponseDto)[], op
   return new Adapter(result);
 }
 
-export const emptyGeometry = () =>
-  new Adapter({
-    containerHeight: 0,
-    widowCount: 0,
-    boxes: [],
-  });
-
 export type CommonPosition = {
   top: number;
   left: number;
   width: number;
   height: number;
 };
-
-export function getPosition(geometry: CommonJustifiedLayout, boxIdx: number): CommonPosition {
-  const top = geometry.getTop(boxIdx);
-  const left = geometry.getLeft(boxIdx);
-  const width = geometry.getWidth(boxIdx);
-  const height = geometry.getHeight(boxIdx);
-
-  return { top, left, width, height };
-}

web/src/lib/utils/server.ts

@@ -1,17 +1,17 @@
 import { retrieveServerConfig } from '$lib/stores/server-config.store';
 import { initLanguage } from '$lib/utils';
+import { init as initLayout } from '@immich/justified-layout-wasm';
 import { defaults } from '@immich/sdk';
 import { memoize } from 'lodash-es';
 
 type Fetch = typeof fetch;
 
-async function _init(fetch: Fetch) {
+function _init(fetch: Fetch) {
   // set event.fetch on the fetch-client used by @immich/sdk
   // https://kit.svelte.dev/docs/load#making-fetch-requests
   // https://github.com/oazapfts/oazapfts/blob/main/README.md#fetch-options
   defaults.fetch = fetch;
-  await initLanguage();
-  await retrieveServerConfig();
+  return Promise.all([initLayout(), initLanguage(), retrieveServerConfig()]);
 }
 
 export const init = memoize(_init, () => 'singlevalue');

web/src/lib/utils/timeline-util.ts

@@ -190,8 +190,10 @@ export const toTimelineAsset = (unknownAsset: AssetResponseDto | TimelineAsset):
   };
 };
 
-export const isTimelineAsset = (unknownAsset: AssetResponseDto | TimelineAsset): unknownAsset is TimelineAsset =>
-  (unknownAsset as TimelineAsset).ratio !== undefined;
+export const isTimelineAsset = (asset: AssetResponseDto | TimelineAsset): asset is TimelineAsset => 'ratio' in asset;
+
+export const isTimelineAssets = (assets: AssetResponseDto[] | TimelineAsset[]): assets is TimelineAsset[] =>
+  assets.length === 0 || 'ratio' in assets[0];
 
 export const plainDateTimeCompare = (ascending: boolean, a: TimelinePlainDateTime, b: TimelinePlainDateTime) => {
   const [aDateTime, bDateTime] = ascending ? [a, b] : [b, a];

web/src/lib/utils/tunables.ts

@@ -19,7 +19,7 @@ const storage = browser
     };
 export const TUNABLES = {
   LAYOUT: {
-    WASM: getBoolean(storage.getItem('LAYOUT.WASM'), false),
+    WASM: getBoolean(storage.getItem('LAYOUT.WASM'), true),
   },
   TIMELINE: {
     INTERSECTION_EXPAND_TOP: getNumber(storage.getItem('TIMELINE_INTERSECTION_EXPAND_TOP'), 500),