Fixed cache button is not reachable issue when the image preview file… (#65)

* Fixed cache button is not a reachable issue when the image preview files are loaded,  yaml file load error issue

* linter edits
---------

Co-authored-by: mansouralawi <[email protected]>

Author: starsbro

client/package-lock.json

@@ -11,7 +11,7 @@
     "antd": "^5.18.1",
     "axios": "^1.7.2",
     "buffer": "^6.0.3",
-    "electron": "^27.3.11",
+    "electron": "^31.2.1",
     "js-yaml": "^4.1.0",
     "localforage": "^1.10.0",
     "nth-check": "^2.1.1",

client/package.json

@@ -1,5 +1,5 @@
 //  global FileReader
-import React, { useContext, useState } from 'react'
+import React, { useContext, useState, useEffect } from 'react'
 import { Button, Input, message, Modal, Space, Upload } from 'antd'
 import { InboxOutlined } from '@ant-design/icons'
 import { AppContext } from '../contexts/GlobalContext'
@@ -123,42 +123,31 @@ export function Dragger () {
       try {
         const buffer = new Uint8Array(event.target.result)
         console.log('Buffer length: ', buffer.length) // Log buffer length in bytes
-
         const tiffPages = UTIF.decode(buffer)
-
         // Check if tiffPages array is not empty
         if (tiffPages.length === 0) throw new Error('No TIFF pages found')
-
         const firstPage = tiffPages[0]
-        console.log('First page before decoding:', firstPage) // Log first page object before decodin
-
+        console.log('First page before decoding:', firstPage) // Log first page object before decoding
         // Ensure the firstPage has necessary tags before decoding
         if (!firstPage.t256 || !firstPage.t257) throw new Error('First page is missing essential tags (width and height)')
-
         UTIF.decodeImage(buffer, firstPage) // firstPage before and after decoding, the result is same.
         console.log('TIFF first page after decoding: ', firstPage) // Log the first page object
-
         // Extract width and height from the TIFF tags
         const width = firstPage.t256 ? firstPage.t256[0] : 0
         const height = firstPage.t257 ? firstPage.t257[0] : 0
-
         // Check if width and height are valid
         if (width > 0 && height > 0) {
           const rgba = UTIF.toRGBA8(firstPage) // Uint8Array with RGBA pixels
-
           // Create a canvas to draw the TIFF image
           const canvas = document.createElement('canvas')
           const ctx = canvas.getContext('2d')
           canvas.width = width
           canvas.height = height
           const imageData = ctx.createImageData(width, height)
-
           imageData.data.set(rgba)
           ctx.putImageData(imageData, 0, 0)
-
           const dataURL = canvas.toDataURL()
           console.log('Canvas data URL:', dataURL)
-
           callback(dataURL)
         } else {
           console.error('TIFF image has invalid dimensions:', { width, height })
@@ -193,9 +182,22 @@ export function Dragger () {
     }
   }
 
+  // Solved the "clear the cache" button for image loading is not reachable when the image preview files are loaded.
   const listItemStyle = {
-    width: '185px'
+    display: 'inline-block',
+    width: '185px',
+    height: 'auto',
+    verticalAlign: 'top'
   }
+  useEffect(() => {
+    // Get all elements with the class name "ant-upload-list-item-container"
+    const uploadListItemContainers = document.querySelectorAll('.ant-upload-list-item-container')
+
+    // Apply styles to each element
+    uploadListItemContainers.forEach((element) => {
+      Object.assign(element.style, listItemStyle)
+    })
+  })
 
   // when click or drag file to this area to upload, below function will be deployed.
   const handleBeforeUpload = (file) => {
@@ -236,7 +238,7 @@ export function Dragger () {
           Click or drag file to this area to upload
         </p>
       </Upload.Dragger>
-      <Button type='default' onClick={handleClearCache}>
+      <Button type='default' style={{ width: '185px' }} onClick={handleClearCache}>
         Clear File Cache
       </Button>
       <Modal

client/src/components/Dragger.js

@@ -1,4 +1,4 @@
-//  global FileReader
+// global FileReader
 import React, { Fragment, useContext, useEffect, useState } from 'react'
 import { Button, Col, message, Row, Slider, Upload } from 'antd'
 import { UploadOutlined } from '@ant-design/icons'
@@ -111,7 +111,9 @@ const YamlFileUploader = (props) => {
     reader.onload = (e) => {
       try {
         const contents = e.target.result
+        console.log('File contents:', contents)
         const yamlData = yaml.load(contents)
+        console.log('Parsed YAML data:', yamlData)
 
         if (type === 'training') {
           context.setTrainingConfig(
@@ -142,14 +144,18 @@ const YamlFileUploader = (props) => {
         )
 
         context.setInferenceConfig(
-          yaml.safeDump(yamlData, { indent: 2 }).replace(/^\s*\n/gm, '')
+          // yaml.safeDump(yamlData, { indent: 2 }).replace(/^\s*\n/gm, '')
+          yaml.dump(yamlData, { indent: 2 }).replace(/^\s*\n/gm, '')
+          // yaml.safeDump has been removed in js-yaml version 4.
+          // Solved 'Error reading YAML file' issue.
         )
         // these are for slider
         YAMLContext.setNumGPUs(yamlData.SYSTEM.NUM_GPUS)
         YAMLContext.setNumCPUs(yamlData.SYSTEM.NUM_CPUS)
         YAMLContext.setLearningRate(yamlData.SOLVER.BASE_LR)
         YAMLContext.setSolverSamplesPerBatch(yamlData.SOLVER.SAMPLES_PER_BATCH)
       } catch (error) {
+        console.error('Error reading YAML file: ', error) // Add this line to log the error
         message.error('Error reading YAML file.')
       }
     }

client/src/components/YamlFileUploader.js

@@ -87,36 +87,36 @@ function Views () {
         minWidth: '90vw'
       }}
     >
-      {isLoading ? (
-        <div>Loading the viewer ...</div>
-      ) : (
-        <React.Fragment>
-          <Sider
+      {isLoading
+        ? (<div>Loading the viewer ...</div>)
+        : (
+          <>
+            <Sider
             // collapsible
-            collapsed={collapsed}
-            onCollapse={(value) => setCollapsed(value)}
-            theme='light'
-            collapsedWidth='0'
-          >
-            <DataLoader fetchNeuroglancerViewer={fetchNeuroglancerViewer} />
-          </Sider>
-          <Layout className='site-layout'>
-            <Content
-              style={{
-                margin: '0 16px'
-              }}
+              collapsed={collapsed}
+              onCollapse={(value) => setCollapsed(value)}
+              theme='light'
+              collapsedWidth='0'
             >
-              <Menu
-                onClick={onClick}
-                selectedKeys={[current]}
-                mode='horizontal'
-                items={items}
-              />
-              {renderMenu()}
-            </Content>
-          </Layout>
-        </React.Fragment>
-      ) }
+              <DataLoader fetchNeuroglancerViewer={fetchNeuroglancerViewer} />
+            </Sider>
+            <Layout className='site-layout'>
+              <Content
+                style={{
+                  margin: '0 16px'
+                }}
+              >
+                <Menu
+                  onClick={onClick}
+                  selectedKeys={[current]}
+                  mode='horizontal'
+                  items={items}
+                />
+                {renderMenu()}
+              </Content>
+            </Layout>
+          </>
+          )}
     </Layout>
   )
 }

client/src/views/Views.js

@@ -50,7 +50,7 @@ function Visualization (props) {
         // Refresh the viewer URL by adding a refresh request token to it
         // The refresh request token is only for node.js to force refresh the element
         // The appended token will be ignored when rendering
-        return {...viewer, viewer: viewer.viewer + '?refresh=' + new Date().getTime() }
+        return { ...viewer, viewer: viewer.viewer + '?refresh=' + new Date().getTime() }
       }
       return viewer
     })
@@ -73,9 +73,9 @@ function Visualization (props) {
                 <span>
                   {viewer.title}
                   <Button
-                  type='link'
-                  icon={<ReloadOutlined />}
-                  onClick={() => refreshViewer(viewer.key)} 
+                    type='link'
+                    icon={<ReloadOutlined />}
+                    onClick={() => refreshViewer(viewer.key)}
                   />
 
                 </span>