Merge pull request #253 from Digital-Engineering/development

Development

Dockerfile

@@ -1,9 +1,15 @@
-FROM cimg/rust:1.67.0-node as build
+FROM rust:alpine3.17 as build-rust
+RUN apk add build-base musl-dev openssl-dev
+RUN mkdir /srv/core_api
+WORKDIR /srv/core_api
+
+COPY . .
+ENV RUSTFLAGS="-C target-feature=-crt-static"
+WORKDIR /srv/core_api/NodeLibraries/dl-fast-load
+RUN cargo build --release  --message-format=json-render-diagnostics  > build-output.txt
 
-USER root
-RUN sudo apt-get update
-RUN sudo apt-get upgrade libtasn1-6
 
+FROM node:18.14.1-alpine3.17 as production
 # these settings are needed for the admin web gui build, these variables are all baked into the Vue application and thus
 # are available to any end user that wants to dig deep enough in the webpage - as such we don't feel it a security risk
 # to have these env variables available to anyone running the history commmand on the container/image
@@ -23,17 +29,19 @@ ENV CORE_DB_CONNECTION_STRING=postgresql://postgres:root@timescaledb:5432/deep_l
 
 # Create the base directory and set the rust version to use default stable
 RUN mkdir /srv/core_api
-RUN rustup default stable
 
 WORKDIR /srv/core_api
 COPY package*.json ./
 
-RUN npm update --location=global
 RUN npm install npm@latest --location=global
+RUN npm update --location=global
+RUN npm install pm2 --location=global
 RUN npm install cargo-cp-artifact --location=global
 
 # Bundle app source
 COPY . .
+RUN rm -rf /srv/core_api/NodeLibraries/dl-fast-load
+COPY --from=build-rust /srv/core_api/NodeLibraries/dl-fast-load /srv/core_api/NodeLibraries/dl-fast-load
 
 RUN npm ci --include=dev
 RUN npm run build:docker
@@ -44,15 +52,6 @@ RUN npm run build:web-gl
 # catch any env file a user might have accidentally built into the container
 RUN rm -rf .env
 
-FROM node:18.14.1-alpine3.17 as production
-
-WORKDIR /srv/core_api
-
-RUN npm install npm@latest --location=global
-RUN npm update --location=global
-RUN npm install pm2 --location=global
-
-COPY --from=build /srv/core_api /srv/core_api
 
 # Add docker-compose-wait tool ----------------------
 ADD https://github.com/ufoscout/docker-compose-wait/releases/download/2.9.0/wait /wait

NodeLibraries/dl-fast-load/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "build": "cargo-cp-artifact -nc index.node -- cargo build --message-format=json-render-diagnostics",
     "build-debug": "npm run build --",
-    "build-release": "npm run build -- --release",
+    "build-release": "cargo-cp-artifact -a cdylib dl-fast-load index.node -- cat build-output.txt",
     "install": "npm run build-release",
     "test": "cargo test"
   },

WebGLViewer/app/hooks/reduxTypescriptHooks.ts

@@ -0,0 +1,10 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+import type { RootState, AppDispatch } from '../store';
+
+// Use throughout your app instead of plain `useSelector` and `useDispatch`
+
+//Typed `useSelector` to work better with TypeScript
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
+
+// Not typed, just created for sake of uniformity, since `useSelector` is typed. Regular `useDispatch` should still work fine.
+export const useAppDispatch: () => AppDispatch = useDispatch;

WebGLViewer/app/store/index.ts

@@ -3,7 +3,9 @@ import { webGLReducer } from './slices/webGLSlice';
 
 const initialState = {
   openDrawerLeft: true,
+  openDrawerLeftWidth: 365,
   openDrawerRight: false,
+  openDrawerRightWidth: 425,
   selectedAssetObject: {},
   selectAssetOnScene: '',
   highlightAssetOnScene: '',
@@ -53,7 +55,4 @@ export const appStateActions = appStateSlice.actions;
 // Infer the `RootState` and `AppDispatch` types from the store itself
 export type RootState = ReturnType<typeof store.getState>
 // Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
-export type AppDispatch = typeof store.dispatch
-
-
-export * from './thunks/fetchWebGL';
+export type AppDispatch = typeof store.dispatch

WebGLViewer/app/store/slices/webGLSlice.js

@@ -1,5 +1,4 @@
 import { createSlice } from '@reduxjs/toolkit';
-import { fetchWebGL } from '../thunks/fetchWebGL';
 
 const webGLSlice = createSlice({
   name: 'webGL',
@@ -8,19 +7,6 @@ const webGLSlice = createSlice({
     data: [],
     error: null,
   },
-  extraReducers(builder) {
-    builder.addCase(fetchWebGL.pending, (state, action) => {
-      state.isLoading = true;
-    });
-    builder.addCase(fetchWebGL.fulfilled, (state, action) => {
-      state.isLoading = false;
-      state.data = action.payload;
-    });
-    builder.addCase(fetchWebGL.rejected, (state, action) => {
-      state.isLoading = false;
-      state.error = action.error;
-    });
-  },
 });
 
 export const webGLReducer = webGLSlice.reducer;

WebGLViewer/src/App.tsx

@@ -1,20 +1,35 @@
+// React
 import * as React from 'react';
+import { Routes, Route } from 'react-router-dom';
+
+// Hooks
 import { useEffect } from 'react';
-import { Box, CssBaseline } from '@mui/material';
-import { useTheme, ThemeProvider, createTheme } from '@mui/material/styles';
-import { useAppSelector, useAppDispatch } from '../app/hooks/hooks';
+import { useAppSelector, useAppDispatch } from '../app/hooks/reduxTypescriptHooks';
+
+// MUI Styles
+import {
+  useTheme,
+  ThemeProvider,
+  createTheme
+} from '@mui/material/styles';
 
+// MUI Components
+import {
+  Box,
+  CssBaseline,
+  PaletteMode
+} from '@mui/material';
+
+// Styles
 // @ts-ignore
 import COLORS from './styles/variables';
 import './styles/App.scss';
-import { Routes, Route } from 'react-router-dom';
 
-import Header from './components/coreapp/Header';
+// Custom Components
+import MainScaffold from './layouts/MainScaffold';
 import Dashboard from './pages/Dashboard';
 // import Settings from './pages/Settings';
 
-import { PaletteMode } from '@mui/material';
-
 const getDesignTokens = (mode: PaletteMode) => ({
   palette: {
     mode,
@@ -124,12 +139,12 @@ function App() {
   return (
     <div className="App">
       <CssBaseline>
-        <Header>
+        <MainScaffold>
           <Routes>
             <Route path="/viewer" element={<Dashboard />} />
             {/* <Route path="/settings" element={<Settings />} /> */}
           </Routes>
-        </Header>
+        </MainScaffold>
       </CssBaseline>
     </div>
   );