Merge pull request #231 from MetaCell/feature/SDSV-31

Cleanup and update Readme
MetaCell · Jun 7, 2024 · 2c3ceb2 · 2c3ceb2
2 parents d6643af + 8dcf3d2
commit 2c3ceb2
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -25,22 +25,30 @@ The SDS Viewer can now be launched directly from datasets and models on the SPAR
 ![image](https://github.com/MetaCell/sds-viewer/assets/4562825/9ea43afd-28cc-4b37-8c72-96be2f821f1a)
 
 ##### SPARC Dataset used #####
-![Screenshot 2023-09-21 at 3 53 33 PM](https://github.com/MetaCell/sds-viewer/assets/4562825/f3e287ed-f93a-436b-b3b0-b85cb1c0857c)
+![image](https://github.com/MetaCell/sds-viewer/assets/4562825/16d878e2-d5bb-4dbd-9695-dfbd7ae5207f)
 
      
 ### Navigating the SDS Viewer
    - Users can search for subjects, folders and files on the sidebar. Selecting an item on the sidebar will display the Metadata for it and zoom the Graph to its corresponding folder or file. 
 ![image](https://github.com/MetaCell/sds-viewer/assets/4562825/7b013f5a-eead-4996-b7d2-20b3bf35a294)
 
 
-   - Selecting an item on the Graph will display its Metadata. 
+   - Selecting an item on the Graph will display its Metadata. Users can view Metadata for the Dataset's Subjects and Samples, along with its folders and files contents. Users can find links to the SPARC Portal for Subjects, Samples, Folders and Files.
 
 ![image](https://user-images.githubusercontent.com/4562825/186723085-c6573146-82dc-4fb7-ae95-588f7b1e4842.png)
 
+
    - Navigating the Graph Viewer can be done with the mouse. There are also controllers on the bottom right that allow user to change the Graph Layout view, zoom in/out of the graph, reset the Layout to its original state and expand/collapse all data in the viewer.
 
 ![controllers](https://github.com/MetaCell/sds-viewer/assets/99416933/30aa8bb3-ec61-46d8-9f83-55ade15b95c0)
 
+
+   - Use the Metadata Settings button to control which properties to view on the Metadata panel. Toggle on and off properties on each Object type and click Save.
+
+![image](https://github.com/MetaCell/sds-viewer/assets/4562825/6385b5a1-3598-4815-8aa1-f1223debe063)
+![image](https://github.com/MetaCell/sds-viewer/assets/4562825/d5876581-2dfd-4f13-9213-d46907e443c8)
+
+
    - Multiple Datasets can be loaded at the same time, a new Graph Viewer Component will be opened for each dataset.
 
 ![Multiple](https://github.com/MetaCell/sds-viewer/assets/4562825/9abe621a-a406-4e6b-8d6a-165622014425)

diff --git a/src/components/GraphViewer/GraphViewer.js b/src/components/GraphViewer/GraphViewer.js
@@ -368,11 +368,11 @@ const GraphViewer = (props) => {
               <MenuItem selected={TOP_DOWN.layout === selectedLayout.layout} onClick={() => handleLayoutChange(TOP_DOWN)}>{TOP_DOWN.label}</MenuItem>
               <MenuItem selected={LEFT_RIGHT.layout === selectedLayout.layout} onClick={() => handleLayoutChange(LEFT_RIGHT)}>{LEFT_RIGHT.label}</MenuItem>
             </Menu>
+            <Tooltip id="button-report" title="Change Graph Layout">
             <IconButton area-label="GraphLayout" aria-controls="layout-menu" aria-haspopup="true" onClick={handleLayoutClick}>
-              <Tooltip id="button-report" title="Change Graph Layout">
                 <ViewTypeIcon />
-              </Tooltip>
             </IconButton>
+            </Tooltip>
             <IconButton area-label="ZoomIn" onClick={(e) => zoomIn()}>
               <Tooltip id="button-report" title="Zoom In">
                 <AddRoundedIcon />

diff --git a/src/components/NodeDetailView/NodeDetailView.js b/src/components/NodeDetailView/NodeDetailView.js
@@ -2,7 +2,7 @@ import {Box} from "@material-ui/core";
 import NodeFooter from "./Footers/Footer";
 import DetailsFactory from './factory';
 import Breadcrumbs from "./Details/Views/Breadcrumbs";
-import { IconButton } from '@material-ui/core';
+import { IconButton, Tooltip } from '@material-ui/core';
 import { subject_key, protocols_key, contributors_key } from '../../constants';
 import {TuneRounded} from "@material-ui/icons";
 import { useSelector, useDispatch } from 'react-redux'
@@ -79,7 +79,9 @@ const NodeDetailView = (props) => {
       }
       <NodeFooter />
       { !showSettingsContent && <Box className='overlay-button-container'>
+      <Tooltip id="button-report" title="Open Metadata Settings">
         <IconButton className="overlay-button" onClick={toggleContent}><TuneRounded /></IconButton>
+      </Tooltip>
       </Box> }
     </Box>
   );

diff --git a/src/components/NodeDetailView/settings/SettingsItem.js b/src/components/NodeDetailView/settings/SettingsItem.js
@@ -67,17 +67,18 @@ const SettingsItem = props => {
           onClick={toggleItemDisabled}
           disableRipple
         >
-          <Tooltip id={item.label} title={"Toggle Property Visibility"}>
-            {!item.visible ? (
-              <AddCircleOutlineIcon
-                style={{ color: "#3779E1", fontSize: "1rem" }}
-              />
-            ) : (
-              <RemoveCircleOutlineIcon
-                style={{ color: "#ED745D", fontSize: "1rem" }}
-              />
-            )}
-          </Tooltip>
+
+        {!item.visible ? (
+          <Tooltip id={item.label} title={"Show Property"}>
+          <AddCircleOutlineIcon
+            style={{ color: "#3779E1", fontSize: "1rem" }}
+          /></Tooltip>
+        ) : (
+          <Tooltip id={item.label} title={"Hide Property"}>
+          <RemoveCircleOutlineIcon
+            style={{ color: "#ED745D", fontSize: "1rem" }}
+          /></Tooltip>
+        )}
         </IconButton>
       </ListItemSecondaryAction>
     </ListItem>