-
- {/* Progress Bar for Processing state */}
- {job.status === 'PROCESSING' && }
-
- {/* Informational Message for non-failed states */}
- {job.status !== 'FAILED' && job.message && (
- {job.message}
- )}
-
- {/* Error Alert for FAILED state */}
- {job.status === 'FAILED' && job.message && (
-
- Error: {job.message}
-
- )}
-
- );
-};
-
// --- Upload Component (modified) ---
const UploadComponent = ({ setJobs }) => {
const [file, setFile] = useState(null);
@@ -202,6 +142,20 @@
const [jobs, setJobs] = useState([]);
const webSocketRef = React.useRef(null);
+ // State for the DXF Viewer Modal
+ const [showViewer, setShowViewer] = useState(false);
+ const [viewUrl, setViewUrl] = useState(null);
+
+ const handleView = (url) => {
+ setViewUrl(url);
+ setShowViewer(true);
+ };
+
+ const handleCloseViewer = () => {
+ setShowViewer(false);
+ setViewUrl(null);
+ };
+
// Fetch all existing jobs on component mount and set up polling
useEffect(() => {
const fetchJobs = async () => {
@@ -298,39 +252,44 @@
DXF Curve Generator
-
-
-
- {processingJobs.length > 0 && (
-
-
- Currently Processing
-
- {processingJobs.map(job => (
-
- ))}
-
-
-
- )}
-
-
-
- Job History
- {otherJobs.length === 0 && processingJobs.length === 0 ? (
- No jobs to show. Upload a file to begin.
- ) : (
-
- {otherJobs.map(job => (
-
- ))}
-
- )}
-
-
-
-
- );
-}
-
+
+
+
+ {processingJobs.length > 0 && (
+
+
+ Currently Processing
+
+ {processingJobs.map(job => (
+
+ ))}
+
+
+
+ )}
+
+
+
+ Job History
+ {otherJobs.length === 0 && processingJobs.length === 0 ? (
+ No jobs to show. Upload a file to begin.
+ ) : (
+
+ {otherJobs.map(job => (
+
+ ))}
+
+ )}
+
+
+
+
+
+ );
+ }
export default App;
diff --git a/ReferenceSurfaceGenerator/frontend/src/DxfViewer.js b/ReferenceSurfaceGenerator/frontend/src/DxfViewer.js
new file mode 100644
index 0000000..78e6a03
--- /dev/null
+++ b/ReferenceSurfaceGenerator/frontend/src/DxfViewer.js
@@ -0,0 +1,149 @@
+import React, { useState, useEffect, Suspense } from 'react';
+import axios from 'axios';
+import { Modal, Button, Alert, Spinner } from 'react-bootstrap';
+import { Canvas, useThree } from '@react-three/fiber';
+import { OrbitControls, Line } from '@react-three/drei';
+import * as THREE from 'three';
+
+const DxfContent = ({ data }) => {
+ const { scene } = useThree();
+
+ // Calculate the bounding box of all polylines
+ const boundingBox = new THREE.Box3();
+ data.polylines.forEach(polyline => {
+ polyline.forEach(point => {
+ boundingBox.expandByPoint(new THREE.Vector3(point[0], point[1], point[2]));
+ });
+ });
+
+ // Calculate the offset required to move the bottom of the object to z=0
+ const zMin = boundingBox.min.z;
+ const translationOffset = new THREE.Vector3(0, 0, -zMin);
+
+ // Calculate the new center for the camera target after translation
+ const originalCenter = boundingBox.getCenter(new THREE.Vector3());
+ const adjustedCenter = originalCenter.clone().add(translationOffset);
+
+ // Determine appropriate size for lighting and grid
+ const size = boundingBox.getSize(new THREE.Vector3());
+ const maxDim = Math.max(size.x, size.y, size.z);
+
+ // Add GridHelper from THREE directly, positioned at the new center
+ React.useEffect(() => {
+ const gridHelper = new THREE.GridHelper(maxDim * 2, 20, 0x000000, 0xcccccc);
+ // The grid itself stays at y=0, but we can align its x/z center with the object
+ gridHelper.position.set(adjustedCenter.x, 0, adjustedCenter.z);
+ scene.add(gridHelper);
+ return () => {
+ scene.remove(gridHelper);
+ gridHelper.dispose();
+ };
+ }, [maxDim, adjustedCenter, scene]);
+
+ return (
+ <>
+
+
+
+
+ {data.polylines.map((polyline, i) => {
+ // Apply the translation to each point and explicitly close the loop
+ const adjustedPoints = polyline.map(p => new THREE.Vector3(p[0], p[1], p[2]).add(translationOffset));
+ const closedPolyline = [...adjustedPoints, adjustedPoints[0]];
+ return (
+
+ );
+ })}
+
+
+
+ );
+};
+
+
+const DxfViewer = ({ show, onHide, viewUrl, API_URL }) => {
+ const [data, setData] = useState(null);
+ const [error, setError] = useState(null);
+ const [loading, setLoading] = useState(false);
+
+ // State for camera settings, adjusted dynamically
+ const [cameraProps, setCameraProps] = useState({ position: [0, 0, 150], fov: 75, near: 0.1, far: 1000 });
+
+ useEffect(() => {
+ if (show && viewUrl) {
+ const fetchData = async () => {
+ setLoading(true);
+ setError(null);
+ setData(null);
+ try {
+ const response = await axios.get(`${API_URL}${viewUrl}`);
+ setData(response.data);
+
+ // Calculate dynamic camera properties once data is loaded
+ if (response.data && response.data.polylines.length > 0) {
+ const boundingBox = new THREE.Box3();
+ response.data.polylines.forEach(polyline => {
+ polyline.forEach(point => {
+ boundingBox.expandByPoint(new THREE.Vector3(point[0], point[1], point[2]));
+ });
+ });
+ const center = boundingBox.getCenter(new THREE.Vector3());
+ const size = boundingBox.getSize(new THREE.Vector3());
+ const maxDim = Math.max(size.x, size.y, size.z);
+ const dynamicCameraDistance = maxDim * 1.5; // Used here
+
+ setCameraProps(prev => ({
+ ...prev,
+ position: [center.x, center.y, center.z + dynamicCameraDistance],
+ near: Math.max(0.1, dynamicCameraDistance / 1000), // Adjust near plane dynamically
+ far: dynamicCameraDistance * 2 // Adjust far plane dynamically
+ }));
+ }
+
+ } catch (err) {
+ setError(err.response?.data?.detail || 'Failed to load DXF data.');
+ } finally {
+ setLoading(false);
+ }
+ };
+ fetchData();
+ }
+ }, [show, viewUrl, API_URL]);
+
+ return (
+
+
+ DXF Viewer
+
+ {/* Changed to white */}
+ {loading &&
Loading geometry...
} {/* Spinner color changed */}
+ {error && {error}}
+ {data && (
+ Preparing renderer...}> {/* Text color changed */}
+
+
+ )}
+
+
+
+
+
+ );
+};
+
+export default DxfViewer;
diff --git a/ReferenceSurfaceGenerator/frontend/src/DxfViewer.test.js b/ReferenceSurfaceGenerator/frontend/src/DxfViewer.test.js
new file mode 100644
index 0000000..2a8faa0
--- /dev/null
+++ b/ReferenceSurfaceGenerator/frontend/src/DxfViewer.test.js
@@ -0,0 +1,112 @@
+import { render, screen, waitFor, act } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import axios from 'axios';
+import DxfViewer from './DxfViewer';
+
+// Mock axios to avoid actual network requests
+jest.mock('axios');
+
+// Mock react-bootstrap's Modal to simplify testing
+jest.mock('react-bootstrap/Modal', () => ({
+ __esModule: true,
+ default: ({ children, show, onHide }) => (show ?
{children}
: null),
+ Header: ({ children }) =>
{children}
,
+ Title: ({ children }) =>
{children}
,
+ Body: ({ children }) =>
{children}
,
+ Footer: ({ children }) =>
{children}
,
+}));
+
+
+// Mocking three.js and react-three/fiber dependencies
+jest.mock('@react-three/fiber', () => ({
+ Canvas: ({ children, fallback }) => {
+ // Only render the fallback if children are not ready or if suspense is active
+ return
{fallback || children}
;
+ },
+}));
+
+jest.mock('@react-three/drei', () => ({
+ OrbitControls: () => null,
+ Line: () => null,
+ Box: () => null,
+}));
+
+
+describe('DxfViewer', () => {
+ const API_URL = 'http://localhost:8000';
+ const viewUrl = '/api/jobs/123/view';
+
+ beforeEach(() => {
+ // Reset mocks before each test
+ axios.get.mockClear();
+ });
+
+ it('shows a loading spinner while fetching data', async () => {
+ axios.get.mockImplementationOnce(() => new Promise(() => {})); // Never resolve to keep loading
+
+ act(() => {
+ render( {}} viewUrl={viewUrl} API_URL={API_URL} />);
+ });
+
+ expect(screen.getByText('Loading geometry...')).toBeInTheDocument();
+ });
+
+ it('displays an error message if data fetching fails', async () => {
+ const errorMessage = 'Failed to load DXF data.';
+ axios.get.mockRejectedValueOnce({ response: { data: { detail: errorMessage } } });
+
+ await act(async () => {
+ render( {}} viewUrl={viewUrl} API_URL={API_URL} />);
+ });
+
+ // Wait for the error message to appear
+ expect(screen.getByText(errorMessage)).toBeInTheDocument();
+ });
+
+ it('renders the canvas with data after successful fetch', async () => {
+ const mockData = {
+ polylines: [[[0, 0, 0], [1, 1, 1]]],
+ };
+ axios.get.mockResolvedValueOnce({ data: mockData });
+
+ let component;
+ await act(async () => {
+ component = render( {}} viewUrl={viewUrl} API_URL={API_URL} />);
+ });
+
+ // Check if the mock canvas is present and not displaying the fallback initially
+ const mockCanvas = screen.getByTestId('mock-canvas');
+ expect(mockCanvas).toBeInTheDocument();
+ expect(mockCanvas).not.toHaveTextContent('Preparing renderer...');
+
+ // We expect the children (DxfContent) to be rendered inside the Canvas mock
+ // Since DxfContent itself doesn't render user-facing text other than the console error about casing,
+ // we can assert that the Canvas mock is showing some content (its children)
+ // This is a weak assertion, but stronger ones would require mocking THREE.Line etc.
+ expect(mockCanvas).toBeEmptyDOMElement(); // The Line component mock returns null, so canvas should be empty
+
+ // Optionally, verify that axios.get was called
+ expect(axios.get).toHaveBeenCalledWith(`${API_URL}${viewUrl}`);
+ });
+
+ it('does not fetch data when not shown', async () => {
+ render( {}} viewUrl={viewUrl} API_URL={API_URL} />);
+ expect(axios.get).not.toHaveBeenCalled();
+ });
+
+ it('calls onHide when close button is clicked', async () => {
+ const mockOnHide = jest.fn();
+ axios.get.mockResolvedValueOnce({ data: { polylines: [] } }); // Resolve immediately
+
+ await act(async () => {
+ render();
+ });
+
+ const closeButton = screen.getByRole('button', { name: /close/i });
+ act(() => {
+ closeButton.click();
+ });
+
+ expect(mockOnHide).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/ReferenceSurfaceGenerator/frontend/src/JobItem.js b/ReferenceSurfaceGenerator/frontend/src/JobItem.js
new file mode 100644
index 0000000..07b10c1
--- /dev/null
+++ b/ReferenceSurfaceGenerator/frontend/src/JobItem.js
@@ -0,0 +1,71 @@
+import React from 'react';
+import axios from 'axios';
+import { ListGroup, Badge, Button, ProgressBar, Alert } from 'react-bootstrap';
+
+const JobItem = ({ job, API_URL, onJobDelete, onView }) => {
+ const getVariant = (status) => {
+ switch (status) {
+ case 'PENDING': return 'info';
+ case 'PROCESSING': return 'primary';
+ case 'COMPLETE': return 'success';
+ case 'FAILED': return 'danger';
+ default: return 'secondary';
+ }
+ };
+
+ const handleDelete = async () => {
+ if (window.confirm(`Are you sure you want to delete job ${job.filename} (${job.id})?`)) {
+ try {
+ await axios.delete(`${API_URL}/api/jobs/${job.id}`);
+ onJobDelete(job.id);
+ } catch (error) {
+ console.error("Error deleting job:", error);
+ alert("Failed to delete job.");
+ }
+ }
+ };
+
+ return (
+
+