Merge pull request #7 from architecture-building-systems/2393-show-pl…

…ot-input-files 2393 show plot input files
architecture-building-systems · Dec 4, 2019 · 858d462 · 858d462
2 parents 4f7d741 + ec1d74c
commit 858d462
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 6 deletions.
diff --git a/src/renderer/components/Dashboard/Dashboard.css b/src/renderer/components/Dashboard/Dashboard.css
diff --git a/src/renderer/components/Dashboard/Dashboard.js b/src/renderer/components/Dashboard/Dashboard.js
@@ -9,7 +9,8 @@ import {
   ModalDuplicateDashboard,
   ModalEditParameters,
   ModalNewDashboard,
-  ModalSetScenario
+  ModalSetScenario,
+  ModalInputFiles
 } from './Modals';
 import { ModalContext, ModalManager } from '../../utils/ModalManager';
 import { RowLayout, GridLayout } from './Layouts';
@@ -25,7 +26,8 @@ const modals = {
   duplicateDashboard: 'duplicateDashboard',
   editParameters: 'editParameters',
   newDashboard: 'newDashboard',
-  setScenario: 'setScenario'
+  setScenario: 'setScenario',
+  inputFiles: 'inputFiles'
 };
 
 const Dashboard = () => {
@@ -110,6 +112,7 @@ const Dashboard = () => {
         dashIndex={dashIndex}
         fetchDashboards={fetchDashboards}
       />
+      <ModalInputFiles activePlotRef={activePlotRef} dashIndex={dashIndex} />
     </ModalManager>
   );
 };

diff --git a/src/renderer/components/Dashboard/Modals.js b/src/renderer/components/Dashboard/Modals.js
@@ -1,8 +1,18 @@
 import React, { useState, useEffect, useRef, useContext } from 'react';
-import { Modal, Form, Select, Input, Radio, Button } from 'antd';
+import {
+  Modal,
+  Form,
+  Select,
+  Input,
+  Radio,
+  Button,
+  Skeleton,
+  Icon
+} from 'antd';
 import axios from 'axios';
 import parameter from '../Tools/parameter';
 import { ModalContext } from '../../utils/ModalManager';
+import { shell } from 'electron';
 
 const { Option } = Select;
 
@@ -636,3 +646,71 @@ export const ModalDeletePlot = ({
     </Modal>
   );
 };
+
+export const ModalInputFiles = ({ dashIndex, activePlotRef }) => {
+  const [loading, setLoading] = useState(true);
+  const [fileLocations, setFileLocations] = useState({});
+  const { modals, setModalVisible, visible } = useContext(ModalContext);
+  const handleCancel = () => setModalVisible(modals.inputFiles, false);
+
+  useEffect(() => {
+    const fetchFileLocations = async () => {
+      try {
+        setLoading(true);
+        const { data } = await axios.get(
+          `http://localhost:5050/api/dashboards/${dashIndex}/plots/${activePlotRef.current}/input-files`
+        );
+        let out = {};
+        for (const fileLocation of data) {
+          const path = require('path');
+          const parentFolder = path.dirname(fileLocation);
+          if (typeof out[parentFolder] == 'undefined') out[parentFolder] = [];
+          out[parentFolder].push(path.basename(fileLocation));
+        }
+        setFileLocations(out);
+      } catch (err) {
+        console.log(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    if (visible.inputFiles) fetchFileLocations();
+    else setFileLocations({});
+  }, [visible]);
+
+  return (
+    <Modal
+      title="Input File Locations"
+      visible={visible.inputFiles}
+      width={800}
+      onCancel={handleCancel}
+      footer={null}
+      destroyOnClose
+    >
+      {loading ? (
+        <Skeleton />
+      ) : (
+        Object.keys(fileLocations).map(folderLocation => (
+          <div key={folderLocation}>
+            <Icon type="folder" />
+            <b style={{ margin: 5 }}>{folderLocation}</b>
+            <a onClick={() => shell.openItem(folderLocation)}>Open Folder</a>
+            <ul>
+              {fileLocations[folderLocation].map(file => (
+                <li key={file}>
+                  <a
+                    onClick={() =>
+                      shell.openItem(require('path').join(folderLocation, file))
+                    }
+                  >
+                    {file}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))
+      )}
+    </Modal>
+  );
+};
diff --git a/src/renderer/components/Dashboard/Plot.js b/src/renderer/components/Dashboard/Plot.js
@@ -89,7 +89,10 @@ export const Plot = ({ index, dashIndex, data, style, activePlotRef }) => {
         <React.Fragment>
           {div ? (
             div.content.length === 1 ? (
-              <PlotLegendToggle divID={div.content[0].props.id} />
+              <React.Fragment>
+                <PlotLegendToggle divID={div.content[0].props.id} />
+                <InputFiles index={index} activePlotRef={activePlotRef} />
+              </React.Fragment>
             ) : null
           ) : null}
           <EditMenu index={index} activePlotRef={activePlotRef} />
@@ -125,12 +128,26 @@ const PlotLegendToggle = ({ divID }) => {
       <Icon
         type="unordered-list"
         onClick={toggleLegends}
-        style={{ color: showLegend ? '#1890ff' : 'grey', margin: '0 5px' }}
+        style={{ color: showLegend ? '#1890ff' : 'grey' }}
       />
     </Tooltip>
   );
 };
 
+const InputFiles = ({ index, activePlotRef }) => {
+  const { modals, setModalVisible } = useContext(ModalContext);
+  const showModalInputFiles = () => {
+    setModalVisible(modals.inputFiles, true);
+    activePlotRef.current = index;
+  };
+
+  return (
+    <Tooltip title="Show input file location">
+      <Icon type="container" theme="twoTone" onClick={showModalInputFiles} />
+    </Tooltip>
+  );
+};
+
 const EditMenu = React.memo(({ index, activePlotRef }) => {
   const { modals, setModalVisible } = useContext(ModalContext);
 
@@ -165,7 +182,7 @@ const EditMenu = React.memo(({ index, activePlotRef }) => {
   return (
     <React.Fragment>
       <Dropdown overlay={menu} trigger={['click']}>
-        <Icon type="edit" theme="twoTone" style={{ margin: '0 5px' }} />
+        <Icon type="edit" theme="twoTone" />
       </Dropdown>
     </React.Fragment>
   );