Skip to content

Commit

Permalink
Merge pull request #204 from MetaCell/feature/SDSV-21
Browse files Browse the repository at this point in the history 
Feature/sdsv 21 - Create on Metadata Model on Redux Store
  • Loading branch information
@jrmartin
jrmartin authored Jan 16, 2024
2 parents f1b1fa0 + 4c34bea commit 869e544
Show file tree
Hide file tree
Showing 12 changed files with 384 additions and 342 deletions.
2 changes: 0 additions & 2 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,6 @@ const App = () => {
tree: await splinter.getTree(),
splinter: splinter
};
console.log("Graph ", _dataset.graph);

dispatch(addDataset(_dataset));
dispatch(addWidget({
Expand Down Expand Up @@ -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 ) {
Expand Down
1 change: 0 additions & 1 deletion src/components/GraphViewer/GraphViewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,6 @@ const GraphViewer = (props) => {
}

const graph = { nodes : visibleNodes, links : visibleLinks, levelsMap : levelsMap, hierarchyVariant : maxLevel * 20 };
console.log("Graph ", graph);
return graph;
};

Expand Down
5 changes: 2 additions & 3 deletions src/components/NodeDetailView/Details/DatasetDetails.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (

Expand Down
116 changes: 31 additions & 85 deletions src/components/NodeDetailView/Details/FileDetails.js
View file
Original file line number Diff line number Diff line change
@@ -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>
);
Expand Down
56 changes: 37 additions & 19 deletions src/components/NodeDetailView/Details/GroupDetails.js
View file
Original file line number Diff line number Diff line change
@@ -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>
);
Expand Down
69 changes: 32 additions & 37 deletions src/components/NodeDetailView/Details/SampleDetails.js
View file
Original file line number Diff line number Diff line change
@@ -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>
);
Expand Down
Loading

0 comments on commit 869e544

Please sign in to comment.