added dataset view framework

populationgenomics · Sep 18, 2023 · ccf809b · ccf809b
1 parent 71979db
commit ccf809b
Show file tree

Hide file tree

Showing 3 changed files with 153 additions and 1 deletion.
diff --git a/web/src/Routes.tsx b/web/src/Routes.tsx
@@ -9,6 +9,7 @@ import ProjectSummaryView from './pages/project/ProjectSummary'
 import ProjectsAdmin from './pages/admin/ProjectsAdmin'
 import ErrorBoundary from './shared/utilities/errorBoundary'
 import AnalysisRunnerSummary from './pages/project/AnalysisRunnerView/AnalysisRunnerSummary'
+import DatasetView from './pages/project/DatasetView'
 
 const Routes: React.FunctionComponent = () => (
     <Switch>
@@ -25,6 +26,15 @@ const Routes: React.FunctionComponent = () => (
             }
         />
 
+        <Route
+            path="/dataset-summary"
+            element={
+                <ErrorBoundary>
+                    <DatasetView />
+                </ErrorBoundary>
+            }
+        />
+
         <Route
             path="/project/:projectName?/:page?"
             element={

diff --git a/web/src/pages/family/FamilyView.tsx b/web/src/pages/family/FamilyView.tsx
@@ -69,6 +69,22 @@ const HEADINGS = [
     'Report Links',
 ]
 
+const SG_HEADINGS = ['SG ID', 'Individual ID', 'Sequence Type', 'SampleID']
+
+interface SGTableType {
+    sgID: string
+    individualID: number
+    sequenceType: string
+    sampleID: string
+}
+
+interface sequenceTypes {
+    genome: number
+    exome: number
+    mtseq: number
+    transcriptome: number
+}
+
 const FamilyView: React.FunctionComponent<Record<string, unknown>> = () => {
     const { familyID } = useParams()
     const family_ID = familyID ? +familyID : -1
@@ -107,7 +123,10 @@ const FamilyView: React.FunctionComponent<Record<string, unknown>> = () => {
             ),
         ]
             .flat()
-            .reduce((acc, color) => ((acc[color] = (acc[color] || 0) + 1), acc), {})
+            .reduce((acc: sequenceTypes, type) => {
+                acc[type as keyof sequenceTypes] = (acc[type as keyof sequenceTypes] || 0) + 1
+                return acc
+            }, {} as sequenceTypes)
         const pedEntry = data?.family.project.pedigree.find(
             (p) => p.individual_id === participant.externalId
         )
@@ -129,6 +148,20 @@ const FamilyView: React.FunctionComponent<Record<string, unknown>> = () => {
         }
     })
 
+    const sgTableData: SGTableType[] = []
+    data?.family.participants.forEach((participant) =>
+        participant.samples.forEach((sample) =>
+            sample.sequencingGroups.forEach((sg) =>
+                sgTableData.push({
+                    sgID: sg.id,
+                    individualID: participant.id,
+                    sequenceType: sg.type,
+                    sampleID: sample.id,
+                })
+            )
+        )
+    )
+
     return data ? (
         <div className="dataStyle" style={{ width: '100%' }}>
             <>
@@ -167,6 +200,33 @@ const FamilyView: React.FunctionComponent<Record<string, unknown>> = () => {
                         ))}
                     </SUITable.Body>
                 </Table>
+                <Table celled compact sortable>
+                    <SUITable.Header>
+                        <SUITable.Row>
+                            {SG_HEADINGS.map((title) => (
+                                <SUITable.HeaderCell
+                                    key={title}
+                                    style={{
+                                        borderBottom: 'none',
+                                        position: 'sticky',
+                                        resize: 'horizontal',
+                                    }}
+                                >
+                                    {title}
+                                </SUITable.HeaderCell>
+                            ))}
+                        </SUITable.Row>
+                    </SUITable.Header>
+                    <SUITable.Body>
+                        {sgTableData.map((row, i) => (
+                            <SUITable.Row key={i}>
+                                {Object.values(row).map((cell, j) => (
+                                    <SUITable.Cell key={`${i}-${j}`}>{cell}</SUITable.Cell>
+                                ))}
+                            </SUITable.Row>
+                        ))}
+                    </SUITable.Body>
+                </Table>
             </>
         </div>
     ) : (

diff --git a/web/src/pages/project/DatasetView.tsx b/web/src/pages/project/DatasetView.tsx
@@ -0,0 +1,82 @@
+import * as React from 'react'
+
+import { useParams } from 'react-router-dom'
+import { Table as SUITable } from 'semantic-ui-react'
+import { useQuery } from '@apollo/client'
+import Table from '../../shared/components/Table'
+
+import Pedigree from '../../shared/components/pedigree/Pedigree'
+import LoadingDucks from '../../shared/components/LoadingDucks/LoadingDucks'
+
+import { gql } from '../../__generated__/gql'
+import FamilyViewTitle from '../family/FamilyViewTitle'
+
+const GET_PROJECT_INFO = gql(`
+query getMyProjects {
+    myProjects {
+      id
+      name
+    }
+  }`)
+
+const HEADINGS = [
+    'Dataset',
+    'Sequencing Type',
+    'Families',
+    'Participants',
+    'Samples',
+    'Sequencing Groups',
+    'Completed CRAMs',
+    'Sequencing Groups in latest ES-index',
+    'Sequencing Groups in latest Joint Call',
+    'CRAM Completeness (%)',
+    'ES-index Completeness (%)',
+    'Joint Call Completeness (%)',
+]
+
+const DatasetView: React.FunctionComponent<Record<string, unknown>> = () => {
+    const { loading, error, data } = useQuery(GET_PROJECT_INFO)
+
+    if (loading) return <LoadingDucks />
+    if (error) return <>Error! {error.message}</>
+
+    const tableData = data?.myProjects.map((project) => ({ projectName: project.name }))
+
+    return data ? (
+        <div className="dataStyle" style={{ width: '100%' }}>
+            <>
+                <Table celled compact sortable>
+                    <SUITable.Header>
+                        <SUITable.Row>
+                            {HEADINGS.map((title) => (
+                                <SUITable.HeaderCell
+                                    key={title}
+                                    style={{
+                                        borderBottom: 'none',
+                                        position: 'sticky',
+                                        resize: 'horizontal',
+                                    }}
+                                >
+                                    {title}
+                                </SUITable.HeaderCell>
+                            ))}
+                        </SUITable.Row>
+                    </SUITable.Header>
+                    <SUITable.Body>
+                        {tableData?.map((row, i) => (
+                            <SUITable.Row key={i}>
+                                {Object.values(row).map((cell, j) => (
+                                    <SUITable.Cell key={`${i}-${j}`}>{cell}</SUITable.Cell>
+                                ))}
+                            </SUITable.Row>
+                        ))}
+                    </SUITable.Body>
+                </Table>
+            </>
+        </div>
+    ) : (
+        <></>
+    )
+}
+
+export default DatasetView