Feature/sdsv 21 - Create on Metadata Model on Redux Store

src/App.js

@@ -59,7 +59,6 @@ const App = () => {
       tree: await splinter.getTree(),
       splinter: splinter
     };
-    console.log("Graph ", _dataset.graph);
 
     dispatch(addDataset(_dataset));
     dispatch(addWidget({
@@ -132,7 +131,6 @@ const App = () => {
     };
     const splinter = new DatasetsListSplinter(undefined, file.data);
     let graph = await splinter.getGraph();
-    console.log("Graph ", graph);
     let datasets = graph.nodes.filter((node) => node?.attributes?.hasDoi);
     const match = datasets.find( node => node.attributes?.hasDoi?.[0]?.includes(doi));
     if ( match ) {

src/components/GraphViewer/GraphViewer.js

@@ -194,7 +194,6 @@ const GraphViewer = (props) => {
     }
 
     const graph = { nodes : visibleNodes, links : visibleLinks, levelsMap : levelsMap, hierarchyVariant : maxLevel * 20 };
-    console.log("Graph ", graph);
     return graph;
   };
 

src/components/NodeDetailView/Details/DatasetDetails.js

@@ -6,17 +6,16 @@ import {
 } from "@material-ui/core";
 import Links from './Views/Links';
 import SimpleLinkedChip from './Views/SimpleLinkedChip';
-import USER from "../../../images/user.svg";
 import SimpleLabelValue from './Views/SimpleLabelValue';
 import { detailsLabel } from '../../../constants';
-import { rdfTypes } from "../../../utils/graphModel";
 import { isValidUrl } from './utils';
+import { useSelector } from 'react-redux'
 import {DatasetIcon} from "../../../images/Icons";
 
 const DatasetDetails = (props) => {
     const { node } = props;
 
-    let datasetPropertiesModel = [...rdfTypes["Dataset"].properties];
+    const datasetPropertiesModel = useSelector(state => state.sdsState.metadata_model.dataset);
 
     return (
 

src/components/NodeDetailView/Details/FileDetails.js

@@ -1,107 +1,53 @@
-import React from "react";
 import {
     Box,
     Typography,
-    List,
-    ListItemText,
     Divider,
 } from "@material-ui/core";
 import Links from './Views/Links';
 import SimpleLabelValue from './Views/SimpleLabelValue';
+import SimpleLinkedChip from './Views/SimpleLinkedChip';
 import { detailsLabel } from '../../../constants';
+import { useSelector } from 'react-redux'
+import { isValidUrl } from './utils';
 
 const FileDetails = (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.tree_node.basename;
-        idDetails = node.tree_node.id + detailsLabel;
-    // the below is the case where we have data only from the tree/hierarchy
-    } else if (node.graph_node) {
-        idDetails = node.graph_node.id + detailsLabel;
-        title = node.graph_node.attributes?.label?.[0];
-    // the below is the case where we have data only from the graph
-    } else {
-        title = node.tree_node.basename;
-        idDetails = node.tree_node.id + detailsLabel;
-    }
-
-    let latestUpdate = "Not defined."
-    if (node?.graph_node.attributes?.updated !== undefined) {
-        latestUpdate = node?.attributes?.updated;
-    }
-
-    const DETAILS_LIST = [
-        {
-            title: 'Mimetype',
-            value: node?.graph_node?.attributes?.mimetype
-        },
-        {
-            title: 'Size Bytes',
-            value: node?.graph_node?.attributes?.size
-        }
-    ];
+    const filePropertiesModel = useSelector(state => state.sdsState.metadata_model.file);
 
     return (
-        <Box className="secondary-sidebar_body" id={idDetails}>
+        <Box className="secondary-sidebar_body" id={node?.graph_node?.id + detailsLabel}>
             <Divider />
             <Box className="tab-content">
-                { node.graph_node?.attributes?.identifier
-                    ? (<Box className="tab-content-row">
-                            <Typography component="h3">{"File Details"}</Typography>
-                            <SimpleLabelValue label={'Label'} value={node.graph_node?.attributes?.identifier} />
-                        </Box>)
-                    : (<SimpleLabelValue label={'Label'} value={title} heading={'File Details'} />)
-                }
-                { node.graph_node?.attributes?.publishedURI && node.graph_node?.attributes?.publishedURI !== ""
-                    ? (<Box className="tab-content-row">
-                            <Typography component="label">Published Dataset File</Typography>
-                            <Links key={`label_href_link`} href={node.graph_node?.attributes?.publishedURI} title={node.graph_node?.attributes?.identifier} />
-                        </Box>)
-                    : <></>
-                }
-                {latestUpdate ? 
-                    <SimpleLabelValue label={'Updated On'} value={latestUpdate} />
-                    : (<> </>)
-                }
-                { node?.tree_node?.uri_human !== undefined
-                    ? (<Box className="tab-content-row">
-                            <Links href={node?.tree_node?.uri_human} title="Human URI" />
-                       </Box>)
-                    : (<> </>)
-                }
+                <SimpleLabelValue label={""} value={""} heading={"File Details"} />
+
+                {filePropertiesModel?.map( property => {
+                    if ( property.visible ){
+                        const propValue = 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>)
+                        }
 
-                { node?.tree_node?.checksums !== undefined
-                    ? (<>
-                            <SimpleLabelValue label={'Checksum'} value={node?.tree_node?.checksums[0].hex} />
-                            <SimpleLabelValue label={'Checksum Algorithm'} value={node?.tree_node?.checksums[0].cypher} />
-                        </>)
-                    : (<> </>)
-                }
+                        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} />)
+                        }
 
-                <Box className="tab-content-row">
-                    <List component="nav" aria-label="main">
-                        {
-                            DETAILS_LIST?.map((item, index) => (
-                                <ListItemText key={`detail_list_${index}`}>
-                                    <Typography component="label">{item?.title}</Typography>
-                                    <Typography>{item?.value}</Typography>
-                                </ListItemText>
-                            ))
+                        else if ( typeof propValue === "number" ){
+                            return (<SimpleLabelValue label={property.label} value={propValue} />)
                         }
-                    </List>
-                </Box>
 
-                { node?.graph_node?.attributes?.hasUriHuman !== undefined
-                    ? (<Box className="tab-content-row">
-                            <Typography component="label">Links</Typography>
-                            <Links key={`detail_links_dataset`} href={node?.graph_node?.attributes?.hasUriHuman[0]} title="Dataset" />
-                        </Box>)
-                    : <> </>
-                }
+                        return (<> </>)
+                    }
+                })}
             </Box>
         </Box>
     );

src/components/NodeDetailView/Details/GroupDetails.js

@@ -1,35 +1,53 @@
-import React from "react";
 import {
     Box,
     Divider,
+    Typography
 } from "@material-ui/core";
+import Links from './Views/Links';
+import SimpleLinkedChip from './Views/SimpleLinkedChip';
 import SimpleLabelValue from './Views/SimpleLabelValue';
 import { detailsLabel } from '../../../constants';
+import { useSelector } from 'react-redux'
+import { isValidUrl } from './utils';
 
 const GroupDetails = (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 groupPropertiesModel = useSelector(state => state.sdsState.metadata_model.group);
 
     return (
-        <Box className="secondary-sidebar_body" id={idDetails}>
+        <Box className="secondary-sidebar_body" id={node?.graph_node?.id + detailsLabel}>
             <Divider />
             <Box className="tab-content">
-                <SimpleLabelValue label={'# of Subjects '} value={node?.graph_node?.subjects} heading={node?.graph_node?.name} />
+                <SimpleLabelValue label={""} value={""} heading={"Group Details"} />
+
+                {groupPropertiesModel?.map( property => {
+                    if ( property.visible ){
+                        const propValue = node.graph_node[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[property.property]} />
+                                    </Box>)
+                        }
+
+                        else if ( typeof propValue === "string" ){
+                            return (<SimpleLabelValue label={property.label} value={propValue} />)
+                        }
+
+                        else if ( typeof propValue === "number" ){
+                            return (<SimpleLabelValue label={property.label} value={propValue} />)
+                        }
+
+                        return (<> </>)
+                    }
+                })}
             </Box>
         </Box>
     );

src/components/NodeDetailView/Details/SampleDetails.js

@@ -1,56 +1,51 @@
-import React from "react";
 import {
     Box,
     Divider,
     Typography,
 } from "@material-ui/core";
 import SimpleLabelValue from './Views/SimpleLabelValue';
+import SimpleLinkedChip from './Views/SimpleLinkedChip';
 import Links from './Views/Links';
-import { iterateSimpleValue } from './utils';
 import { detailsLabel } from '../../../constants';
+import { isValidUrl } from './utils';
+import { useSelector } from 'react-redux'
+
 
 const SampleDetails = (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) {
-        idDetails = node.tree_node.id + detailsLabel;
-        title = node.tree_node.basename;
-    // the below is the case where we have data only from the tree/hierarchy
-    } else if (node?.graph_node) {
-        idDetails = node.graph_node.id + detailsLabel;
-        title = node.graph_node.attributes?.label ? node.graph_node.attributes?.label[0] : "";
-    // the below is the case where we have data only from the graph
-    } else {
-        idDetails = node.tree_node.id + detailsLabel;
-        title = "Undefined Sample name";
-    }
+    const samplePropertiesModel = useSelector(state => state.sdsState.metadata_model.sample);
 
     return (
-        <Box id={idDetails}>
+        <Box id={node?.graph_node?.attributes.localId + detailsLabel}>
             <Divider />
             <Box className="tab-content">
-                { node.graph_node.attributes?.hasUriHuman && node.graph_node.attributes?.hasUriHuman[0] !== ""
-                    ? (<Box className="tab-content-row">
-                            <Typography component="h3">{"Sample Details"}</Typography>
-                            <Typography component="label">Label</Typography>
-                        </Box>)
-                    : (<SimpleLabelValue label={'Label'} value={title} heading={'Sample 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>)
-                    : <></>
-                }
-
-                { iterateSimpleValue('Assigned group', node?.graph_node?.attributes?.hasAssignedGroup) }
-                { iterateSimpleValue('Digital artifact', node?.graph_node?.attributes?.hasDigitalArtifactThatIsAboutIt) }
-                { iterateSimpleValue('Extracted from Anatomical region', node?.graph_node?.attributes?.wasExtractedFromAnatomicalRegion) }
+                <SimpleLabelValue label={""} value={""} heading={"Sample Details"} />
+
+                {samplePropertiesModel?.map( property => {
+                    if ( property.visible ){
+                        const propValue = node.graph_node.attributes[property.property]?.[0];
+                        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>
     );