Merge pull request #228 from MetaCell/feature/SDSV-30

#SDSV-30 - Update Read me and fix graph viewer bugs

Author: jrmartin

README.md

@@ -6,9 +6,10 @@ Deployed version : https://metacell.github.io/sds-viewer/
 
 The SDS Viewer can now be launched directly from datasets and models on the SPARC Portal (https://sparc.science/). From the landing page for your dataset or model of interest, simply click the SDS Viewer button, it will launch the viewer with it already loaded. In addition, users can load SPARC datasets using two other methods:
 
-1) Loading a SPARC Dataset from list:
+1) Loading a SPARC Dataset from app:
    - Click on 'SPARC Datasets' button, it's located on the lower left corner.
-   - On the window that opens up, select the dataset you want to load. 
+   - On the window that opens up, select the dataset you want to load. You can search 
+   by dataset title and id. 
    ![image](https://user-images.githubusercontent.com/4562825/166984322-83b4a8c2-aa29-4e6d-96e9-bcf4d125a3a9.png)
    - After selection, click 'Done'
    - Dataset will be loaded.
@@ -21,27 +22,28 @@ The SDS Viewer can now be launched directly from datasets and models on the SPAR
      This will open up the SDS Viewer with the dataset already loaded.
 
 ##### Loaded dataset example #####
-![Screenshot 2023-09-21 at 3 50 49 PM](https://github.com/MetaCell/sds-viewer/assets/4562825/e7247cf1-df5e-498d-a418-4cbc7f4c4de2)
+![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)
 
      
 ### 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 node. 
-![Screenshot 2023-09-21 at 4 04 23 PM](https://github.com/MetaCell/sds-viewer/assets/4562825/b64ea659-607f-42f7-b58f-edb01e31ab40)
+   - 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. 
 
 ![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's also controlers on the bottom right that allows the user to change the Layout view, zoom in/out, reset the view to its original state and expand all data in the viewer.
+   - 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)
 
-   - Multiple Datasets can be loaded at the same time, which will open a new Graph Viewer Component for each dataset.
+   - 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/99416933/a74fa033-ccd4-4609-b50f-852ce44d347a)
+![Multiple](https://github.com/MetaCell/sds-viewer/assets/4562825/9abe621a-a406-4e6b-8d6a-165622014425)
 
 
 ### Datasets Used

src/components/GraphViewer/GraphViewer.js

@@ -70,14 +70,10 @@ const GraphViewer = (props) => {
 
   const handleNodeLeftClick = (node, event) => {
     if ( node.type === rdfTypes.Subject.key || node.type === rdfTypes.Sample.key || node.type === rdfTypes.Collection.key ) {
-      node.collapsed = !node.collapsed;
       collapseSubLevels(node, node.collapsed, { links : 0 });
+      node.collapsed = !node.collapsed;
       let updatedData = getPrunedTree(props.graph_id, selectedLayout.layout);
       setData(updatedData);
-
-      collapseSubLevels(node, true, { links : 0 });
-      updatedData = getPrunedTree(props.graph_id, selectedLayout.layout);
-      setData(updatedData);
     } 
     handleNodeHover(node);
 
@@ -121,7 +117,7 @@ const GraphViewer = (props) => {
     setCollapsed(!collapsed)
     setTimeout( () => {
       resetCamera();
-    },200)
+    },10)
   }
 
   /**
@@ -174,10 +170,7 @@ const GraphViewer = (props) => {
 
   const onEngineStop = () => {
     setForce();
-    if ( triggerCenter ) {
-      graphRef?.current?.ggv?.current.centerAt(selectedNode.x, selectedNode.y, ONE_SECOND);
-      triggerCenter = false;
-    }
+    selectedNode && handleNodeRightClick(nodeSelected)
   }
 
   useEffect(() => {
@@ -234,8 +227,10 @@ const GraphViewer = (props) => {
   }, [selectedNode]);
 
   useEffect(() => {
-    if ( nodeSelected && ( nodeSelected?.tree_reference?.dataset_id?.includes(props.graph_id) || 
-        nodeSelected?.dataset_id?.includes(props.graph_id) )) { 
+    let sameDataset = nodeSelected?.tree_reference?.dataset_id?.includes(props.graph_id) || 
+                        nodeSelected?.dataset_id?.includes(props.graph_id) 
+                        || nodeSelected?.attributes?.dataset_id?.includes(props.graph_id);
+    if ( nodeSelected && sameDataset) { 
       if ( nodeSelected?.id !== selectedNode?.id ){
         let node = nodeSelected;
         let collapsed = node.collapsed
@@ -264,10 +259,10 @@ const GraphViewer = (props) => {
             let updatedData = getPrunedTree(props.graph_id, selectedLayout.layout);
             setData(updatedData);
           }
+          setSelectedNode(nodeSelected);
+          handleNodeHover(nodeSelected);
+          graphRef?.current?.ggv?.current.centerAt(nodeSelected.x, nodeSelected.y, ONE_SECOND);  
         }
-        setSelectedNode(nodeSelected);
-        handleNodeHover(nodeSelected);
-        graphRef?.current?.ggv?.current.centerAt(nodeSelected.x, nodeSelected.y, ONE_SECOND);
       } else {
         handleNodeHover(nodeSelected);
         graphRef?.current?.ggv?.current.centerAt(nodeSelected.x, nodeSelected.y, ONE_SECOND);
@@ -362,11 +357,6 @@ const GraphViewer = (props) => {
         controls={
           <div>
           <div className='graph-view_controls'>
-            <IconButton area-label="GraphLayout" aria-controls="layout-menu" aria-haspopup="true" onClick={handleLayoutClick}>
-              <Tooltip id="button-report" title="Change Graph Layout">
-                <ViewTypeIcon />
-              </Tooltip>
-            </IconButton>
             <Menu
               id="layout-menu"
               anchorEl={layoutAnchorEl}
@@ -378,6 +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>
+            <IconButton area-label="GraphLayout" aria-controls="layout-menu" aria-haspopup="true" onClick={handleLayoutClick}>
+              <Tooltip id="button-report" title="Change Graph Layout">
+                <ViewTypeIcon />
+              </Tooltip>
+            </IconButton>
             <IconButton area-label="ZoomIn" onClick={(e) => zoomIn()}>
               <Tooltip id="button-report" title="Zoom In">
                 <AddRoundedIcon />

src/utils/Splinter.js

@@ -799,6 +799,7 @@ class Splinter {
                 }
 
                 if (node.attributes?.relativePath !== undefined) {
+                    node.attributes.dataset_id = this.dataset_id;
                     node.attributes.publishedURI = 
                         Array.from(this.nodes)[0][1].attributes.hasUriPublished[0] + 
                         "?datasetDetailsTab=files&path=files/" +
@@ -1097,6 +1098,14 @@ class Splinter {
             if ( node.graph_reference === undefined ) {
                 node.graph_reference = this.findReference(node.uri_api);
             }
+            if ( node.graph_reference === undefined ) {
+                const fn = (hashMap, str) => [...hashMap.keys()].find(k => k.includes(str))
+                const graph_reference = fn(this.nodes, node.id)
+
+                if ( graph_reference ) {
+                    node.graph_reference = this.findReference(graph_reference);
+                }
+            }
             this.tree_map.set(node.id, node);
             const newNode = {
                 id: node.uri_api,

src/utils/graphModel.js

@@ -137,7 +137,7 @@ export const rdfTypes = {
                 "key": "title",
                 "property": "title",
                 "label": "Label",
-                "visible" : false
+                "visible" : true
             },
             {
                 "type": "dc",