updated individual dataset page

bhklab · Apr 21, 2023 · 53604bd · 53604bd
1 parent 70789bf
commit 53604bd
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 70 deletions.
diff --git a/client/src/components/Admin/Admin.js b/client/src/components/Admin/Admin.js
@@ -38,7 +38,7 @@ const TabNavigation = styled.div`
 `;
 
 const Admin = () => {
-    const [selectedMenu, setSelectedMenu] = useState('add-new-object');
+    const [selectedMenu, setSelectedMenu] = useState('create-pipeline');
 
     return(
         <StyledPage>

diff --git a/client/src/components/SingleDataset/ClinicalGenomics/ClinicalGenomics.js b/client/src/components/SingleDataset/ClinicalGenomics/ClinicalGenomics.js
@@ -2,9 +2,9 @@ import React from "react";
 import { TabView, TabPanel } from "primereact/tabview";
 import DisclaimerTabContent from "../PSet/TabContents/DisclaimerTabContent";
 import DatasetTabContent from "./TabContents/DatasetTabContent";
-import PipelineTabContent from "./TabContents/PipelineTabContent";
 import ReleaseNoteTabContent from "./TabContents/ReleaseNoteTabContent";
 import { TabContainer } from "../SingleDatasetStyle";
+import SnakemakePipelineTabContent from "../SubComponents/SnakemakePipelineTabContent";
 
 const ClinicalGenomics = (props) => {
   const { dataset } = props;
@@ -21,7 +21,7 @@ const ClinicalGenomics = (props) => {
                 <DatasetTabContent metadata={td.data} info={dataset.info} />
               )}
               {td.header === "Pipeline" && (
-                <PipelineTabContent data={td.data} />
+                <SnakemakePipelineTabContent data={td.data} />
               )}
               {td.header === "Release Notes" && (
                 <ReleaseNoteTabContent data={td.data} />

diff --git a/client/src/components/SingleDataset/ClinicalGenomics/TabContents/PipelineTabContent.js b/client/src/components/SingleDataset/ClinicalGenomics/TabContents/PipelineTabContent.js
diff --git a/client/src/components/SingleDataset/PSet/PSet.js b/client/src/components/SingleDataset/PSet/PSet.js
@@ -5,11 +5,13 @@ import DisclaimerTabContent from './TabContents/DisclaimerTabContent';
 import RNATabContent from './TabContents/RNATabContent';
 import DNATabContent from './TabContents/DNATabContent';
 import PipelineTabContent from './TabContents/PipelineTabContent';
+import SnakemakePipelineTabContent from "../SubComponents/SnakemakePipelineTabContent";
 import ReleaseNoteTabContent from './TabContents/ReleaseNoteTabContent';
 import { TabContainer } from '../SingleDatasetStyle';
 
 const PSet = (props) => {
     const { dataset } = props;
+    console.log(dataset.tabData)
     return(
         <React.Fragment>
             <TabContainer>
@@ -21,7 +23,7 @@ const PSet = (props) => {
                                 {td.header === 'Disclaimer' && <DisclaimerTabContent notes={td.data} />}
                                 {td.header === 'RNA' && <RNATabContent dataset={dataset.tabData.find(item => item.header === "Dataset").data.dataset} metadata={td.data} />}
                                 {td.header === 'DNA' && <DNATabContent metadata={td.data} />}
-                                {td.header === 'Pipeline' && <PipelineTabContent data={td.data} />}
+                                {td.header === 'Pipeline' ? td.data.pipeline ? <SnakemakePipelineTabContent data={td.data} /> : <PipelineTabContent data={td.data} /> : ''}
                                 {td.header === 'Release Notes' && <ReleaseNoteTabContent data={td.data} />}
                             </TabPanel>
                         ))

diff --git a/client/src/components/SingleDataset/RadioSet/RadioSet.js b/client/src/components/SingleDataset/RadioSet/RadioSet.js
@@ -4,7 +4,7 @@ import DisclaimerTabContent from '../PSet/TabContents/DisclaimerTabContent';
 import DatasetTabContent from './TabContents/DatasetTabContent';
 import RNATabContent from './TabContents/RNATabContent';
 import DNATabContent from './TabContents/DNATabContent';
-import PipelineTabContent from '../PSet/TabContents/PipelineTabContent';
+import SnakemakePipelineTabContent from "../SubComponents/SnakemakePipelineTabContent";
 import ReleaseNoteTabContent from './TabContents/ReleaseNoteTabContent';
 import { TabContainer } from '../SingleDatasetStyle';
 
@@ -21,7 +21,7 @@ const RadioSet = (props) => {
                                 {td.header === 'Dataset' && <DatasetTabContent metadata={td.data} />}
                                 {td.header === 'RNA' && <RNATabContent metadata={td.data} />}
                                 {td.header === 'DNA' && <DNATabContent metadata={td.data} />}
-                                {td.header === 'Pipeline' && <PipelineTabContent data={td.data} />}
+                                {td.header === 'Pipeline' && <SnakemakePipelineTabContent data={td.data} />}
                                 {td.header === 'Release Notes' && <ReleaseNoteTabContent data={td.data} />}
                             </TabPanel>
                         ))

diff --git a/client/src/components/SingleDataset/SubComponents/SnakemakePipelineTabContent.js b/client/src/components/SingleDataset/SubComponents/SnakemakePipelineTabContent.js
@@ -0,0 +1,64 @@
+import React, { Fragment } from 'react';
+import { TabHeader, TabContent } from '../SingleDatasetStyle';
+import styled from 'styled-components';
+
+const PipelineContent = styled.div`
+    display: flex;
+    align-items: ${props => props.alignTop ? 'baseline' : 'center'};
+    h3 {
+        margin-right: 10px;
+    }
+    .pipeline-execution {
+        margin-left: 10px;
+        line-height: 15px;
+    }
+`
+
+const SnakemakePipelineTabContent = (props) => {
+
+  const { data } = props;
+
+  const getCommitLink = (gitURL, commitId) => {
+    let link = gitURL.replace('.git', '/tree/');
+    return link.concat(commitId);
+  }
+
+  return(
+    <Fragment>
+      <TabHeader>Pipeline Data</TabHeader>
+      <TabContent>
+        <PipelineContent>
+          <h3>Repository:</h3>
+          <div>{data.pipeline.url}</div>
+        </PipelineContent>
+        <PipelineContent>
+          <h3>Commit:</h3>
+          <div><a href={getCommitLink(data.pipeline.url, data.pipeline.commit_id)}>{data.pipeline.commit_id}</a></div>
+        </PipelineContent>
+        {
+          data.additionalRepo.length > 0 &&
+          <Fragment>
+              <h3>Additional Repositories Used in this Pipeline:</h3>
+              <div className='indent'>
+              {
+                data.additionalRepo.map((repo, i) => (
+                  <PipelineContent key={i}>
+                    <h3>{repo.repo_type}:</h3> 
+                    <div>
+                      <a href={getCommitLink(repo.git_url, repo.commit_id)}>
+                        {getCommitLink(repo.git_url, repo.commit_id)}
+                      </a>
+                    </div>
+                  </PipelineContent>
+                ))
+              }
+              </div>
+            </Fragment>
+        }
+      </TabContent>
+    </Fragment> 
+  )
+
+}
+
+export default SnakemakePipelineTabContent;
diff --git a/client/src/components/SingleDataset/ToxicoSet/ToxicoSet.js b/client/src/components/SingleDataset/ToxicoSet/ToxicoSet.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { TabView,TabPanel } from 'primereact/tabview';
 import DatasetTabContent from './TabContents/DatasetTabContent';
 import DisclaimerTabContent from '../PSet/TabContents/DisclaimerTabContent';
-import PipelineTabContent from '../PSet/TabContents/PipelineTabContent';
+import SnakemakePipelineTabContent from "../SubComponents/SnakemakePipelineTabContent";
 import ReleaseNoteTabContent from './TabContents/ReleaseNoteTabContent';
 import { TabContainer } from '../SingleDatasetStyle';
 
@@ -17,7 +17,7 @@ const ToxicoSet = (props) => {
                             <TabPanel key={Math.random()} header={td.header}>
                                 {td.header === 'Dataset' && <DatasetTabContent metadata={td.data} />}
                                 {td.header === 'Disclaimer' && <DisclaimerTabContent notes={td.data} />}
-                                {td.header === 'Pipeline' && <PipelineTabContent data={td.data} />}
+                                {td.header === 'Pipeline' && <SnakemakePipelineTabContent data={td.data} />}
                                 {td.header === 'Release Notes' && <ReleaseNoteTabContent data={td.data} />}
                             </TabPanel>
                         ))

diff --git a/routes/api/view/single-data-object-view.js b/routes/api/view/single-data-object-view.js
@@ -155,7 +155,7 @@ const get = async (req, res) => {
       dataObj.tabData = await getTabData(dataObject, dataset, filter);
 
       // add pachyderm pipeline config json: to be replaced with the new data processing layer API data.
-      if (req.query.datasetType === enums.dataTypes.pharmacogenomics) {
+      if (req.query.datasetType === enums.dataTypes.pharmacogenomics && !dataObject.info.other) {
         const pipelines = await PachydermPipeline.find();
         console.log(dataObject._id.toString());
         let found = pipelines.find(
@@ -172,6 +172,7 @@ const get = async (req, res) => {
         } else {
           pipelineConfig = found ? found.data.config : null;
         }
+
         if (pipelineConfig) {
           dataObj.tabData.push({
             header: "Pipeline",
@@ -184,7 +185,6 @@ const get = async (req, res) => {
       }
 
       // add snakemake pipeline data
-      console.log(dataObject.info.other);
       if (dataObject.info.other && dataObject.info.other.pipeline) {
         dataObj.tabData.push({
           header: "Pipeline",