fix: fix a bug that filter is not working when ximgdiff.enabled=false

#28
reg-viz · Apr 28, 2024 · 490c00d · 490c00d
1 parent 95b02dc
commit 490c00d
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 22 deletions.
diff --git a/index.html b/index.html
@@ -20,7 +20,6 @@
   <body>
     <div id="app"></div>
     <script type="module">
-      console.log(import.meta.env.VITE_ENABLED_HUGE);
       window['__reg__'] = {
         type: 'danger',
         hasNew: true,
@@ -42,10 +41,18 @@
         hasFailed: true,
         failedItems:
           import.meta.env.VITE_ENABLED_HUGE === 'true'
-            ? [...new Uint8Array(1000)].map((_, i) => ({
-                raw: 'sample.png?' + i,
-                encoded: 'sample.png?' + i,
-              }))
+            ? [
+                ...Array.from({ length: 1000 }).map((_, i) => ({
+                  raw: 'sample.png?' + i,
+                  encoded: 'sample.png?' + i,
+                })),
+                { raw: 'nest/sample.png?3', encoded: 'nest/sample.png?3' },
+                { raw: 'nest/sample.png?4', encoded: 'nest/sample.png?4' },
+                {
+                  raw: 'nest/deep/sample.png?5',
+                  encoded: 'nest/deep/sample.png?5',
+                },
+              ]
             : [
                 { raw: 'sample.png?1', encoded: 'sample.png?1' },
                 { raw: 'sample.png?2', encoded: 'sample.png?2' },

diff --git a/src/states/entity.ts b/src/states/entity.ts
@@ -53,10 +53,20 @@ export const initializeEntityState = (
     deleted: toEntities('deleted', dirs, data.deletedItems),
   });
 
+  const defaultEntity = store.get(defaultEntityAtom);
+
   store.set(entityAtom, {
+    ...defaultEntity,
     ...store.get(defaultEntityAtom),
   });
 
+  worker.requestFilterInit({
+    newItems: defaultEntity.new,
+    passedItems: defaultEntity.passed,
+    failedItems: defaultEntity.failed,
+    deletedItems: defaultEntity.deleted,
+  });
+
   worker.subscribe(WorkerEventType.RESULT_FILTER, (payload) => {
     store.set(entityAtom, {
       new: payload.newItems,
@@ -83,7 +93,6 @@ export const useEntities = () => {
 export const useEntityFilter = () => {
   const worker = useWorkerClient();
   const [isFiltered, setIsFiltered] = useAtom(filteredAtom);
-  const defaults = useAtomValue(defaultEntityAtom);
 
   const filter = useCallback(
     (input: string) => {
@@ -97,13 +106,9 @@ export const useEntityFilter = () => {
 
       worker.requestFilter({
         input: value,
-        newItems: defaults.new,
-        passedItems: defaults.passed,
-        failedItems: defaults.failed,
-        deletedItems: defaults.deleted,
       });
     },
-    [worker, setIsFiltered, defaults],
+    [worker, setIsFiltered],
   );
 
   return [isFiltered, filter] as const;

diff --git a/src/types/event.ts b/src/types/event.ts
@@ -7,6 +7,7 @@ export enum WorkerEventType {
   RESULT_CALC = 'res_calc',
 
   // filter
+  INIT_FILTER = 'init_filter',
   REQUEST_FILTER = 'req_filter',
   RESULT_FILTER = 'res_filter',
 }
@@ -32,11 +33,13 @@ export type WorkerEventDataPayloadMap = {
     result: Matching;
   };
 
-  [WorkerEventType.REQUEST_FILTER]: {
+  [WorkerEventType.INIT_FILTER]: {
     newItems: RegEntity[];
     passedItems: RegEntity[];
     failedItems: RegEntity[];
     deletedItems: RegEntity[];
+  };
+  [WorkerEventType.REQUEST_FILTER]: {
     input: string;
   };
   [WorkerEventType.RESULT_FILTER]: {

diff --git a/src/worker-client.ts b/src/worker-client.ts
@@ -42,17 +42,18 @@ export class WorkerClient {
   private _cache: {
     [key: string]: WorkerEventDataPayload<WorkerEventType.RESULT_CALC>;
   } = {};
+  private _ximgdiffEnabled = false;
   private _seq = 0;
   private _emitter = mitt<WorkerEventDataPayloadMap>();
   private _worker: Worker | null = null;
 
   public start(config: XIMGDiffConfig) {
-    const { enabled, workerUrl } = config;
-    if (!enabled || !workerUrl) {
+    if (!config.workerUrl) {
       return;
     }
 
-    this._worker = new Worker(workerUrl, {});
+    this._ximgdiffEnabled = config.enabled;
+    this._worker = new Worker(config.workerUrl, {});
 
     this._worker.addEventListener('message', ({ data }: WorkerEvent) => {
       switch (data.type) {
@@ -74,7 +75,7 @@ export class WorkerClient {
       'raw' | 'actualSrc' | 'expectedSrc'
     >,
   ) {
-    if (this._worker == null) {
+    if (!this._ximgdiffEnabled || this._worker == null) {
       return 0;
     }
 
@@ -113,6 +114,19 @@ export class WorkerClient {
     return seq;
   }
 
+  public requestFilterInit(
+    payload: WorkerEventDataPayload<WorkerEventType.INIT_FILTER>,
+  ) {
+    if (this._worker == null) {
+      return;
+    }
+
+    this._worker.postMessage({
+      type: WorkerEventType.INIT_FILTER,
+      payload,
+    });
+  }
+
   public requestFilter = debounce(
     (payload: WorkerEventDataPayload<WorkerEventType.REQUEST_FILTER>) => {
       if (this._worker == null) {

diff --git a/src/worker-main.ts b/src/worker-main.ts
@@ -27,6 +27,18 @@ function version2number(version: string) {
 let loaded = false;
 let lastCalcData: WorkerEventData<WorkerEventType.REQUEST_CALC> | null = null;
 
+const cachedEntity: {
+  new: RegEntity[];
+  passed: RegEntity[];
+  failed: RegEntity[];
+  deleted: RegEntity[];
+} = {
+  new: [],
+  passed: [],
+  failed: [],
+  deleted: [],
+};
+
 const calc = ({
   payload: { raw, img1, img2, actualSrc, expectedSrc, seq },
 }: WorkerEventData<WorkerEventType.REQUEST_CALC>) => {
@@ -51,13 +63,18 @@ const calc = ({
 };
 
 const filter = ({
-  payload: { input, newItems, passedItems, failedItems, deletedItems },
+  payload: { input },
 }: WorkerEventData<WorkerEventType.REQUEST_FILTER>) => {
   // Return all items when empty input
   if (!input) {
     return _self.postMessage({
       type: WorkerEventType.RESULT_FILTER,
-      payload: { newItems, passedItems, failedItems, deletedItems },
+      payload: {
+        newItems: cachedEntity.new,
+        passedItems: cachedEntity.passed,
+        failedItems: cachedEntity.failed,
+        deletedItems: cachedEntity.deleted,
+      },
     });
   }
 
@@ -74,10 +91,10 @@ const filter = ({
   _self.postMessage({
     type: WorkerEventType.RESULT_FILTER,
     payload: {
-      newItems: search(newItems),
-      passedItems: search(passedItems),
-      failedItems: search(failedItems),
-      deletedItems: search(deletedItems),
+      newItems: search(cachedEntity.new),
+      passedItems: search(cachedEntity.passed),
+      failedItems: search(cachedEntity.failed),
+      deletedItems: search(cachedEntity.deleted),
     },
   });
 };
@@ -106,6 +123,13 @@ _self.addEventListener('message', ({ data }: WorkerEvent) => {
       }
       break;
 
+    case WorkerEventType.INIT_FILTER:
+      cachedEntity.new = data.payload.newItems;
+      cachedEntity.passed = data.payload.passedItems;
+      cachedEntity.failed = data.payload.failedItems;
+      cachedEntity.deleted = data.payload.deletedItems;
+      break;
+
     case WorkerEventType.REQUEST_FILTER:
       filter(data);
       break;