Merge pull request #217 from MetaCell/feature/SDSV-18

#SDSV-18 - Add SPARC Portal Links

src/components/NodeDetailView/Details/CollectionDetails.js

@@ -1,43 +1,50 @@
-import React from "react";
 import {
-    Box, Divider,
-    Typography
+    Box,
+    Divider,
+    Typography,
 } from "@material-ui/core";
-import Links from './Views/Links';
 import SimpleLabelValue from './Views/SimpleLabelValue';
+import SimpleLinkedChip from './Views/SimpleLinkedChip';
+import Links from './Views/Links';
 import { detailsLabel } from '../../../constants';
+import { isValidUrl } from './utils';
+import { useSelector } from 'react-redux'
+
 
 const CollectionDetails = (props) => {
     const { node } = props;
 
-    let title = "";
-    let idDetails = "";
-    // both tree and graph nodes are present, extract data from both
-    if (node?.tree_node && node?.graph_node) {
-        title = node.graph_node?.name;
-        idDetails = node.graph_node?.id + detailsLabel;
-    // the below is the case where we have data only from the tree/hierarchy
-    } else if (node?.tree_node) {
-        title = node.tree_node?.basename;
-        idDetails = node.tree_node?.id + detailsLabel;
-    // the below is the case where we have data only from the graph
-    } else {
-        title = node.graph_node?.name;
-        idDetails = node.graph_node?.id + detailsLabel;
-    }
-
+    const collectionPropertiesModel = useSelector(state => state.sdsState.metadata_model.collection);
     return (
-        <Box className="secondary-sidebar_body" id={idDetails}>
+        <Box id={node?.graph_node?.attributes?.localId + detailsLabel}>
             <Divider />
             <Box className="tab-content">
-                <SimpleLabelValue label={'Label'} value={title} heading={'Collection Details'} />
-                { node.graph_node?.attributes?.publishedURI && node.graph_node?.attributes?.publishedURI !== ""
-                    ? (<Box className="tab-content-row">
-                            <Typography component="label">SPARC Portal Link</Typography>
-                            <Links key={`label_href_link`} href={node.graph_node?.attributes?.publishedURI} title={node.tree_node.basename} />
-                        </Box>)
-                    : <></>
-                }
+                <SimpleLabelValue label={""} value={""} heading={"Folder Details"} />
+
+                {collectionPropertiesModel?.map( property => {
+                    if ( property.visible ){
+                        const propValue = node?.tree_node?.[property.property] || node?.graph_node?.attributes?.[property.property];
+                        if ( isValidUrl(propValue) ){
+                            return (<Box className="tab-content-row">
+                                <Typography component="label">{property.label}</Typography>
+                                <Links key={`detail_links_dataset`} href={propValue} title={property.label + " Link"} />
+                            </Box>)
+                        }
+
+                        else if ( typeof propValue === "object" ){
+                            return (<Box className="tab-content-row">
+                                        <Typography component="label">{property.label}</Typography>
+                                        <SimpleLinkedChip chips={node.graph_node.attributes[property.property]} />
+                                    </Box>)
+                        }
+
+                        else if ( typeof propValue === "string" ){
+                            return (<SimpleLabelValue label={property.label} value={propValue} />)
+                        }
+
+                        return (<> </>)
+                    }
+                })}
             </Box>
         </Box>
     );

src/components/NodeDetailView/Details/DatasetDetails.js

@@ -1,4 +1,3 @@
-import React from "react";
 import {
     Box,
     Typography,

src/components/NodeDetailView/Details/Details.js

@@ -1,4 +1,3 @@
-import React from "react";
 import {
     Box,
     Divider,

src/components/NodeDetailView/Details/FileDetails.js

@@ -22,7 +22,7 @@ const FileDetails = (props) => {
 
                 {filePropertiesModel?.map( property => {
                     if ( property.visible ){
-                        const propValue = node.graph_node.attributes[property.property];
+                        const propValue = node?.tree_node?.[property.property] || node?.graph_node?.attributes?.[property.property];
                         if ( isValidUrl(propValue) ){
                             return (<Box className="tab-content-row">
                                 <Typography component="label">{property.label}</Typography>

src/components/NodeDetailView/Details/PersonDetails.js

@@ -1,11 +1,9 @@
-import React from "react";
 import {
     Box,
     Divider,
     Typography,
 } from "@material-ui/core";
 import Links from './Views/Links';
-import SimpleLabelValue from './Views/SimpleLabelValue';
 import { detailsLabel } from '../../../constants';
 
 const PersonDetails = (props) => {

src/components/NodeDetailView/Details/Primary.js

@@ -1,4 +1,3 @@
-import React from "react";
 import {
   Box,
   Typography,

src/components/NodeDetailView/Details/ProtocolDetails.js

@@ -1,4 +1,3 @@
-import React from "react";
 import {
     Box,
     Divider,

src/components/NodeDetailView/Details/Secondary.js

@@ -1,4 +1,3 @@
-import React from "react";
 import {
   Box,
   Typography,

src/components/NodeDetailView/Details/SubjectDetails.js

@@ -6,9 +6,7 @@ import {
 import SimpleLinkedChip from './Views/SimpleLinkedChip';
 import SimpleLabelValue from './Views/SimpleLabelValue';
 import Links from './Views/Links';
-import {  simpleValue } from './utils';
 import { detailsLabel } from '../../../constants';
-import { rdfTypes } from "../../../utils/graphModel";
 import { isValidUrl } from './utils';
 import { useSelector } from 'react-redux'
 

src/components/NodeDetailView/Details/utils.js

@@ -20,5 +20,11 @@ export const simpleValue = (label, value) => {
 }
 
 export const isValidUrl = (urlString) => {
-    return /(https:\/\/www\.|http:\/\/www\.|https:\/\/|http:\/\/)?[a-zA-Z]{2,}(\.[a-zA-Z]{2,})(\.[a-zA-Z]{2,})?\/[a-zA-Z0-9]{2,}|((https:\/\/www\.|http:\/\/www\.|https:\/\/|http:\/\/)?[a-zA-Z]{2,}(\.[a-zA-Z]{2,})(\.[a-zA-Z]{2,})?)|(https:\/\/www\.|http:\/\/www\.|https:\/\/|http:\/\/)?[a-zA-Z0-9]{2,}\.[a-zA-Z0-9]{2,}\.[a-zA-Z0-9]{2,}(\.[a-zA-Z0-9]{2,})?/g.test(urlString);
+    var urlPattern = new RegExp('^(https?:\\/\\/)?'+ // validate protocol
+	    '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // validate domain name
+	    '((\\d{1,3}\\.){3}\\d{1,3}))'+ // validate OR ip (v4) address
+	    '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // validate port and path
+	    '(\\?[;&a-z\\d%_.~+=-]*)?'+ // validate query string
+	    '(\\#[-a-z\\d_]*)?$','i'); // validate fragment locator
+	  return ( typeof urlString === "string" && urlString?.startsWith("http"));
 }

src/components/NodeDetailView/NodeDetailView.js

@@ -25,11 +25,11 @@ const NodeDetailView = (props) => {
   };
   var path = []
   var latestNodeVisited = nodeSelected;
-  while ( latestNodeVisited.graph_node.parent !== undefined ) {
-    path.push(latestNodeVisited.graph_node.parent.id);
+  while ( latestNodeVisited?.graph_node?.parent !== undefined ) {
+    path.push(latestNodeVisited?.graph_node?.parent?.id);
     latestNodeVisited = {
       tree_node: undefined,
-      graph_node: latestNodeVisited.graph_node.parent
+      graph_node: latestNodeVisited?.graph_node?.parent
     };
   };
 
@@ -40,9 +40,9 @@ const NodeDetailView = (props) => {
       graph_node: graph_node,
       tree_node: graph_node.tree_reference
     }
-    if (new_node.graph_node.id !== subject_key
-      && new_node.graph_node.id !== contributors_key
-      && new_node.graph_node.id !== protocols_key) {
+    if (new_node?.graph_node?.id !== subject_key
+      && new_node?.graph_node?.id !== contributors_key
+      && new_node?.graph_node?.id !== protocols_key) {
       links.pages.push({
         id: singleNode,
         title: graph_node.name,
@@ -52,10 +52,12 @@ const NodeDetailView = (props) => {
     }
     return <> </>;
   });
-  links.current = {
-    id: nodeSelected.graph_node.id,
-    text: nodeSelected.graph_node.name
-  };
+  if ( nodeSelected?.graph_node ){
+    links.current = {
+      id: nodeSelected?.graph_node?.id,
+      text: nodeSelected?.graph_node?.name
+    };
+  }
   const toggleContent = () => {
     dispatch(toggleSettingsPanelVisibility(!showSettingsContent));
   };

src/components/NodeDetailView/factory.js

@@ -13,6 +13,7 @@ import DatasetDetails from './Details/DatasetDetails';
 import SubjectDetails from './Details/SubjectDetails';
 import ProtocolDetails from './Details/ProtocolDetails';
 import GroupDetails from './Details/GroupDetails';
+import CollectionDetails from './Details/CollectionDetails'
 import Settings from "./settings/Settings"
 var DetailsFactory = function () {
     this.createDetails = function (node) {
@@ -63,24 +64,24 @@ const Collection = function (node) {
     nodeDetail.getHeader = () => {
         return (
             <>
-                {/* <CollectionHeader node={node} /> */}
+                <CollectionHeader node={node} />
             </>
         )
     };
 
     nodeDetail.getDetail = () => {
         return (
             <>
-                {/* <CollectionDetails node={node} /> */}
+                <CollectionDetails node={node} />
             </>
         )
     };
 
     nodeDetail.getAll = () => {
         return (
             <>
-                {/* <CollectionHeader node={node} />
-                <CollectionDetails node={node} /> */}
+                <CollectionHeader node={node} />
+                <CollectionDetails node={node} />
             </>
         )
     }

src/redux/initialState.js

@@ -8,6 +8,7 @@ const initialMetadataModel = savedMetadataModel ? JSON.parse(savedMetadataModel)
     dataset: [...rdfTypes.Dataset.properties],
     subject: [...rdfTypes.Subject.properties],
     sample: [...rdfTypes.Sample.properties],
+    collection : [...rdfTypes.Collection.properties],
     group: [...rdfTypes.Group.properties],
     file: [...rdfTypes.File.properties]
 };

src/utils/Splinter.js

@@ -337,7 +337,7 @@ class Splinter {
         } else {
             this.nodes.set(node.id, {
                 id: node.id,
-                attributes: {},
+                attributes: {publishedURI : ""},
                 types: [],
                 name: node.value,
                 proxies: [],
@@ -710,11 +710,11 @@ class Splinter {
                     }
                 }
 
-                if (node.attributes?.relativePath !== undefined) {
+                if (node.tree_reference?.dataset_relative_path !== undefined) {
                     node.attributes.publishedURI = 
-                        Array.from(this.nodes)[0][1].attributes.hasUriPublished[0]?.replace("datasets", "file") + 
-                        "/1?path=files/" +
-                        node.attributes?.relativePath;
+                        [Array.from(this.nodes)[0][1].attributes.hasUriPublished[0] + 
+                        "?datasetDetailsTab=files&path=files/" +
+                        node.tree_reference?.dataset_relative_path];
                 }
             }
 
@@ -754,9 +754,9 @@ class Splinter {
 
                 if (node.tree_reference?.dataset_relative_path !== undefined) {
                     node.attributes.publishedURI = 
-                        Array.from(this.nodes)[0][1].attributes.hasUriPublished[0]?.replace("datasets", "file") + 
-                        "/1?path=files/" +
-                        node.tree_reference?.dataset_relative_path;
+                        [Array.from(this.nodes)[0][1].attributes.hasUriPublished[0] + 
+                        "?datasetDetailsTab=files&path=files/" +
+                        node.tree_reference?.dataset_relative_path];
                 }
             }
 
@@ -780,9 +780,9 @@ class Splinter {
 
                 if (node.attributes?.relativePath !== undefined) {
                     node.attributes.publishedURI = 
-                        Array.from(this.nodes)[0][1].attributes.hasUriPublished[0]?.replace("datasets", "file") + 
-                        "/1?path=files/" +
-                        node.attributes?.relativePath;
+                        Array.from(this.nodes)[0][1].attributes.hasUriPublished[0] + 
+                        "?datasetDetailsTab=files&path=files/" +
+                        node.attributes?.relativePath;  
                 }
             }
 
@@ -989,13 +989,21 @@ class Splinter {
             let tree_node = this.tree_map.get(id);
             if (tree_node) {
                 value.tree_reference = tree_node;
+                tree_node.publishedURI = 
+                    Array.from(this.nodes)[0][1].attributes.hasUriPublished[0]?.replace("datasets", "file") + 
+                    "/1?path=files/" +
+                    tree_node?.dataset_relative_path;
                 this.nodes.set(key, value);
                 tree_node.graph_reference = value;
                 this.tree_map.set(value.id, tree_node);
             } else {
                 value.proxies.every(proxy => {
                     tree_node = this.tree_map.get(proxy);
                     if (tree_node) {
+                        tree_node.publishedURI = 
+                            Array.from(this.nodes)[0][1].attributes.hasUriPublished[0]?.replace("datasets", "file") + 
+                            "/1?path=files/" +
+                            tree_node?.dataset_relative_path;
                         value.tree_reference = tree_node;
                         this.nodes.set(key, value);
                         tree_node.graph_reference = value;