updated examples & drag drop

tldr-group · Aug 7, 2024 · 2643d1f · 2643d1f
1 parent 7cb9ff4
commit 2643d1f
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 4 deletions.
diff --git a/frontend/src/assets/default.tiff → frontend/src/assets/default_2D.tiff b/frontend/src/assets/default.tiff → frontend/src/assets/default_2D.tiff
diff --git a/frontend/src/assets/default_3D.tiff b/frontend/src/assets/default_3D.tiff
diff --git a/frontend/src/components/DragDrop.tsx b/frontend/src/components/DragDrop.tsx
@@ -1,7 +1,8 @@
 import React, { useContext, useEffect, useRef, useState } from "react";
 import { DragDropProps } from "./interfaces";
 
-const DEFAULT_IMAGE = "../assets/default.tiff";
+const DEFAULT_IMAGE_2D = "../assets/default_2D.tiff";
+const DEFAULT_IMAGE_3D = "../assets/default_3D.tiff";
 
 export const dragDropStyle = {
     height: '75vh', width: '75vw',
@@ -27,8 +28,8 @@ const DragDrop = ({ loadFromFile }: DragDropProps): JSX.Element => {
         };
     };
 
-    const viewExample = async () => {
-        const url = new URL(DEFAULT_IMAGE, location.origin);
+    const viewExample = async (path: string) => {
+        const url = new URL(path, location.origin);
         console.log(url)
         const resp = await fetch(url);
         const data = await resp.blob();
@@ -43,7 +44,7 @@ const DragDrop = ({ loadFromFile }: DragDropProps): JSX.Element => {
             onDragOver={handleDrag}
             onDrop={handeDrop}
         >
-            {(!isMobile) && <span>Drag microstructure file or <a style={{ cursor: "pointer", color: 'blue' }} onClick={viewExample}> view example!</a></span>}
+            {(!isMobile) && <span>Drag microstructure file, or view example <a style={{ cursor: "pointer", color: 'blue' }} onClick={e => viewExample(DEFAULT_IMAGE_2D)}>in 2D</a> or  <a style={{ cursor: "pointer", color: 'blue' }} onClick={e => viewExample(DEFAULT_IMAGE_3D)}> 3D</a></span>}
         </div>
     );
 }