Load first log file

src/hooks/useServerStorage.ts

@@ -4,6 +4,10 @@ import { fetchEnv } from '../utils/env';
 import { API_URL } from '../pocketbase';
 import { Collections } from '../@types/pocketbase-types';
 import useDb from './useDb';
+import {
+  fetchWithProgress,
+  OnProgress,
+} from '../utils/http';
 
 export const CDN_URL = fetchEnv('VITE_CDN_URL');
 
@@ -36,9 +40,17 @@ const useServerStorage = () => {
     return Pako.inflate(new Uint8Array(await response.arrayBuffer()));
   };
 
+  const fetchLogFileWithProgress = (recordId: string, filename: string, onProgress?: OnProgress, signal?: AbortSignal) =>
+    fetchWithProgress(
+      buildFileUrl(Collections.Tunes, recordId, filename),
+      onProgress,
+      signal,
+    ).then((response) => response);
+
   return {
     fetchTuneFile: (recordId: string, filename: string): Promise<ArrayBuffer> => fetchTuneFile(recordId, filename),
     fetchINIFile: (signature: string): Promise<ArrayBuffer> => fetchINIFile(signature),
+    fetchLogFileWithProgress: (recordId: string, filename: string, onProgress?: OnProgress, signal?: AbortSignal): Promise<ArrayBuffer> => fetchLogFileWithProgress(recordId, filename, onProgress, signal),
   };
 };
 

src/pages/Logs.tsx

@@ -14,6 +14,7 @@ import {
   Space,
   Divider,
   Badge,
+  Typography,
 } from 'antd';
 import {
   FileTextOutlined,
@@ -30,11 +31,9 @@ import {
   OutputChannel,
   Logs as LogsType,
   DatalogEntry,
-  Tune as TuneType,
 } from '@hyper-tuner/types';
 // eslint-disable-next-line import/no-unresolved
 import MlgParserWorker from '../workers/mlgParser?worker';
-import { loadLogs } from '../utils/api';
 import LogCanvas from '../components/Logs/LogCanvas';
 import store from '../store';
 import {
@@ -52,6 +51,8 @@ import {
 } from '../types/state';
 import Loader from '../components/Loader';
 import { Colors } from '../utils/colors';
+import { TunesRecordFull } from '../types/dbData';
+import useServerStorage from '../hooks/useServerStorage';
 
 const { Content } = Layout;
 const { Step } = Steps;
@@ -64,22 +65,21 @@ const badgeStyle = { backgroundColor: Colors.TEXT };
 
 const mapStateToProps = (state: AppState) => ({
   ui: state.ui,
-  tune: state.tune,
-  status: state.status,
   config: state.config,
   loadedLogs: state.logs,
+  tuneData: state.tuneData,
 });
 
 const Logs = ({
   ui,
   config,
-  tune,
   loadedLogs,
+  tuneData,
 }: {
   ui: UIState,
-  tune: TuneType,
   config: Config,
   loadedLogs: LogsType,
+  tuneData: TunesRecordFull,
 }) => {
   const { lg } = useBreakpoint();
   const { Sider } = Layout;
@@ -94,6 +94,7 @@ const Logs = ({
   const contentRef = useRef<HTMLDivElement | null>(null);
   const [canvasWidth, setCanvasWidth] = useState(0);
   const [canvasHeight, setCanvasHeight] = useState(0);
+  const { fetchLogFileWithProgress } = useServerStorage();
   const calculateCanvasSize = useCallback(() => {
     setCanvasWidth((contentRef.current?.clientWidth || 0) - margin);
 
@@ -157,8 +158,14 @@ const Logs = ({
     const controller = new AbortController();
     const { signal } = controller;
     const loadData = async () => {
+      const firstLogFile = (tuneData.logFiles || [])[0];
+
+      if (!firstLogFile) {
+        return;
+      }
+
       try {
-        const raw = await loadLogs((percent, total, edge) => {
+        const raw = await fetchLogFileWithProgress(tuneData.id, firstLogFile, (percent, total, edge) => {
           setProgress(percent);
           setFileSize(formatBytes(total));
           setEdgeLocation(edge || edgeUnknown);
@@ -216,6 +223,7 @@ const Logs = ({
       worker.terminate();
       window.removeEventListener('resize', calculateCanvasSize);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [calculateCanvasSize, config?.datalog, config?.outputChannels, loadedLogs, ui.sidebarCollapsed]);
 
   return (
@@ -265,11 +273,15 @@ const Logs = ({
                 ),
               },
               {
-                label: <><FileTextOutlined /><Badge size="small" style={badgeStyle} count="1" /></>,
+                label: <><FileTextOutlined /><Badge size="small" style={badgeStyle} count={tuneData.logFiles?.length} /></>,
                 key: 'files',
                 children: (
                   <PerfectScrollbar options={{ suppressScrollX: true }}>
-                    some_tune.mlg
+                    {tuneData.logFiles?.map((fileName) => (
+                      <Typography.Paragraph key={fileName}>
+                        {fileName}
+                      </Typography.Paragraph>
+                    ))}
                   </PerfectScrollbar>
                 ),
               },

src/utils/api.ts

@@ -6,7 +6,7 @@ import help from '../data/help';
 import { divider } from '../data/constants';
 import {
   fetchWithProgress,
-  onProgress as onProgressType,
+  OnProgress,
 } from './http';
 import TuneParser from './tune/TuneParser';
 import useServerStorage, { CDN_URL } from '../hooks/useServerStorage';
@@ -63,21 +63,21 @@ export const loadTune = async (tuneData: TunesRecordFull | null) => {
   }
 };
 
-export const loadLogs = (onProgress?: onProgressType, signal?: AbortSignal) =>
+export const loadLogs = (onProgress?: OnProgress, signal?: AbortSignal) =>
   fetchWithProgress(
     `${CDN_URL}/public/temp/long.mlg.gz`,
     onProgress,
     signal,
   ).then((response) => response);
 
-export const loadCompositeLogs = (onProgress?: onProgressType, signal?: AbortSignal) =>
+export const loadCompositeLogs = (onProgress?: OnProgress, signal?: AbortSignal) =>
   fetchWithProgress(
     `${CDN_URL}/public/temp/composite_1.csv.gz`,
     onProgress,
     signal,
   ).then((response) => response);
 
-export const loadToothLogs = (onProgress?: onProgressType, signal?: AbortSignal) =>
+export const loadToothLogs = (onProgress?: OnProgress, signal?: AbortSignal) =>
   fetchWithProgress(
     `${CDN_URL}/public/temp/tooth_3.csv.gz`,
     onProgress,

src/utils/http.ts

@@ -2,9 +2,9 @@ import locations from '../data/edge-locations.json';
 
 type LocationsType = { [index: string]: string };
 
-export type onProgress = (percent: number, total: number, edgeLocation: string | null) => void;
+export type OnProgress = (percent: number, total: number, edgeLocation: string | null) => void;
 
-export const fetchWithProgress = async (url: string, onProgress?: onProgress, signal?: AbortSignal): Promise<ArrayBuffer> => {
+export const fetchWithProgress = async (url: string, onProgress?: OnProgress, signal?: AbortSignal): Promise<ArrayBuffer> => {
   let edgeLocation = null;
   const response = await fetch(url, { signal });
   const contentLength = response.headers.get('Content-Length');