Adding reload button at viewer label

Author: sam4coding

client/src/views/Views.js

@@ -12,6 +12,7 @@ const { Content, Sider } = Layout
 function Views () {
   const [current, setCurrent] = useState('visualization')
   const [viewers, setViewers] = useState([])
+  const [isLoading, setIsLoading] = useState(false)
   console.log(viewers)
 
   const onClick = (e) => {
@@ -44,11 +45,13 @@ function Views () {
     currentLabel,
     scales
   ) => {
+    setIsLoading(true)
     try {
       const viewerId = currentImage.uid + currentLabel.uid + JSON.stringify(scales)
       let updatedViewers = viewers
       const exists = viewers.find(
-        (viewer) => viewer.key === currentImage.uid + currentLabel.uid
+        // (viewer) => viewer.key === currentImage.uid + currentLabel.uid
+        (viewer) => viewer.key === viewerId
       )
       // console.log(exists, viewers)
       if (exists) {
@@ -60,7 +63,7 @@ function Views () {
         scales
       )
       const newUrl = res.replace(/\/\/[^:/]+/, '//localhost')
-      // console.log('Viewer at ', newUrl)
+      console.log('Current Viewer at ', newUrl)
 
       setViewers([
         ...updatedViewers,
@@ -70,8 +73,10 @@ function Views () {
           viewer: newUrl
         }
       ])
+      setIsLoading(false)
     } catch (e) {
       console.log(e)
+      setIsLoading(false)
     }
   }
 
@@ -82,30 +87,36 @@ function Views () {
         minWidth: '90vw'
       }}
     >
-      <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'
-          }}
-        >
-          <Menu
-            onClick={onClick}
-            selectedKeys={[current]}
-            mode='horizontal'
-            items={items}
-          />
-          {renderMenu()}
-        </Content>
-      </Layout>
+      {isLoading ? (
+        <div>Loading the viewer ...</div>
+      ) : (
+        <React.Fragment>
+          <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'
+              }}
+            >
+              <Menu
+                onClick={onClick}
+                selectedKeys={[current]}
+                mode='horizontal'
+                items={items}
+              />
+              {renderMenu()}
+            </Content>
+          </Layout>
+        </React.Fragment>
+      ) }
     </Layout>
   )
 }

client/src/views/Visualization.js

@@ -4,7 +4,8 @@ import {
   ArrowRightOutlined,
   DownOutlined,
   EyeOutlined,
-  InboxOutlined
+  InboxOutlined,
+  ReloadOutlined
 } from '@ant-design/icons'
 
 function Visualization (props) {
@@ -42,6 +43,20 @@ function Visualization (props) {
     setActiveKey(newActiveKey)
   }
 
+  const refreshViewer = (key) => {
+    // This function refreshes the viewer specified by the key
+    const updatedViewers = viewers.map((viewer) => {
+      if (viewer.key === key) {
+        // 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
+    })
+    setViewers(updatedViewers)
+  }
+
   return (
     <div style={{ marginTop: '20px' }}>
       {viewers.length > 0
@@ -54,7 +69,17 @@ function Visualization (props) {
             activeKey={activeKey}
             onChange={handleChange}
             items={viewers.map((viewer) => ({
-              label: viewer.title,
+              label: (
+                <span>
+                  {viewer.title}
+                  <Button
+                  type='link'
+                  icon={<ReloadOutlined />}
+                  onClick={() => refreshViewer(viewer.key)} 
+                  />
+
+                </span>
+              ),
               key: viewer.key,
               children: (
                 <iframe