fix: builds properly

client/src/components/GCode3DLiveViewer.vue

@@ -1,98 +1,65 @@
 <script setup lang="ts">
-import {ref, onMounted, onUnmounted, watch, type Ref} from 'vue';
+import {ref, onMounted, onUnmounted, watch} from 'vue';
 import {type Device} from '@/model/ports';
 import * as GCodePreview from 'gcode-preview';
 
-const props = defineProps({
-  device: Object as () => Device,
-});
-
-const canvas = ref<HTMLCanvasElement | null>(null);
-
-const gcodeBuffer: Ref<Array<string>> = ref([] as Array<string>);
+const props = defineProps<{ device: Device }>();
 
+const canvas = ref<HTMLCanvasElement | undefined>(undefined);
 let preview: GCodePreview.WebGLPreview | null = null;
-const originalConsoleWarn = console.warn;
-const bufferSizeToRender = 50;
+let worker: Worker | null = null;
 
 onMounted(async () => {
-  if (canvas.value) {
-    try {
-        console.warn = () => {}; // Suppress warnings from gcode-preview
-      preview = (GCodePreview.init({
-        canvas: canvas.value,
-        extrusionColor: getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim() || '#7561A9',
-        backgroundColor: 'black',
-        buildVolume: {x: 250, y: 210, z: 220},
-        travelColor: 'limegreen',
-        lineWidth: 1,
-        lineHeight: 1,
-        extrusionWidth: 1,
-        renderExtrusion: true,
-        renderTravel: false,
-        renderTubes: false,
-      }));
+  if (!canvas.value) {
+    console.error('Canvas not found');
+    return;
+  }
+  worker = new Worker(new URL('@/model/gcodeWorker.ts', import.meta.url), {type: 'module'});
+  worker.onmessage = (event) => {
+    const {type, error} = event.data;
+    if (type === 'error') console.error('Worker Error:', error);
+  };
 
-      preview.camera.position.set(-200, 232, 200);
-      preview.camera.lookAt(0, 0, 0);
-      console.warn = originalConsoleWarn;
+  const extrusionColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim() || '#7561A9';
+  const offscreen: OffscreenCanvas = canvas.value.transferControlToOffscreen();
 
-    } catch (error) {
-      console.error('Error initializing GCodePreview:', error);
-    }
-  }
-  if(preview?.renderTubes) {
-    watch(() => props.device!.gcodeLines?.length, () => {
-      gcodeBuffer.value.push(props.device!.gcodeLines![props.device!.gcodeLines!.length - 1]);
-      if (gcodeBuffer.value?.length > bufferSizeToRender) {
-        renderAllNoWarn(gcodeBuffer.value);
-        gcodeBuffer.value = [];
-      }
-    });
-    if (props.device!.gcodeLines) {
-      renderAllNoWarn(props.device!.gcodeLines!);
+  console.debug(offscreen)
+
+  worker.postMessage({
+    type: 'init',
+    payload: {
+      canvas: offscreen,
+      extrusionColor: extrusionColor,
+      backgroundColor: 'black',
+      buildVolume: {x: 250, y: 210, z: 220},
+      travelColor: 'limegreen',
+      lineWidth: 1,
+      lineHeight: 1,
+      extrusionWidth: 1,
+      renderExtrusion: true,
+      renderTravel: false,
+      renderTubes: false
     }
-  } else {
-    watch(() => props.device!.gcodeLines?.length, () => {
-      gcodeBuffer.value.push(props.device!.gcodeLines![props.device!.gcodeLines!.length - 1]);
-      if (gcodeBuffer.value?.length > bufferSizeToRender) {
-        renderAll(gcodeBuffer.value);
-        gcodeBuffer.value = [];
-      }
+  }, [offscreen]);
+
+  const renderGCode = (gcode: string) => {
+    worker?.postMessage({
+      type: 'render',
+      payload: {gcode},
     });
-    if(props.device!.gcodeLines) {
-      renderAll(props.device!.gcodeLines!);
-    }
-  }
-});
+  };
 
-    modal.addEventListener('shown.bs.modal', async () => {
-        // Initialize the GCodePreview and show the GCode when the modal is shown
-        if (canvas.value) {
-            preview = GCodePreview.init({
-                canvas: canvas.value,
-                extrusionColor: getComputedStyle(document.documentElement).getPropertyValue('--bs-primary-color').trim() || '#7561A9',
-                backgroundColor: 'black',
-                buildVolume: { x: 250, y: 210, z: 220 },
-                lineWidth: 0.2,
-                lineHeight: 0.2,
-                extrusionWidth: 0.2,
-                renderExtrusion: true,
-                renderTubes: true,
-            });
+  watch(() => props.device?.gcodeLines?.length!, () => {
+    renderGCode(props.device.gcodeLines!.slice(-1)[0]); // Render last 10 lines as a batch
+  });
 
-            preview.camera.position.set(-200, 232, 200);
-            preview.camera.lookAt(0, 0, 0);
 
-function renderAll(gcode: string[]){
-    preview?.processGCode(gcode);
-}
+  const allLines = props.device?.gcodeLines;
+  if (allLines) {
+    for (let i = 0; i < allLines.length; i++) renderGCode(allLines[i]);
+  }
+});
 
-function renderAllNoWarn(gcode: string[]){
-    console.warn = () => {}; // Suppress warnings from gcode-preview
-    preview?.processGCode(gcode);
-    console.warn = originalConsoleWarn;
-}
 
 onUnmounted(() => {
   if (preview) {
@@ -104,13 +71,13 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <canvas ref="canvas"></canvas>
+  <canvas ref="canvas"></canvas>
 </template>
 
 <style scoped>
 canvas {
-    width: 100%;
-    height: 400px;
-    display: block;
+  width: 100%;
+  height: 400px;
+  display: block;
 }
 </style>

client/src/model/gcodeWorker.ts

@@ -0,0 +1,47 @@
+import * as GCodePreview from 'gcode-preview';
+
+let preview: GCodePreview.WebGLPreview | null = null;
+const originalConsoleWarn = console.warn;
+
+// Utility to suppress warnings
+function withConsoleSuppression<T>(fn: () => T): T {
+    console.warn = () => {
+    };
+    const result = fn();
+    console.warn = originalConsoleWarn;
+    return result;
+}
+
+const processGCode = (gcode: string | string[], suppressWarnings: boolean = false) => {
+    if (suppressWarnings) {
+        withConsoleSuppression(() => preview?.processGCode(gcode));
+    } else {
+        preview?.processGCode(gcode);
+    }
+};
+
+// Initialize GCodePreview with the OffscreenCanvas
+self.onmessage = (event) => {
+    const {type, payload} = event.data;
+    console.debug(type, payload)
+    if (type === 'init') {
+        const {canvas, options} = payload;
+
+        preview = GCodePreview.init({
+            canvas,
+            ...options,
+        });
+
+        preview.camera.position.set(-200, 232, 200);
+        preview.camera.lookAt(0, 0, 0);
+        postMessage({type: 'initialized'});
+    } else if (type === 'render') {
+        const {gcode} = payload;
+        try {
+            processGCode(gcode, preview?.renderTubes ?? false);
+            postMessage({type: 'renderComplete'});
+        } catch (error) {
+            postMessage({type: 'error', error: error});
+        }
+    }
+};

client/src/views/JobHistory.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { printers, type Device } from '@/model/ports'
-import { pageSize, useGetJobs, type Job, useGetJobFile, useDeleteJob, useClearSpace, useFavoriteJob, useGetFile, useAssignComment, useDownloadCsv, useRemoveIssue, isLoading } from '../model/jobs';
+import { pageSize, useGetJobs, type Job, useGetJobFile, useGetLogFile, useDeleteJob, useClearSpace, useFavoriteJob, useGetFile, useAssignComment, useDownloadCsv, useRemoveIssue, isLoading } from '@/model/jobs';
 import { computed, onMounted, onBeforeUnmount, ref, watchEffect, onUnmounted } from 'vue';
 import { type Issue, useGetIssues, useAssignIssue } from '@/model/issues'
 import { useRouter } from 'vue-router';

server/app.py

@@ -1,5 +1,6 @@
 import asyncio
 import threading
+from threading import Thread
 import traceback
 import uuid
 import os
@@ -8,6 +9,11 @@
 from websockets.asyncio.server import Server
 from MyFlaskApp import MyFlaskApp
 from globals import emulator_connections, event_emitter
+import discord
+from discord.ext import commands
+import certifi
+from datetime import datetime
+from models.config import Config
 
 
 async def websocket_server():
@@ -62,26 +68,7 @@ async def handle_client(websocket):
 def start_websocket():
     print("Starting WebSocket server...")
     asyncio.run(websocket_server())
-
-from flask import Flask, jsonify, request, Response, url_for, send_from_directory
-from threading import Thread
-from flask_cors import CORS 
-import os 
-from models.db import db
-from models.PrinterStatusService import PrinterStatusService
-from flask_migrate import Migrate
-from dotenv import load_dotenv, set_key
-from controllers.ports import getRegisteredPrinters
-import shutil
-from flask_socketio import SocketIO
-from datetime import datetime, timedelta
-from sqlalchemy import text
-import json
-from models.config import Config
-import discord
-import threading
-from discord.ext import commands
-import certifi
+
 
 os.environ["SSL_CERT_FILE"] = certifi.where()
 
@@ -242,10 +229,8 @@ def sync_send_discord_embed(embed):
 def sync_send_discord_file(file_path: str, message: str = None):
     """
     Sends a file to a specified Discord channel with an optional message.
-    
-    :param channel: The channel where the file will be sent.
-    :param file_path: The path to the file to be uploaded.
-    :param message: The optional message to send with the file.
+    :param str file_path: The path to the file to be uploaded.
+    :param str message: The optional message to send with the file.
     """
     # Check if the bot is ready
     if not bot.is_ready():

server/config/config.json

@@ -1,7 +1,7 @@
 {
     "environment": "development",
     "databaseURI": "hvamc",
-    "emulator_port": 8001
+    "emulator_port": 8001,
     "discord": {
         "enabled": false,
         "token": "<token>",

server/models/config.py

@@ -31,7 +31,7 @@ def load_config(file_path):
     'ip': ip,
     'database_uri': database_uri,
     'port': port,
-    'emulator_port': emulator_port
+    'emulator_port': emulator_port,
     'discord_enabled': discord_enabled,
     'discord_token': discord_token,
     'command_prefix': discord_prefix,

server/models/printers.py

@@ -12,10 +12,8 @@
 import os
 import requests
 from dotenv import load_dotenv
-import socketio
-
 from models.config import Config
-from models.jobs import Job
+from Classes.Jobs import Job
 
 load_dotenv()
 # model for Printer table