Merge pull request #245 from Digital-Engineering/development

Development

.env-sample

@@ -1,4 +1,4 @@
- # express.js application configuration
+# express.js application configuration
 SERVER_PORT=8090
 ROOT_ADDRESS=http://localhost:8090
 # the maximum size in megabytes of request bodies sent to Deep Lynx

AdminWebApp/src/views/FileManager.vue

@@ -38,7 +38,7 @@
           </edit-tag-dialog>
 
           <v-btn
-              @click='open3DViewer(items[0])'
+              @click='open3DViewer(items)'
               style="float: right"
           >
             {{$t('fileManager.fileManager3DViewer')}}
@@ -95,6 +95,7 @@ import {mdiFileDocumentMultiple} from "@mdi/js";
 import ReprocessDataSourceDialog from "@/components/dataImport/reprocessDataSourceDialog.vue";
 import EditFileSetDialog from "@/components/fileManager/editFileSetDialog.vue";
 import EditTagDialog from "@/components/fileManager/editTagDialog.vue";
+import Config from "../config";
 
 @Component({components:{
     CreateFileSetDialog,
@@ -138,8 +139,9 @@ export default class FileManager extends Vue {
         .finally(() => this.fileSetsLoading = false)
   }
 
-  open3DViewer() {
-    // TODO: Implement
+  open3DViewer(selectedTag: any) {
+    localStorage.setItem("webgl", JSON.stringify(selectedTag));
+    window.open(`${Config.deepLynxApiUri}/viewer`, "_blank");
   }
 
   copyID(id: string) {

WebGLViewer/app/hooks/hooks.ts

@@ -0,0 +1,6 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+import type { RootState, AppDispatch } from '../store';
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch: () => AppDispatch = useDispatch;
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

WebGLViewer/app/hooks/use-thunk.ts

@@ -0,0 +1,21 @@
+import { useState, useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+
+export function useThunk(thunk: any) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const dispatch = useDispatch();
+
+  const runThunk = useCallback(
+    (arg: any) => {
+      setIsLoading(true);
+      dispatch(thunk(arg))
+        .unwrap()
+        .catch((err: any) => setError(err))
+        .finally(() => setIsLoading(false));
+    },
+    [dispatch, thunk]
+  );
+
+  return [runThunk, isLoading, error];
+}

WebGLViewer/app/store/index.ts

@@ -1,17 +1,50 @@
 import { createSlice, configureStore } from '@reduxjs/toolkit';
+import { webGLReducer } from './slices/webGLSlice';
 
-const initialState = {};
+const initialState = {
+  openDrawerLeft: true,
+  openDrawerRight: false,
+  selectedAssetObject: {},
+  selectAssetOnScene: '',
+  highlightAssetOnScene: '',
+  dataViewObject: {},
+};
 
 const appStateSlice = createSlice({
   name: 'appState',
   initialState,
-  reducers: {},
+  reducers: {
+    toggleDrawerLeft: (state) => {
+      const store = state;
+      store.openDrawerLeft = !store.openDrawerLeft;
+    },
+    toggleDrawerRight: (state) => {
+      const store = state;
+      store.openDrawerRight = !store.openDrawerRight;
+    },
+    selectAssetObject: (state, action) => {
+      const store = state;
+      store.selectedAssetObject = action.payload;
+    },
+    selectAssetOnScene: (state, action) => {
+      const store = state;
+      store.selectAssetOnScene = action.payload;
+    },
+    highlightAssetOnScene: (state, action) => {
+      const store = state;
+      store.highlightAssetOnScene = action.payload;
+    },
+    setDataViewObject: (state, action) => {
+      const store = state;
+      store.dataViewObject = action.payload;
+    },
+  },
 });
 
-
 export const store = configureStore({
   reducer: {
     appState: appStateSlice.reducer,
+    webGL: webGLReducer
   },
 });
 
@@ -21,3 +54,6 @@ export const appStateActions = appStateSlice.actions;
 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';

WebGLViewer/app/store/slices/webGLSlice.js

@@ -0,0 +1,26 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { fetchWebGL } from '../thunks/fetchWebGL';
+
+const webGLSlice = createSlice({
+  name: 'webGL',
+  initialState: {
+    isLoading: false,
+    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/app/store/thunks/fetchWebGL.ts

@@ -0,0 +1,8 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+
+const fetchWebGL = createAsyncThunk('webgl/fetch', async () => {
+
+});
+
+export { fetchWebGL };

WebGLViewer/index.html

@@ -2,8 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/assets/data-gray.png" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
+    <link rel="icon" type="image/svg+xml" href="viewer/assets/data-gray.png" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Deep Lynx WebGL Viewer</title>
   </head>