SDSV-30 - When clicking on a graph node, only open immediate folders/files. #SDSV-31 - Cache published datasets on local storage

src/App.js

@@ -18,7 +18,6 @@ import { NodeViewWidget } from './app/widgets';
 import {  addWidget } from '@metacell/geppetto-meta-client/common/layout/actions';
 import { WidgetStatus } from "@metacell/geppetto-meta-client/common/layout/model";
 import DatasetsListSplinter from "./components/DatasetsListViewer/DatasetsListSplinter";
-
 import config from './config/app.json';
 
 const App = () => {
@@ -132,6 +131,7 @@ const App = () => {
     const splinter = new DatasetsListSplinter(undefined, file.data);
     let graph = await splinter.getGraph();
     let datasets = graph.nodes.filter((node) => node?.attributes?.hasDoi);
+    let version = graph.nodes.find( node => node?.attributes?.versionInfo)?.attributes?.versionInfo
     const match = datasets.find( node => node.attributes?.hasDoi?.[0]?.includes(doi));
     if ( match ) {
       const datasetID = match.name;
@@ -140,6 +140,20 @@ const App = () => {
       setLoading(false);
       setInitialised(false);
     }
+
+    let datasetStorage = {};
+    if ( version !== undefined && localStorage.getItem(config.datasetsStorage)?.version !== version[0] ) {
+      let parsedDatasets = []
+      datasets.forEach( node =>  {
+        parsedDatasets.push({ name : node.name , doi : node.attributes?.hasDoi?.[0], label : node.attributes ? node.attributes?.label?.[0]?.toLowerCase() : null}); 
+      });
+      datasetStorage = {
+        version : version[0],
+        datasets : parsedDatasets
+      }
+
+      localStorage.setItem(config.datasetsStorage, JSON.stringify(datasetStorage));
+    }
   };
 
   useEffect(() => {
@@ -149,9 +163,21 @@ const App = () => {
 
     if (doi && doi !== "" ) {
       if ( doiMatch ){
-        const fileHandler = new FileHandler();
-        const summaryURL = config.repository_url + config.available_datasets;
-        fileHandler.get_remote_file(summaryURL, loadDatsetFromDOI);
+        if ( localStorage.getItem(config.datasetsStorage) ) {
+          let storedDatasetsInfo = JSON.parse(localStorage.getItem(config.datasetsStorage));
+          const match = storedDatasetsInfo.datasets.find( node => node?.doi.includes(doi));
+          if ( match ) {
+            const datasetID = match.name;
+            loadFiles(datasetID);
+          } else {
+            setLoading(false);
+            setInitialised(false);
+          }
+        } else {
+          const fileHandler = new FileHandler();
+          const summaryURL = config.repository_url + config.available_datasets;
+          fileHandler.get_remote_file(summaryURL, loadDatsetFromDOI);
+        }
       }
     }
   }, []);

src/components/DatasetsListViewer/DatasetsListDialog.js

@@ -106,8 +106,24 @@ const DatasetsListDialog = (props) => {
       let datasets = graph.nodes.filter((node) => node?.attributes?.hasUriApi);
       datasets.forEach( node => node.attributes ? node.attributes.lowerCaseLabel = node.attributes?.label?.[0]?.toLowerCase() : null );
       datasets = datasets.filter( node => node?.attributes?.statusOnPlatform?.[0]?.includes(PUBLISHED) );
-      dispatch(setDatasetsList(datasets));
-      setFilteredDatasets(datasets);
+
+
+      let version = graph.nodes.find( node => node?.attributes?.versionInfo)?.attributes?.versionInfo
+      let datasetStorage = {};
+      if ( version !== undefined && localStorage.getItem(config.datasetsStorage)?.version !== version[0] ) {
+        let parsedDatasets = []
+        datasets.forEach( node =>  {
+          parsedDatasets.push({ name : node.name , doi : node.attributes?.hasDoi?.[0], label : node.attributes ? node.attributes.lowerCaseLabel : null}); 
+        });
+        datasetStorage = {
+          version : version[0],
+          datasets : parsedDatasets
+        }
+
+        localStorage.setItem(config.datasetsStorage, JSON.stringify(datasetStorage));
+        dispatch(setDatasetsList(datasetStorage.datasets));
+        setFilteredDatasets(datasetStorage.datasets);
+      }
     };
     const summaryURL = config.repository_url + config.available_datasets;
     fileHandler.get_remote_file(summaryURL, callback);
@@ -116,7 +132,7 @@ const DatasetsListDialog = (props) => {
   const handleChange = (event) => {
     const lowerCaseSearch = event.target.value.toLowerCase();
     let filtered = datasets.filter((dataset) =>
-      dataset.attributes.lowerCaseLabel.includes(lowerCaseSearch) || dataset.name.includes(lowerCaseSearch)
+      dataset.label?.includes(lowerCaseSearch) || dataset.name?.includes(lowerCaseSearch)
     );
     setSearchField(lowerCaseSearch);
     setFilteredDatasets(filtered);
@@ -139,7 +155,15 @@ const DatasetsListDialog = (props) => {
   }
 
   useEffect(() => {
-    open && datasets.length === 0 && loadDatasets();
+    if ( open && datasets.length === 0 ) {
+      if ( localStorage.getItem(config.datasetsStorage) ) {
+        let storedDatasetsInfo = JSON.parse(localStorage.getItem(config.datasetsStorage));
+        dispatch(setDatasetsList(storedDatasetsInfo.datasets));
+        setFilteredDatasets(storedDatasetsInfo.datasets);
+      } else {
+        loadDatasets();
+      }
+    }
   });
 
   return (
@@ -202,7 +226,7 @@ const DatasetsListDialog = (props) => {
                             className="dataset_list_text"
                             dangerouslySetInnerHTML={{
                               __html:
-                                getFormattedListTex(dataset.attributes?.label[0])
+                                getFormattedListTex(dataset.label)
                             }}
                           />
                         }

src/components/DatasetsListViewer/DatasetsListSplinter.js

@@ -254,7 +254,7 @@ class Splinter {
         dataset_node.proxies = dataset_node.proxies.concat(ontology_node.proxies);
         dataset_node.level = 1;
         this.nodes.set(dataset_node.id, dataset_node);
-        this.nodes.delete(ontology_node.id);
+        // this.nodes.delete(ontology_node.id);
         // fix links that were pointing to the ontology
         let temp_edges = this.edges.map(link => {
             if (link.source === ontology_node.id) {

src/components/GraphViewer/GraphViewer.js

@@ -45,9 +45,11 @@ const GraphViewer = (props) => {
   const [loading, setLoading] = React.useState(false);
   const [data, setData] = React.useState({ nodes : [], links : []});
   const nodeSelected = useSelector(state => state.sdsState.instance_selected.graph_node);
+  const nodeClickSource = useSelector(state => state.sdsState.instance_selected.source);
   const groupSelected = useSelector(state => state.sdsState.group_selected.graph_node);
   const [collapsed, setCollapsed] = React.useState(true);
   const [previouslySelectedNodes, setPreviouslySelectedNodes] = useState(new Set());
+  let triggerCenter = false;
 
   const handleLayoutClick = (event) => {
     setLayoutAnchorEl(event.currentTarget);
@@ -70,7 +72,11 @@ const GraphViewer = (props) => {
     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 });
-      const updatedData = getPrunedTree(props.graph_id, selectedLayout.layout);
+      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);
@@ -115,7 +121,7 @@ const GraphViewer = (props) => {
     setCollapsed(!collapsed)
     setTimeout( () => {
       resetCamera();
-    },100)
+    },200)
   }
 
   /**
@@ -168,6 +174,10 @@ const GraphViewer = (props) => {
 
   const onEngineStop = () => {
     setForce();
+    if ( triggerCenter ) {
+      graphRef?.current?.ggv?.current.centerAt(selectedNode.x, selectedNode.y, ONE_SECOND);
+      triggerCenter = false;
+    }
   }
 
   useEffect(() => {
@@ -209,7 +219,7 @@ const GraphViewer = (props) => {
   });
 
   useEffect(() => {
-    if ( groupSelected ) { 
+    if ( groupSelected && groupSelected?.dataset_id?.includes(props.graph_id)) { 
       setSelectedNode(groupSelected);
       handleNodeHover(groupSelected);
       graphRef?.current?.ggv?.current.centerAt(groupSelected.x, groupSelected.y, ONE_SECOND);
@@ -224,26 +234,46 @@ const GraphViewer = (props) => {
   }, [selectedNode]);
 
   useEffect(() => {
-    if ( nodeSelected ) { 
+    if ( nodeSelected && ( nodeSelected?.tree_reference?.dataset_id?.includes(props.graph_id) || 
+        nodeSelected?.dataset_id?.includes(props.graph_id) )) { 
       if ( nodeSelected?.id !== selectedNode?.id ){
         let node = nodeSelected;
-        let collapsed = nodeSelected.collapsed
-        while ( node?.parent && !collapsed ) {
-          node = node.parent;
-          collapsed = node.collapsed
+        let collapsed = node.collapsed
+        let parent = node.parent;
+        let prevNode = node;
+        while ( parent && parent?.collapsed ) {
+          prevNode = parent;
+          parent = parent.parent;
         }
-        if ( collapsed ) {
-          node.collapsed = !node.collapsed;
-          collapseSubLevels(node, node.collapsed, { links : 0 });
-          const updatedData = getPrunedTree(props.graph_id, selectedLayout.layout);
-          setData(updatedData);
+
+        if ( prevNode && nodeSelected.collapsed && nodeClickSource === "TREE") {
+          if ( prevNode.type == rdfTypes.Subject.key ||  prevNode.type == rdfTypes.Sample.key ||
+            prevNode.type == rdfTypes.Collection.key ) {
+            prevNode.collapsed = false;
+            collapseSubLevels(prevNode, false, { links : 0 });
+            let updatedData = getPrunedTree(props.graph_id, selectedLayout.layout);
+            setData(updatedData);
+          }
+          if ( node.parent?.type == rdfTypes.Subject.key ||  node.parent?.type == rdfTypes.Sample.key ||
+            node.parent?.type == rdfTypes.Collection.key ) {
+            collapseSubLevels(node.parent, true, { links : 0 });
+            let updatedData = getPrunedTree(props.graph_id, selectedLayout.layout);
+            setData(updatedData);
+          } else {
+            collapseSubLevels(node, true, { links : 0 });
+            let updatedData = getPrunedTree(props.graph_id, selectedLayout.layout);
+            setData(updatedData);
+          }
         }
         setSelectedNode(nodeSelected);
         handleNodeHover(nodeSelected);
-        graphRef?.current?.ggv?.current.centerAt(nodeSelected.x, nodeSelected.y, 10);
+        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);
       }
+      const divElement = document.getElementById(nodeSelected.id + detailsLabel);
+      divElement?.scrollIntoView({ behavior: 'smooth' });
     }
   },[nodeSelected]) 
 

src/components/NodeDetailView/Details/DatasetDetails.js

@@ -64,7 +64,9 @@ const DatasetDetails = (props) => {
                                             <FileCopyIcon size="small"/>
                                         </IconButton>
                                     </Tooltip>
-                                    <Links key={`detail_links_dataset`} href={value} title={propValue} />
+                                    <Box className="tab-content-row">
+                                        { property.link?.asText ? <Typography>{value}</Typography> : <Links key={`detail_links_dataset`} href={value} title={propValue} /> }
+                                    </Box>
                                 </Box>
                             </Box>)
                         }

src/components/Sidebar/TreeView/InstancesTreeView.js

@@ -31,7 +31,7 @@ const InstancesTreeView = (props) => {
     } else {
       dispatch(selectInstance({
         dataset_id: dataset_id,
-        graph_node: node?.graph_reference?.id,
+        graph_node: node?.graph_reference?.id || node?.id,
         tree_node: node?.id,
         source: TREE_SOURCE
       }));

src/config/app.json

@@ -17,5 +17,6 @@
         "datasetsButtonText" : "Import a new dataset",
         "datasetsDialogSearchText" : "Search datasets by label or id",
         "datasetsButtonSubtitleText" : "Select a dataset to load"
-    }
+    },
+    "datasetsStorage" : "publishedDatasets"
 }

src/redux/initialState.js

@@ -132,9 +132,6 @@ export default function sdsClientReducer(state = {}, action) {
                     if (a.visible === b.visible) {
                         // Preserve the original order for items with the same visibility
                         return updatedMetadataModel[groupTitle].indexOf(a) - updatedMetadataModel[groupTitle].indexOf(b);
-                    } else {
-                        // Move visible items to the top
-                        return a.visible ? -1 : 1;
                     }
                 });
             }