Refactor compression, use gzip level 9

src/hooks/useServerStorage.ts

@@ -1,10 +1,10 @@
-import Pako from 'pako';
 import * as Sentry from '@sentry/browser';
 import { API_URL, removeFilenameSuffix } from '../pocketbase';
 import { Collections } from '../@types/pocketbase-types';
 import useDb from './useDb';
 import { fetchWithProgress, OnProgress } from '../utils/http';
 import { downloading } from '../pages/auth/notifications';
+import { decompress } from '../utils/compression';
 
 const useServerStorage = () => {
   const { getIni } = useDb();
@@ -15,7 +15,7 @@ const useServerStorage = () => {
   const fetchTuneFile = async (recordId: string, filename: string): Promise<ArrayBuffer> => {
     const response = await fetch(buildFileUrl(Collections.Tunes, recordId, filename));
 
-    return Pako.inflate(new Uint8Array(await response.arrayBuffer()));
+    return decompress(await response.arrayBuffer());
   };
 
   const fetchINIFile = async (signature: string): Promise<ArrayBuffer> => {
@@ -32,7 +32,7 @@ const useServerStorage = () => {
 
     const response = await fetch(buildFileUrl(Collections.IniFiles, ini.id, ini.file));
 
-    return Pako.inflate(new Uint8Array(await response.arrayBuffer()));
+    return decompress(await response.arrayBuffer());
   };
 
   const fetchLogFileWithProgress = (
@@ -54,7 +54,7 @@ const useServerStorage = () => {
     downloading();
 
     const response = await fetch(buildFileUrl(collection, recordId, filename));
-    const data = Pako.inflate(new Uint8Array(await response.arrayBuffer()));
+    const data = decompress(await response.arrayBuffer());
     const url = window.URL.createObjectURL(new Blob([data]));
 
     anchorRef.href = url;

src/pages/Diagnose.tsx

@@ -21,6 +21,7 @@ import { removeFilenameSuffix } from '../pocketbase';
 import useServerStorage from '../hooks/useServerStorage';
 import { isAbortedRequest } from '../utils/error';
 import { collapsedSidebarWidth, sidebarWidth } from '../components/Tune/SideBar';
+import { decompress } from '../utils/compression';
 
 const { Content } = Layout;
 
@@ -106,7 +107,7 @@ const Diagnose = ({
         setFileSize(formatBytes(raw.byteLength));
         setStep(1);
 
-        const parser = new TriggerLogsParser(Pako.inflate(new Uint8Array(raw))).parse();
+        const parser = new TriggerLogsParser(decompress(raw)).parse();
 
         let type = '';
         let result: CompositeLogEntry[] | ToothLogEntry[] = [];

src/pages/Upload.tsx

@@ -65,6 +65,8 @@ import {
   TunesVisibilityOptions,
 } from '../@types/pocketbase-types';
 import { removeFilenameSuffix } from '../pocketbase';
+import { bufferToFile } from '../utils/files';
+import { compress } from '../utils/compression';
 
 const { Item, useForm } = Form;
 
@@ -103,8 +105,6 @@ const iniIcon = () => <FileTextOutlined />;
 const tunePath = (tuneId: string) => generatePath(Routes.TUNE_ROOT, { tuneId });
 const tuneParser = new TuneParser();
 
-const bufferToFile = (buffer: ArrayBuffer, name: string) => new File([buffer], name);
-
 const UploadPage = () => {
   const [form] = useForm<TunesRecord>();
   const routeMatch = useMatch(Routes.UPLOAD_WITH_TUNE_ID);
@@ -190,13 +190,13 @@ const UploadPage = () => {
     const tags = values.tags || ('' as TunesTagsOptions);
 
     const compressedTuneFile = bufferToFile(
-      Pako.deflate(await tuneFile!.arrayBuffer()),
+      await compress(tuneFile!),
       (tuneFile as UploadedFile).uid ? tuneFile!.name : removeFilenameSuffix(tuneFile!.name),
     );
 
     const compressedCustomIniFile = customIniFile
       ? bufferToFile(
-          Pako.deflate(await customIniFile!.arrayBuffer()),
+          await compress(customIniFile!),
           (customIniFile as UploadedFile).uid
             ? customIniFile!.name
             : removeFilenameSuffix(customIniFile!.name),
@@ -206,7 +206,7 @@ const UploadPage = () => {
     const compressedLogFiles = await Promise.all(
       logFiles.map(async (file) =>
         bufferToFile(
-          Pako.deflate(await file.arrayBuffer()),
+          await compress(file),
           (file as UploadedFile).uid ? file.name : removeFilenameSuffix(file.name),
         ),
       ),
@@ -215,7 +215,7 @@ const UploadPage = () => {
     const compressedToothLogFiles = await Promise.all(
       toothLogFiles.map(async (file) =>
         bufferToFile(
-          Pako.deflate(await file.arrayBuffer()),
+          await compress(file),
           (file as UploadedFile).uid ? file.name : removeFilenameSuffix(file.name),
         ),
       ),

src/utils/compression.ts

@@ -0,0 +1,5 @@
+import Pako from 'pako';
+
+export const compress = async (file: File) => Pako.gzip(await file.arrayBuffer(), { level: 9 });
+
+export const decompress = (data: ArrayBuffer) => Pako.inflate(data);

src/utils/files.ts

@@ -0,0 +1 @@
+export const bufferToFile = (buffer: ArrayBuffer, name: string) => new File([buffer], name);

src/workers/logParserWorker.ts

@@ -3,6 +3,7 @@ import { Result } from 'mlg-converter/dist/types';
 import Pako from 'pako';
 import LogValidator from '../utils/logs/LogValidator';
 import MslLogParser from '../utils/logs/MslLogParser';
+import { decompress } from '../utils/compression';
 
 const ctx: Worker = self as any;
 
@@ -40,7 +41,7 @@ const parseMlg = (raw: ArrayBufferLike, t0: number): Result =>
 ctx.addEventListener('message', ({ data }: { data: ArrayBuffer }) => {
   try {
     const t0 = performance.now();
-    const raw = Pako.inflate(new Uint8Array(data)).buffer;
+    const raw = decompress(data).buffer;
     const logParser = new LogValidator(raw);
 
     if (logParser.isMLG()) {