From 041b4b06a02b594321dad9adb064e3c7ea7c4b85 Mon Sep 17 00:00:00 2001
From: Dan Coates <dan.coates@populationgenomics.org.au>
Date: Thu, 19 Dec 2024 15:35:35 +1100
Subject: [PATCH 01/12] initial version of ourdna dashboard

---
 web/src/Routes.tsx                            |   2 +-
 web/src/pages/report/OurDnaDashboard.tsx      | 369 ++++++++++++++++++
 .../pages/report/chart/MetricFromQuery.tsx    |  66 ++++
 web/src/pages/report/chart/PlotFromQuery.tsx  | 148 +++++++
 web/src/pages/report/chart/TableFromQuery.tsx |  92 ++++-
 5 files changed, 675 insertions(+), 2 deletions(-)
 create mode 100644 web/src/pages/report/OurDnaDashboard.tsx
 create mode 100644 web/src/pages/report/chart/MetricFromQuery.tsx
 create mode 100644 web/src/pages/report/chart/PlotFromQuery.tsx

diff --git a/web/src/Routes.tsx b/web/src/Routes.tsx
index 9055a7f82..0c52d477f 100644
--- a/web/src/Routes.tsx
+++ b/web/src/Routes.tsx
@@ -18,10 +18,10 @@ import DocumentationArticle from './pages/docs/Documentation'
 import { FamilyPage } from './pages/family/FamilyView'
 import Details from './pages/insights/Details'
 import Summary from './pages/insights/Summary'
-import OurDnaDashboard from './pages/ourdna/OurDnaDashboard'
 import { ParticipantPage } from './pages/participant/ParticipantViewContainer'
 import AnalysisRunnerSummary from './pages/project/AnalysisRunnerView/AnalysisRunnerSummary'
 import ProjectOverview from './pages/project/ProjectOverview'
+import OurDnaDashboard from './pages/report/OurDnaDashboard'
 import SqlQueryUI from './pages/report/SqlQueryUI'
 import SampleView from './pages/sample/SampleView'
 import ErrorBoundary from './shared/utilities/errorBoundary'
diff --git a/web/src/pages/report/OurDnaDashboard.tsx b/web/src/pages/report/OurDnaDashboard.tsx
new file mode 100644
index 000000000..e77f4434f
--- /dev/null
+++ b/web/src/pages/report/OurDnaDashboard.tsx
@@ -0,0 +1,369 @@
+import { Box, Typography } from '@mui/material'
+import * as Plot from '@observablehq/plot'
+import { MetricFromQueryCard } from './chart/MetricFromQuery'
+import { PlotFromQueryCard } from './chart/PlotFromQuery'
+import { TableFromQueryCard } from './chart/TableFromQuery'
+import { useProjectDbQuery } from './data/projectDatabase'
+
+/*
+
+other charts:
+
+- chart of samples where we don't have consent / registration information for a participant.
+    - could be a few reasons, but want to capture badly entered participant ids
+
+
+    sections:
+    - recruitment
+    - processing times
+
+    - demographics
+
+    - data quality
+
+*/
+export default function OurDnaDashboard() {
+    const result = useProjectDbQuery(
+        'ourdna',
+
+        `
+        select * from participant limit 10
+        
+
+    `
+    )
+    if (result?.status === 'success') {
+        console.log(result.data.toArray().map((r) => r.toJSON()))
+    }
+
+    return (
+        <Box>
+            <Box m={2}>
+                <Typography fontWeight={'bold'} fontSize={26}>
+                    Recruitment
+                </Typography>
+            </Box>
+            <Box display={'flex'} gap={2} m={2}>
+                <Box width={'50%'}>
+                    <PlotFromQueryCard
+                        title="Recruitment funnel"
+                        description="The number of participants at each stage of recruitment"
+                        project="ourdna"
+                        query={`
+                            with funnel as (
+                                select
+                                    count(distinct p.participant_id) as "All Participants",
+                                    count(distinct p.participant_id) filter (
+                                        p."meta_blood-consent" = 'yes' and p."meta_informed-consent" = 'yes'
+                                    ) as "Participants consented",
+                                    count(distinct p.participant_id) filter (s.sample_id is not null) as "Participants with samples"
+                                from participant p
+                                left join sample s
+                                on s.participant_id = p.participant_id
+                            ) unpivot funnel
+                            on columns (*)
+                            into name stage value count
+                        `}
+                        plot={(data, { width }) =>
+                            Plot.plot({
+                                marginLeft: 160,
+                                inset: 10,
+                                height: 170,
+                                width,
+                                marks: [
+                                    Plot.barX(data, {
+                                        y: 'stage',
+                                        x: 'count',
+                                        tip: true,
+                                        fill: 'stage',
+                                    }),
+                                ],
+                            })
+                        }
+                    />
+                </Box>
+                <Box width={'50%'}>
+                    <PlotFromQueryCard
+                        title="Recruitment types"
+                        description="How the participant was recruited"
+                        project="ourdna"
+                        query={`
+                            select
+                                count(distinct participant_id) as count,
+                                CASE coalesce("meta_collection-event-type", '__NULL__')
+                                    WHEN 'POE'
+                                        THEN 'POE?'
+
+                                    WHEN 'Walk-in'
+                                        THEN 'Walk in'
+                                    WHEN 'Walk In'
+                                        THEN 'Walk in'
+
+                                    WHEN 'OSS'
+                                        THEN 'Once Stop Shop'
+                                    
+                                    WHEN '__NULL__'
+                                        THEN 'Unknown'
+
+                                    ELSE "meta_collection-event-type"
+
+                                END as collection_type
+                            from sample s
+                            group by 2
+                        `}
+                        plot={(data, { width }) =>
+                            Plot.plot({
+                                width,
+                                height: 150,
+                                color: { legend: true },
+                                marks: [
+                                    Plot.barX(
+                                        data,
+                                        Plot.stackX({
+                                            x: 'count',
+                                            fill: 'collection_type',
+                                            inset: 0.5,
+                                            tip: true,
+                                        })
+                                    ),
+                                ],
+                            })
+                        }
+                    />
+                </Box>
+            </Box>
+
+            <Box m={2}>
+                <Typography fontWeight={'bold'} fontSize={26}>
+                    Processing times
+                </Typography>
+            </Box>
+            <Box display={'flex'} gap={2} m={2}>
+                <Box width={'60%'}>
+                    <PlotFromQueryCard
+                        title="Processing times for all samples"
+                        description="This excludes any samples with > 100 hour processing times, and any that have missing or malformed collection or processing times"
+                        project="ourdna"
+                        query={`
+                            with durations as (
+                                select
+                                    try_strptime(nullif("meta_collection-time", ' '), '%Y-%m-%d %H:%M:%S') as collection,
+                                    try_strptime(nullif("meta_process-end-time", ' '), '%Y-%m-%d %H:%M:%S') as process_end,
+                                    date_diff('hour', try_strptime(nullif("meta_collection-time", ' '), '%Y-%m-%d %H:%M:%S'), try_strptime(nullif("meta_process-end-time", ' '), '%Y-%m-%d %H:%M:%S')) as duration,
+                                from sample s
+                                join participant p
+                                on p.participant_id = s.participant_id
+                                where s.type = 'blood'
+                            ) select * from durations where duration < 100 and duration > 0
+                        `}
+                        plot={(data, { width }) =>
+                            Plot.plot({
+                                y: { grid: true, padding: 5, label: 'duration(hrs)' },
+                                x: { grid: true, padding: 5 },
+                                width: width,
+                                height: 400,
+                                marginTop: 20,
+                                marginRight: 20,
+                                marginBottom: 30,
+
+                                marginLeft: 40,
+                                marks: [
+                                    Plot.ruleY([24, 48, 72], { stroke: '#ff725c' }),
+                                    Plot.dot(data, {
+                                        x: 'collection',
+                                        y: 'duration',
+                                        stroke: null,
+                                        fill: '#4269d0',
+                                        fillOpacity: 0.5,
+                                        channels: { process_end: 'process_end' },
+                                        tip: true,
+                                    }),
+                                ],
+                            })
+                        }
+                    />
+                </Box>
+                <Box width={'40%'}>
+                    <PlotFromQueryCard
+                        title="Processing time buckets"
+                        description="Count of participants with their samples processed in each bucket"
+                        project="ourdna"
+                        query={`
+                            with durations as (
+                                select
+                                    s.participant_id,
+                                    try_strptime(nullif("meta_collection-time", ' '), '%Y-%m-%d %H:%M:%S') as collection,
+                                    try_strptime(nullif("meta_process-end-time", ' '), '%Y-%m-%d %H:%M:%S') as process_end,
+                                    date_diff('hour', try_strptime(nullif("meta_collection-time", ' '), '%Y-%m-%d %H:%M:%S'), try_strptime(nullif("meta_process-end-time", ' '), '%Y-%m-%d %H:%M:%S')) as duration,
+                                from sample s
+                                join participant p
+                                on p.participant_id = s.participant_id
+                                where s.type = 'blood'
+                            ) select
+                                count(distinct participant_id) as count,
+                                CASE
+                                    WHEN duration < 24 THEN '0-24 hours'
+                                    WHEN duration >= 24 AND duration < 30 THEN '24-30 hours'
+                                    WHEN duration >= 30 AND duration < 33 THEN '30-33 hours'
+                                    WHEN duration >= 33 AND duration < 48 THEN '33-48 hours'
+                                    WHEN duration >= 48 AND duration < 72 THEN '48-72 hours'
+                                    ELSE '72+ hours'
+                                END AS duration
+                                
+                            from durations group by 2 order by 2
+                        `}
+                        plot={(data, { width }) =>
+                            Plot.plot({
+                                marginLeft: 100,
+                                inset: 10,
+                                height: 410,
+                                color: {
+                                    scheme: 'RdYlGn',
+                                    reverse: true,
+                                },
+                                width,
+                                marks: [
+                                    Plot.barX(data, {
+                                        y: 'duration',
+                                        x: 'count',
+                                        tip: true,
+                                        fill: 'duration',
+                                    }),
+                                ],
+                            })
+                        }
+                    />
+                </Box>
+            </Box>
+
+            <Box display={'flex'} gap={2} m={2}>
+                <Box width={'100%'}>
+                    <TableFromQueryCard
+                        project={'ourdna'}
+                        title="All sample processing times"
+                        query={`
+                            select
+                                s.participant_id,
+                                s.sample_id as sample_id,
+                                try_strptime(nullif("meta_collection-time", ' '), '%Y-%m-%d %H:%M:%S') as collection,
+                                try_strptime(nullif("meta_process-end-time", ' '), '%Y-%m-%d %H:%M:%S') as process_end,
+                                date_diff('hour', try_strptime(nullif("meta_collection-time", ' '), '%Y-%m-%d %H:%M:%S'), try_strptime(nullif("meta_process-end-time", ' '), '%Y-%m-%d %H:%M:%S')) as "duration (hrs)"
+                            from sample s
+                            join participant p
+                            on p.participant_id = s.participant_id
+                            and type = 'blood'
+                        `}
+                        height={400}
+                    />
+                </Box>
+            </Box>
+
+            <Box m={2}>
+                <Typography fontWeight={'bold'} fontSize={26}>
+                    Demographics
+                </Typography>
+            </Box>
+
+            <Box display={'flex'} gap={2} m={2}>
+                <Box width={'25%'}>
+                    <MetricFromQueryCard
+                        title="Ratio of reported sex"
+                        subtitle="For participants who have reported"
+                        description="This chart shows the ratio of participants that have responded by reporting their sex"
+                        project="ourdna"
+                        query={`
+                            select
+                                count(*) filter (reported_sex = 1) as male,
+                                count(*) filter (reported_sex = 2) as female
+                            from participant
+                        `}
+                    />
+                </Box>
+                <Box width={'75%'}>
+                    <PlotFromQueryCard
+                        project="ourdna"
+                        title={'Participant count by ancestry over time'}
+                        query={`
+                        with all_ancestries as (
+                            select
+                                p.participant_id,
+                                "meta_collection-time" as collection_time,
+                                unnest(p."meta_ancestry-participant-ancestry") as ancestry
+                            from participant p
+                            join sample s
+                            on s.participant_id = p.participant_id
+                            where collection_time is not null
+                            and collection_time != ' '
+                        ), counts_by_week as (
+                            select
+                                coalesce(count(distinct participant_id), 0) as participants,
+                                date_trunc(
+                                    'week',
+                                    try_strptime(
+                                        nullif(
+                                            collection_time,
+                                            ' '
+                                        ),
+                                        '%Y-%m-%d %H:%M:%S'
+                                    )
+                                ) as week,
+                                ancestry
+                            from all_ancestries p
+                            group by week, ancestry
+                        ), weeks as (
+                            select
+                                unnest(generate_series(min(week), max(week), interval '1 week')) as week
+                            from
+                            counts_by_week
+                        ), ancestries as (
+                            select distinct ancestry from counts_by_week
+                        ), filled as (
+                            select
+                                coalesce(r.participants, 0) as participants,
+                                strftime(w.week, '%Y-%m-%d') as week,
+                                a.ancestry,
+                                
+                            from weeks w
+                            join ancestries a on true
+                            left join counts_by_week r
+                            on r.week = w.week
+                            and r.ancestry = a.ancestry
+                            order by 2, 3
+                        ) select
+                            (SUM(participants) over (PARTITION BY ancestry  ORDER BY week ROWS BETWEEN UNBOUNDED PRECEDING AND CURRENT ROW)) as count,
+                            ancestry,
+                            week
+                        from filled
+
+                    `}
+                        plot={(data, { width }) =>
+                            Plot.plot({
+                                marginLeft: 40,
+                                inset: 10,
+                                width: width,
+                                height: 400,
+                                y: {
+                                    grid: true,
+                                    label: 'Participants',
+                                },
+                                x: {
+                                    type: 'time',
+                                },
+                                marks: [
+                                    Plot.areaY(data, {
+                                        x: 'week',
+                                        y: 'count',
+                                        fill: 'ancestry',
+                                        tip: true,
+                                        order: 'sum',
+                                    }),
+                                    Plot.ruleY([0]),
+                                ],
+                            })
+                        }
+                    />
+                </Box>
+            </Box>
+        </Box>
+    )
+}
diff --git a/web/src/pages/report/chart/MetricFromQuery.tsx b/web/src/pages/report/chart/MetricFromQuery.tsx
new file mode 100644
index 000000000..4758cd6f8
--- /dev/null
+++ b/web/src/pages/report/chart/MetricFromQuery.tsx
@@ -0,0 +1,66 @@
+import { Box, Card, CardContent, Divider, Typography } from '@mui/material'
+import CircularProgress from '@mui/material/CircularProgress'
+import { fromArrow } from 'arquero'
+import { ArrowTable } from 'arquero/dist/types/format/types'
+import { Fragment, ReactChild } from 'react'
+import { useProjectDbQuery } from '../data/projectDatabase'
+
+type Props = {
+    project: string
+    query: string
+    title?: ReactChild
+    subtitle?: ReactChild
+    description?: ReactChild
+}
+
+export function MetricFromQueryCard(props: Props) {
+    const { project, query } = props
+    const result = useProjectDbQuery(project, query)
+
+    const data = result && result.status === 'success' ? result.data : undefined
+
+    if (!data || !result || result.status === 'loading') return <CircularProgress />
+
+    const table = fromArrow(data as ArrowTable)
+
+    const columns = table.columnNames()
+
+    return (
+        <Card sx={{ position: 'relative' }}>
+            <CardContent>
+                {(props.title || props.subtitle) && (
+                    <Box mb={2}>
+                        {props.title && (
+                            <Typography fontWeight={'bold'} fontSize={16}>
+                                {props.title}
+                            </Typography>
+                        )}
+                        {props.subtitle && <Typography fontSize={14}>{props.subtitle}</Typography>}
+                    </Box>
+                )}
+                <Box pt={props.title || props.subtitle ? 0 : 4}>
+                    <Box display={'flex'} gap={2}>
+                        {columns.map((col, index) => (
+                            <Fragment key={col}>
+                                {index !== 0 && <Divider orientation="vertical" flexItem />}
+                                <Box>
+                                    <Box>
+                                        <Typography fontSize={12}>{col}</Typography>
+                                    </Box>
+                                    <Box>
+                                        <Typography fontSize={40}>{table.get(col, 0)}</Typography>
+                                    </Box>
+                                </Box>
+                            </Fragment>
+                        ))}
+                    </Box>
+                </Box>
+                {props.description && (
+                    <Box mt={2}>
+                        <Typography fontSize={12}>{props.description}</Typography>
+                    </Box>
+                )}
+            </CardContent>
+        </Card>
+    )
+}
diff --git a/web/src/pages/report/chart/PlotFromQuery.tsx b/web/src/pages/report/chart/PlotFromQuery.tsx
new file mode 100644
index 000000000..5efc615a4
--- /dev/null
+++ b/web/src/pages/report/chart/PlotFromQuery.tsx
@@ -0,0 +1,148 @@
+import OpenInFullIcon from '@mui/icons-material/OpenInFull'
+import TableChartIcon from '@mui/icons-material/TableChart'
+import {
+    Alert,
+    Box,
+    Card,
+    CardActions,
+    CardContent,
+    CircularProgress,
+    IconButton,
+    Modal,
+    Tooltip,
+    Typography,
+} from '@mui/material'
+import * as Plot from '@observablehq/plot'
+import { Table, TypeMap } from 'apache-arrow'
+import { ReactChild, useEffect, useRef, useState } from 'react'
+import { useMeasure } from 'react-use'
+import { useProjectDbQuery } from '../data/projectDatabase'
+import { TableFromQuery } from './TableFromQuery'
+
+type PlotOptions = {
+    width: number
+}
+
+type PlotInputFunc = (
+    data: Table<TypeMap>,
+    options: PlotOptions
+) => (HTMLElement | SVGSVGElement) & Plot.Plot
+
+type Props = {
+    project: string
+    query: string
+    title?: ReactChild
+    subtitle?: ReactChild
+    description?: ReactChild
+    plot: PlotInputFunc
+}
+
+const modalStyle = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    maxHeight: '100vh',
+    overflow: 'hidden',
+    width: 'calc(100% - 50px)',
+    bgcolor: 'background.paper',
+    boxShadow: 24,
+    p: 4,
+}
+
+export function PlotFromQueryCard(props: Props) {
+    const [showingTable, setShowingTable] = useState(false)
+    const [expanded, setExpanded] = useState(false)
+
+    return (
+        <Card sx={{ position: 'relative' }}>
+            <CardActions
+                disableSpacing
+                sx={{
+                    position: 'absolute',
+                    right: 0,
+                }}
+            >
+                <Tooltip title="View data as table" arrow>
+                    <IconButton onClick={() => setShowingTable(true)}>
+                        <TableChartIcon fontSize="small" />
+                    </IconButton>
+                </Tooltip>
+                <Tooltip title="Expand chart" arrow>
+                    <IconButton onClick={() => setExpanded(true)}>
+                        <OpenInFullIcon fontSize="small" />
+                    </IconButton>
+                </Tooltip>
+            </CardActions>
+            <CardContent>
+                <PlotFromQuery {...props} />
+            </CardContent>
+
+            <Modal open={expanded} onClose={() => setExpanded(false)}>
+                <Box sx={modalStyle}>
+                    <PlotFromQuery {...props} />
+                </Box>
+            </Modal>
+
+            <Modal open={showingTable} onClose={() => setShowingTable(false)}>
+                <Box sx={modalStyle}>
+                    <div
+                        style={{
+                            display: 'flex',
+                            maxHeight: '70vh',
+                            flexDirection: 'column',
+                        }}
+                    >
+                        <TableFromQuery query={props.query} project={props.project} />
+                    </div>
+                </Box>
+            </Modal>
+        </Card>
+    )
+}
+
+export function PlotFromQuery(props: Props) {
+    const containerRef = useRef<HTMLDivElement>(null)
+
+    const { project, query, plot } = props
+    const result = useProjectDbQuery(project, query)
+
+    const [measureRef, { width }] = useMeasure<HTMLDivElement>()
+
+    const data = result && result.status === 'success' ? result.data : undefined
+
+    useEffect(() => {
+        if (!data) return
+        const _plot = plot(data, { width })
+        containerRef.current?.append(_plot)
+        return () => _plot.remove()
+    }, [data, width, plot])
+
+    return (
+        <Box>
+            {(props.title || props.subtitle) && (
+                <Box mb={2}>
+                    {props.title && (
+                        <Typography fontWeight={'bold'} fontSize={16}>
+                            {props.title}
+                        </Typography>
+                    )}
+                    {props.subtitle && <Typography fontSize={14}>{props.subtitle}</Typography>}
+                </Box>
+            )}
+
+            <div ref={measureRef} style={{ width: '100%', height: 0 }} />
+            {!result || (result.status === 'loading' && <CircularProgress />)}
+            <div ref={containerRef} />
+
+            {result && result.status === 'error' && (
+                <Alert severity="error">{result.errorMessage}</Alert>
+            )}
+            {props.description && (
+                <Box mt={2}>
+                    <Typography fontSize={12}>{props.description}</Typography>
+                </Box>
+            )}
+        </Box>
+    )
+}
diff --git a/web/src/pages/report/chart/TableFromQuery.tsx b/web/src/pages/report/chart/TableFromQuery.tsx
index e8d432ddf..2282b9aad 100644
--- a/web/src/pages/report/chart/TableFromQuery.tsx
+++ b/web/src/pages/report/chart/TableFromQuery.tsx
@@ -1,4 +1,15 @@
-import { Alert, Box } from '@mui/material'
+import OpenInFullIcon from '@mui/icons-material/OpenInFull'
+import {
+    Alert,
+    Box,
+    Card,
+    CardActions,
+    CardContent,
+    IconButton,
+    Modal,
+    Tooltip,
+    Typography,
+} from '@mui/material'
 import CircularProgress from '@mui/material/CircularProgress'
 import {
     DataGrid,
@@ -9,6 +20,7 @@ import {
 } from '@mui/x-data-grid'
 import { fromArrow } from 'arquero'
 import { ArrowTable } from 'arquero/dist/types/format/types'
+import { ReactChild, useState } from 'react'
 import { Link } from 'react-router-dom'
 import { useProjectDbQuery } from '../data/projectDatabase'
 
@@ -18,6 +30,84 @@ type TableProps = {
     showToolbar?: boolean
 }
 
+type TableCardProps = TableProps & {
+    height: number | string
+    title?: ReactChild
+    subtitle?: ReactChild
+    description?: ReactChild
+}
+
+const modalStyle = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    maxHeight: '100vh',
+    overflow: 'hidden',
+    width: 'calc(100% - 50px)',
+    bgcolor: 'background.paper',
+    boxShadow: 24,
+    p: 4,
+}
+
+export function TableFromQueryCard(props: TableCardProps) {
+    const [expanded, setExpanded] = useState(false)
+
+    return (
+        <Card sx={{ position: 'relative' }}>
+            <CardActions
+                disableSpacing
+                sx={{
+                    position: 'absolute',
+                    right: 0,
+                }}
+            >
+                <Tooltip title="Expand table" arrow>
+                    <IconButton onClick={() => setExpanded(true)}>
+                        <OpenInFullIcon fontSize="small" />
+                    </IconButton>
+                </Tooltip>
+            </CardActions>
+            <CardContent>
+                {(props.title || props.subtitle) && (
+                    <Box mb={2}>
+                        {props.title && (
+                            <Typography fontWeight={'bold'} fontSize={16}>
+                                {props.title}
+                            </Typography>
+                        )}
+                        {props.subtitle && <Typography fontSize={14}>{props.subtitle}</Typography>}
+                    </Box>
+                )}
+                <Box pt={props.title || props.subtitle ? 0 : 4}>
+                    <Box display={'flex'} flexDirection={'column'} height={props.height}>
+                        <TableFromQuery {...props} />
+                    </Box>
+                </Box>
+                {props.description && (
+                    <Box mt={2}>
+                        <Typography fontSize={12}>{props.description}</Typography>
+                    </Box>
+                )}
+            </CardContent>
+
+            <Modal open={expanded} onClose={() => setExpanded(false)}>
+                <Box sx={modalStyle}>
+                    <div
+                        style={{
+                            display: 'flex',
+                            height: '70vh',
+                            flexDirection: 'column',
+                        }}
+                    >
+                        <TableFromQuery {...props} />
+                    </div>
+                </Box>
+            </Modal>
+        </Card>
+    )
+}
+
 // Provide custom rendering for some known columns, this allows adding links to the table
 const knownColumnMap: Record<string, Omit<GridColDef, 'field'>> = {
     participant_id: {

From feed57bc3318ba814f424fb85d034730f8546084 Mon Sep 17 00:00:00 2001
From: Dan Coates <dan.coates@populationgenomics.org.au>
Date: Wed, 8 Jan 2025 16:47:59 +1100
Subject: [PATCH 02/12] add link to view/edit chart sql

---
 .../pages/report/chart/MetricFromQuery.tsx    | 29 ++++++++++++++++++-
 web/src/pages/report/chart/PlotFromQuery.tsx  |  9 ++++++
 web/src/pages/report/chart/TableFromQuery.tsx |  9 ++++++
 3 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/web/src/pages/report/chart/MetricFromQuery.tsx b/web/src/pages/report/chart/MetricFromQuery.tsx
index 4758cd6f8..5428ceeda 100644
--- a/web/src/pages/report/chart/MetricFromQuery.tsx
+++ b/web/src/pages/report/chart/MetricFromQuery.tsx
@@ -1,4 +1,15 @@
-import { Box, Card, CardContent, Divider, Typography } from '@mui/material'
+import CodeIcon from '@mui/icons-material/Code'
+
+import {
+    Box,
+    Card,
+    CardActions,
+    CardContent,
+    Divider,
+    IconButton,
+    Tooltip,
+    Typography,
+} from '@mui/material'
 import CircularProgress from '@mui/material/CircularProgress'
 import { fromArrow } from 'arquero'
 import { ArrowTable } from 'arquero/dist/types/format/types'
@@ -27,6 +38,22 @@ export function MetricFromQueryCard(props: Props) {
 
     return (
         <Card sx={{ position: 'relative' }}>
+            <CardActions
+                disableSpacing
+                sx={{
+                    position: 'absolute',
+                    right: 0,
+                }}
+            >
+                <Tooltip title="View/Edit SQL" arrow>
+                    <IconButton
+                        target={'_blank'}
+                        href={`/project/${props.project}/query?query=${encodeURIComponent(props.query)}`}
+                    >
+                        <CodeIcon fontSize="small" />
+                    </IconButton>
+                </Tooltip>
+            </CardActions>
             <CardContent>
                 {(props.title || props.subtitle) && (
                     <Box mb={2}>
diff --git a/web/src/pages/report/chart/PlotFromQuery.tsx b/web/src/pages/report/chart/PlotFromQuery.tsx
index 5efc615a4..caeab2e98 100644
--- a/web/src/pages/report/chart/PlotFromQuery.tsx
+++ b/web/src/pages/report/chart/PlotFromQuery.tsx
@@ -1,3 +1,4 @@
+import CodeIcon from '@mui/icons-material/Code'
 import OpenInFullIcon from '@mui/icons-material/OpenInFull'
 import TableChartIcon from '@mui/icons-material/TableChart'
 import {
@@ -63,6 +64,14 @@ export function PlotFromQueryCard(props: Props) {
                     right: 0,
                 }}
             >
+                <Tooltip title="View/Edit SQL" arrow>
+                    <IconButton
+                        target={'_blank'}
+                        href={`/project/${props.project}/query?query=${encodeURIComponent(props.query)}`}
+                    >
+                        <CodeIcon fontSize="small" />
+                    </IconButton>
+                </Tooltip>
                 <Tooltip title="View data as table" arrow>
                     <IconButton onClick={() => setShowingTable(true)}>
                         <TableChartIcon fontSize="small" />
diff --git a/web/src/pages/report/chart/TableFromQuery.tsx b/web/src/pages/report/chart/TableFromQuery.tsx
index 2282b9aad..a43955cc9 100644
--- a/web/src/pages/report/chart/TableFromQuery.tsx
+++ b/web/src/pages/report/chart/TableFromQuery.tsx
@@ -1,3 +1,4 @@
+import CodeIcon from '@mui/icons-material/Code'
 import OpenInFullIcon from '@mui/icons-material/OpenInFull'
 import {
     Alert,
@@ -62,6 +63,14 @@ export function TableFromQueryCard(props: TableCardProps) {
                     right: 0,
                 }}
             >
+                <Tooltip title="View/Edit SQL" arrow>
+                    <IconButton
+                        target={'_blank'}
+                        href={`/project/${props.project}/query?query=${encodeURIComponent(props.query)}`}
+                    >
+                        <CodeIcon fontSize="small" />
+                    </IconButton>
+                </Tooltip>
                 <Tooltip title="Expand table" arrow>
                     <IconButton onClick={() => setExpanded(true)}>
                         <OpenInFullIcon fontSize="small" />

From 713c29f8a783572d38e08f29107ad64d9a98a0b4 Mon Sep 17 00:00:00 2001
From: Dan Coates <dan.coates@populationgenomics.org.au>
Date: Thu, 9 Jan 2025 14:46:39 +1100
Subject: [PATCH 03/12] memoise table rendering

---
 web/src/pages/report/OurDnaDashboard.tsx      |  4 ++--
 web/src/pages/report/SqlQueryUI.tsx           | 10 ++--------
 web/src/pages/report/chart/TableFromQuery.tsx | 18 +++++++++++++++---
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/web/src/pages/report/OurDnaDashboard.tsx b/web/src/pages/report/OurDnaDashboard.tsx
index e77f4434f..58f17cec3 100644
--- a/web/src/pages/report/OurDnaDashboard.tsx
+++ b/web/src/pages/report/OurDnaDashboard.tsx
@@ -245,8 +245,8 @@ export default function OurDnaDashboard() {
                             select
                                 s.participant_id,
                                 s.sample_id as sample_id,
-                                try_strptime(nullif("meta_collection-time", ' '), '%Y-%m-%d %H:%M:%S') as collection,
-                                try_strptime(nullif("meta_process-end-time", ' '), '%Y-%m-%d %H:%M:%S') as process_end,
+                                "meta_collection-time" as collection,
+                                "meta_process-end-time" as process_end,
                                 date_diff('hour', try_strptime(nullif("meta_collection-time", ' '), '%Y-%m-%d %H:%M:%S'), try_strptime(nullif("meta_process-end-time", ' '), '%Y-%m-%d %H:%M:%S')) as "duration (hrs)"
                             from sample s
                             join participant p
diff --git a/web/src/pages/report/SqlQueryUI.tsx b/web/src/pages/report/SqlQueryUI.tsx
index b41b016f4..c24a7f57a 100644
--- a/web/src/pages/report/SqlQueryUI.tsx
+++ b/web/src/pages/report/SqlQueryUI.tsx
@@ -24,7 +24,7 @@ import {
 } from '@mui/material'
 import { debounce } from 'lodash'
 import { editor, KeyCode, KeyMod } from 'monaco-editor'
-import { Fragment, memo, useCallback, useContext, useEffect, useRef, useState } from 'react'
+import { Fragment, useCallback, useContext, useEffect, useRef, useState } from 'react'
 import { Link, useNavigate, useParams } from 'react-router-dom'
 import { ThemeContext } from '../../shared/components/ThemeProvider'
 import { TableFromQuery } from './chart/TableFromQuery'
@@ -32,12 +32,6 @@ import { useProjectDbSetup } from './data/projectDatabase'
 
 const SIDEBAR_WIDTH = 250
 
-// Memoized version of the result table to avoid rerenders, this is very important for performance
-// without this each keystroke takes forever to render
-const QueryResultTable = memo(function QueryResultTable(props: { project: string; query: string }) {
-    return <TableFromQuery project={props.project} query={props.query} showToolbar />
-})
-
 // This fn is debounced to try and limit the amount of history entries.
 const persistQueryToUrl = debounce(function persistQueryToUrl(query: string) {
     const url = new URL(window.location.href)
@@ -429,7 +423,7 @@ export default function SqlQueryUi() {
 
                     <Box display={'flex'} flex={1} flexDirection={'column'} p={2} height={'80%'}>
                         {projectName && (selectedTableQuery || tableQueryValue) && (
-                            <QueryResultTable
+                            <TableFromQuery
                                 project={projectName}
                                 query={selectedTableQuery || tableQueryValue}
                             />
diff --git a/web/src/pages/report/chart/TableFromQuery.tsx b/web/src/pages/report/chart/TableFromQuery.tsx
index a43955cc9..90919d5cf 100644
--- a/web/src/pages/report/chart/TableFromQuery.tsx
+++ b/web/src/pages/report/chart/TableFromQuery.tsx
@@ -21,7 +21,7 @@ import {
 } from '@mui/x-data-grid'
 import { fromArrow } from 'arquero'
 import { ArrowTable } from 'arquero/dist/types/format/types'
-import { ReactChild, useState } from 'react'
+import { memo, ReactChild, useState } from 'react'
 import { Link } from 'react-router-dom'
 import { useProjectDbQuery } from '../data/projectDatabase'
 
@@ -137,7 +137,19 @@ function CustomTableToolbar() {
     )
 }
 
-export function TableFromQuery(props: TableProps) {
+// Memoized version of the result table to avoid rerenders, they can be very expensive
+// if the result set is large
+export const TableFromQuery = memo(function TableFromQuery(props: TableProps) {
+    return (
+        <TableFromQueryUnmemoized
+            project={props.project}
+            query={props.query}
+            showToolbar={props.showToolbar}
+        />
+    )
+})
+
+function TableFromQueryUnmemoized(props: TableProps) {
     const { project, query, showToolbar } = props
     const result = useProjectDbQuery(project, query)
 
@@ -149,7 +161,7 @@ export function TableFromQuery(props: TableProps) {
 
     if (!data || !result || result.status === 'loading') return <CircularProgress />
 
-    const table = fromArrow(data as ArrowTable)
+    const table = fromArrow(data as ArrowTable, { useDate: true })
 
     const columns = table.columnNames().map(
         (colName): GridColDef => ({

From 3db74e819a8fa7dc1af894c7133c78add60e8606 Mon Sep 17 00:00:00 2001
From: Dan Coates <dan.coates@populationgenomics.org.au>
Date: Fri, 10 Jan 2025 15:00:20 +1100
Subject: [PATCH 04/12] allow for constructing a query from multiple query
 parts

---
 web/package-lock.json                        |  16 ++-
 web/package.json                             |   2 +
 web/src/pages/report/OurDnaDashboard.tsx     | 130 +++++++++++--------
 web/src/pages/report/chart/PlotFromQuery.tsx |  23 +++-
 web/src/pages/report/data/combineQueries.ts  |  49 +++++++
 5 files changed, 158 insertions(+), 62 deletions(-)
 create mode 100644 web/src/pages/report/data/combineQueries.ts

diff --git a/web/package-lock.json b/web/package-lock.json
index 24fcfe4b6..edd2ad7a2 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "metamist",
-    "version": "7.4.3",
+    "version": "7.6.0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "metamist",
-            "version": "7.4.3",
+            "version": "7.6.0",
             "dependencies": {
                 "@apollo/client": "^3.11.5",
                 "@duckdb/duckdb-wasm": "^1.29.0",
@@ -19,6 +19,7 @@
                 "@observablehq/plot": "^0.6.16",
                 "arquero": "^7.2.0",
                 "axios": "^0.24.0",
+                "common-tags": "^1.8.2",
                 "d3": "^7.9.0",
                 "d3-scale-chromatic": "^3.1.0",
                 "graphql": "^16.6.0",
@@ -48,6 +49,7 @@
                 "@testing-library/jest-dom": "^5.15.0",
                 "@testing-library/react": "^11.2.7",
                 "@testing-library/user-event": "^12.8.3",
+                "@types/common-tags": "^1.8.4",
                 "@types/d3": "^7.4.3",
                 "@types/jest": "^26.0.24",
                 "@types/lodash": "^4.14.178",
@@ -3839,6 +3841,12 @@
             "resolved": "https://registry.npmjs.org/@types/command-line-usage/-/command-line-usage-5.0.4.tgz",
             "integrity": "sha512-BwR5KP3Es/CSht0xqBcUXS3qCAUVXwpRKsV2+arxeb65atasuXG9LykC9Ab10Cw3s2raH92ZqOeILaQbsB2ACg=="
         },
+        "node_modules/@types/common-tags": {
+            "version": "1.8.4",
+            "resolved": "https://registry.npmjs.org/@types/common-tags/-/common-tags-1.8.4.tgz",
+            "integrity": "sha512-S+1hLDJPjWNDhcGxsxEbepzaxWqURP/o+3cP4aa2w7yBXgdcmKGQtZzP8JbyfOd0m+33nh+8+kvxYE2UJtBDkg==",
+            "dev": true
+        },
         "node_modules/@types/d3": {
             "version": "7.4.3",
             "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
@@ -5626,8 +5634,8 @@
         },
         "node_modules/common-tags": {
             "version": "1.8.2",
-            "dev": true,
-            "license": "MIT",
+            "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.2.tgz",
+            "integrity": "sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==",
             "engines": {
                 "node": ">=4.0.0"
             }
diff --git a/web/package.json b/web/package.json
index b9d7c5edd..d0cb19f14 100644
--- a/web/package.json
+++ b/web/package.json
@@ -14,6 +14,7 @@
         "@observablehq/plot": "^0.6.16",
         "arquero": "^7.2.0",
         "axios": "^0.24.0",
+        "common-tags": "^1.8.2",
         "d3": "^7.9.0",
         "d3-scale-chromatic": "^3.1.0",
         "graphql": "^16.6.0",
@@ -71,6 +72,7 @@
         "@testing-library/jest-dom": "^5.15.0",
         "@testing-library/react": "^11.2.7",
         "@testing-library/user-event": "^12.8.3",
+        "@types/common-tags": "^1.8.4",
         "@types/d3": "^7.4.3",
         "@types/jest": "^26.0.24",
         "@types/lodash": "^4.14.178",
diff --git a/web/src/pages/report/OurDnaDashboard.tsx b/web/src/pages/report/OurDnaDashboard.tsx
index 58f17cec3..880a04cd5 100644
--- a/web/src/pages/report/OurDnaDashboard.tsx
+++ b/web/src/pages/report/OurDnaDashboard.tsx
@@ -283,59 +283,83 @@ export default function OurDnaDashboard() {
                     <PlotFromQueryCard
                         project="ourdna"
                         title={'Participant count by ancestry over time'}
-                        query={`
-                        with all_ancestries as (
-                            select
-                                p.participant_id,
-                                "meta_collection-time" as collection_time,
-                                unnest(p."meta_ancestry-participant-ancestry") as ancestry
-                            from participant p
-                            join sample s
-                            on s.participant_id = p.participant_id
-                            where collection_time is not null
-                            and collection_time != ' '
-                        ), counts_by_week as (
-                            select
-                                coalesce(count(distinct participant_id), 0) as participants,
-                                date_trunc(
-                                    'week',
-                                    try_strptime(
-                                        nullif(
-                                            collection_time,
-                                            ' '
-                                        ),
-                                        '%Y-%m-%d %H:%M:%S'
-                                    )
-                                ) as week,
-                                ancestry
-                            from all_ancestries p
-                            group by week, ancestry
-                        ), weeks as (
-                            select
-                                unnest(generate_series(min(week), max(week), interval '1 week')) as week
-                            from
-                            counts_by_week
-                        ), ancestries as (
-                            select distinct ancestry from counts_by_week
-                        ), filled as (
-                            select
-                                coalesce(r.participants, 0) as participants,
-                                strftime(w.week, '%Y-%m-%d') as week,
-                                a.ancestry,
-                                
-                            from weeks w
-                            join ancestries a on true
-                            left join counts_by_week r
-                            on r.week = w.week
-                            and r.ancestry = a.ancestry
-                            order by 2, 3
-                        ) select
-                            (SUM(participants) over (PARTITION BY ancestry  ORDER BY week ROWS BETWEEN UNBOUNDED PRECEDING AND CURRENT ROW)) as count,
-                            ancestry,
-                            week
-                        from filled
-
-                    `}
+                        queries={[
+                            {
+                                name: 'all_ancestries',
+                                query: `
+                                    select
+                                        p.participant_id,
+                                        "meta_collection-time" as collection_time,
+                                        unnest(p."meta_ancestry-participant-ancestry") as ancestry
+                                    from participant p
+                                    join sample s
+                                    on s.participant_id = p.participant_id
+                                    where collection_time is not null
+                                    and collection_time != ' '
+                                `,
+                            },
+                            {
+                                name: 'counts_by_week',
+                                query: `
+                                    select
+                                        coalesce(count(distinct participant_id), 0) as participants,
+                                        date_trunc(
+                                            'week',
+                                            try_strptime(
+                                                nullif(
+                                                    collection_time,
+                                                    ' '
+                                                ),
+                                                '%Y-%m-%d %H:%M:%S'
+                                            )
+                                        ) as week,
+                                        ancestry
+                                    from all_ancestries p
+                                    group by week, ancestry
+                                `,
+                            },
+                            {
+                                name: 'weeks',
+                                query: `
+                                    select
+                                        unnest(generate_series(min(week), max(week), interval '1 week')) as week
+                                    from
+                                    counts_by_week
+                                `,
+                            },
+                            {
+                                name: 'ancestries',
+                                query: `
+                                    select distinct ancestry from counts_by_week
+                                `,
+                            },
+                            {
+                                name: 'filled',
+                                query: `
+                                    select
+                                        coalesce(r.participants, 0) as participants,
+                                        strftime(w.week, '%Y-%m-%d') as week,
+                                        a.ancestry,
+                                        
+                                    from weeks w
+                                    join ancestries a on true
+                                    left join counts_by_week r
+                                    on r.week = w.week
+                                    and r.ancestry = a.ancestry
+                                    order by 2, 3
+                                `,
+                            },
+                            {
+                                name: 'result',
+                                query: `
+                                    select
+                                        (SUM(participants) over (PARTITION BY ancestry  ORDER BY week ROWS BETWEEN UNBOUNDED PRECEDING AND CURRENT ROW)) as count,
+                                        ancestry,
+                                        week
+                                    from filled
+                                `,
+                            },
+                        ]}
                         plot={(data, { width }) =>
                             Plot.plot({
                                 marginLeft: 40,
diff --git a/web/src/pages/report/chart/PlotFromQuery.tsx b/web/src/pages/report/chart/PlotFromQuery.tsx
index caeab2e98..943c8cf48 100644
--- a/web/src/pages/report/chart/PlotFromQuery.tsx
+++ b/web/src/pages/report/chart/PlotFromQuery.tsx
@@ -15,8 +15,10 @@ import {
 } from '@mui/material'
 import * as Plot from '@observablehq/plot'
 import { Table, TypeMap } from 'apache-arrow'
+import { stripIndent } from 'common-tags'
 import { ReactChild, useEffect, useRef, useState } from 'react'
 import { useMeasure } from 'react-use'
+import combineQueries from '../data/combineQueries'
 import { useProjectDbQuery } from '../data/projectDatabase'
 import { TableFromQuery } from './TableFromQuery'
 
@@ -29,14 +31,21 @@ type PlotInputFunc = (
     options: PlotOptions
 ) => (HTMLElement | SVGSVGElement) & Plot.Plot
 
+type QueryProps =
+    | {
+          query: string
+      }
+    | {
+          queries: { name: string; query: string }[]
+      }
+
 type Props = {
     project: string
-    query: string
     title?: ReactChild
     subtitle?: ReactChild
     description?: ReactChild
     plot: PlotInputFunc
-}
+} & QueryProps
 
 const modalStyle = {
     position: 'absolute',
@@ -55,6 +64,8 @@ export function PlotFromQueryCard(props: Props) {
     const [showingTable, setShowingTable] = useState(false)
     const [expanded, setExpanded] = useState(false)
 
+    let query = 'query' in props ? stripIndent(props.query) : combineQueries(props.queries)
+
     return (
         <Card sx={{ position: 'relative' }}>
             <CardActions
@@ -67,7 +78,7 @@ export function PlotFromQueryCard(props: Props) {
                 <Tooltip title="View/Edit SQL" arrow>
                     <IconButton
                         target={'_blank'}
-                        href={`/project/${props.project}/query?query=${encodeURIComponent(props.query)}`}
+                        href={`/project/${props.project}/query?query=${encodeURIComponent(query)}`}
                     >
                         <CodeIcon fontSize="small" />
                     </IconButton>
@@ -102,7 +113,7 @@ export function PlotFromQueryCard(props: Props) {
                             flexDirection: 'column',
                         }}
                     >
-                        <TableFromQuery query={props.query} project={props.project} />
+                        <TableFromQuery query={query} project={props.project} />
                     </div>
                 </Box>
             </Modal>
@@ -113,7 +124,9 @@ export function PlotFromQueryCard(props: Props) {
 export function PlotFromQuery(props: Props) {
     const containerRef = useRef<HTMLDivElement>(null)
 
-    const { project, query, plot } = props
+    const { project, plot } = props
+
+    const query = 'query' in props ? stripIndent(props.query) : combineQueries(props.queries)
     const result = useProjectDbQuery(project, query)
 
     const [measureRef, { width }] = useMeasure<HTMLDivElement>()
diff --git a/web/src/pages/report/data/combineQueries.ts b/web/src/pages/report/data/combineQueries.ts
new file mode 100644
index 000000000..ab4b7d4a4
--- /dev/null
+++ b/web/src/pages/report/data/combineQueries.ts
@@ -0,0 +1,49 @@
+import { stripIndent } from 'common-tags'
+
+type Query = {
+    name: string
+    query: string
+}
+
+// Take a list of queries and combine them into a single query using CTEs
+// This allows viewing of steps that are used to arrive at a final aggregated query
+export default function combineQueries(queries: Query[]) {
+    const cleanQueries = queries.map((qq) => {
+        return {
+            ...qq,
+            // remove any trailing semicolons from the query, in case they were added accidentally
+            query: stripIndent(qq.query.replace(/;[\w\s]*$/g, '')),
+        }
+    })
+
+    const ctes = cleanQueries.slice(0, cleanQueries.length - 1).map((qq) => {
+        // To format the query nicely, need to indent each line by the same amount, but no way
+        // of knowing what that amount is, as it depends on the code formatting :/ so use a sentinel
+        // to represent the query, then check how indented it is and replace it with the real query
+        // while adding the correct indentation to each line (other than the first).
+        const querySentinel = `___QUERY_REPLACEMENT___`
+
+        const queryPlaceholder = stripIndent`
+            ${qq.name} AS (
+                ${querySentinel}
+            )
+        `
+
+        const matcher = new RegExp(`^(\\s*)${querySentinel}`, 'm')
+
+        const queryIndent = queryPlaceholder.match(matcher)?.[1] || ''
+
+        const indentedQuery = qq.query
+            .split('\n')
+            .map((line, index) => (index === 0 ? line : queryIndent + line))
+            .join('\n')
+
+        return queryPlaceholder.replace(querySentinel, indentedQuery)
+    })
+
+    const finalQuery = cleanQueries[cleanQueries.length - 1]
+
+    return stripIndent`WITH ${ctes.join(',\n')}
+${finalQuery.query}
+    `
+}

From e5a579c6ada38623344e9f70d31461b8159479e5 Mon Sep 17 00:00:00 2001
From: Dan Coates <dan.coates@populationgenomics.org.au>
Date: Tue, 14 Jan 2025 12:13:50 +1100
Subject: [PATCH 05/12] query updates

---
 web/src/pages/report/OurDnaDashboard.tsx      | 277 ++++++++++++++----
 web/src/pages/report/chart/TableFromQuery.tsx |  30 +-
 2 files changed, 231 insertions(+), 76 deletions(-)

diff --git a/web/src/pages/report/OurDnaDashboard.tsx b/web/src/pages/report/OurDnaDashboard.tsx
index 880a04cd5..3693d5705 100644
--- a/web/src/pages/report/OurDnaDashboard.tsx
+++ b/web/src/pages/report/OurDnaDashboard.tsx
@@ -3,7 +3,6 @@ import * as Plot from '@observablehq/plot'
 import { MetricFromQueryCard } from './chart/MetricFromQuery'
 import { PlotFromQueryCard } from './chart/PlotFromQuery'
 import { TableFromQueryCard } from './chart/TableFromQuery'
-import { useProjectDbQuery } from './data/projectDatabase'
 
 /*
 
@@ -22,20 +21,32 @@ other charts:
     - data quality
 
 */
-export default function OurDnaDashboard() {
-    const result = useProjectDbQuery(
-        'ourdna',
 
-        `
-        select * from participant limit 10
-        
+// Common queries:
+// queries that are used in multiple charts
 
-    `
-    )
-    if (result?.status === 'success') {
-        console.log(result.data.toArray().map((r) => r.toJSON()))
-    }
+// Query for processing times, this can be used for most visualistions
+// of processing time
+const PROCESS_DURATION_QUERY = `
+    select
+        s.sample_id,
+        cast(s.participant_id as string) as participant_id,
+        coalesce(s."meta_processing-site", 'Unknown') as processing_site,
+        
+        try_strptime(nullif("meta_collection-time", ' '), '%Y-%m-%d %H:%M:%S') as collection_time,
+        try_strptime(nullif("meta_process-end-time", ' '), '%Y-%m-%d %H:%M:%S') as process_end_time,
+        date_diff(
+            'hour',
+            try_strptime(nullif("meta_collection-time", ' '), '%Y-%m-%d %H:%M:%S'),
+            try_strptime(nullif("meta_process-end-time", ' '), '%Y-%m-%d %H:%M:%S')
+        ) as duration
+    from sample s
+    join participant p
+    on p.participant_id = s.participant_id
+    where s.type = 'blood'
+`
 
+export default function OurDnaDashboard() {
     return (
         <Box>
             <Box m={2}>
@@ -144,18 +155,18 @@ export default function OurDnaDashboard() {
                         title="Processing times for all samples"
                         description="This excludes any samples with > 100 hour processing times, and any that have missing or malformed collection or processing times"
                         project="ourdna"
-                        query={`
-                            with durations as (
-                                select
-                                    try_strptime(nullif("meta_collection-time", ' '), '%Y-%m-%d %H:%M:%S') as collection,
-                                    try_strptime(nullif("meta_process-end-time", ' '), '%Y-%m-%d %H:%M:%S') as process_end,
-                                    date_diff('hour', try_strptime(nullif("meta_collection-time", ' '), '%Y-%m-%d %H:%M:%S'), try_strptime(nullif("meta_process-end-time", ' '), '%Y-%m-%d %H:%M:%S')) as duration,
-                                from sample s
-                                join participant p
-                                on p.participant_id = s.participant_id
-                                where s.type = 'blood'
-                            ) select * from durations where duration < 100 and duration > 0
-                        `}
+                        queries={[
+                            {
+                                name: 'durations',
+                                query: PROCESS_DURATION_QUERY,
+                            },
+                            {
+                                name: 'result',
+                                query: `
+                                    select * from durations where duration < 100 and duration > 0
+                                `,
+                            },
+                        ]}
                         plot={(data, { width }) =>
                             Plot.plot({
                                 y: { grid: true, padding: 5, label: 'duration(hrs)' },
@@ -170,12 +181,16 @@ export default function OurDnaDashboard() {
                                 marks: [
                                     Plot.ruleY([24, 48, 72], { stroke: '#ff725c' }),
                                     Plot.dot(data, {
-                                        x: 'collection',
+                                        x: 'collection_time',
                                         y: 'duration',
                                         stroke: null,
                                         fill: '#4269d0',
                                         fillOpacity: 0.5,
-                                        channels: { process_end: 'process_end' },
+                                        channels: {
+                                            process_end: 'process_end_time',
+                                            sample_id: 'sample_id',
+                                            participant_id: 'participant_id',
+                                        },
                                         tip: true,
                                     }),
                                 ],
@@ -188,35 +203,29 @@ export default function OurDnaDashboard() {
                         title="Processing time buckets"
                         description="Count of participants with their samples processed in each bucket"
                         project="ourdna"
-                        query={`
-                            with durations as (
+                        queries={[
+                            { name: 'durations', query: PROCESS_DURATION_QUERY },
+                            {
+                                name: 'result',
+                                query: `
                                 select
-                                    s.participant_id,
-                                    try_strptime(nullif("meta_collection-time", ' '), '%Y-%m-%d %H:%M:%S') as collection,
-                                    try_strptime(nullif("meta_process-end-time", ' '), '%Y-%m-%d %H:%M:%S') as process_end,
-                                    date_diff('hour', try_strptime(nullif("meta_collection-time", ' '), '%Y-%m-%d %H:%M:%S'), try_strptime(nullif("meta_process-end-time", ' '), '%Y-%m-%d %H:%M:%S')) as duration,
-                                from sample s
-                                join participant p
-                                on p.participant_id = s.participant_id
-                                where s.type = 'blood'
-                            ) select
-                                count(distinct participant_id) as count,
-                                CASE
-                                    WHEN duration < 24 THEN '0-24 hours'
-                                    WHEN duration >= 24 AND duration < 30 THEN '24-30 hours'
-                                    WHEN duration >= 30 AND duration < 33 THEN '30-33 hours'
-                                    WHEN duration >= 33 AND duration < 48 THEN '33-48 hours'
-                                    WHEN duration >= 48 AND duration < 72 THEN '48-72 hours'
-                                    ELSE '72+ hours'
-                                END AS duration
-                                
-                            from durations group by 2 order by 2
-                        `}
+                                    count(distinct participant_id) as count,
+                                    CASE
+                                        WHEN duration < 24 THEN '0-24 hours'
+                                        WHEN duration >= 24 AND duration < 36 THEN '24-36 hours'
+                                        WHEN duration >= 36 AND duration < 48 THEN '36-48 hours'
+                                        WHEN duration >= 48 AND duration < 72 THEN '48-72 hours'
+                                        ELSE '72+ hours'
+                                    END AS duration
+                                from durations group by 2 order by 2    
+                            `,
+                            },
+                        ]}
                         plot={(data, { width }) =>
                             Plot.plot({
                                 marginLeft: 100,
                                 inset: 10,
-                                height: 410,
+                                height: 400,
                                 color: {
                                     scheme: 'RdYlGn',
                                     reverse: true,
@@ -235,25 +244,79 @@ export default function OurDnaDashboard() {
                     />
                 </Box>
             </Box>
-
             <Box display={'flex'} gap={2} m={2}>
-                <Box width={'100%'}>
+                <Box width={'50%'}>
+                    <PlotFromQueryCard
+                        title="Processing time by site"
+                        description="Count of participants processed in each time bucket by processing site"
+                        project="ourdna"
+                        queries={[
+                            { name: 'durations', query: PROCESS_DURATION_QUERY },
+                            {
+                                name: 'result',
+                                query: `
+                                select
+                                    count(distinct participant_id) as count,
+                                    processing_site,
+                                    CASE
+                                        WHEN duration < 24 THEN '0-24 hours'
+                                        WHEN duration >= 24 AND duration < 36 THEN '24-36 hours'
+                                        WHEN duration >= 36 AND duration < 48 THEN '36-48 hours'
+                                        WHEN duration >= 48 AND duration < 72 THEN '48-72 hours'
+                                        ELSE '72+ hours'
+                                    END AS duration
+                                from durations group by 2,3 order by 2,3    
+                            `,
+                            },
+                        ]}
+                        plot={(data, { width }) =>
+                            Plot.plot({
+                                marginLeft: 100,
+                                marginRight: 100,
+                                inset: 10,
+                                height: 450,
+                                color: {
+                                    scheme: 'RdYlGn',
+                                    reverse: true,
+                                },
+                                width,
+                                marks: [
+                                    Plot.barX(data, {
+                                        y: 'processing_site',
+                                        fy: 'duration',
+                                        x: 'count',
+                                        tip: true,
+                                        fill: 'duration',
+                                    }),
+                                ],
+                            })
+                        }
+                    />
+                </Box>
+
+                <Box width={'50%'}>
                     <TableFromQueryCard
+                        showToolbar={true}
                         project={'ourdna'}
                         title="All sample processing times"
-                        query={`
-                            select
-                                s.participant_id,
-                                s.sample_id as sample_id,
-                                "meta_collection-time" as collection,
-                                "meta_process-end-time" as process_end,
-                                date_diff('hour', try_strptime(nullif("meta_collection-time", ' '), '%Y-%m-%d %H:%M:%S'), try_strptime(nullif("meta_process-end-time", ' '), '%Y-%m-%d %H:%M:%S')) as "duration (hrs)"
-                            from sample s
-                            join participant p
-                            on p.participant_id = s.participant_id
-                            and type = 'blood'
-                        `}
-                        height={400}
+                        queries={[
+                            { name: 'durations', query: PROCESS_DURATION_QUERY },
+                            {
+                                name: 'result',
+                                query: `
+                                    select
+                                        sample_id,
+                                        participant_id,
+                                        processing_site,
+                                        strftime(collection_time, '%Y-%m-%d %H:%M:%S') as collection_time,
+                                        strftime(process_end_time, '%Y-%m-%d %H:%M:%S') as process_end_time,
+                                        duration
+                                    from durations
+                                    order by duration desc nulls last
+                                `,
+                            },
+                        ]}
+                        height={450}
                     />
                 </Box>
             </Box>
@@ -388,6 +451,90 @@ export default function OurDnaDashboard() {
                     />
                 </Box>
             </Box>
+            <Box display={'flex'} gap={2} m={2}>
+                <Box width={'50%'}>
+                    <PlotFromQueryCard
+                        title="Participant age and reported sex"
+                        description="Age buckets for participants. (note, the ages are based off the birth year so may be +- 1 year depending on DOB"
+                        project="ourdna"
+                        query={`
+                            select
+                                participant_id,
+                                CASE reported_sex WHEN 1 THEN 'male' WHEN 2 THEN 'female' ELSE 'other/unknown' END as reported_sex,
+                                date_part('year', current_date()) - try_cast("meta_birth-year" as int) as age
+                            from participant
+                            where date_part('year', current_date()) - try_cast("meta_birth-year" as int) is not null
+                        `}
+                        plot={(data, { width }) =>
+                            Plot.plot({
+                                width,
+                                height: 450,
+                                color: { legend: true },
+                                marks: [
+                                    Plot.rectY(
+                                        data,
+                                        Plot.binX<Plot.RectYOptions>(
+                                            { y: 'count' },
+                                            { x: 'age', fill: 'reported_sex', tip: true }
+                                        )
+                                    ),
+                                ],
+                            })
+                        }
+                    />
+                </Box>
+                <Box width={'50%'}>
+                    <PlotFromQueryCard
+                        title="Ancestry totals"
+                        description="Count of participant by ancestry, each participant may have multiple ancestries"
+                        project="ourdna"
+                        query={`
+                            with all_ancestries as (
+                                select
+                                    p.participant_id,
+                                    unnest(p."meta_ancestry-participant-ancestry") as ancestry
+                                from participant p
+                            )
+                            select
+                                count(distinct participant_id) as count,
+                                ancestry
+                            from all_ancestries
+                            group by 2
+                            order by 1 desc
+                        `}
+                        plot={(data, { width }) =>
+                            Plot.plot({
+                                marginLeft: 160,
+                                inset: 10,
+                                height: 450,
+                                color: {
+                                    scheme: 'Observable10',
+                                    reverse: true,
+                                },
+                                width,
+                                marks: [
+                                    Plot.barX(data, {
+                                        y: 'ancestry',
+                                        fill: 'ancestry',
+                                        x: 'count',
+                                        tip: true,
+                                        sort: {
+                                            y: 'x',
+                                            reverse: true,
+                                        },
+                                    }),
+                                ],
+                            })
+                        }
+                    />
+                </Box>
+            </Box>
+
+            <Box m={2}>
+                <Typography fontWeight={'bold'} fontSize={26}>
+                    Choices
+                </Typography>
+            </Box>
         </Box>
     )
 }
diff --git a/web/src/pages/report/chart/TableFromQuery.tsx b/web/src/pages/report/chart/TableFromQuery.tsx
index 90919d5cf..6b92a2c25 100644
--- a/web/src/pages/report/chart/TableFromQuery.tsx
+++ b/web/src/pages/report/chart/TableFromQuery.tsx
@@ -19,17 +19,27 @@ import {
     GridToolbarExport,
     GridToolbarQuickFilter,
 } from '@mui/x-data-grid'
+import combineQueries from '../data/combineQueries'
+
 import { fromArrow } from 'arquero'
 import { ArrowTable } from 'arquero/dist/types/format/types'
+import { stripIndent } from 'common-tags'
 import { memo, ReactChild, useState } from 'react'
 import { Link } from 'react-router-dom'
 import { useProjectDbQuery } from '../data/projectDatabase'
 
+type QueryProps =
+    | {
+          query: string
+      }
+    | {
+          queries: { name: string; query: string }[]
+      }
+
 type TableProps = {
     project: string
-    query: string
     showToolbar?: boolean
-}
+} & QueryProps
 
 type TableCardProps = TableProps & {
     height: number | string
@@ -54,6 +64,8 @@ const modalStyle = {
 export function TableFromQueryCard(props: TableCardProps) {
     const [expanded, setExpanded] = useState(false)
 
+    const query = 'query' in props ? stripIndent(props.query) : combineQueries(props.queries)
+
     return (
         <Card sx={{ position: 'relative' }}>
             <CardActions
@@ -66,7 +78,7 @@ export function TableFromQueryCard(props: TableCardProps) {
                 <Tooltip title="View/Edit SQL" arrow>
                     <IconButton
                         target={'_blank'}
-                        href={`/project/${props.project}/query?query=${encodeURIComponent(props.query)}`}
+                        href={`/project/${props.project}/query?query=${encodeURIComponent(query)}`}
                     >
                         <CodeIcon fontSize="small" />
                     </IconButton>
@@ -140,17 +152,13 @@ function CustomTableToolbar() {
 // Memoized version of the result table to avoid rerenders, they can be very expensive
 // if the result set is large
 export const TableFromQuery = memo(function TableFromQuery(props: TableProps) {
-    return (
-        <TableFromQueryUnmemoized
-            project={props.project}
-            query={props.query}
-            showToolbar={props.showToolbar}
-        />
-    )
+    return <TableFromQueryUnmemoized {...props} />
 })
 
 function TableFromQueryUnmemoized(props: TableProps) {
-    const { project, query, showToolbar } = props
+    const { project, showToolbar } = props
+    const query = 'query' in props ? stripIndent(props.query) : combineQueries(props.queries)
+
     const result = useProjectDbQuery(project, query)
 
     const data = result && result.status === 'success' ? result.data : undefined

From 9ffb70955ad840c93cd97dab49edaacc7792750c Mon Sep 17 00:00:00 2001
From: Dan Coates <dan.coates@populationgenomics.org.au>
Date: Tue, 28 Jan 2025 18:39:17 +1100
Subject: [PATCH 06/12] Add report layout and initial version of ourdna
 dashboard

---
 web/src/Routes.tsx                            |  11 +-
 web/src/index.css                             |  12 +
 web/src/pages/report/OurDnaDashboard.tsx      | 540 ------------------
 web/src/pages/report/ProjectReport.tsx        |  46 ++
 web/src/pages/report/SqlQueryUI.tsx           |   2 +-
 .../pages/report/chart/MetricFromQuery.tsx    |  93 ---
 web/src/pages/report/chart/PlotFromQuery.tsx  | 170 ------
 web/src/pages/report/chart/TableFromQuery.tsx | 200 -------
 .../report/components/MetricFromQuery.tsx     |  54 ++
 .../pages/report/components/PlotFromQuery.tsx |  62 ++
 web/src/pages/report/components/Report.tsx    |   9 +
 .../pages/report/components/ReportItem.tsx    | 180 ++++++
 .../report/components/ReportItemActions.tsx   |  80 +++
 .../report/components/ReportItemLoader.tsx    |  16 +
 web/src/pages/report/components/ReportRow.tsx |   9 +
 .../report/components/TableFromQuery.tsx      |  92 +++
 .../{combineQueries.ts => formatQuery.ts}     |   9 +-
 web/src/pages/report/reportIndex.ts           |  39 ++
 .../report/reports/ourdna/Demographics.tsx    | 227 ++++++++
 .../report/reports/ourdna/ProcessingTimes.tsx | 194 +++++++
 .../report/reports/ourdna/Recruitment.tsx     |  96 ++++
 21 files changed, 1133 insertions(+), 1008 deletions(-)
 delete mode 100644 web/src/pages/report/OurDnaDashboard.tsx
 create mode 100644 web/src/pages/report/ProjectReport.tsx
 delete mode 100644 web/src/pages/report/chart/MetricFromQuery.tsx
 delete mode 100644 web/src/pages/report/chart/PlotFromQuery.tsx
 delete mode 100644 web/src/pages/report/chart/TableFromQuery.tsx
 create mode 100644 web/src/pages/report/components/MetricFromQuery.tsx
 create mode 100644 web/src/pages/report/components/PlotFromQuery.tsx
 create mode 100644 web/src/pages/report/components/Report.tsx
 create mode 100644 web/src/pages/report/components/ReportItem.tsx
 create mode 100644 web/src/pages/report/components/ReportItemActions.tsx
 create mode 100644 web/src/pages/report/components/ReportItemLoader.tsx
 create mode 100644 web/src/pages/report/components/ReportRow.tsx
 create mode 100644 web/src/pages/report/components/TableFromQuery.tsx
 rename web/src/pages/report/data/{combineQueries.ts => formatQuery.ts} (86%)
 create mode 100644 web/src/pages/report/reportIndex.ts
 create mode 100644 web/src/pages/report/reports/ourdna/Demographics.tsx
 create mode 100644 web/src/pages/report/reports/ourdna/ProcessingTimes.tsx
 create mode 100644 web/src/pages/report/reports/ourdna/Recruitment.tsx

diff --git a/web/src/Routes.tsx b/web/src/Routes.tsx
index 0c52d477f..4c3bcb71a 100644
--- a/web/src/Routes.tsx
+++ b/web/src/Routes.tsx
@@ -21,7 +21,8 @@ import Summary from './pages/insights/Summary'
 import { ParticipantPage } from './pages/participant/ParticipantViewContainer'
 import AnalysisRunnerSummary from './pages/project/AnalysisRunnerView/AnalysisRunnerSummary'
 import ProjectOverview from './pages/project/ProjectOverview'
-import OurDnaDashboard from './pages/report/OurDnaDashboard'
+import ProjectReport from './pages/report/ProjectReport'
+import OurDnaDashboard from './pages/report/reports/ourdna/OurDnaDashboard'
 import SqlQueryUI from './pages/report/SqlQueryUI'
 import SampleView from './pages/sample/SampleView'
 import ErrorBoundary from './shared/utilities/errorBoundary'
@@ -49,6 +50,14 @@ const Routes: React.FunctionComponent = () => (
                 </ErrorBoundary>
             }
         />
+        <Route
+            path="/project/:projectName/report/:reportName/:tabName?"
+            element={
+                <ErrorBoundary>
+                    <ProjectReport />
+                </ErrorBoundary>
+            }
+        />
         <Route
             path="/participant/:participantId"
             element={
diff --git a/web/src/index.css b/web/src/index.css
index 016e5d9b9..e30da7580 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -489,3 +489,15 @@ html[data-theme='dark-mode'] .ui.table {
 .dimmed.dimmable > .ui.modals.dimmer.visible {
     display: flex !important;
 }
+
+
+/* 
+    hax to fix bad cascading styles.
+    There are a few conflicting css frameworks on metamist for strange historical reasons.
+    While we're working to move to mui and remove other conflicting styles at the moment it
+    is sometimes necessary to remove styles that cascade from bad global definitions.
+*/
+
+.MuiTablePagination-selectLabel, .MuiTablePagination-displayedRows {
+    margin-bottom: 0 !important;
+}
\ No newline at end of file
diff --git a/web/src/pages/report/OurDnaDashboard.tsx b/web/src/pages/report/OurDnaDashboard.tsx
deleted file mode 100644
index 3693d5705..000000000
--- a/web/src/pages/report/OurDnaDashboard.tsx
+++ /dev/null
@@ -1,540 +0,0 @@
-import { Box, Typography } from '@mui/material'
-import * as Plot from '@observablehq/plot'
-import { MetricFromQueryCard } from './chart/MetricFromQuery'
-import { PlotFromQueryCard } from './chart/PlotFromQuery'
-import { TableFromQueryCard } from './chart/TableFromQuery'
-
-/*
-
-other charts:
-
-- chart of samples where we don't have consent / registration information for a participant.
-    - could be a few reasons, but want to capture badly entered participant ids
-
-
-    sections:
-    - recruitment
-    - processing times
-
-    - demographics
-
-    - data quality
-
-*/
-
-// Common queries:
-// queries that are used in multiple charts
-
-// Query for processing times, this can be used for most visualistions
-// of processing time
-const PROCESS_DURATION_QUERY = `
-    select
-        s.sample_id,
-        cast(s.participant_id as string) as participant_id,
-        coalesce(s."meta_processing-site", 'Unknown') as processing_site,
-        
-        try_strptime(nullif("meta_collection-time", ' '), '%Y-%m-%d %H:%M:%S') as collection_time,
-        try_strptime(nullif("meta_process-end-time", ' '), '%Y-%m-%d %H:%M:%S') as process_end_time,
-        date_diff(
-            'hour',
-            try_strptime(nullif("meta_collection-time", ' '), '%Y-%m-%d %H:%M:%S'),
-            try_strptime(nullif("meta_process-end-time", ' '), '%Y-%m-%d %H:%M:%S')
-        ) as duration
-    from sample s
-    join participant p
-    on p.participant_id = s.participant_id
-    where s.type = 'blood'
-`
-
-export default function OurDnaDashboard() {
-    return (
-        <Box>
-            <Box m={2}>
-                <Typography fontWeight={'bold'} fontSize={26}>
-                    Recruitment
-                </Typography>
-            </Box>
-            <Box display={'flex'} gap={2} m={2}>
-                <Box width={'50%'}>
-                    <PlotFromQueryCard
-                        title="Recruitment funnel"
-                        description="The number of participants at each stage of recruitment"
-                        project="ourdna"
-                        query={`
-                            with funnel as (
-                                select
-                                    count(distinct p.participant_id) as "All Participants",
-                                    count(distinct p.participant_id) filter (
-                                        p."meta_blood-consent" = 'yes' and p."meta_informed-consent" = 'yes'
-                                    ) as "Participants consented",
-                                    count(distinct p.participant_id) filter (s.sample_id is not null) as "Participants with samples"
-                                from participant p
-                                left join sample s
-                                on s.participant_id = p.participant_id
-                            ) unpivot funnel
-                            on columns (*)
-                            into name stage value count
-                        `}
-                        plot={(data, { width }) =>
-                            Plot.plot({
-                                marginLeft: 160,
-                                inset: 10,
-                                height: 170,
-                                width,
-                                marks: [
-                                    Plot.barX(data, {
-                                        y: 'stage',
-                                        x: 'count',
-                                        tip: true,
-                                        fill: 'stage',
-                                    }),
-                                ],
-                            })
-                        }
-                    />
-                </Box>
-                <Box width={'50%'}>
-                    <PlotFromQueryCard
-                        title="Recruitment types"
-                        description="How the participant was recruited"
-                        project="ourdna"
-                        query={`
-                            select
-                                count(distinct participant_id) as count,
-                                CASE coalesce("meta_collection-event-type", '__NULL__')
-                                    WHEN 'POE'
-                                        THEN 'POE?'
-
-                                    WHEN 'Walk-in'
-                                        THEN 'Walk in'
-                                    WHEN 'Walk In'
-                                        THEN 'Walk in'
-
-                                    WHEN 'OSS'
-                                        THEN 'Once Stop Shop'
-                                    
-                                    WHEN '__NULL__'
-                                        THEN 'Unknown'
-
-                                    ELSE "meta_collection-event-type"
-
-                                END as collection_type
-                            from sample s
-                            group by 2
-                        `}
-                        plot={(data, { width }) =>
-                            Plot.plot({
-                                width,
-                                height: 150,
-                                color: { legend: true },
-                                marks: [
-                                    Plot.barX(
-                                        data,
-                                        Plot.stackX({
-                                            x: 'count',
-                                            fill: 'collection_type',
-                                            inset: 0.5,
-                                            tip: true,
-                                        })
-                                    ),
-                                ],
-                            })
-                        }
-                    />
-                </Box>
-            </Box>
-
-            <Box m={2}>
-                <Typography fontWeight={'bold'} fontSize={26}>
-                    Processing times
-                </Typography>
-            </Box>
-            <Box display={'flex'} gap={2} m={2}>
-                <Box width={'60%'}>
-                    <PlotFromQueryCard
-                        title="Processing times for all samples"
-                        description="This excludes any samples with > 100 hour processing times, and any that have missing or malformed collection or processing times"
-                        project="ourdna"
-                        queries={[
-                            {
-                                name: 'durations',
-                                query: PROCESS_DURATION_QUERY,
-                            },
-                            {
-                                name: 'result',
-                                query: `
-                                    select * from durations where duration < 100 and duration > 0
-                                `,
-                            },
-                        ]}
-                        plot={(data, { width }) =>
-                            Plot.plot({
-                                y: { grid: true, padding: 5, label: 'duration(hrs)' },
-                                x: { grid: true, padding: 5 },
-                                width: width,
-                                height: 400,
-                                marginTop: 20,
-                                marginRight: 20,
-                                marginBottom: 30,
-
-                                marginLeft: 40,
-                                marks: [
-                                    Plot.ruleY([24, 48, 72], { stroke: '#ff725c' }),
-                                    Plot.dot(data, {
-                                        x: 'collection_time',
-                                        y: 'duration',
-                                        stroke: null,
-                                        fill: '#4269d0',
-                                        fillOpacity: 0.5,
-                                        channels: {
-                                            process_end: 'process_end_time',
-                                            sample_id: 'sample_id',
-                                            participant_id: 'participant_id',
-                                        },
-                                        tip: true,
-                                    }),
-                                ],
-                            })
-                        }
-                    />
-                </Box>
-                <Box width={'40%'}>
-                    <PlotFromQueryCard
-                        title="Processing time buckets"
-                        description="Count of participants with their samples processed in each bucket"
-                        project="ourdna"
-                        queries={[
-                            { name: 'durations', query: PROCESS_DURATION_QUERY },
-                            {
-                                name: 'result',
-                                query: `
-                                select
-                                    count(distinct participant_id) as count,
-                                    CASE
-                                        WHEN duration < 24 THEN '0-24 hours'
-                                        WHEN duration >= 24 AND duration < 36 THEN '24-36 hours'
-                                        WHEN duration >= 36 AND duration < 48 THEN '36-48 hours'
-                                        WHEN duration >= 48 AND duration < 72 THEN '48-72 hours'
-                                        ELSE '72+ hours'
-                                    END AS duration
-                                from durations group by 2 order by 2    
-                            `,
-                            },
-                        ]}
-                        plot={(data, { width }) =>
-                            Plot.plot({
-                                marginLeft: 100,
-                                inset: 10,
-                                height: 400,
-                                color: {
-                                    scheme: 'RdYlGn',
-                                    reverse: true,
-                                },
-                                width,
-                                marks: [
-                                    Plot.barX(data, {
-                                        y: 'duration',
-                                        x: 'count',
-                                        tip: true,
-                                        fill: 'duration',
-                                    }),
-                                ],
-                            })
-                        }
-                    />
-                </Box>
-            </Box>
-            <Box display={'flex'} gap={2} m={2}>
-                <Box width={'50%'}>
-                    <PlotFromQueryCard
-                        title="Processing time by site"
-                        description="Count of participants processed in each time bucket by processing site"
-                        project="ourdna"
-                        queries={[
-                            { name: 'durations', query: PROCESS_DURATION_QUERY },
-                            {
-                                name: 'result',
-                                query: `
-                                select
-                                    count(distinct participant_id) as count,
-                                    processing_site,
-                                    CASE
-                                        WHEN duration < 24 THEN '0-24 hours'
-                                        WHEN duration >= 24 AND duration < 36 THEN '24-36 hours'
-                                        WHEN duration >= 36 AND duration < 48 THEN '36-48 hours'
-                                        WHEN duration >= 48 AND duration < 72 THEN '48-72 hours'
-                                        ELSE '72+ hours'
-                                    END AS duration
-                                from durations group by 2,3 order by 2,3    
-                            `,
-                            },
-                        ]}
-                        plot={(data, { width }) =>
-                            Plot.plot({
-                                marginLeft: 100,
-                                marginRight: 100,
-                                inset: 10,
-                                height: 450,
-                                color: {
-                                    scheme: 'RdYlGn',
-                                    reverse: true,
-                                },
-                                width,
-                                marks: [
-                                    Plot.barX(data, {
-                                        y: 'processing_site',
-                                        fy: 'duration',
-                                        x: 'count',
-                                        tip: true,
-                                        fill: 'duration',
-                                    }),
-                                ],
-                            })
-                        }
-                    />
-                </Box>
-
-                <Box width={'50%'}>
-                    <TableFromQueryCard
-                        showToolbar={true}
-                        project={'ourdna'}
-                        title="All sample processing times"
-                        queries={[
-                            { name: 'durations', query: PROCESS_DURATION_QUERY },
-                            {
-                                name: 'result',
-                                query: `
-                                    select
-                                        sample_id,
-                                        participant_id,
-                                        processing_site,
-                                        strftime(collection_time, '%Y-%m-%d %H:%M:%S') as collection_time,
-                                        strftime(process_end_time, '%Y-%m-%d %H:%M:%S') as process_end_time,
-                                        duration
-                                    from durations
-                                    order by duration desc nulls last
-                                `,
-                            },
-                        ]}
-                        height={450}
-                    />
-                </Box>
-            </Box>
-
-            <Box m={2}>
-                <Typography fontWeight={'bold'} fontSize={26}>
-                    Demographics
-                </Typography>
-            </Box>
-
-            <Box display={'flex'} gap={2} m={2}>
-                <Box width={'25%'}>
-                    <MetricFromQueryCard
-                        title="Ratio of reported sex"
-                        subtitle="For participants who have reported"
-                        description="This chart shows the ratio of participants that have responded by reporting their sex"
-                        project="ourdna"
-                        query={`
-                            select
-                                count(*) filter (reported_sex = 1) as male,
-                                count(*) filter (reported_sex = 2) as female
-                            from participant
-                        `}
-                    />
-                </Box>
-                <Box width={'75%'}>
-                    <PlotFromQueryCard
-                        project="ourdna"
-                        title={'Participant count by ancestry over time'}
-                        queries={[
-                            {
-                                name: 'all_ancestries',
-                                query: `
-                                    select
-                                        p.participant_id,
-                                        "meta_collection-time" as collection_time,
-                                        unnest(p."meta_ancestry-participant-ancestry") as ancestry
-                                    from participant p
-                                    join sample s
-                                    on s.participant_id = p.participant_id
-                                    where collection_time is not null
-                                    and collection_time != ' '
-                                `,
-                            },
-                            {
-                                name: 'counts_by_week',
-                                query: `
-                                    select
-                                        coalesce(count(distinct participant_id), 0) as participants,
-                                        date_trunc(
-                                            'week',
-                                            try_strptime(
-                                                nullif(
-                                                    collection_time,
-                                                    ' '
-                                                ),
-                                                '%Y-%m-%d %H:%M:%S'
-                                            )
-                                        ) as week,
-                                        ancestry
-                                    from all_ancestries p
-                                    group by week, ancestry
-                                `,
-                            },
-                            {
-                                name: 'weeks',
-                                query: `
-                                    select
-                                        unnest(generate_series(min(week), max(week), interval '1 week')) as week
-                                    from
-                                    counts_by_week
-                                `,
-                            },
-                            {
-                                name: 'ancestries',
-                                query: `
-                                    select distinct ancestry from counts_by_week
-                                `,
-                            },
-                            {
-                                name: 'filled',
-                                query: `
-                                    select
-                                        coalesce(r.participants, 0) as participants,
-                                        strftime(w.week, '%Y-%m-%d') as week,
-                                        a.ancestry,
-                                        
-                                    from weeks w
-                                    join ancestries a on true
-                                    left join counts_by_week r
-                                    on r.week = w.week
-                                    and r.ancestry = a.ancestry
-                                    order by 2, 3
-                                `,
-                            },
-                            {
-                                name: 'result',
-                                query: `
-                                    select
-                                        (SUM(participants) over (PARTITION BY ancestry  ORDER BY week ROWS BETWEEN UNBOUNDED PRECEDING AND CURRENT ROW)) as count,
-                                        ancestry,
-                                        week
-                                    from filled
-                                `,
-                            },
-                        ]}
-                        plot={(data, { width }) =>
-                            Plot.plot({
-                                marginLeft: 40,
-                                inset: 10,
-                                width: width,
-                                height: 400,
-                                y: {
-                                    grid: true,
-                                    label: 'Participants',
-                                },
-                                x: {
-                                    type: 'time',
-                                },
-                                marks: [
-                                    Plot.areaY(data, {
-                                        x: 'week',
-                                        y: 'count',
-                                        fill: 'ancestry',
-                                        tip: true,
-                                        order: 'sum',
-                                    }),
-                                    Plot.ruleY([0]),
-                                ],
-                            })
-                        }
-                    />
-                </Box>
-            </Box>
-            <Box display={'flex'} gap={2} m={2}>
-                <Box width={'50%'}>
-                    <PlotFromQueryCard
-                        title="Participant age and reported sex"
-                        description="Age buckets for participants. (note, the ages are based off the birth year so may be +- 1 year depending on DOB"
-                        project="ourdna"
-                        query={`
-                            select
-                                participant_id,
-                                CASE reported_sex WHEN 1 THEN 'male' WHEN 2 THEN 'female' ELSE 'other/unknown' END as reported_sex,
-                                date_part('year', current_date()) - try_cast("meta_birth-year" as int) as age
-                            from participant
-                            where date_part('year', current_date()) - try_cast("meta_birth-year" as int) is not null
-                        `}
-                        plot={(data, { width }) =>
-                            Plot.plot({
-                                width,
-                                height: 450,
-                                color: { legend: true },
-                                marks: [
-                                    Plot.rectY(
-                                        data,
-                                        Plot.binX<Plot.RectYOptions>(
-                                            { y: 'count' },
-                                            { x: 'age', fill: 'reported_sex', tip: true }
-                                        )
-                                    ),
-                                ],
-                            })
-                        }
-                    />
-                </Box>
-                <Box width={'50%'}>
-                    <PlotFromQueryCard
-                        title="Ancestry totals"
-                        description="Count of participant by ancestry, each participant may have multiple ancestries"
-                        project="ourdna"
-                        query={`
-                            with all_ancestries as (
-                                select
-                                    p.participant_id,
-                                    unnest(p."meta_ancestry-participant-ancestry") as ancestry
-                                from participant p
-                            )
-                            select
-                                count(distinct participant_id) as count,
-                                ancestry
-                            from all_ancestries
-                            group by 2
-                            order by 1 desc
-                        `}
-                        plot={(data, { width }) =>
-                            Plot.plot({
-                                marginLeft: 160,
-                                inset: 10,
-                                height: 450,
-                                color: {
-                                    scheme: 'Observable10',
-                                    reverse: true,
-                                },
-                                width,
-                                marks: [
-                                    Plot.barX(data, {
-                                        y: 'ancestry',
-                                        fill: 'ancestry',
-                                        x: 'count',
-                                        tip: true,
-                                        sort: {
-                                            y: 'x',
-                                            reverse: true,
-                                        },
-                                    }),
-                                ],
-                            })
-                        }
-                    />
-                </Box>
-            </Box>
-
-            <Box m={2}>
-                <Typography fontWeight={'bold'} fontSize={26}>
-                    Choices
-                </Typography>
-            </Box>
-        </Box>
-    )
-}
diff --git a/web/src/pages/report/ProjectReport.tsx b/web/src/pages/report/ProjectReport.tsx
new file mode 100644
index 000000000..bf6efc0ea
--- /dev/null
+++ b/web/src/pages/report/ProjectReport.tsx
@@ -0,0 +1,46 @@
+import { Box, Tab, Tabs, Typography } from '@mui/material'
+import { Link, useParams } from 'react-router-dom'
+import MuckError from '../../shared/components/MuckError'
+import { reports } from './reportIndex'
+
+const NotFound = () => <MuckError message="Report not found" />
+
+export default function ProjectReport() {
+    const { projectName, reportName, tabName } = useParams()
+
+    if (!projectName || !reportName || !reports[projectName] || !reports[projectName][reportName]) {
+        return <NotFound />
+    }
+
+    const reportTabs = reports[projectName][reportName].tabs
+    const urlActiveTabIndex = reportTabs.findIndex((tab) => tab.id === tabName)
+    const activeTabIndex = urlActiveTabIndex > -1 ? urlActiveTabIndex : 0
+    const activeTab = reportTabs[activeTabIndex]
+
+    const Report = activeTab.content
+
+    return (
+        <Box>
+            <Box>
+                <Tabs value={activeTabIndex}>
+                    {reportTabs.map((tab) => (
+                        <Tab
+                            component={Link}
+                            to={`/project/${projectName}/report/${reportName}/${tab.id}`}
+                            label={tab.title}
+                            key={tab.id}
+                        />
+                    ))}
+                </Tabs>
+            </Box>
+            <Box p={2}>
+                <Typography fontWeight={'bold'} fontSize={26} mb={2}>
+                    {activeTab.title}
+                </Typography>
+                <Box>
+                    <Report />
+                </Box>
+            </Box>
+        </Box>
+    )
+}
diff --git a/web/src/pages/report/SqlQueryUI.tsx b/web/src/pages/report/SqlQueryUI.tsx
index c24a7f57a..32291966f 100644
--- a/web/src/pages/report/SqlQueryUI.tsx
+++ b/web/src/pages/report/SqlQueryUI.tsx
@@ -27,7 +27,7 @@ import { editor, KeyCode, KeyMod } from 'monaco-editor'
 import { Fragment, useCallback, useContext, useEffect, useRef, useState } from 'react'
 import { Link, useNavigate, useParams } from 'react-router-dom'
 import { ThemeContext } from '../../shared/components/ThemeProvider'
-import { TableFromQuery } from './chart/TableFromQuery'
+import { TableFromQuery } from './components/TableFromQuery'
 import { useProjectDbSetup } from './data/projectDatabase'
 
 const SIDEBAR_WIDTH = 250
diff --git a/web/src/pages/report/chart/MetricFromQuery.tsx b/web/src/pages/report/chart/MetricFromQuery.tsx
deleted file mode 100644
index 5428ceeda..000000000
--- a/web/src/pages/report/chart/MetricFromQuery.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import CodeIcon from '@mui/icons-material/Code'
-
-import {
-    Box,
-    Card,
-    CardActions,
-    CardContent,
-    Divider,
-    IconButton,
-    Tooltip,
-    Typography,
-} from '@mui/material'
-import CircularProgress from '@mui/material/CircularProgress'
-import { fromArrow } from 'arquero'
-import { ArrowTable } from 'arquero/dist/types/format/types'
-import { Fragment, ReactChild } from 'react'
-import { useProjectDbQuery } from '../data/projectDatabase'
-
-type Props = {
-    project: string
-    query: string
-    title?: ReactChild
-    subtitle?: ReactChild
-    description?: ReactChild
-}
-
-export function MetricFromQueryCard(props: Props) {
-    const { project, query } = props
-    const result = useProjectDbQuery(project, query)
-
-    const data = result && result.status === 'success' ? result.data : undefined
-
-    if (!data || !result || result.status === 'loading') return <CircularProgress />
-
-    const table = fromArrow(data as ArrowTable)
-
-    const columns = table.columnNames()
-
-    return (
-        <Card sx={{ position: 'relative' }}>
-            <CardActions
-                disableSpacing
-                sx={{
-                    position: 'absolute',
-                    right: 0,
-                }}
-            >
-                <Tooltip title="View/Edit SQL" arrow>
-                    <IconButton
-                        target={'_blank'}
-                        href={`/project/${props.project}/query?query=${encodeURIComponent(props.query)}`}
-                    >
-                        <CodeIcon fontSize="small" />
-                    </IconButton>
-                </Tooltip>
-            </CardActions>
-            <CardContent>
-                {(props.title || props.subtitle) && (
-                    <Box mb={2}>
-                        {props.title && (
-                            <Typography fontWeight={'bold'} fontSize={16}>
-                                {props.title}
-                            </Typography>
-                        )}
-                        {props.subtitle && <Typography fontSize={14}>{props.subtitle}</Typography>}
-                    </Box>
-                )}
-                <Box pt={props.title || props.subtitle ? 0 : 4}>
-                    <Box display={'flex'} gap={2}>
-                        {columns.map((col, index) => (
-                            <Fragment key={col}>
-                                {index !== 0 && <Divider orientation="vertical" flexItem />}
-                                <Box>
-                                    <Box>
-                                        <Typography fontSize={12}>{col}</Typography>
-                                    </Box>
-                                    <Box>
-                                        <Typography fontSize={40}>{table.get(col, 0)}</Typography>
-                                    </Box>
-                                </Box>
-                            </Fragment>
-                        ))}
-                    </Box>
-                </Box>
-                {props.description && (
-                    <Box mt={2}>
-                        <Typography fontSize={12}>{props.description}</Typography>
-                    </Box>
-                )}
-            </CardContent>
-        </Card>
-    )
-}
diff --git a/web/src/pages/report/chart/PlotFromQuery.tsx b/web/src/pages/report/chart/PlotFromQuery.tsx
deleted file mode 100644
index 943c8cf48..000000000
--- a/web/src/pages/report/chart/PlotFromQuery.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-import CodeIcon from '@mui/icons-material/Code'
-import OpenInFullIcon from '@mui/icons-material/OpenInFull'
-import TableChartIcon from '@mui/icons-material/TableChart'
-import {
-    Alert,
-    Box,
-    Card,
-    CardActions,
-    CardContent,
-    CircularProgress,
-    IconButton,
-    Modal,
-    Tooltip,
-    Typography,
-} from '@mui/material'
-import * as Plot from '@observablehq/plot'
-import { Table, TypeMap } from 'apache-arrow'
-import { stripIndent } from 'common-tags'
-import { ReactChild, useEffect, useRef, useState } from 'react'
-import { useMeasure } from 'react-use'
-import combineQueries from '../data/combineQueries'
-import { useProjectDbQuery } from '../data/projectDatabase'
-import { TableFromQuery } from './TableFromQuery'
-
-type PlotOptions = {
-    width: number
-}
-
-type PlotInputFunc = (
-    data: Table<TypeMap>,
-    options: PlotOptions
-) => (HTMLElement | SVGSVGElement) & Plot.Plot
-
-type QueryProps =
-    | {
-          query: string
-      }
-    | {
-          queries: { name: string; query: string }[]
-      }
-
-type Props = {
-    project: string
-    title?: ReactChild
-    subtitle?: ReactChild
-    description?: ReactChild
-    plot: PlotInputFunc
-} & QueryProps
-
-const modalStyle = {
-    position: 'absolute',
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%, -50%)',
-    maxHeight: '100vh',
-    overflow: 'hidden',
-    width: 'calc(100% - 50px)',
-    bgcolor: 'background.paper',
-    boxShadow: 24,
-    p: 4,
-}
-
-export function PlotFromQueryCard(props: Props) {
-    const [showingTable, setShowingTable] = useState(false)
-    const [expanded, setExpanded] = useState(false)
-
-    let query = 'query' in props ? stripIndent(props.query) : combineQueries(props.queries)
-
-    return (
-        <Card sx={{ position: 'relative' }}>
-            <CardActions
-                disableSpacing
-                sx={{
-                    position: 'absolute',
-                    right: 0,
-                }}
-            >
-                <Tooltip title="View/Edit SQL" arrow>
-                    <IconButton
-                        target={'_blank'}
-                        href={`/project/${props.project}/query?query=${encodeURIComponent(query)}`}
-                    >
-                        <CodeIcon fontSize="small" />
-                    </IconButton>
-                </Tooltip>
-                <Tooltip title="View data as table" arrow>
-                    <IconButton onClick={() => setShowingTable(true)}>
-                        <TableChartIcon fontSize="small" />
-                    </IconButton>
-                </Tooltip>
-                <Tooltip title="Expand chart" arrow>
-                    <IconButton onClick={() => setExpanded(true)}>
-                        <OpenInFullIcon fontSize="small" />
-                    </IconButton>
-                </Tooltip>
-            </CardActions>
-            <CardContent>
-                <PlotFromQuery {...props} />
-            </CardContent>
-
-            <Modal open={expanded} onClose={() => setExpanded(false)}>
-                <Box sx={modalStyle}>
-                    <PlotFromQuery {...props} />
-                </Box>
-            </Modal>
-
-            <Modal open={showingTable} onClose={() => setShowingTable(false)}>
-                <Box sx={modalStyle}>
-                    <div
-                        style={{
-                            display: 'flex',
-                            maxHeight: '70vh',
-                            flexDirection: 'column',
-                        }}
-                    >
-                        <TableFromQuery query={query} project={props.project} />
-                    </div>
-                </Box>
-            </Modal>
-        </Card>
-    )
-}
-
-export function PlotFromQuery(props: Props) {
-    const containerRef = useRef<HTMLDivElement>(null)
-
-    const { project, plot } = props
-
-    const query = 'query' in props ? stripIndent(props.query) : combineQueries(props.queries)
-    const result = useProjectDbQuery(project, query)
-
-    const [measureRef, { width }] = useMeasure<HTMLDivElement>()
-
-    const data = result && result.status === 'success' ? result.data : undefined
-
-    useEffect(() => {
-        if (!data) return
-        const _plot = plot(data, { width })
-        containerRef.current?.append(_plot)
-        return () => _plot.remove()
-    }, [data, width, plot])
-
-    return (
-        <Box>
-            {(props.title || props.subtitle) && (
-                <Box mb={2}>
-                    {props.title && (
-                        <Typography fontWeight={'bold'} fontSize={16}>
-                            {props.title}
-                        </Typography>
-                    )}
-                    {props.subtitle && <Typography fontSize={14}>{props.subtitle}</Typography>}
-                </Box>
-            )}
-
-            <div ref={measureRef} style={{ width: '100%', height: 0 }} />
-            {!result || (result.status === 'loading' && <CircularProgress />)}
-            <div ref={containerRef} />
-
-            {result && result.status === 'error' && (
-                <Alert severity="error">{result.errorMessage}</Alert>
-            )}
-            {props.description && (
-                <Box mt={2}>
-                    <Typography fontSize={12}>{props.description}</Typography>
-                </Box>
-            )}
-        </Box>
-    )
-}
diff --git a/web/src/pages/report/chart/TableFromQuery.tsx b/web/src/pages/report/chart/TableFromQuery.tsx
deleted file mode 100644
index 6b92a2c25..000000000
--- a/web/src/pages/report/chart/TableFromQuery.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-import CodeIcon from '@mui/icons-material/Code'
-import OpenInFullIcon from '@mui/icons-material/OpenInFull'
-import {
-    Alert,
-    Box,
-    Card,
-    CardActions,
-    CardContent,
-    IconButton,
-    Modal,
-    Tooltip,
-    Typography,
-} from '@mui/material'
-import CircularProgress from '@mui/material/CircularProgress'
-import {
-    DataGrid,
-    GridColDef,
-    GridToolbarContainer,
-    GridToolbarExport,
-    GridToolbarQuickFilter,
-} from '@mui/x-data-grid'
-import combineQueries from '../data/combineQueries'
-
-import { fromArrow } from 'arquero'
-import { ArrowTable } from 'arquero/dist/types/format/types'
-import { stripIndent } from 'common-tags'
-import { memo, ReactChild, useState } from 'react'
-import { Link } from 'react-router-dom'
-import { useProjectDbQuery } from '../data/projectDatabase'
-
-type QueryProps =
-    | {
-          query: string
-      }
-    | {
-          queries: { name: string; query: string }[]
-      }
-
-type TableProps = {
-    project: string
-    showToolbar?: boolean
-} & QueryProps
-
-type TableCardProps = TableProps & {
-    height: number | string
-    title?: ReactChild
-    subtitle?: ReactChild
-    description?: ReactChild
-}
-
-const modalStyle = {
-    position: 'absolute',
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%, -50%)',
-    maxHeight: '100vh',
-    overflow: 'hidden',
-    width: 'calc(100% - 50px)',
-    bgcolor: 'background.paper',
-    boxShadow: 24,
-    p: 4,
-}
-
-export function TableFromQueryCard(props: TableCardProps) {
-    const [expanded, setExpanded] = useState(false)
-
-    const query = 'query' in props ? stripIndent(props.query) : combineQueries(props.queries)
-
-    return (
-        <Card sx={{ position: 'relative' }}>
-            <CardActions
-                disableSpacing
-                sx={{
-                    position: 'absolute',
-                    right: 0,
-                }}
-            >
-                <Tooltip title="View/Edit SQL" arrow>
-                    <IconButton
-                        target={'_blank'}
-                        href={`/project/${props.project}/query?query=${encodeURIComponent(query)}`}
-                    >
-                        <CodeIcon fontSize="small" />
-                    </IconButton>
-                </Tooltip>
-                <Tooltip title="Expand table" arrow>
-                    <IconButton onClick={() => setExpanded(true)}>
-                        <OpenInFullIcon fontSize="small" />
-                    </IconButton>
-                </Tooltip>
-            </CardActions>
-            <CardContent>
-                {(props.title || props.subtitle) && (
-                    <Box mb={2}>
-                        {props.title && (
-                            <Typography fontWeight={'bold'} fontSize={16}>
-                                {props.title}
-                            </Typography>
-                        )}
-                        {props.subtitle && <Typography fontSize={14}>{props.subtitle}</Typography>}
-                    </Box>
-                )}
-                <Box pt={props.title || props.subtitle ? 0 : 4}>
-                    <Box display={'flex'} flexDirection={'column'} height={props.height}>
-                        <TableFromQuery {...props} />
-                    </Box>
-                </Box>
-                {props.description && (
-                    <Box mt={2}>
-                        <Typography fontSize={12}>{props.description}</Typography>
-                    </Box>
-                )}
-            </CardContent>
-
-            <Modal open={expanded} onClose={() => setExpanded(false)}>
-                <Box sx={modalStyle}>
-                    <div
-                        style={{
-                            display: 'flex',
-                            height: '70vh',
-                            flexDirection: 'column',
-                        }}
-                    >
-                        <TableFromQuery {...props} />
-                    </div>
-                </Box>
-            </Modal>
-        </Card>
-    )
-}
-
-// Provide custom rendering for some known columns, this allows adding links to the table
-const knownColumnMap: Record<string, Omit<GridColDef, 'field'>> = {
-    participant_id: {
-        renderCell: (params) => <Link to={`/participant/${params.value}`}>{params.value}</Link>,
-    },
-    sample_id: {
-        renderCell: (params) => <Link to={`/sample/${params.value}`}>{params.value}</Link>,
-    },
-}
-
-function CustomTableToolbar() {
-    return (
-        <GridToolbarContainer>
-            <GridToolbarExport />
-            <Box sx={{ flexGrow: 1 }} />
-            <GridToolbarQuickFilter />
-        </GridToolbarContainer>
-    )
-}
-
-// Memoized version of the result table to avoid rerenders, they can be very expensive
-// if the result set is large
-export const TableFromQuery = memo(function TableFromQuery(props: TableProps) {
-    return <TableFromQueryUnmemoized {...props} />
-})
-
-function TableFromQueryUnmemoized(props: TableProps) {
-    const { project, showToolbar } = props
-    const query = 'query' in props ? stripIndent(props.query) : combineQueries(props.queries)
-
-    const result = useProjectDbQuery(project, query)
-
-    const data = result && result.status === 'success' ? result.data : undefined
-
-    if (result && result.status === 'error') {
-        return <Alert severity="error">{result.errorMessage}</Alert>
-    }
-
-    if (!data || !result || result.status === 'loading') return <CircularProgress />
-
-    const table = fromArrow(data as ArrowTable, { useDate: true })
-
-    const columns = table.columnNames().map(
-        (colName): GridColDef => ({
-            field: colName,
-            ...(colName in knownColumnMap ? knownColumnMap[colName] : {}),
-        })
-    )
-
-    const rows = table.objects().map((row, index) => ({ ...row, __index: index }))
-
-    return (
-        <DataGrid
-            slots={{ toolbar: showToolbar ? CustomTableToolbar : undefined }}
-            slotProps={{
-                toolbar: {
-                    showQuickFilter: true,
-                },
-            }}
-            rows={rows}
-            columns={columns}
-            getRowId={(row) => row.__index}
-            density="compact"
-            sx={{
-                fontFamily: 'monospace',
-            }}
-        />
-    )
-}
diff --git a/web/src/pages/report/components/MetricFromQuery.tsx b/web/src/pages/report/components/MetricFromQuery.tsx
new file mode 100644
index 000000000..fd7906507
--- /dev/null
+++ b/web/src/pages/report/components/MetricFromQuery.tsx
@@ -0,0 +1,54 @@
+import { Alert, Box, Divider, Typography } from '@mui/material'
+import { fromArrow } from 'arquero'
+import { ArrowTable } from 'arquero/dist/types/format/types'
+import { Fragment } from 'react'
+import { formatQuery, UnformattedQuery } from '../data/formatQuery'
+import { useProjectDbQuery } from '../data/projectDatabase'
+import ReportItemLoader from './ReportItemLoader'
+
+export type MetricProps = {
+    project: string
+    query: UnformattedQuery
+}
+
+export function MetricFromQuery(props: MetricProps) {
+    const { project } = props
+    const query = formatQuery(props.query)
+    const result = useProjectDbQuery(project, query)
+
+    const data = result && result.status === 'success' ? result.data : undefined
+
+    if (!result || result.status === 'loading') return <ReportItemLoader />
+
+    if (result && result.status === 'error') {
+        return (
+            <Box>
+                <Alert severity="error">{result.errorMessage}</Alert>
+            </Box>
+        )
+    }
+
+    const table = fromArrow(data as ArrowTable)
+
+    const columns = table.columnNames()
+
+    return (
+        <Box>
+            <Box display={'flex'} gap={2}>
+                {columns.map((col, index) => (
+                    <Fragment key={col}>
+                        {index !== 0 && <Divider orientation="vertical" flexItem />}
+                        <Box>
+                            <Box>
+                                <Typography fontSize={12}>{col}</Typography>
+                            </Box>
+                            <Box>
+                                <Typography fontSize={40}>{table.get(col, 0)}</Typography>
+                            </Box>
+                        </Box>
+                    </Fragment>
+                ))}
+            </Box>
+        </Box>
+    )
+}
diff --git a/web/src/pages/report/components/PlotFromQuery.tsx b/web/src/pages/report/components/PlotFromQuery.tsx
new file mode 100644
index 000000000..8cd4ef42f
--- /dev/null
+++ b/web/src/pages/report/components/PlotFromQuery.tsx
@@ -0,0 +1,62 @@
+import { Alert, Box } from '@mui/material'
+import * as Plot from '@observablehq/plot'
+import { Table, TypeMap } from 'apache-arrow'
+import { useEffect, useRef } from 'react'
+import { useMeasure } from 'react-use'
+import { formatQuery, UnformattedQuery } from '../data/formatQuery'
+import { useProjectDbQuery } from '../data/projectDatabase'
+import ReportItemLoader from './ReportItemLoader'
+
+type PlotInputFunc = (data: Table<TypeMap>) => Omit<Plot.PlotOptions, 'width' | 'height'>
+
+export type PlotProps = {
+    project: string
+    query: UnformattedQuery
+    plot: PlotInputFunc
+}
+
+export function PlotFromQuery(props: PlotProps) {
+    const containerRef = useRef<HTMLDivElement>(null)
+
+    const { project, plot: getPlotOptions } = props
+    const query = formatQuery(props.query)
+    const result = useProjectDbQuery(project, query)
+
+    const [measureRef, { width, height }] = useMeasure<HTMLDivElement>()
+
+    const data = result && result.status === 'success' ? result.data : undefined
+
+    useEffect(() => {
+        if (!data) return
+        const plotOptions = getPlotOptions(data)
+        console.log(width, height)
+        const plot = Plot.plot({
+            ...plotOptions,
+            width,
+            height,
+        })
+        containerRef.current?.append(plot)
+        return () => plot.remove()
+    }, [data, width, height, getPlotOptions])
+
+    return (
+        <Box>
+            <div
+                ref={measureRef}
+                style={{
+                    width: '100%',
+                    height: '100%',
+                    position: 'absolute',
+                    zIndex: -1,
+                    top: 0,
+                    left: 0,
+                }}
+            />
+            {!result || result.status === 'loading' ? <ReportItemLoader /> : null}
+            <div ref={containerRef} />
+            {result && result.status === 'error' && (
+                <Alert severity="error">{result.errorMessage}</Alert>
+            )}
+        </Box>
+    )
+}
diff --git a/web/src/pages/report/components/Report.tsx b/web/src/pages/report/components/Report.tsx
new file mode 100644
index 000000000..2a013f09b
--- /dev/null
+++ b/web/src/pages/report/components/Report.tsx
@@ -0,0 +1,9 @@
+import { Box } from '@mui/material'
+
+export default function Report(props: { children: React.ReactNode }) {
+    return (
+        <Box display={'flex'} flexDirection={'column'} gap={2}>
+            {props.children}
+        </Box>
+    )
+}
diff --git a/web/src/pages/report/components/ReportItem.tsx b/web/src/pages/report/components/ReportItem.tsx
new file mode 100644
index 000000000..53248cf80
--- /dev/null
+++ b/web/src/pages/report/components/ReportItem.tsx
@@ -0,0 +1,180 @@
+import { Box, Card, CardActions, CardContent, Typography } from '@mui/material'
+import { formatQuery } from '../data/formatQuery'
+import { MetricFromQuery, MetricProps } from './MetricFromQuery'
+import { PlotFromQuery, PlotProps } from './PlotFromQuery'
+import {
+    ActionViewEditSql,
+    ActionViewExpandedPlot,
+    ActionViewExpandedTable,
+} from './ReportItemActions'
+import { TableFromQuery, TableProps } from './TableFromQuery'
+
+type BaseReportItemProps = {
+    title?: string
+    subtitle?: string
+    description?: string
+    height: number
+    flexBasis?: number | string
+    flexGrow: number
+    flexShrink?: number
+    minWidth?: number | string
+    maxWidth?: number | string
+}
+
+type ReportItemContentProps = {
+    content: React.ReactNode
+    actions: React.ReactNode
+}
+
+export function ReportItem(props: BaseReportItemProps & ReportItemContentProps) {
+    const { flexBasis, flexGrow, flexShrink, minWidth, maxWidth } = props
+    return (
+        <Card
+            sx={{
+                position: 'relative',
+                display: 'flex',
+                height: props.height,
+                flexBasis,
+                flexGrow,
+                flexShrink,
+                minWidth,
+                maxWidth,
+            }}
+        >
+            <CardActions
+                disableSpacing
+                sx={{
+                    position: 'absolute',
+                    right: 0,
+                }}
+            >
+                {props.actions}
+            </CardActions>
+            <CardContent
+                sx={{
+                    display: 'flex',
+                    gap: 2,
+                    flexDirection: 'column',
+                    flexGrow: 1,
+                    height: '100%',
+                    contain: 'size',
+                }}
+            >
+                {(props.title || props.subtitle) && (
+                    <Box>
+                        {props.title && (
+                            <Typography fontWeight={'bold'} fontSize={16}>
+                                {props.title}
+                            </Typography>
+                        )}
+                        {props.subtitle && <Typography fontSize={14}>{props.subtitle}</Typography>}
+                    </Box>
+                )}
+                <Box
+                    flexGrow={1}
+                    sx={{
+                        position: 'relative',
+                        // This is a bit of a lesser known css property.
+                        // setting contain to 'size' will sever the link between the container
+                        // and the content in it, meaning that the container will no longer grow
+                        // with the child content. This is useful for this sort of dashboard layout
+                        // where we want the content of the card to fill up the space left over by
+                        // the title, subtitle and description. This ensures nice alignment of cards
+                        // with the same height specified.
+                        contain: 'size',
+                    }}
+                >
+                    {props.content}
+                </Box>
+                {props.description && (
+                    <Box width={'100%'}>
+                        <Typography fontSize={12}>{props.description}</Typography>
+                    </Box>
+                )}
+            </CardContent>
+        </Card>
+    )
+}
+
+type ReportItemPlotProps = BaseReportItemProps & PlotProps
+
+export function ReportItemPlot(props: ReportItemPlotProps) {
+    const { project, query: unformattedQuery, plot, ...reportItemProps } = props
+    const query = formatQuery(unformattedQuery)
+
+    return (
+        <ReportItem
+            content={<PlotFromQuery project={props.project} query={query} plot={props.plot} />}
+            actions={
+                <Box>
+                    <ActionViewEditSql project={props.project} query={query} />
+                    <ActionViewExpandedPlot
+                        project={props.project}
+                        query={query}
+                        plot={props.plot}
+                    />
+                    <ActionViewExpandedTable project={props.project} query={query} />
+                </Box>
+            }
+            {...reportItemProps}
+        />
+    )
+}
+
+type ReportItemTableProps = BaseReportItemProps & TableProps
+
+export function ReportItemTable(props: ReportItemTableProps) {
+    const { project, query: unformattedQuery, showToolbar, ...reportItemProps } = props
+    const query = formatQuery(unformattedQuery)
+
+    return (
+        <ReportItem
+            content={
+                <Box
+                    display={'flex'}
+                    flexDirection={'column'}
+                    position={'absolute'}
+                    height={'100%'}
+                    width={'100%'}
+                >
+                    <TableFromQuery
+                        project={props.project}
+                        query={query}
+                        showToolbar={props.showToolbar}
+                    />
+                </Box>
+            }
+            actions={
+                <Box>
+                    <ActionViewEditSql project={props.project} query={query} />
+                    <ActionViewExpandedTable project={props.project} query={query} />
+                </Box>
+            }
+            {...reportItemProps}
+        />
+    )
+}
+
+type ReportItemMetricProps = BaseReportItemProps & MetricProps
+
+export function ReportItemMetric(props: ReportItemMetricProps) {
+    const { project, query: unformattedQuery, ...reportItemProps } = props
+    const query = formatQuery(unformattedQuery)
+
+    return (
+        <ReportItem
+            content={
+                <Box>
+                    <MetricFromQuery project={props.project} query={query} />
+                </Box>
+            }
+            actions={
+                <Box>
+                    <ActionViewEditSql project={props.project} query={query} />
+                    <ActionViewExpandedTable project={props.project} query={query} />
+                </Box>
+            }
+            {...reportItemProps}
+        />
+    )
+}
diff --git a/web/src/pages/report/components/ReportItemActions.tsx b/web/src/pages/report/components/ReportItemActions.tsx
new file mode 100644
index 000000000..b31f9692c
--- /dev/null
+++ b/web/src/pages/report/components/ReportItemActions.tsx
@@ -0,0 +1,80 @@
+import CodeIcon from '@mui/icons-material/Code'
+import OpenInFullIcon from '@mui/icons-material/OpenInFull'
+import TableChartIcon from '@mui/icons-material/TableChart'
+
+import { Box, IconButton, Modal, Tooltip } from '@mui/material'
+import { useState } from 'react'
+import { PlotFromQuery, PlotProps } from './PlotFromQuery'
+import { TableFromQuery } from './TableFromQuery'
+
+const modalStyle = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    maxHeight: '100vh',
+    overflow: 'hidden',
+    width: 'calc(100% - 50px)',
+    bgcolor: 'background.paper',
+    boxShadow: 24,
+    p: 4,
+}
+
+export function ActionViewExpandedTable({ query, project }: { project: string; query: string }) {
+    const [showingTable, setShowingTable] = useState(false)
+
+    return (
+        <>
+            <Tooltip title="View expanded table" arrow>
+                <IconButton onClick={() => setShowingTable(true)}>
+                    <TableChartIcon fontSize="small" />
+                </IconButton>
+            </Tooltip>
+            <Modal open={showingTable} onClose={() => setShowingTable(false)}>
+                <Box sx={modalStyle}>
+                    <div
+                        style={{
+                            display: 'flex',
+                            maxHeight: '70vh',
+                            flexDirection: 'column',
+                        }}
+                    >
+                        <TableFromQuery query={query} project={project} />
+                    </div>
+                </Box>
+            </Modal>
+        </>
+    )
+}
+
+export function ActionViewEditSql({ query, project }: { project: string; query: string }) {
+    return (
+        <Tooltip title="View/Edit SQL" arrow>
+            <IconButton
+                target={'_blank'}
+                href={`/project/${project}/query?query=${encodeURIComponent(query)}`}
+            >
+                <CodeIcon fontSize="small" />
+            </IconButton>
+        </Tooltip>
+    )
+}
+
+export function ActionViewExpandedPlot(props: PlotProps) {
+    const [expanded, setExpanded] = useState(false)
+
+    return (
+        <>
+            <Tooltip title="Expand chart" arrow>
+                <IconButton onClick={() => setExpanded(true)}>
+                    <OpenInFullIcon fontSize="small" />
+                </IconButton>
+            </Tooltip>
+            <Modal open={expanded} onClose={() => setExpanded(false)}>
+                <Box sx={{ ...modalStyle, height: '80vh' }}>
+                    <PlotFromQuery {...props} />
+                </Box>
+            </Modal>
+        </>
+    )
+}
diff --git a/web/src/pages/report/components/ReportItemLoader.tsx b/web/src/pages/report/components/ReportItemLoader.tsx
new file mode 100644
index 000000000..303298156
--- /dev/null
+++ b/web/src/pages/report/components/ReportItemLoader.tsx
@@ -0,0 +1,16 @@
+import { Box, CircularProgress } from '@mui/material'
+
+export default function ReportItemLoader() {
+    return (
+        <Box
+            sx={{
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)',
+            }}
+        >
+            <CircularProgress />
+        </Box>
+    )
+}
diff --git a/web/src/pages/report/components/ReportRow.tsx b/web/src/pages/report/components/ReportRow.tsx
new file mode 100644
index 000000000..768e133d0
--- /dev/null
+++ b/web/src/pages/report/components/ReportRow.tsx
@@ -0,0 +1,9 @@
+import { Box } from '@mui/material'
+
+export default function ReportRow(props: { children: React.ReactNode }) {
+    return (
+        <Box display={'flex'} gap={2} flexWrap={'wrap'}>
+            {props.children}
+        </Box>
+    )
+}
diff --git a/web/src/pages/report/components/TableFromQuery.tsx b/web/src/pages/report/components/TableFromQuery.tsx
new file mode 100644
index 000000000..2a5769cb0
--- /dev/null
+++ b/web/src/pages/report/components/TableFromQuery.tsx
@@ -0,0 +1,92 @@
+import { Alert, Box } from '@mui/material'
+import {
+    DataGrid,
+    GridColDef,
+    GridToolbarContainer,
+    GridToolbarExport,
+    GridToolbarQuickFilter,
+} from '@mui/x-data-grid'
+
+import { fromArrow } from 'arquero'
+import { ArrowTable } from 'arquero/dist/types/format/types'
+import { memo } from 'react'
+import { Link } from 'react-router-dom'
+import { formatQuery, UnformattedQuery } from '../data/formatQuery'
+import { useProjectDbQuery } from '../data/projectDatabase'
+import ReportItemLoader from './ReportItemLoader'
+
+export type TableProps = {
+    project: string
+    query: UnformattedQuery
+    showToolbar?: boolean
+}
+
+// Provide custom rendering for some known columns, this allows adding links to the table
+const knownColumnMap: Record<string, Omit<GridColDef, 'field'>> = {
+    participant_id: {
+        renderCell: (params) => <Link to={`/participant/${params.value}`}>{params.value}</Link>,
+    },
+    sample_id: {
+        renderCell: (params) => <Link to={`/sample/${params.value}`}>{params.value}</Link>,
+    },
+}
+
+function CustomTableToolbar() {
+    return (
+        <GridToolbarContainer>
+            <GridToolbarExport />
+            <Box sx={{ flexGrow: 1 }} />
+            <GridToolbarQuickFilter />
+        </GridToolbarContainer>
+    )
+}
+
+// Memoized version of the result table to avoid rerenders, they can be very expensive
+// if the result set is large
+export const TableFromQuery = memo(function TableFromQuery(props: TableProps) {
+    return <TableFromQueryUnmemoized {...props} />
+})
+
+function TableFromQueryUnmemoized(props: TableProps) {
+    const { project, showToolbar } = props
+    const query = formatQuery(props.query)
+
+    const result = useProjectDbQuery(project, query)
+
+    const data = result && result.status === 'success' ? result.data : undefined
+
+    if (result && result.status === 'error') {
+        return <Alert severity="error">{result.errorMessage}</Alert>
+    }
+
+    if (!data || !result || result.status === 'loading') return <ReportItemLoader />
+
+    const table = fromArrow(data as ArrowTable, { useDate: true })
+
+    const columns = table.columnNames().map(
+        (colName): GridColDef => ({
+            field: colName,
+            ...(colName in knownColumnMap ? knownColumnMap[colName] : {}),
+        })
+    )
+
+    const rows = table.objects().map((row, index) => ({ ...row, __index: index }))
+
+    return (
+        <DataGrid
+            slots={{ toolbar: showToolbar ? CustomTableToolbar : undefined }}
+            slotProps={{
+                toolbar: {
+                    showQuickFilter: true,
+                },
+            }}
+            rows={rows}
+            columns={columns}
+            getRowId={(row) => row.__index}
+            density="compact"
+            sx={{
+                fontFamily: 'monospace',
+            }}
+        />
+    )
+}
diff --git a/web/src/pages/report/data/combineQueries.ts b/web/src/pages/report/data/formatQuery.ts
similarity index 86%
rename from web/src/pages/report/data/combineQueries.ts
rename to web/src/pages/report/data/formatQuery.ts
index ab4b7d4a4..372b99467 100644
--- a/web/src/pages/report/data/combineQueries.ts
+++ b/web/src/pages/report/data/formatQuery.ts
@@ -1,14 +1,17 @@
 import { stripIndent } from 'common-tags'
 
-type Query = {
+export type NamedQueryPart = {
     name: string
     query: string
 }
 
+export type UnformattedQuery = string | NamedQueryPart[]
+
 // Take a list of queries and combine them into a single query using CTEs
 // This allows viewing of steps that are used to arrive at a final aggregated query
-export default function combineQueries(queries: Query[]) {
-    const cleanQueries = queries.map((qq) => {
+export function formatQuery(query: UnformattedQuery) {
+    if (typeof query === 'string') return stripIndent(query)
+    const cleanQueries = query.map((qq) => {
         return {
             ...qq,
             // remove any trailing semicolons from the query, in case they were added accidentally
diff --git a/web/src/pages/report/reportIndex.ts b/web/src/pages/report/reportIndex.ts
new file mode 100644
index 000000000..2d51671a4
--- /dev/null
+++ b/web/src/pages/report/reportIndex.ts
@@ -0,0 +1,39 @@
+import OurDnaDemographics from './reports/ourdna/Demographics'
+import OurDnaProcessingTimes from './reports/ourdna/ProcessingTimes'
+import OurDnaRecruitment from './reports/ourdna/Recruitment'
+
+type ReportTab = {
+    title: string
+    id: string
+    content: React.ComponentType
+}
+
+type ReportDefinition = {
+    title: string
+    tabs: ReportTab[]
+}
+
+export const reports: Record<string, Record<string, ReportDefinition>> = {
+    ourdna: {
+        dashboard: {
+            title: 'OurDNA Dashboard',
+            tabs: [
+                {
+                    title: 'Recruitment',
+                    id: 'recruitment',
+                    content: OurDnaRecruitment,
+                },
+                {
+                    title: 'Processing Times',
+                    id: 'processing_times',
+                    content: OurDnaProcessingTimes,
+                },
+                {
+                    title: 'Demographics',
+                    id: 'demographics',
+                    content: OurDnaDemographics,
+                },
+            ],
+        },
+    },
+}
diff --git a/web/src/pages/report/reports/ourdna/Demographics.tsx b/web/src/pages/report/reports/ourdna/Demographics.tsx
new file mode 100644
index 000000000..68f237008
--- /dev/null
+++ b/web/src/pages/report/reports/ourdna/Demographics.tsx
@@ -0,0 +1,227 @@
+import * as Plot from '@observablehq/plot'
+import Report from '../../components/Report'
+import { ReportItemMetric, ReportItemPlot } from '../../components/ReportItem'
+import ReportRow from '../../components/ReportRow'
+
+const ROW_HEIGHT = 450
+const PROJECT = 'ourdna'
+
+const PROCESS_DURATION_QUERY = `
+    select
+        s.sample_id,
+        cast(s.participant_id as string) as participant_id,
+        coalesce(s."meta_processing-site", 'Unknown') as processing_site,
+        
+        try_strptime(nullif("meta_collection-time", ' '), '%Y-%m-%d %H:%M:%S') as collection_time,
+        try_strptime(nullif("meta_process-end-time", ' '), '%Y-%m-%d %H:%M:%S') as process_end_time,
+        date_diff(
+            'hour',
+            try_strptime(nullif("meta_collection-time", ' '), '%Y-%m-%d %H:%M:%S'),
+            try_strptime(nullif("meta_process-end-time", ' '), '%Y-%m-%d %H:%M:%S')
+        ) as duration
+    from sample s
+    join participant p
+    on p.participant_id = s.participant_id
+    where s.type = 'blood'
+`
+
+export default function Demographics() {
+    return (
+        <Report>
+            <ReportRow>
+                <ReportItemMetric
+                    project={PROJECT}
+                    height={ROW_HEIGHT}
+                    flexBasis={200}
+                    flexGrow={1}
+                    title="Ratio of reported sex"
+                    subtitle="For participants who have reported"
+                    description="This chart shows the ratio of participants that have responded by reporting their sex"
+                    query={`
+                        select
+                            count(*) filter (reported_sex = 1) as male,
+                            count(*) filter (reported_sex = 2) as female
+                        from participant
+                    `}
+                />
+                <ReportItemPlot
+                    project={PROJECT}
+                    height={ROW_HEIGHT}
+                    flexGrow={3}
+                    flexBasis={720}
+                    title={'Participant count by ancestry over time'}
+                    query={[
+                        {
+                            name: 'all_ancestries',
+                            query: `
+                                select
+                                    p.participant_id,
+                                    "meta_collection-time" as collection_time,
+                                    unnest(p."meta_ancestry-participant-ancestry") as ancestry
+                                from participant p
+                                join sample s
+                                on s.participant_id = p.participant_id
+                                where collection_time is not null
+                                and collection_time != ' '
+                            `,
+                        },
+                        {
+                            name: 'counts_by_week',
+                            query: `
+                                select
+                                    coalesce(count(distinct participant_id), 0) as participants,
+                                    date_trunc(
+                                        'week',
+                                        try_strptime(
+                                            nullif(
+                                                collection_time,
+                                                ' '
+                                            ),
+                                            '%Y-%m-%d %H:%M:%S'
+                                        )
+                                    ) as week,
+                                    ancestry
+                                from all_ancestries p
+                                group by week, ancestry
+                            `,
+                        },
+                        {
+                            name: 'weeks',
+                            query: `
+                                select
+                                    unnest(generate_series(min(week), max(week), interval '1 week')) as week
+                                from
+                                counts_by_week
+                            `,
+                        },
+                        {
+                            name: 'ancestries',
+                            query: `
+                                select distinct ancestry from counts_by_week
+                            `,
+                        },
+                        {
+                            name: 'filled',
+                            query: `
+                                select
+                                    coalesce(r.participants, 0) as participants,
+                                    strftime(w.week, '%Y-%m-%d') as week,
+                                    a.ancestry,
+                                    
+                                from weeks w
+                                join ancestries a on true
+                                left join counts_by_week r
+                                on r.week = w.week
+                                and r.ancestry = a.ancestry
+                                order by 2, 3
+                            `,
+                        },
+                        {
+                            name: 'result',
+                            query: `
+                                select
+                                    (SUM(participants) over (PARTITION BY ancestry  ORDER BY week ROWS BETWEEN UNBOUNDED PRECEDING AND CURRENT ROW)) as count,
+                                    ancestry,
+                                    week
+                                from filled
+                            `,
+                        },
+                    ]}
+                    plot={(data) => ({
+                        marginLeft: 40,
+                        inset: 10,
+                        y: {
+                            grid: true,
+                            label: 'Participants',
+                        },
+                        x: {
+                            type: 'time',
+                        },
+                        marks: [
+                            Plot.areaY(data, {
+                                x: 'week',
+                                y: 'count',
+                                fill: 'ancestry',
+                                tip: true,
+                                order: 'sum',
+                            }),
+                            Plot.ruleY([0]),
+                        ],
+                    })}
+                />
+            </ReportRow>
+            <ReportRow>
+                <ReportItemPlot
+                    height={ROW_HEIGHT}
+                    project={PROJECT}
+                    flexGrow={1}
+                    flexBasis={400}
+                    title="Participant age and reported sex"
+                    description="Age buckets for participants. (note, the ages are based off the birth year so may be +- 1 year depending on DOB"
+                    query={`
+                        select
+                            participant_id,
+                            CASE reported_sex WHEN 1 THEN 'male' WHEN 2 THEN 'female' ELSE 'other/unknown' END as reported_sex,
+                            date_part('year', current_date()) - try_cast("meta_birth-year" as int) as age
+                        from participant
+                        where date_part('year', current_date()) - try_cast("meta_birth-year" as int) is not null
+                    `}
+                    plot={(data) => ({
+                        color: { legend: true },
+                        marks: [
+                            Plot.rectY(
+                                data,
+                                Plot.binX<Plot.RectYOptions>(
+                                    { y: 'count' },
+                                    { x: 'age', fill: 'reported_sex', tip: true }
+                                )
+                            ),
+                        ],
+                    })}
+                />
+                <ReportItemPlot
+                    height={ROW_HEIGHT}
+                    project={PROJECT}
+                    flexGrow={1}
+                    flexBasis={400}
+                    title="Ancestry totals"
+                    description="Count of participant by ancestry, each participant may have multiple ancestries"
+                    query={`
+                        with all_ancestries as (
+                            select
+                                p.participant_id,
+                                unnest(p."meta_ancestry-participant-ancestry") as ancestry
+                            from participant p
+                        )
+                        select
+                            count(distinct participant_id) as count,
+                            ancestry
+                        from all_ancestries
+                        group by 2
+                        order by 1 desc
+                    `}
+                    plot={(data) => ({
+                        marginLeft: 160,
+                        inset: 10,
+                        color: {
+                            scheme: 'Observable10',
+                            reverse: true,
+                        },
+                        marks: [
+                            Plot.barX(data, {
+                                y: 'ancestry',
+                                fill: 'ancestry',
+                                x: 'count',
+                                tip: true,
+                                sort: {
+                                    y: 'x',
+                                    reverse: true,
+                                },
+                            }),
+                        ],
+                    })}
+                />
+            </ReportRow>
+        </Report>
+    )
+}
diff --git a/web/src/pages/report/reports/ourdna/ProcessingTimes.tsx b/web/src/pages/report/reports/ourdna/ProcessingTimes.tsx
new file mode 100644
index 000000000..6504d2bed
--- /dev/null
+++ b/web/src/pages/report/reports/ourdna/ProcessingTimes.tsx
@@ -0,0 +1,194 @@
+import * as Plot from '@observablehq/plot'
+import Report from '../../components/Report'
+import { ReportItemPlot, ReportItemTable } from '../../components/ReportItem'
+import ReportRow from '../../components/ReportRow'
+
+const ROW_HEIGHT = 450
+const PROJECT = 'ourdna'
+
+const PROCESS_DURATION_QUERY = `
+    select
+        s.sample_id,
+        cast(s.participant_id as string) as participant_id,
+        coalesce(s."meta_processing-site", 'Unknown') as processing_site,
+        
+        try_strptime(nullif("meta_collection-time", ' '), '%Y-%m-%d %H:%M:%S') as collection_time,
+        try_strptime(nullif("meta_process-end-time", ' '), '%Y-%m-%d %H:%M:%S') as process_end_time,
+        date_diff(
+            'hour',
+            try_strptime(nullif("meta_collection-time", ' '), '%Y-%m-%d %H:%M:%S'),
+            try_strptime(nullif("meta_process-end-time", ' '), '%Y-%m-%d %H:%M:%S')
+        ) as duration
+    from sample s
+    join participant p
+    on p.participant_id = s.participant_id
+    where s.type = 'blood'
+`
+
+export default function ProcessingTimes() {
+    return (
+        <Report>
+            <ReportRow>
+                <ReportItemPlot
+                    height={ROW_HEIGHT}
+                    flexGrow={1}
+                    title="Processing times for all samples"
+                    description="This excludes any samples with > 100 hour processing times, and any that have missing or malformed collection or processing times"
+                    project={PROJECT}
+                    query={[
+                        {
+                            name: 'durations',
+                            query: PROCESS_DURATION_QUERY,
+                        },
+                        {
+                            name: 'result',
+                            query: `
+                                select * from durations where duration < 100 and duration > 0
+                            `,
+                        },
+                    ]}
+                    plot={(data) => ({
+                        y: { grid: true, padding: 5, label: 'duration(hrs)' },
+                        x: { grid: true, padding: 5 },
+                        marginTop: 20,
+                        marginRight: 20,
+                        marginBottom: 30,
+
+                        marginLeft: 40,
+                        marks: [
+                            Plot.ruleY([24, 48, 72], { stroke: '#ff725c' }),
+                            Plot.dot(data, {
+                                x: 'collection_time',
+                                y: 'duration',
+                                stroke: null,
+                                fill: '#4269d0',
+                                fillOpacity: 0.5,
+                                channels: {
+                                    process_end: 'process_end_time',
+                                    sample_id: 'sample_id',
+                                    participant_id: 'participant_id',
+                                },
+                                tip: true,
+                            }),
+                        ],
+                    })}
+                />
+
+                <ReportItemPlot
+                    height={ROW_HEIGHT}
+                    flexGrow={1}
+                    title="Processing time buckets"
+                    description="Count of participants with their samples processed in each bucket"
+                    project={PROJECT}
+                    query={[
+                        { name: 'durations', query: PROCESS_DURATION_QUERY },
+                        {
+                            name: 'result',
+                            query: `
+                            select
+                                count(distinct participant_id) as count,
+                                CASE
+                                    WHEN duration < 24 THEN '0-24 hours'
+                                    WHEN duration >= 24 AND duration < 36 THEN '24-36 hours'
+                                    WHEN duration >= 36 AND duration < 48 THEN '36-48 hours'
+                                    WHEN duration >= 48 AND duration < 72 THEN '48-72 hours'
+                                    ELSE '72+ hours'
+                                END AS duration
+                            from durations group by 2 order by 2    
+                        `,
+                        },
+                    ]}
+                    plot={(data) => ({
+                        marginLeft: 100,
+                        inset: 10,
+                        color: {
+                            scheme: 'RdYlGn',
+                            reverse: true,
+                        },
+                        marks: [
+                            Plot.barX(data, {
+                                y: 'duration',
+                                x: 'count',
+                                tip: true,
+                                fill: 'duration',
+                            }),
+                        ],
+                    })}
+                />
+            </ReportRow>
+            <ReportRow>
+                <ReportItemPlot
+                    height={ROW_HEIGHT}
+                    flexGrow={1}
+                    flexBasis={400}
+                    title="Processing time by site"
+                    description="Count of participants processed in each time bucket by processing site"
+                    project={PROJECT}
+                    query={[
+                        { name: 'durations', query: PROCESS_DURATION_QUERY },
+                        {
+                            name: 'result',
+                            query: `
+                            select
+                                count(distinct participant_id) as count,
+                                processing_site,
+                                CASE
+                                    WHEN duration < 24 THEN '0-24 hours'
+                                    WHEN duration >= 24 AND duration < 36 THEN '24-36 hours'
+                                    WHEN duration >= 36 AND duration < 48 THEN '36-48 hours'
+                                    WHEN duration >= 48 AND duration < 72 THEN '48-72 hours'
+                                    ELSE '72+ hours'
+                                END AS duration
+                            from durations group by 2,3 order by 2,3    
+                        `,
+                        },
+                    ]}
+                    plot={(data) => ({
+                        marginLeft: 100,
+                        marginRight: 100,
+                        inset: 10,
+                        color: {
+                            scheme: 'RdYlGn',
+                            reverse: true,
+                        },
+                        marks: [
+                            Plot.barX(data, {
+                                y: 'processing_site',
+                                fy: 'duration',
+                                x: 'count',
+                                tip: true,
+                                fill: 'duration',
+                            }),
+                        ],
+                    })}
+                />
+
+                <ReportItemTable
+                    height={ROW_HEIGHT}
+                    flexGrow={1}
+                    flexBasis={300}
+                    title="All sample processing times"
+                    project={PROJECT}
+                    showToolbar={true}
+                    query={[
+                        { name: 'durations', query: PROCESS_DURATION_QUERY },
+                        {
+                            name: 'result',
+                            query: `
+                                select
+                                    sample_id,
+                                    participant_id,
+                                    processing_site,
+                                    strftime(collection_time, '%Y-%m-%d %H:%M:%S') as collection_time,
+                                    strftime(process_end_time, '%Y-%m-%d %H:%M:%S') as process_end_time,
+                                    duration
+                                from durations
+                                order by duration desc nulls last
+                            `,
+                        },
+                    ]}
+                />
+            </ReportRow>
+        </Report>
+    )
+}
diff --git a/web/src/pages/report/reports/ourdna/Recruitment.tsx b/web/src/pages/report/reports/ourdna/Recruitment.tsx
new file mode 100644
index 000000000..2adffdd20
--- /dev/null
+++ b/web/src/pages/report/reports/ourdna/Recruitment.tsx
@@ -0,0 +1,96 @@
+import * as Plot from '@observablehq/plot'
+import Report from '../../components/Report'
+import { ReportItemPlot } from '../../components/ReportItem'
+import ReportRow from '../../components/ReportRow'
+
+const ROW_HEIGHT = 400
+const PROJECT = 'ourdna'
+
+export default function Recruitment() {
+    return (
+        <Report>
+            <ReportRow>
+                <ReportItemPlot
+                    height={ROW_HEIGHT}
+                    flexGrow={1}
+                    title="Recruitment funnel"
+                    description="The number of participants at each stage of recruitment"
+                    project={PROJECT}
+                    query={`
+                        with funnel as (
+                            select
+                                count(distinct p.participant_id) as "All Participants",
+                                count(distinct p.participant_id) filter (
+                                    p."meta_blood-consent" = 'yes' and p."meta_informed-consent" = 'yes'
+                                ) as "Participants consented",
+                                count(distinct p.participant_id) filter (s.sample_id is not null) as "Participants with samples"
+                            from participant p
+                            left join sample s
+                            on s.participant_id = p.participant_id
+                        ) unpivot funnel
+                        on columns (*)
+                        into name stage value count
+                    `}
+                    plot={(data) => ({
+                        marginLeft: 160,
+                        inset: 10,
+                        marks: [
+                            Plot.barX(data, {
+                                y: 'stage',
+                                x: 'count',
+                                tip: true,
+                                fill: 'stage',
+                            }),
+                        ],
+                    })}
+                />
+
+                <ReportItemPlot
+                    height={ROW_HEIGHT}
+                    flexGrow={1}
+                    title="Recruitment types"
+                    description="How the participant was recruited"
+                    project={PROJECT}
+                    query={`
+                        select
+                            count(distinct participant_id) as count,
+                            CASE coalesce("meta_collection-event-type", '__NULL__')
+                                WHEN 'POE'
+                                    THEN 'POE?'
+
+                                WHEN 'Walk-in'
+                                    THEN 'Walk in'
+                                WHEN 'Walk In'
+                                    THEN 'Walk in'
+
+                                WHEN 'OSS'
+                                    THEN 'Once Stop Shop'
+                                
+                                WHEN '__NULL__'
+                                    THEN 'Unknown'
+
+                                ELSE "meta_collection-event-type"
+
+                            END as collection_type
+                        from sample s
+                        group by 2
+                    `}
+                    plot={(data) => ({
+                        color: { legend: true },
+                        marks: [
+                            Plot.barX(
+                                data,
+                                Plot.stackX({
+                                    x: 'count',
+                                    fill: 'collection_type',
+                                    inset: 0.5,
+                                    tip: true,
+                                })
+                            ),
+                        ],
+                    })}
+                />
+            </ReportRow>
+        </Report>
+    )
+}

From 4a295d4646fdf2fb4c2e8d32d13b1026d0ceae73 Mon Sep 17 00:00:00 2001
From: Dan Coates <dan.coates@populationgenomics.org.au>
Date: Tue, 28 Jan 2025 18:40:49 +1100
Subject: [PATCH 07/12] remove ourdna dashboard from nav

---
 web/src/Routes.tsx                          | 3 ---
 web/src/shared/components/Header/NavBar.tsx | 7 +------
 2 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/web/src/Routes.tsx b/web/src/Routes.tsx
index 4c3bcb71a..3aec04a6b 100644
--- a/web/src/Routes.tsx
+++ b/web/src/Routes.tsx
@@ -22,7 +22,6 @@ import { ParticipantPage } from './pages/participant/ParticipantViewContainer'
 import AnalysisRunnerSummary from './pages/project/AnalysisRunnerView/AnalysisRunnerSummary'
 import ProjectOverview from './pages/project/ProjectOverview'
 import ProjectReport from './pages/report/ProjectReport'
-import OurDnaDashboard from './pages/report/reports/ourdna/OurDnaDashboard'
 import SqlQueryUI from './pages/report/SqlQueryUI'
 import SampleView from './pages/sample/SampleView'
 import ErrorBoundary from './shared/utilities/errorBoundary'
@@ -118,8 +117,6 @@ const Routes: React.FunctionComponent = () => (
             }
         />
 
-        <Route path="/ourdna" element={<OurDnaDashboard />} />
-
         <Route path="/swagger" element={<SwaggerUI url="/openapi.json" tryItOutEnabled={true} />} />
 
         <Route path="/documentation/:id?" element={<DocumentationArticle />} />
diff --git a/web/src/shared/components/Header/NavBar.tsx b/web/src/shared/components/Header/NavBar.tsx
index c1f730220..74181b55a 100644
--- a/web/src/shared/components/Header/NavBar.tsx
+++ b/web/src/shared/components/Header/NavBar.tsx
@@ -12,7 +12,6 @@ import DescriptionIcon from '@mui/icons-material/Description'
 import DisplaySettingsIcon from '@mui/icons-material/DisplaySettings'
 import ExploreIcon from '@mui/icons-material/Explore'
 import InsightsIcon from '@mui/icons-material/Insights'
-import PeopleIcon from '@mui/icons-material/People'
 import SummarizeIcon from '@mui/icons-material/Summarize'
 import TroubleshootIcon from '@mui/icons-material/Troubleshoot'
 import MuckTheDuck from '../MuckTheDuck'
@@ -133,11 +132,7 @@ const NavBar = () => {
             url: '/analysis-runner',
             icon: <InsightsIcon />,
         },
-        {
-            title: 'OurDNA',
-            url: '/ourdna',
-            icon: <PeopleIcon />,
-        },
+
         {
             title: 'Swagger',
             url: '/swagger',

From bfeadb4002bd449befce62321650bb997011812d Mon Sep 17 00:00:00 2001
From: Dan Coates <dan.coates@populationgenomics.org.au>
Date: Wed, 29 Jan 2025 10:31:20 +1100
Subject: [PATCH 08/12] add remaining charts for ourdna dashboard

---
 .../pages/report/components/ReportItem.tsx    |   2 +-
 web/src/pages/report/data/formatQuery.ts      |   2 +
 web/src/pages/report/reportIndex.ts           |  12 +-
 .../report/reports/ourdna/DataQuality.tsx     | 115 ++++++++++++++++++
 .../report/reports/ourdna/Demographics.tsx    |  75 +++++++++---
 .../report/reports/ourdna/Recruitment.tsx     |  50 ++++++++
 ...ocessingTimes.tsx => SampleProcessing.tsx} |  33 +++++
 7 files changed, 266 insertions(+), 23 deletions(-)
 create mode 100644 web/src/pages/report/reports/ourdna/DataQuality.tsx
 rename web/src/pages/report/reports/ourdna/{ProcessingTimes.tsx => SampleProcessing.tsx} (86%)

diff --git a/web/src/pages/report/components/ReportItem.tsx b/web/src/pages/report/components/ReportItem.tsx
index 53248cf80..bb8ba80a6 100644
--- a/web/src/pages/report/components/ReportItem.tsx
+++ b/web/src/pages/report/components/ReportItem.tsx
@@ -61,7 +61,7 @@ export function ReportItem(props: BaseReportItemProps & ReportItemContentProps)
                 }}
             >
                 {(props.title || props.subtitle) && (
-                    <Box>
+                    <Box pr={8}>
                         {props.title && (
                             <Typography fontWeight={'bold'} fontSize={16}>
                                 {props.title}
diff --git a/web/src/pages/report/data/formatQuery.ts b/web/src/pages/report/data/formatQuery.ts
index 372b99467..ee1bf495d 100644
--- a/web/src/pages/report/data/formatQuery.ts
+++ b/web/src/pages/report/data/formatQuery.ts
@@ -19,6 +19,8 @@ export function formatQuery(query: UnformattedQuery) {
         }
     })
 
+    if (cleanQueries.length === 1) return cleanQueries[0].query
+
     const ctes = cleanQueries.slice(0, cleanQueries.length - 1).map((qq) => {
         // To format the query nicely, need to indent each line by the same amount, but no way
         // of knowing what that amount is, as it depends on the code formatting :/ so use a sentinel
diff --git a/web/src/pages/report/reportIndex.ts b/web/src/pages/report/reportIndex.ts
index 2d51671a4..2e64b3f82 100644
--- a/web/src/pages/report/reportIndex.ts
+++ b/web/src/pages/report/reportIndex.ts
@@ -1,6 +1,7 @@
+import OurDnaDataQuality from './reports/ourdna/DataQuality'
 import OurDnaDemographics from './reports/ourdna/Demographics'
-import OurDnaProcessingTimes from './reports/ourdna/ProcessingTimes'
 import OurDnaRecruitment from './reports/ourdna/Recruitment'
+import OurDnaProcessingTimes from './reports/ourdna/SampleProcessing'
 
 type ReportTab = {
     title: string
@@ -24,8 +25,8 @@ export const reports: Record<string, Record<string, ReportDefinition>> = {
                     content: OurDnaRecruitment,
                 },
                 {
-                    title: 'Processing Times',
-                    id: 'processing_times',
+                    title: 'Sample Processing',
+                    id: 'sample_processing',
                     content: OurDnaProcessingTimes,
                 },
                 {
@@ -33,6 +34,11 @@ export const reports: Record<string, Record<string, ReportDefinition>> = {
                     id: 'demographics',
                     content: OurDnaDemographics,
                 },
+                {
+                    title: 'Data Quality',
+                    id: 'data_quality',
+                    content: OurDnaDataQuality,
+                },
             ],
         },
     },
diff --git a/web/src/pages/report/reports/ourdna/DataQuality.tsx b/web/src/pages/report/reports/ourdna/DataQuality.tsx
new file mode 100644
index 000000000..443c6e84b
--- /dev/null
+++ b/web/src/pages/report/reports/ourdna/DataQuality.tsx
@@ -0,0 +1,115 @@
+import Report from '../../components/Report'
+import { ReportItemMetric } from '../../components/ReportItem'
+import ReportRow from '../../components/ReportRow'
+
+const ROW_HEIGHT = 220
+const PROJECT = 'ourdna'
+
+export default function DataQuality() {
+    return (
+        <Report>
+            <ReportRow>
+                <ReportItemMetric
+                    project={PROJECT}
+                    height={ROW_HEIGHT}
+                    flexBasis={300}
+                    flexGrow={1}
+                    title="Participants without a blood sample"
+                    description="Participants who don't have a blood sample"
+                    query={`
+                        select
+                            count(distinct participant_id) as count
+                        from participant p
+                        where not exists (
+                            select 1 from sample s
+                            where s.participant_id = p.participant_id
+                            and s.type = 'blood'
+                        )
+                    `}
+                />
+                <ReportItemMetric
+                    project={PROJECT}
+                    height={ROW_HEIGHT}
+                    flexBasis={300}
+                    flexGrow={1}
+                    title="Samples without a parent blood sample"
+                    description="Samples that aren't correctly nested under a blood sample"
+                    query={`
+                        select
+                            count(distinct sample_id) as count
+                        from sample s
+                        where not exists (
+                            select 1 from sample ss
+                            where ss.sample_id = s.sample_root_id
+                            and ss.type = 'blood'
+                        )
+                    `}
+                />
+                <ReportItemMetric
+                    project={PROJECT}
+                    height={ROW_HEIGHT}
+                    flexBasis={300}
+                    flexGrow={1}
+                    title="Participants without collection times"
+                    description="Participants who do have blood samples, but who don't have a collection time for their blood sample"
+                    query={`
+                        select
+                            count(distinct participant_id) as count
+                        from sample
+                        where type = 'blood'
+                        and "meta_collection-time" is null
+                    `}
+                />
+                <ReportItemMetric
+                    project={PROJECT}
+                    height={ROW_HEIGHT}
+                    flexBasis={300}
+                    flexGrow={1}
+                    title="Participants with invalid collection times"
+                    description="Participants who do have blood sample but whose sample collection times are malformed"
+                    query={`
+                        select
+                            count(distinct participant_id) as count
+                        from sample
+                        where type = 'blood'
+                        and "meta_collection-time" is not null
+                        and try_strptime(nullif("meta_collection-time", ' '), '%Y-%m-%d %H:%M:%S') is null
+                    `}
+                />
+            </ReportRow>
+            <ReportRow>
+                <ReportItemMetric
+                    project={PROJECT}
+                    height={ROW_HEIGHT}
+                    flexBasis={300}
+                    flexGrow={1}
+                    title="Participants without a process end time"
+                    description="Participants who do have blood sample but who are missing a process end time"
+                    query={`
+                        select
+                            count(distinct participant_id) as count
+                        from sample
+                        where type = 'blood'
+                        and "meta_process-end-time" is null
+                    `}
+                />
+                <ReportItemMetric
+                    project={PROJECT}
+                    height={ROW_HEIGHT}
+                    flexBasis={300}
+                    flexGrow={1}
+                    title="Participants with a invalid process end time"
+                    description="Participants who do have blood sample and a process end time, but whose process end times are malformed"
+                    query={`
+                        select
+                            count(distinct participant_id) as count
+                        from sample
+                        where type = 'blood'
+                        and "meta_process-end-time" is not null
+                        and try_strptime(nullif("meta_process-end-time", ' '), '%Y-%m-%d %H:%M:%S') is null
+                    `}
+                />
+            </ReportRow>
+        </Report>
+    )
+}
diff --git a/web/src/pages/report/reports/ourdna/Demographics.tsx b/web/src/pages/report/reports/ourdna/Demographics.tsx
index 68f237008..0bcc8f17b 100644
--- a/web/src/pages/report/reports/ourdna/Demographics.tsx
+++ b/web/src/pages/report/reports/ourdna/Demographics.tsx
@@ -6,25 +6,6 @@ import ReportRow from '../../components/ReportRow'
 const ROW_HEIGHT = 450
 const PROJECT = 'ourdna'
 
-const PROCESS_DURATION_QUERY = `
-    select
-        s.sample_id,
-        cast(s.participant_id as string) as participant_id,
-        coalesce(s."meta_processing-site", 'Unknown') as processing_site,
-        
-        try_strptime(nullif("meta_collection-time", ' '), '%Y-%m-%d %H:%M:%S') as collection_time,
-        try_strptime(nullif("meta_process-end-time", ' '), '%Y-%m-%d %H:%M:%S') as process_end_time,
-        date_diff(
-            'hour',
-            try_strptime(nullif("meta_collection-time", ' '), '%Y-%m-%d %H:%M:%S'),
-            try_strptime(nullif("meta_process-end-time", ' '), '%Y-%m-%d %H:%M:%S')
-        ) as duration
-    from sample s
-    join participant p
-    on p.participant_id = s.participant_id
-    where s.type = 'blood'
-`
-
 export default function Demographics() {
     return (
         <Report>
@@ -168,6 +149,7 @@ export default function Demographics() {
                     `}
                     plot={(data) => ({
                         color: { legend: true },
+                        y: { label: 'count' },
                         marks: [
                             Plot.rectY(
                                 data,
@@ -192,6 +174,8 @@ export default function Demographics() {
                                 p.participant_id,
                                 unnest(p."meta_ancestry-participant-ancestry") as ancestry
                             from participant p
+                            join sample s on s.participant_id = p.participant_id
+                            where s.type = 'blood'
                         )
                         select
                             count(distinct participant_id) as count,
@@ -222,6 +206,59 @@ export default function Demographics() {
                     })}
                 />
             </ReportRow>
+            <ReportRow>
+                <ReportItemPlot
+                    height={800}
+                    project={PROJECT}
+                    flexGrow={1}
+                    flexBasis={400}
+                    title="Ancestry by processing site"
+                    description="Count of participant by ancestry, broken down by processing site. Each participant may have multiple ancestries"
+                    query={`
+                        with all_ancestries as (
+                            select
+                                p.participant_id,
+                                unnest(p."meta_ancestry-participant-ancestry") as ancestry,
+                                coalesce(s."meta_processing-site", 'Unknown') as processing_site
+                            from participant p
+                            join sample s on s.participant_id = p.participant_id
+                            where s.type = 'blood'
+                        )
+                        select
+                            count(distinct participant_id) as count,
+                            ancestry,
+                            processing_site
+                        from all_ancestries
+                        group by 2, 3
+                        order by 1 desc
+                    `}
+                    plot={(data) => ({
+                        marginLeft: 100,
+                        marginRight: 100,
+                        inset: 10,
+                        y: {
+                            inset: 1,
+                        },
+                        color: {
+                            scheme: 'Observable10',
+                            reverse: true,
+                        },
+                        marks: [
+                            Plot.barX(data, {
+                                y: 'processing_site',
+                                fy: 'ancestry',
+                                fill: 'ancestry',
+                                x: 'count',
+                                tip: true,
+                                sort: {
+                                    fy: 'x',
+                                    reverse: true,
+                                },
+                            }),
+                        ],
+                    })}
+                />
+            </ReportRow>
         </Report>
     )
 }
diff --git a/web/src/pages/report/reports/ourdna/Recruitment.tsx b/web/src/pages/report/reports/ourdna/Recruitment.tsx
index 2adffdd20..ebd1e5a4a 100644
--- a/web/src/pages/report/reports/ourdna/Recruitment.tsx
+++ b/web/src/pages/report/reports/ourdna/Recruitment.tsx
@@ -91,6 +91,56 @@ export default function Recruitment() {
                     })}
                 />
             </ReportRow>
+            <ReportRow>
+                <ReportItemPlot
+                    height={ROW_HEIGHT}
+                    flexGrow={1}
+                    title="Recruitment type by processing site"
+                    description="How the participant was recruited, broken down by processing site"
+                    project={PROJECT}
+                    query={`
+                        select
+                            count(distinct participant_id) as count,
+                            CASE coalesce("meta_collection-event-type", '__NULL__')
+                                WHEN 'POE'
+                                    THEN 'POE?'
+
+                                WHEN 'Walk-in'
+                                    THEN 'Walk in'
+                                WHEN 'Walk In'
+                                    THEN 'Walk in'
+
+                                WHEN 'OSS'
+                                    THEN 'Once Stop Shop'
+                                
+                                WHEN '__NULL__'
+                                    THEN 'Unknown'
+
+                                ELSE "meta_collection-event-type"
+
+                            END as collection_type,
+                            coalesce(s."meta_processing-site", 'Unknown') as processing_site,
+                        from sample s
+                        group by 2, 3
+                    `}
+                    plot={(data) => ({
+                        color: { legend: true },
+                        marginLeft: 100,
+                        marks: [
+                            Plot.barX(
+                                data,
+                                Plot.stackX({
+                                    x: 'count',
+                                    y: 'processing_site',
+                                    fill: 'collection_type',
+                                    inset: 0.5,
+                                    tip: true,
+                                })
+                            ),
+                        ],
+                    })}
+                />
+            </ReportRow>
         </Report>
     )
 }
diff --git a/web/src/pages/report/reports/ourdna/ProcessingTimes.tsx b/web/src/pages/report/reports/ourdna/SampleProcessing.tsx
similarity index 86%
rename from web/src/pages/report/reports/ourdna/ProcessingTimes.tsx
rename to web/src/pages/report/reports/ourdna/SampleProcessing.tsx
index 6504d2bed..917127548 100644
--- a/web/src/pages/report/reports/ourdna/ProcessingTimes.tsx
+++ b/web/src/pages/report/reports/ourdna/SampleProcessing.tsx
@@ -189,6 +189,39 @@ export default function ProcessingTimes() {
                     ]}
                 />
             </ReportRow>
+            <ReportRow>
+                <ReportItemPlot
+                    height={ROW_HEIGHT}
+                    flexGrow={1}
+                    flexBasis={400}
+                    title="Sample types"
+                    description="Count of participants for each sample type"
+                    project={PROJECT}
+                    query={[
+                        {
+                            name: 'result',
+                            query: `
+                                select
+                                    count(distinct participant_id) as count,
+                                    type
+                                from sample s
+                                group by 2  
+                            `,
+                        },
+                    ]}
+                    plot={(data) => ({
+                        marginLeft: 100,
+                        marks: [
+                            Plot.barX(data, {
+                                y: 'type',
+                                x: 'count',
+                                fill: 'type',
+                                tip: true,
+                            }),
+                        ],
+                    })}
+                />
+            </ReportRow>
         </Report>
     )
 }

From 42bc3dac8343bb6226f41974743f48f77dbf950b Mon Sep 17 00:00:00 2001
From: Dan Coates <dan.coates@populationgenomics.org.au>
Date: Wed, 29 Jan 2025 10:47:11 +1100
Subject: [PATCH 09/12] add reports to project summary page

---
 web/src/index.css                             |  4 +-
 web/src/pages/project/ProjectSummary.tsx      | 42 +++++++++++++++++--
 .../report/reports/ourdna/Demographics.tsx    |  2 +-
 .../report/reports/ourdna/Recruitment.tsx     |  4 +-
 .../reports/ourdna/SampleProcessing.tsx       |  8 ++--
 5 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/web/src/index.css b/web/src/index.css
index e30da7580..e648367a9 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -491,7 +491,7 @@ html[data-theme='dark-mode'] .ui.table {
 }
 
 
-/* 
+/*
     hax to fix bad cascading styles.
     There are a few conflicting css frameworks on metamist for strange historical reasons.
     While we're working to move to mui and remove other conflicting styles at the moment it
@@ -500,4 +500,4 @@ html[data-theme='dark-mode'] .ui.table {
 
 .MuiTablePagination-selectLabel, .MuiTablePagination-displayedRows {
     margin-bottom: 0 !important;
-}
\ No newline at end of file
+}
diff --git a/web/src/pages/project/ProjectSummary.tsx b/web/src/pages/project/ProjectSummary.tsx
index cd4c99c89..40f67a86e 100644
--- a/web/src/pages/project/ProjectSummary.tsx
+++ b/web/src/pages/project/ProjectSummary.tsx
@@ -3,6 +3,7 @@ import LoadingDucks from '../../shared/components/LoadingDucks/LoadingDucks'
 import MuckError from '../../shared/components/MuckError'
 import { ProjectSummary, WebApi } from '../../sm-api'
 
+import { Box, Button } from '@mui/material'
 import { Link } from 'react-router-dom'
 import BatchStatistics from './BatchStatistics'
 import MultiQCReports from './MultiQCReports'
@@ -11,6 +12,8 @@ import SeqrSync from './SeqrSync'
 import SummaryStatistics from './SummaryStatistics'
 import TotalsStats from './TotalsStats'
 
+import { reports } from '../report/reportIndex'
+
 interface ProjectSummaryProps {
     projectName: string
 }
@@ -53,10 +56,39 @@ export const ProjectSummaryView: React.FunctionComponent<ProjectSummaryProps> =
         )
     }
 
+    const customReports = reports[projectName]
+
     return (
-        <>
-            <Link to={`/project/${projectName}/query`}>SQL Query</Link>
-            <TotalsStats summary={summary ?? {}} />
+        <Box>
+            <Box display="flex">
+                <Box flexGrow={1}>
+                    <TotalsStats summary={summary ?? {}} />
+                </Box>
+                <Box flexGrow={1}>
+                    <Box display={'flex'}>
+                        <Box flexGrow={1}>{customReports && <h2>Custom Reports</h2>}</Box>
+                        <Box>
+                            <Button
+                                component={Link}
+                                variant="outlined"
+                                to={`/project/${projectName}/query`}
+                            >
+                                SQL Explore
+                            </Button>
+                        </Box>
+                    </Box>
+                    <ul>
+                        {customReports &&
+                            Object.entries(customReports).map(([key, report]) => (
+                                <li key={key}>
+                                    <Link to={`/project/${projectName}/report/${key}`}>
+                                        {report.title}
+                                    </Link>
+                                </li>
+                            ))}
+                    </ul>
+                </Box>
+            </Box>
             <SummaryStatistics
                 projectName={projectName}
                 cramSeqrStats={summary?.cram_seqr_stats ?? {}}
@@ -66,10 +98,12 @@ export const ProjectSummaryView: React.FunctionComponent<ProjectSummaryProps> =
                 cramSeqrStats={summary?.cram_seqr_stats ?? {}}
                 batchSequenceStats={summary?.batch_sequencing_group_stats ?? {}}
             />
+
             <hr />
+
             <MultiQCReports projectName={projectName} />
             <SeqrLinks seqrLinks={summary?.seqr_links ?? {}} />
             <SeqrSync syncTypes={summary?.seqr_sync_types} project={projectName} />
-        </>
+        </Box>
     )
 }
diff --git a/web/src/pages/report/reports/ourdna/Demographics.tsx b/web/src/pages/report/reports/ourdna/Demographics.tsx
index 0bcc8f17b..58cb959b1 100644
--- a/web/src/pages/report/reports/ourdna/Demographics.tsx
+++ b/web/src/pages/report/reports/ourdna/Demographics.tsx
@@ -88,7 +88,7 @@ export default function Demographics() {
                                     coalesce(r.participants, 0) as participants,
                                     strftime(w.week, '%Y-%m-%d') as week,
                                     a.ancestry,
-                                    
+
                                 from weeks w
                                 join ancestries a on true
                                 left join counts_by_week r
diff --git a/web/src/pages/report/reports/ourdna/Recruitment.tsx b/web/src/pages/report/reports/ourdna/Recruitment.tsx
index ebd1e5a4a..04011066b 100644
--- a/web/src/pages/report/reports/ourdna/Recruitment.tsx
+++ b/web/src/pages/report/reports/ourdna/Recruitment.tsx
@@ -65,7 +65,7 @@ export default function Recruitment() {
 
                                 WHEN 'OSS'
                                     THEN 'Once Stop Shop'
-                                
+
                                 WHEN '__NULL__'
                                     THEN 'Unknown'
 
@@ -112,7 +112,7 @@ export default function Recruitment() {
 
                                 WHEN 'OSS'
                                     THEN 'Once Stop Shop'
-                                
+
                                 WHEN '__NULL__'
                                     THEN 'Unknown'
 
diff --git a/web/src/pages/report/reports/ourdna/SampleProcessing.tsx b/web/src/pages/report/reports/ourdna/SampleProcessing.tsx
index 917127548..05ff785ab 100644
--- a/web/src/pages/report/reports/ourdna/SampleProcessing.tsx
+++ b/web/src/pages/report/reports/ourdna/SampleProcessing.tsx
@@ -11,7 +11,7 @@ const PROCESS_DURATION_QUERY = `
         s.sample_id,
         cast(s.participant_id as string) as participant_id,
         coalesce(s."meta_processing-site", 'Unknown') as processing_site,
-        
+
         try_strptime(nullif("meta_collection-time", ' '), '%Y-%m-%d %H:%M:%S') as collection_time,
         try_strptime(nullif("meta_process-end-time", ' '), '%Y-%m-%d %H:%M:%S') as process_end_time,
         date_diff(
@@ -94,7 +94,7 @@ export default function ProcessingTimes() {
                                     WHEN duration >= 48 AND duration < 72 THEN '48-72 hours'
                                     ELSE '72+ hours'
                                 END AS duration
-                            from durations group by 2 order by 2    
+                            from durations group by 2 order by 2
                         `,
                         },
                     ]}
@@ -139,7 +139,7 @@ export default function ProcessingTimes() {
                                     WHEN duration >= 48 AND duration < 72 THEN '48-72 hours'
                                     ELSE '72+ hours'
                                 END AS duration
-                            from durations group by 2,3 order by 2,3    
+                            from durations group by 2,3 order by 2,3
                         `,
                         },
                     ]}
@@ -205,7 +205,7 @@ export default function ProcessingTimes() {
                                     count(distinct participant_id) as count,
                                     type
                                 from sample s
-                                group by 2  
+                                group by 2
                             `,
                         },
                     ]}

From 18018b35e3ff1059eb0f18044aec944e19b4b5e7 Mon Sep 17 00:00:00 2001
From: Dan Coates <dan.coates@populationgenomics.org.au>
Date: Wed, 29 Jan 2025 10:52:47 +1100
Subject: [PATCH 10/12] remove v1 ourdna dashboard frontend code

---
 docs/installation.md                          |   1 -
 web/src/index.css                             |  21 --
 web/src/ourdna-logo-rgb.svg                   |  79 -----
 web/src/ourdna-white.svg                      |  75 -----
 web/src/pages/ourdna/OurDnaDashboard.tsx      | 299 ------------------
 web/src/shared/components/OurDNALogo.tsx      |  15 -
 web/src/shared/components/ourdna/BarChart.tsx | 255 ---------------
 web/src/shared/components/ourdna/Colours.tsx  |  17 -
 .../components/ourdna/OurDonutChart.tsx       | 169 ----------
 web/src/shared/components/ourdna/StatTile.tsx |  54 ----
 .../shared/components/ourdna/TableTile.tsx    |  64 ----
 web/src/shared/components/ourdna/Tile.tsx     |  46 ---
 .../ourdna/dashboardIcons/AlarmIcon.tsx       |  42 ---
 .../ourdna/dashboardIcons/BloodSampleIcon.tsx |  42 ---
 .../ourdna/dashboardIcons/ClipboardIcon.tsx   |  35 --
 .../ourdna/dashboardIcons/ClockIcon.tsx       |  42 ---
 .../ourdna/dashboardIcons/RocketIcon.tsx      |  42 ---
 .../ourdna/dashboardIcons/SyringeIcon.tsx     |  35 --
 .../ourdna/dashboardIcons/TestTubeIcon.tsx    |  42 ---
 .../ourdna/dashboardIcons/TruckIcon.tsx       |  35 --
 20 files changed, 1410 deletions(-)
 delete mode 100644 web/src/ourdna-logo-rgb.svg
 delete mode 100644 web/src/ourdna-white.svg
 delete mode 100644 web/src/pages/ourdna/OurDnaDashboard.tsx
 delete mode 100644 web/src/shared/components/OurDNALogo.tsx
 delete mode 100644 web/src/shared/components/ourdna/BarChart.tsx
 delete mode 100644 web/src/shared/components/ourdna/Colours.tsx
 delete mode 100644 web/src/shared/components/ourdna/OurDonutChart.tsx
 delete mode 100644 web/src/shared/components/ourdna/StatTile.tsx
 delete mode 100644 web/src/shared/components/ourdna/TableTile.tsx
 delete mode 100644 web/src/shared/components/ourdna/Tile.tsx
 delete mode 100644 web/src/shared/components/ourdna/dashboardIcons/AlarmIcon.tsx
 delete mode 100644 web/src/shared/components/ourdna/dashboardIcons/BloodSampleIcon.tsx
 delete mode 100644 web/src/shared/components/ourdna/dashboardIcons/ClipboardIcon.tsx
 delete mode 100644 web/src/shared/components/ourdna/dashboardIcons/ClockIcon.tsx
 delete mode 100644 web/src/shared/components/ourdna/dashboardIcons/RocketIcon.tsx
 delete mode 100644 web/src/shared/components/ourdna/dashboardIcons/SyringeIcon.tsx
 delete mode 100644 web/src/shared/components/ourdna/dashboardIcons/TestTubeIcon.tsx
 delete mode 100644 web/src/shared/components/ourdna/dashboardIcons/TruckIcon.tsx

diff --git a/docs/installation.md b/docs/installation.md
index 20608a80b..58e875151 100644
--- a/docs/installation.md
+++ b/docs/installation.md
@@ -97,7 +97,6 @@ export PATH="$HB_PREFIX/opt/mariadb@10.8/bin:$PATH"
 export SM_ENVIRONMENT=LOCAL # good default to have
 export SM_DEV_DB_USER=sm_api # makes it easier to copy liquibase update command
 
-export VITE_OURDNA_PROJECT_NAME=greek-myth # points the dashboard to the project to fetch data from
 ```
 
 You can also add these to your shell config file e.g `.zshrc` or `.bashrc` for persistence to new sessions.
diff --git a/web/src/index.css b/web/src/index.css
index e648367a9..f119aba34 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -42,18 +42,6 @@
     --color-pedigree-affected: rgb(76, 76, 76);
     --color-pedigree-unaffected: rgb(240, 240, 240);
 
-    --ourdna-blue-transparent: rgba(113, 172, 225, 0.5);
-    --ourdna-red-transparent: rgba(191, 0, 59, 0.5);
-    --ourdna-yellow-transparent: rgba(232, 199, 29, 0.5);
-    --ourdna-green-transparent: rgba(159, 201, 54, 0.5);
-    --ourdna-charcoal-transparent: rgba(85, 85, 85, 0.5);
-
-    --ourdna-blue: rgba(113, 172, 225);
-    --ourdna-red: rgba(191, 0, 59);
-    --ourdna-yellow: rgba(232, 199, 29);
-    --ourdna-green: rgba(159, 201, 54);
-    --ourdna-charcoal: rgba(85, 85, 85);
-
     --color-header-row: #f9f9f9;
     --color-exome-row: #ededa1;
     --color-genome-row: #efc7aa;
@@ -358,16 +346,7 @@ html[data-theme='dark-mode'] .ui.table {
     color: var(--color-text-primary);
 }
 
-.dashboard-tile {
-    color: var(--color-text-primary) !important;
-}
 
-.ourdna-logo-responsive {
-    width: 50%;
-    height: auto;
-    max-width: 200px;
-    max-height: 100px;
-}
 
 /* Project Insights dashboard */
 .html-tooltip .MuiTooltip-tooltip {
diff --git a/web/src/ourdna-logo-rgb.svg b/web/src/ourdna-logo-rgb.svg
deleted file mode 100644
index f2743ea3e..000000000
--- a/web/src/ourdna-logo-rgb.svg
+++ /dev/null
@@ -1,79 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 2521 1067" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(4.16667,0,0,4.16667,0,0)">
-        <g id="OurDNA">
-            <path d="M573.528,173.301L564.385,145.847C563.734,143.943 563.153,142.166 562.641,140.516C562.129,138.868 561.688,137.393 561.315,136.092C560.849,134.606 560.454,133.212 560.128,131.911L559.849,131.911C559.525,133.212 559.154,134.606 558.737,136.092C558.365,137.393 557.948,138.868 557.485,140.516C557.021,142.166 556.487,143.943 555.884,145.847L547.189,173.301L573.528,173.301ZM538.214,202.498C537.702,204.124 537.214,205.483 536.75,206.573C536.286,207.666 535.705,208.56 535.008,209.257C534.357,209.907 533.521,210.43 532.5,210.825C531.478,211.218 530.293,211.417 528.946,211.417C527.737,211.417 526.542,211.23 525.358,210.859C524.172,210.488 523.093,209.953 522.117,209.257C521.142,208.56 520.351,207.701 519.748,206.678C519.143,205.657 518.841,204.496 518.841,203.194C518.841,202.451 518.945,201.709 519.155,200.965C519.364,200.222 519.723,199.083 520.234,197.55L544.651,127.242C545.069,126.127 545.463,125.118 545.835,124.211C546.206,123.306 546.602,122.482 547.02,121.738C547.438,120.995 547.867,120.321 548.309,119.717C548.749,119.113 549.249,118.532 549.807,117.975C551.014,116.768 552.512,115.849 554.301,115.223C556.09,114.595 558.309,114.282 560.957,114.282C563.605,114.282 565.822,114.595 567.611,115.223C569.4,115.849 570.898,116.768 572.107,117.975C572.664,118.532 573.163,119.113 573.605,119.717C574.046,120.321 574.476,120.995 574.894,121.738C575.312,122.482 575.706,123.306 576.079,124.211C576.45,125.118 576.845,126.127 577.263,127.242L601.83,197.202C602.387,198.782 602.748,199.943 602.911,200.686C603.075,201.43 603.156,202.127 603.156,202.776C603.156,204.217 602.831,205.471 602.181,206.539C601.529,207.608 600.693,208.502 599.672,209.221C598.65,209.943 597.512,210.488 596.258,210.859C595.003,211.23 593.772,211.417 592.565,211.417C591.217,211.417 590.009,211.208 588.941,210.79C587.872,210.372 586.966,209.792 586.224,209.048C585.527,208.351 584.958,207.492 584.516,206.469C584.074,205.448 583.599,204.147 583.088,202.567L578.133,188.143L542.875,188.143L538.214,202.498Z" style="fill:rgb(85,85,85);fill-rule:nonzero;"/>
-            <path d="M430.073,127.451C430.073,122.992 431.176,119.671 433.383,117.487C435.588,115.304 438.968,114.212 443.521,114.212C445.612,114.212 447.388,114.445 448.852,114.909C450.315,115.374 451.627,116.047 452.789,116.93C453.949,117.813 455.007,118.892 455.959,120.169C456.911,121.448 457.875,122.9 458.851,124.525L488.953,173.51C490.021,175.276 490.997,177.006 491.88,178.701C492.761,180.398 493.528,181.919 494.179,183.266C494.969,184.799 495.688,186.286 496.339,187.725L496.688,187.586C496.548,185.961 496.385,184.219 496.2,182.36C496.06,180.781 495.921,178.98 495.782,176.96C495.642,174.938 495.549,172.814 495.503,170.584L494.667,121.947C494.573,119.578 495.282,117.696 496.792,116.303C498.301,114.909 500.52,114.212 503.447,114.212C506.373,114.212 508.556,114.898 509.997,116.267C511.436,117.638 512.156,119.531 512.156,121.947L512.156,197.899C512.156,202.405 511.053,205.75 508.847,207.933C506.64,210.116 503.261,211.208 498.708,211.208C496.618,211.208 494.829,210.975 493.343,210.511C491.856,210.047 490.532,209.373 489.371,208.49C488.21,207.608 487.152,206.528 486.201,205.251C485.248,203.973 484.284,202.521 483.309,200.895L453.277,151.909C452.207,150.145 451.221,148.415 450.315,146.719C449.409,145.023 448.631,143.502 447.981,142.154C447.19,140.621 446.471,139.135 445.821,137.695L445.542,137.834C445.681,139.46 445.844,141.202 446.03,143.06C446.169,144.64 446.297,146.452 446.413,148.495C446.528,150.539 446.633,152.653 446.727,154.836L447.563,203.473C447.655,205.842 446.946,207.724 445.437,209.117C443.927,210.511 441.71,211.208 438.783,211.208C435.856,211.208 433.672,210.523 432.233,209.153C430.793,207.783 430.073,205.889 430.073,203.473L430.073,127.451Z" style="fill:rgb(85,85,85);fill-rule:nonzero;"/>
-            <path d="M368.604,195.739C373.249,195.739 377.429,195.019 381.147,193.578C384.863,192.139 388.033,190.014 390.658,187.202C393.282,184.392 395.292,180.886 396.685,176.681C398.079,172.477 398.776,167.611 398.776,162.083C398.776,156.555 398.137,151.759 396.86,147.694C395.581,143.629 393.677,140.262 391.146,137.589C388.613,134.919 385.467,132.934 381.704,131.632C377.941,130.333 373.574,129.682 368.604,129.682L356.898,129.682L356.898,195.739L368.604,195.739ZM337.457,123.549C337.457,120.762 338.223,118.591 339.756,117.035C341.289,115.478 343.472,114.7 346.306,114.7L369.649,114.7C377.593,114.7 384.619,115.745 390.728,117.835C396.836,119.926 401.969,122.934 406.127,126.859C410.284,130.785 413.42,135.593 415.534,141.284C417.648,146.974 418.705,153.42 418.705,160.619C418.705,168.424 417.555,175.427 415.255,181.628C412.956,187.83 409.611,193.08 405.221,197.376C400.831,201.673 395.477,204.972 389.16,207.27C382.842,209.571 375.665,210.72 367.629,210.72L346.306,210.72C343.472,210.72 341.289,209.943 339.756,208.385C338.223,206.83 337.457,204.658 337.457,201.87L337.457,123.549Z" style="fill:rgb(85,85,85);fill-rule:nonzero;"/>
-            <path d="M555.878,49.114C558.989,49.114 561.707,48.766 564.03,48.069C566.353,47.372 568.281,46.397 569.814,45.142C571.347,43.888 572.485,42.379 573.228,40.613C573.971,38.849 574.343,36.92 574.343,34.83C574.343,32.739 573.995,30.847 573.298,29.151C572.601,27.455 571.497,26.015 569.988,24.831C568.478,23.645 566.515,22.729 564.1,22.078C561.684,21.428 558.758,21.103 555.32,21.103L546.053,21.103L546.053,49.114L555.878,49.114ZM546.053,94.267C546.053,97.008 545.274,99.122 543.718,100.608C542.161,102.095 539.757,102.838 536.506,102.838C533.207,102.838 530.793,102.095 529.26,100.608C527.727,99.122 526.96,97.008 526.96,94.267L526.96,15.18C526.96,12.392 527.727,10.222 529.26,8.665C530.793,7.109 532.976,6.33 535.81,6.33L556.296,6.33C562.846,6.33 568.501,7.005 573.263,8.351C578.024,9.699 581.949,11.592 585.039,14.029C588.128,16.469 590.405,19.361 591.868,22.705C593.331,26.05 594.063,29.697 594.063,33.645C594.063,36.944 593.598,39.986 592.669,42.773C591.739,45.56 590.439,48.069 588.767,50.299C587.095,52.529 585.074,54.457 582.705,56.082C580.336,57.709 577.711,59.009 574.831,59.984L592.808,87.648C593.598,88.856 594.167,89.901 594.516,90.783C594.864,91.667 595.038,92.595 595.038,93.571C595.038,94.918 594.725,96.161 594.098,97.299C593.47,98.437 592.645,99.435 591.624,100.294C590.602,101.155 589.429,101.827 588.105,102.316C586.781,102.802 585.445,103.047 584.098,103.047C582.75,103.047 581.578,102.826 580.58,102.384C579.58,101.944 578.709,101.352 577.966,100.608C577.688,100.33 577.42,100.051 577.165,99.772C576.909,99.493 576.677,99.192 576.468,98.866C576.259,98.541 576.039,98.193 575.806,97.821C575.573,97.45 575.319,97.032 575.04,96.567L555.669,63.887L546.053,63.887L546.053,94.267Z" style="fill:rgb(85,85,85);fill-rule:nonzero;"/>
-            <path d="M432.128,14.413C432.128,11.673 432.93,9.559 434.532,8.072C436.135,6.586 438.585,5.843 441.884,5.843C445.182,5.843 447.621,6.586 449.2,8.072C450.779,9.559 451.569,11.673 451.569,14.413L451.569,62.563C451.569,67.069 452.057,70.936 453.033,74.165C454.008,77.394 455.39,80.052 457.179,82.143C458.966,84.233 461.091,85.766 463.554,86.742C466.016,87.717 468.711,88.205 471.637,88.205C474.378,88.205 476.909,87.741 479.233,86.811C481.555,85.883 483.564,84.454 485.26,82.527C486.955,80.599 488.279,78.171 489.232,75.244C490.183,72.318 490.66,68.834 490.66,64.792L490.66,14.413C490.66,11.673 491.45,9.559 493.029,8.072C494.608,6.586 497.047,5.843 500.346,5.843C503.644,5.843 506.095,6.586 507.697,8.072C509.3,9.559 510.101,11.673 510.101,14.413L510.101,62.841C510.101,69.624 509.206,75.57 507.418,80.68C505.63,85.79 503.052,90.052 499.684,93.465C496.315,96.881 492.181,99.447 487.281,101.165C482.379,102.884 476.817,103.743 470.592,103.743C464.321,103.743 458.792,102.918 454.008,101.269C449.223,99.622 445.217,97.183 441.988,93.954C438.759,90.725 436.309,86.696 434.637,81.864C432.965,77.034 432.128,71.436 432.128,65.071L432.128,14.413Z" style="fill:rgb(85,85,85);fill-rule:nonzero;"/>
-            <path d="M375.345,84.94C358.695,84.94 345.198,71.443 345.198,54.793C345.198,38.144 358.695,24.647 375.345,24.647C391.994,24.647 405.492,38.144 405.492,54.793C405.492,71.443 391.994,84.94 375.345,84.94ZM375.345,5.843C348.31,5.843 326.394,27.759 326.394,54.793C326.394,81.828 348.31,103.743 375.345,103.743C402.38,103.743 424.296,81.828 424.296,54.793C424.296,27.759 402.38,5.843 375.345,5.843Z" style="fill:rgb(85,85,85);fill-rule:nonzero;"/>
-        </g>
-        <path d="M302.215,36.053C302.215,52.737 288.689,66.263 272.004,66.263C255.32,66.263 241.794,52.737 241.794,36.053C241.794,19.368 255.32,5.843 272.004,5.843C288.689,5.843 302.215,19.368 302.215,36.053Z" style="fill:rgb(161,202,56);fill-rule:nonzero;"/>
-        <path d="M226.668,36.053C226.668,52.737 213.142,66.263 196.458,66.263C179.773,66.263 166.247,52.737 166.247,36.053C166.247,19.368 179.773,5.843 196.458,5.843C213.142,5.843 226.668,19.368 226.668,36.053Z" style="fill:rgb(114,173,225);fill-rule:nonzero;"/>
-        <path d="M151.121,36.053C151.121,52.737 137.595,66.263 120.911,66.263C104.226,66.263 90.7,52.737 90.7,36.053C90.7,19.368 104.226,5.843 120.911,5.843C137.595,5.843 151.121,19.368 151.121,36.053Z" style="fill:rgb(191,0,61);fill-rule:nonzero;"/>
-        <path d="M75.732,36.053C75.732,52.737 62.207,66.263 45.522,66.263C28.838,66.263 15.312,52.737 15.312,36.053C15.312,19.368 28.838,5.843 45.522,5.843C62.207,5.843 75.732,19.368 75.732,36.053Z" style="fill:rgb(233,199,30);fill-rule:nonzero;"/>
-        <path d="M288.346,141.206C289.312,141.206 290.096,141.99 290.096,142.956L290.096,198.514C290.096,199.48 289.312,200.264 288.346,200.264C287.379,200.264 286.596,199.48 286.596,198.514L286.596,142.956C286.596,141.99 287.379,141.206 288.346,141.206Z" style="fill:rgb(161,202,56);"/>
-        <path d="M271.969,134.148C272.936,134.148 273.719,134.931 273.719,135.898L273.719,198.514C273.719,199.48 272.936,200.264 271.969,200.264C271.002,200.264 270.219,199.48 270.219,198.514L270.219,135.898C270.219,134.931 271.002,134.148 271.969,134.148Z" style="fill:rgb(161,202,56);"/>
-        <path d="M255.593,141.206C256.56,141.206 257.342,141.99 257.342,142.956L257.342,198.514C257.342,199.48 256.56,200.264 255.593,200.264C254.626,200.264 253.843,199.48 253.843,198.514L253.843,142.956C253.843,141.99 254.626,141.206 255.593,141.206Z" style="fill:rgb(161,202,56);"/>
-        <path d="M179.922,155.982C178.955,155.982 178.172,155.198 178.172,154.232L178.172,98.675C178.172,97.708 178.955,96.925 179.922,96.925C180.889,96.925 181.672,97.708 181.672,98.675L181.672,154.232C181.672,155.198 180.889,155.982 179.922,155.982Z" style="fill:rgb(114,173,225);fill-rule:nonzero;"/>
-        <path d="M196.299,163.04C195.332,163.04 194.549,162.257 194.549,161.29L194.549,98.675C194.549,97.708 195.332,96.925 196.299,96.925C197.266,96.925 198.049,97.708 198.049,98.675L198.049,161.29C198.049,162.257 197.266,163.04 196.299,163.04Z" style="fill:rgb(114,173,225);fill-rule:nonzero;"/>
-        <path d="M212.675,155.982C211.708,155.982 210.925,155.198 210.925,154.232L210.925,98.675C210.925,97.708 211.708,96.925 212.675,96.925C213.642,96.925 214.425,97.708 214.425,98.675L214.425,154.232C214.425,155.198 213.642,155.982 212.675,155.982Z" style="fill:rgb(114,173,225);fill-rule:nonzero;"/>
-        <path d="M137.004,141.206C137.971,141.206 138.754,141.99 138.754,142.956L138.754,198.514C138.754,199.48 137.971,200.264 137.004,200.264C136.038,200.264 135.254,199.48 135.254,198.514L135.254,142.956C135.254,141.99 136.038,141.206 137.004,141.206Z" style="fill:rgb(238,131,39);fill-rule:nonzero;"/>
-        <path d="M120.627,134.148C121.594,134.148 122.377,134.931 122.377,135.898L122.377,198.514C122.377,199.48 121.594,200.264 120.627,200.264C119.661,200.264 118.877,199.48 118.877,198.514L118.877,135.898C118.877,134.931 119.661,134.148 120.627,134.148Z" style="fill:rgb(238,131,39);fill-rule:nonzero;"/>
-        <path d="M104.251,141.206C105.218,141.206 106.001,141.99 106.001,142.956L106.001,198.514C106.001,199.48 105.218,200.264 104.251,200.264C103.285,200.264 102.501,199.48 102.501,198.514L102.501,142.956C102.501,141.99 103.285,141.206 104.251,141.206Z" style="fill:rgb(238,131,39);fill-rule:nonzero;"/>
-        <path d="M28.863,156.005C27.896,156.005 27.113,155.222 27.113,154.255L27.113,98.698C27.113,97.732 27.896,96.948 28.863,96.948C29.83,96.948 30.613,97.732 30.613,98.698L30.613,154.255C30.613,155.222 29.83,156.005 28.863,156.005Z" style="fill:rgb(233,199,30);fill-rule:nonzero;"/>
-        <path d="M45.24,163.064C44.273,163.064 43.49,162.28 43.49,161.314L43.49,98.698C43.49,97.732 44.273,96.948 45.24,96.948C46.207,96.948 46.99,97.732 46.99,98.698L46.99,161.314C46.99,162.28 46.207,163.064 45.24,163.064Z" style="fill:rgb(233,199,30);fill-rule:nonzero;"/>
-        <path d="M61.616,156.005C60.649,156.005 59.866,155.222 59.866,154.255L59.866,98.698C59.866,97.732 60.649,96.948 61.616,96.948C62.583,96.948 63.366,97.732 63.366,98.698L63.366,154.255C63.366,155.222 62.583,156.005 61.616,156.005Z" style="fill:rgb(233,199,30);fill-rule:nonzero;"/>
-        <path d="M227.666,165.99C227.666,165.99 240.734,167.964 240.731,167.907L240.731,130.415C240.819,130.413 228.067,128.352 227.666,128.496L227.666,165.99Z" style="fill:url(#_Linear1);"/>
-        <path d="M316.277,130.415C316.277,129.512 316.242,128.616 316.188,127.726C316.182,127.649 316.179,127.57 316.17,127.493C314.66,104.439 295.434,86.141 272.004,86.141C258.272,86.141 245.979,92.426 237.852,102.27C240.757,106.283 243.003,110.799 244.437,115.662C249.716,105.837 260.091,99.141 272.004,99.141C288.604,99.141 302.218,112.143 303.213,128.496L303.213,165.99C303.213,183.234 289.184,197.263 271.94,197.263C255.34,197.263 241.725,184.261 240.731,167.907L227.666,165.99C227.666,166.893 227.702,167.788 227.755,168.677C227.761,168.755 227.765,168.834 227.773,168.911C229.284,191.965 248.51,210.263 271.94,210.263C295.012,210.263 314.009,192.519 316.026,169.962C316.186,169.397 316.277,168.804 316.277,168.187L316.277,130.415Z" style="fill:rgb(161,202,56);"/>
-        <path d="M227.666,128.496L240.731,130.415C240.731,129.512 240.695,128.616 240.641,127.726C240.636,127.649 240.632,127.57 240.624,127.493C239.113,104.439 219.887,86.141 196.457,86.141C182.73,86.141 170.442,92.421 162.315,102.259C165.155,106.52 167.271,111.301 168.5,116.424C173.644,106.186 184.24,99.141 196.457,99.141C213.057,99.141 226.671,112.143 227.666,128.496Z" style="fill:rgb(114,173,225);"/>
-        <path id="Curve2" d="M196.457,210.263C173.264,210.263 154.191,192.332 152.344,169.606C152.242,169.149 152.184,165.99 152.184,165.99L152.184,130.415C152.184,114.313 139.952,101.019 124.293,99.327C123.181,99.207 122.054,99.141 120.91,99.141C115.827,99.141 111.033,100.375 106.787,102.538C100.836,105.569 95.97,110.439 92.967,116.41C92.968,116.415 92.969,116.419 92.97,116.424L92.965,116.413C92.966,116.412 92.966,116.411 92.967,116.41C90.964,108.168 86.801,102.282 86.786,102.261L86.785,102.259L86.786,102.261C91.986,95.965 98.893,91.136 106.787,88.467C111.225,86.966 115.971,86.141 120.91,86.141C122.05,86.141 123.175,86.197 124.293,86.281C145.932,87.926 163.267,105.188 165.024,126.798C165.126,127.255 165.184,127.729 165.184,128.217L165.184,165.99C165.184,183.234 179.213,197.263 196.457,197.263C208.76,197.263 219.422,190.12 224.525,179.765C225.551,185.081 227.527,190.061 230.276,194.519C222.148,204.138 210.007,210.263 196.457,210.263Z" style="fill:rgb(191,0,61);"/>
-        <g id="Curve1">
-            <rect id="Curve1-transition" x="76.795" y="130.415" width="13" height="35.575" style="fill:url(#_Linear2);"/>
-            <path id="Curve1-b" d="M149.137,179.765C144.034,190.12 133.372,197.263 121.069,197.263C103.825,197.263 89.795,183.234 89.795,165.99L76.795,165.99C76.795,165.99 76.853,169.149 76.955,169.606C78.803,192.332 97.875,210.263 121.069,210.263C134.619,210.263 146.76,204.138 154.888,194.519C152.139,190.061 150.163,185.081 149.137,179.765Z" style="fill:rgb(237,131,39);"/>
-            <path id="Curve1-a" d="M76.795,130.415L89.795,130.415L89.795,128.217C89.795,127.729 89.737,127.255 89.635,126.798C87.788,104.072 68.715,86.141 45.522,86.141C22.092,86.141 2.866,104.439 1.356,127.493C1.348,127.57 1.344,127.649 1.339,127.726C1.285,128.616 1.249,129.512 1.249,130.415C1.249,130.415 1.341,169.397 1.501,169.962C3.518,192.519 22.515,210.263 45.587,210.263C59.293,210.263 71.563,204.002 79.691,194.19C76.892,189.789 74.843,184.868 73.739,179.601C68.669,190.045 57.956,197.263 45.587,197.263C28.343,197.263 14.314,183.234 14.314,165.99L14.314,128.496C15.309,112.143 28.922,99.141 45.522,99.141C62.766,99.141 76.795,113.17 76.795,130.415Z" style="fill:rgb(233,199,30);"/>
-        </g>
-        <g id="Bottom-text" serif:id="Bottom text">
-            <path d="M17.05,249.113L12.837,236.704L8.623,249.113L17.05,249.113ZM13.68,234.613L21.002,255.65L19.288,255.65L17.573,250.595L8.101,250.595L6.386,255.65L4.672,255.65L11.965,234.613L13.68,234.613Z" style="fill:rgb(76,76,78);fill-rule:nonzero;"/>
-            <path d="M25.074,247.136L25.074,234.613L26.643,234.613L26.643,247.136C26.643,252.367 28.27,254.401 32.018,254.401C35.738,254.401 37.365,252.367 37.365,247.136L37.365,234.613L38.934,234.613L38.934,247.136C38.934,253.093 36.668,255.941 32.018,255.941C27.34,255.941 25.074,253.093 25.074,247.136Z" style="fill:rgb(76,76,78);fill-rule:nonzero;"/>
-            <path d="M43.849,251.147L45.331,250.652C46.232,253.122 48.47,254.488 51.201,254.488C54.136,254.488 56.141,252.832 56.141,250.304C56.141,247.427 53.845,246.643 50.91,245.683C47.481,244.579 44.576,243.301 44.576,239.611C44.576,236.53 47.133,234.322 50.591,234.322C53.932,234.322 56.344,235.891 57.419,238.826L55.995,239.291C55.066,236.908 53.206,235.804 50.591,235.746C47.946,235.746 46.145,237.286 46.145,239.611C46.145,242.458 48.411,243.33 51.288,244.26C54.688,245.335 57.681,246.526 57.681,250.333C57.681,253.645 55.037,255.941 51.201,255.941C47.714,255.941 44.924,254.169 43.849,251.147Z" style="fill:rgb(76,76,78);fill-rule:nonzero;"/>
-            <path d="M66.344,236.152L61.113,236.152L61.113,234.613L73.085,234.613L73.085,236.152L67.913,236.152L67.913,255.65L66.344,255.65L66.344,236.152Z" style="fill:rgb(76,76,78);fill-rule:nonzero;"/>
-            <path d="M83.229,246.236C87.21,246.236 89.564,245.509 89.564,241.179C89.564,236.938 87.268,236.124 83.229,236.124L80.033,236.124L80.033,246.236L83.229,246.236ZM78.464,234.613L83.2,234.613C88.198,234.613 91.133,236.008 91.133,241.151C91.133,245.131 89.331,246.875 86.251,247.486L91.308,255.65L89.419,255.65L84.595,247.688C84.159,247.718 83.694,247.718 83.2,247.718L80.033,247.718L80.033,255.65L78.464,255.65L78.464,234.613Z" style="fill:rgb(76,76,78);fill-rule:nonzero;"/>
-            <path d="M106.596,249.113L102.383,236.704L98.169,249.113L106.596,249.113ZM103.225,234.613L110.548,255.65L108.833,255.65L107.119,250.595L97.646,250.595L95.931,255.65L94.217,255.65L101.511,234.613L103.225,234.613Z" style="fill:rgb(76,76,78);fill-rule:nonzero;"/>
-            <path d="M115.317,234.613L116.886,234.613L116.886,254.11L125.226,254.11L125.226,255.65L115.317,255.65L115.317,234.613Z" style="fill:rgb(76,76,78);fill-rule:nonzero;"/>
-            <rect x="130.575" y="234.613" width="1.569" height="21.037" style="fill:rgb(76,76,78);fill-rule:nonzero;"/>
-            <path d="M149.058,249.113L144.844,236.704L140.631,249.113L149.058,249.113ZM145.687,234.613L153.01,255.65L151.295,255.65L149.581,250.595L140.107,250.595L138.393,255.65L136.679,255.65L143.972,234.613L145.687,234.613Z" style="fill:rgb(76,76,78);fill-rule:nonzero;"/>
-            <path d="M157.778,234.613L159.464,234.613L170.07,252.832L170.07,234.613L171.639,234.613L171.639,255.65L170.041,255.65L159.348,237.286L159.348,255.65L157.778,255.65L157.778,234.613Z" style="fill:rgb(76,76,78);fill-rule:nonzero;"/>
-            <path d="M187.22,245.073C187.22,238.681 190.445,234.293 195.211,234.293C198.407,234.293 200.761,235.92 202.039,238.913L200.644,239.494C199.395,236.938 197.68,235.804 195.24,235.804C191.375,235.804 188.789,239.494 188.789,245.073C188.789,250.797 191.259,254.371 195.152,254.371C199.046,254.371 201.371,251.379 201.487,246.148L195.095,246.148L195.095,244.638L203.085,244.638L203.085,245.8C203.085,252.047 200.063,255.883 195.123,255.883C190.3,255.883 187.22,251.64 187.22,245.073Z" style="fill:rgb(76,76,78);fill-rule:nonzero;"/>
-            <path d="M208.959,234.613L219.972,234.613L219.972,236.152L210.528,236.152L210.528,244.173L219.566,244.173L219.566,245.655L210.528,245.655L210.528,254.11L219.972,254.11L219.972,255.65L208.959,255.65L208.959,234.613Z" style="fill:rgb(76,76,78);fill-rule:nonzero;"/>
-            <path d="M225.787,234.613L227.473,234.613L238.079,252.832L238.079,234.613L239.648,234.613L239.648,255.65L238.049,255.65L227.356,237.286L227.356,255.65L225.787,255.65L225.787,234.613Z" style="fill:rgb(76,76,78);fill-rule:nonzero;"/>
-            <path d="M246.16,234.613L257.173,234.613L257.173,236.152L247.729,236.152L247.729,244.173L256.765,244.173L256.765,245.655L247.729,245.655L247.729,254.11L257.173,254.11L257.173,255.65L246.16,255.65L246.16,234.613Z" style="fill:rgb(76,76,78);fill-rule:nonzero;"/>
-            <path d="M267.056,236.152L261.825,236.152L261.825,234.613L273.797,234.613L273.797,236.152L268.625,236.152L268.625,255.65L267.056,255.65L267.056,236.152Z" style="fill:rgb(76,76,78);fill-rule:nonzero;"/>
-            <rect x="279.177" y="234.613" width="1.568" height="21.037" style="fill:rgb(76,76,78);fill-rule:nonzero;"/>
-            <path d="M294.521,256C290.307,256 286.617,252.628 286.617,245.19C286.617,237.925 290.336,234.351 294.521,234.351C297.63,234.351 300.71,236.269 301.843,240.947L300.332,241.325C299.46,237.867 297.368,235.891 294.521,235.891C290.685,235.891 288.186,239.552 288.186,245.19C288.186,250.914 290.627,254.459 294.521,254.459C297.397,254.459 299.518,252.396 300.332,248.851L301.872,249.141C300.797,254.023 297.659,256 294.521,256Z" style="fill:rgb(76,76,78);fill-rule:nonzero;"/>
-            <path d="M321.143,254.11C326.955,254.11 329.454,251.466 329.454,245.103C329.454,238.768 326.984,236.152 321.143,236.152L318.847,236.152L318.847,254.11L321.143,254.11ZM317.278,234.613L321.143,234.613C328.088,234.613 331.023,237.751 331.023,245.103C331.023,252.454 328.059,255.65 321.143,255.65L317.278,255.65L317.278,234.613Z" style="fill:rgb(76,76,78);fill-rule:nonzero;"/>
-            <rect x="336.867" y="234.613" width="1.57" height="21.037" style="fill:rgb(76,76,78);fill-rule:nonzero;"/>
-            <path d="M342.971,234.613L344.686,234.613L351.137,253.558L357.587,234.613L359.302,234.613L351.98,255.65L350.265,255.65L342.971,234.613Z" style="fill:rgb(76,76,78);fill-rule:nonzero;"/>
-            <path d="M363.839,234.613L374.851,234.613L374.851,236.152L365.407,236.152L365.407,244.173L374.445,244.173L374.445,245.655L365.407,245.655L365.407,254.11L374.851,254.11L374.851,255.65L363.839,255.65L363.839,234.613Z" style="fill:rgb(76,76,78);fill-rule:nonzero;"/>
-            <path d="M385.432,246.236C389.413,246.236 391.766,245.509 391.766,241.179C391.766,236.938 389.471,236.124 385.432,236.124L382.235,236.124L382.235,246.236L385.432,246.236ZM380.666,234.613L385.403,234.613C390.4,234.613 393.335,236.008 393.335,241.151C393.335,245.131 391.534,246.875 388.454,247.486L393.51,255.65L391.621,255.65L386.797,247.688C386.362,247.718 385.897,247.718 385.403,247.718L382.235,247.718L382.235,255.65L380.666,255.65L380.666,234.613Z" style="fill:rgb(76,76,78);fill-rule:nonzero;"/>
-            <path d="M397.872,251.147L399.354,250.652C400.255,253.122 402.492,254.488 405.224,254.488C408.158,254.488 410.164,252.832 410.164,250.304C410.164,247.427 407.868,246.643 404.933,245.683C401.504,244.579 398.599,243.301 398.599,239.611C398.599,236.53 401.156,234.322 404.614,234.322C407.955,234.322 410.367,235.891 411.442,238.826L410.018,239.291C409.088,236.908 407.229,235.804 404.614,235.746C401.969,235.746 400.168,237.286 400.168,239.611C400.168,242.458 402.434,243.33 405.311,244.26C408.71,245.335 411.704,246.526 411.704,250.333C411.704,253.645 409.06,255.941 405.224,255.941C401.737,255.941 398.947,254.169 397.872,251.147Z" style="fill:rgb(76,76,78);fill-rule:nonzero;"/>
-            <rect x="417.083" y="234.613" width="1.568" height="21.037" style="fill:rgb(76,76,78);fill-rule:nonzero;"/>
-            <path d="M429.231,236.152L424,236.152L424,234.613L435.972,234.613L435.972,236.152L430.799,236.152L430.799,255.65L429.231,255.65L429.231,236.152Z" style="fill:rgb(76,76,78);fill-rule:nonzero;"/>
-            <path d="M446.552,249.548L439.375,234.613L441.147,234.613L447.336,247.718L453.613,234.613L455.415,234.613L448.121,249.548L448.121,255.65L446.552,255.65L446.552,249.548Z" style="fill:rgb(76,76,78);fill-rule:nonzero;"/>
-            <path d="M473.523,254.11C479.335,254.11 481.834,251.466 481.834,245.103C481.834,238.768 479.364,236.152 473.523,236.152L471.228,236.152L471.228,254.11L473.523,254.11ZM469.659,234.613L473.523,234.613C480.468,234.613 483.403,237.751 483.403,245.103C483.403,252.454 480.439,255.65 473.523,255.65L469.659,255.65L469.659,234.613Z" style="fill:rgb(76,76,78);fill-rule:nonzero;"/>
-            <path d="M498.662,249.113L494.449,236.704L490.235,249.113L498.662,249.113ZM495.291,234.613L502.614,255.65L500.9,255.65L499.185,250.595L489.712,250.595L487.998,255.65L486.284,255.65L493.577,234.613L495.291,234.613Z" style="fill:rgb(76,76,78);fill-rule:nonzero;"/>
-            <path d="M509.01,236.152L503.78,236.152L503.78,234.613L515.75,234.613L515.75,236.152L510.579,236.152L510.579,255.65L509.01,255.65L509.01,236.152Z" style="fill:rgb(76,76,78);fill-rule:nonzero;"/>
-            <path d="M529.091,249.113L524.878,236.704L520.664,249.113L529.091,249.113ZM525.721,234.613L533.043,255.65L531.329,255.65L529.615,250.595L520.142,250.595L518.427,255.65L516.713,255.65L524.005,234.613L525.721,234.613Z" style="fill:rgb(76,76,78);fill-rule:nonzero;"/>
-            <path d="M542.956,254.14C547.373,254.14 549.116,252.919 549.116,249.956C549.116,246.671 547.605,245.626 543.043,245.626L539.381,245.626L539.381,254.14L542.956,254.14ZM542.84,244.143C546.849,244.143 548.535,242.923 548.535,239.901C548.535,236.966 547.198,236.124 542.723,236.124L539.381,236.124L539.381,244.143L542.84,244.143ZM537.812,234.613L542.752,234.613C548.332,234.613 550.133,236.037 550.133,239.814C550.133,242.691 548.912,244.231 546.181,244.812C549.436,245.218 550.714,246.701 550.714,249.926C550.714,253.849 548.535,255.65 542.956,255.65L537.812,255.65L537.812,234.613Z" style="fill:rgb(76,76,78);fill-rule:nonzero;"/>
-            <path d="M566.641,249.113L562.428,236.704L558.214,249.113L566.641,249.113ZM563.27,234.613L570.593,255.65L568.878,255.65L567.164,250.595L557.691,250.595L555.977,255.65L554.262,255.65L561.556,234.613L563.27,234.613Z" style="fill:rgb(76,76,78);fill-rule:nonzero;"/>
-            <path d="M573.996,251.147L575.478,250.652C576.379,253.122 578.616,254.488 581.348,254.488C584.282,254.488 586.288,252.832 586.288,250.304C586.288,247.427 583.992,246.643 581.057,245.683C577.629,244.579 574.722,243.301 574.722,239.611C574.722,236.53 577.279,234.322 580.738,234.322C584.079,234.322 586.491,235.891 587.566,238.826L586.142,239.291C585.212,236.908 583.353,235.804 580.738,235.746C578.094,235.746 576.292,237.286 576.292,239.611C576.292,242.458 578.558,243.33 581.435,244.26C584.835,245.335 587.828,246.526 587.828,250.333C587.828,253.645 585.183,255.941 581.348,255.941C577.861,255.941 575.071,254.169 573.996,251.147Z" style="fill:rgb(76,76,78);fill-rule:nonzero;"/>
-            <path d="M593.207,234.613L604.22,234.613L604.22,236.152L594.776,236.152L594.776,244.173L603.813,244.173L603.813,245.655L594.776,245.655L594.776,254.11L604.22,254.11L604.22,255.65L593.207,255.65L593.207,234.613Z" style="fill:rgb(76,76,78);fill-rule:nonzero;"/>
-        </g>
-    </g>
-    <defs>
-        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.0533438,32.8358,-26.4717,0.043005,233.53,132.016)"><stop offset="0" style="stop-color:rgb(114,173,225);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(161,202,56);stop-opacity:1"/></linearGradient>
-        <linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-0.176575,33.795,-33.795,-0.176575,82.8344,131.288)"><stop offset="0" style="stop-color:rgb(233,199,30);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(237,131,35);stop-opacity:1"/></linearGradient>
-    </defs>
-</svg>
diff --git a/web/src/ourdna-white.svg b/web/src/ourdna-white.svg
deleted file mode 100644
index bb0558272..000000000
--- a/web/src/ourdna-white.svg
+++ /dev/null
@@ -1,75 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 2521 1067" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(4.16667,0,0,4.16667,0,0)">
-        <g id="OurDNA">
-            <path d="M573.528,173.301L564.385,145.847C563.734,143.943 563.153,142.166 562.641,140.516C562.129,138.868 561.688,137.393 561.315,136.092C560.849,134.606 560.454,133.212 560.128,131.911L559.849,131.911C559.525,133.212 559.154,134.606 558.737,136.092C558.365,137.393 557.948,138.868 557.485,140.516C557.021,142.166 556.487,143.943 555.884,145.847L547.189,173.301L573.528,173.301ZM538.214,202.498C537.702,204.124 537.214,205.483 536.75,206.573C536.286,207.666 535.705,208.56 535.008,209.257C534.357,209.907 533.521,210.43 532.5,210.825C531.478,211.218 530.293,211.417 528.946,211.417C527.737,211.417 526.542,211.23 525.358,210.859C524.172,210.488 523.093,209.953 522.117,209.257C521.142,208.56 520.351,207.701 519.748,206.678C519.143,205.657 518.841,204.496 518.841,203.194C518.841,202.451 518.945,201.709 519.155,200.965C519.364,200.222 519.723,199.083 520.234,197.55L544.651,127.242C545.069,126.127 545.463,125.118 545.835,124.211C546.206,123.306 546.602,122.482 547.02,121.738C547.438,120.995 547.867,120.321 548.309,119.717C548.749,119.113 549.249,118.532 549.807,117.975C551.014,116.768 552.512,115.849 554.301,115.223C556.09,114.595 558.309,114.282 560.957,114.282C563.605,114.282 565.822,114.595 567.611,115.223C569.4,115.849 570.898,116.768 572.107,117.975C572.664,118.532 573.163,119.113 573.605,119.717C574.046,120.321 574.476,120.995 574.894,121.738C575.312,122.482 575.706,123.306 576.079,124.211C576.45,125.118 576.845,126.127 577.263,127.242L601.83,197.202C602.387,198.782 602.748,199.943 602.911,200.686C603.075,201.43 603.156,202.127 603.156,202.776C603.156,204.217 602.831,205.471 602.181,206.539C601.529,207.608 600.693,208.502 599.672,209.221C598.65,209.943 597.512,210.488 596.258,210.859C595.003,211.23 593.772,211.417 592.565,211.417C591.217,211.417 590.009,211.208 588.941,210.79C587.872,210.372 586.966,209.792 586.224,209.048C585.527,208.351 584.958,207.492 584.516,206.469C584.074,205.448 583.599,204.147 583.088,202.567L578.133,188.143L542.875,188.143L538.214,202.498Z" style="fill:white;fill-rule:nonzero;"/>
-            <path d="M430.073,127.451C430.073,122.992 431.176,119.671 433.383,117.487C435.588,115.304 438.968,114.212 443.521,114.212C445.612,114.212 447.388,114.445 448.852,114.909C450.315,115.374 451.627,116.047 452.789,116.93C453.949,117.813 455.007,118.892 455.959,120.169C456.911,121.448 457.875,122.9 458.851,124.525L488.953,173.51C490.021,175.276 490.997,177.006 491.88,178.701C492.761,180.398 493.528,181.919 494.179,183.266C494.969,184.799 495.688,186.286 496.339,187.725L496.688,187.586C496.548,185.961 496.385,184.219 496.2,182.36C496.06,180.781 495.921,178.98 495.782,176.96C495.642,174.938 495.549,172.814 495.503,170.584L494.667,121.947C494.573,119.578 495.282,117.696 496.792,116.303C498.301,114.909 500.52,114.212 503.447,114.212C506.373,114.212 508.556,114.898 509.997,116.267C511.436,117.638 512.156,119.531 512.156,121.947L512.156,197.899C512.156,202.405 511.053,205.75 508.847,207.933C506.64,210.116 503.261,211.208 498.708,211.208C496.618,211.208 494.829,210.975 493.343,210.511C491.856,210.047 490.532,209.373 489.371,208.49C488.21,207.608 487.152,206.528 486.201,205.251C485.248,203.973 484.284,202.521 483.309,200.895L453.277,151.909C452.207,150.145 451.221,148.415 450.315,146.719C449.409,145.023 448.631,143.502 447.981,142.154C447.19,140.621 446.471,139.135 445.821,137.695L445.542,137.834C445.681,139.46 445.844,141.202 446.03,143.06C446.169,144.64 446.297,146.452 446.413,148.495C446.528,150.539 446.633,152.653 446.727,154.836L447.563,203.473C447.655,205.842 446.946,207.724 445.437,209.117C443.927,210.511 441.71,211.208 438.783,211.208C435.856,211.208 433.672,210.523 432.233,209.153C430.793,207.783 430.073,205.889 430.073,203.473L430.073,127.451Z" style="fill:white;fill-rule:nonzero;"/>
-            <path d="M368.604,195.739C373.249,195.739 377.429,195.019 381.147,193.578C384.863,192.139 388.033,190.014 390.658,187.202C393.282,184.392 395.292,180.886 396.685,176.681C398.079,172.477 398.776,167.611 398.776,162.083C398.776,156.555 398.137,151.759 396.86,147.694C395.581,143.629 393.677,140.262 391.146,137.589C388.613,134.919 385.467,132.934 381.704,131.632C377.941,130.333 373.574,129.682 368.604,129.682L356.898,129.682L356.898,195.739L368.604,195.739ZM337.457,123.549C337.457,120.762 338.223,118.591 339.756,117.035C341.289,115.478 343.472,114.7 346.306,114.7L369.649,114.7C377.593,114.7 384.619,115.745 390.728,117.835C396.836,119.926 401.969,122.934 406.127,126.859C410.284,130.785 413.42,135.593 415.534,141.284C417.648,146.974 418.705,153.42 418.705,160.619C418.705,168.424 417.555,175.427 415.255,181.628C412.956,187.83 409.611,193.08 405.221,197.376C400.831,201.673 395.477,204.972 389.16,207.27C382.842,209.571 375.665,210.72 367.629,210.72L346.306,210.72C343.472,210.72 341.289,209.943 339.756,208.385C338.223,206.83 337.457,204.658 337.457,201.87L337.457,123.549Z" style="fill:white;fill-rule:nonzero;"/>
-            <path d="M555.878,49.114C558.989,49.114 561.707,48.766 564.03,48.069C566.353,47.372 568.281,46.397 569.814,45.142C571.347,43.888 572.485,42.379 573.228,40.613C573.971,38.849 574.343,36.92 574.343,34.83C574.343,32.739 573.995,30.847 573.298,29.151C572.601,27.455 571.497,26.015 569.988,24.831C568.478,23.645 566.515,22.729 564.1,22.078C561.684,21.428 558.758,21.103 555.32,21.103L546.053,21.103L546.053,49.114L555.878,49.114ZM546.053,94.267C546.053,97.008 545.274,99.122 543.718,100.608C542.161,102.095 539.757,102.838 536.506,102.838C533.207,102.838 530.793,102.095 529.26,100.608C527.727,99.122 526.96,97.008 526.96,94.267L526.96,15.18C526.96,12.392 527.727,10.222 529.26,8.665C530.793,7.109 532.976,6.33 535.81,6.33L556.296,6.33C562.846,6.33 568.501,7.005 573.263,8.351C578.024,9.699 581.949,11.592 585.039,14.029C588.128,16.469 590.405,19.361 591.868,22.705C593.331,26.05 594.063,29.697 594.063,33.645C594.063,36.944 593.598,39.986 592.669,42.773C591.739,45.56 590.439,48.069 588.767,50.299C587.095,52.529 585.074,54.457 582.705,56.082C580.336,57.709 577.711,59.009 574.831,59.984L592.808,87.648C593.598,88.856 594.167,89.901 594.516,90.783C594.864,91.667 595.038,92.595 595.038,93.571C595.038,94.918 594.725,96.161 594.098,97.299C593.47,98.437 592.645,99.435 591.624,100.294C590.602,101.155 589.429,101.827 588.105,102.316C586.781,102.802 585.445,103.047 584.098,103.047C582.75,103.047 581.578,102.826 580.58,102.384C579.58,101.944 578.709,101.352 577.966,100.608C577.688,100.33 577.42,100.051 577.165,99.772C576.909,99.493 576.677,99.192 576.468,98.866C576.259,98.541 576.039,98.193 575.806,97.821C575.573,97.45 575.319,97.032 575.04,96.567L555.669,63.887L546.053,63.887L546.053,94.267Z" style="fill:white;fill-rule:nonzero;"/>
-            <path d="M432.128,14.413C432.128,11.673 432.93,9.559 434.532,8.072C436.135,6.586 438.585,5.843 441.884,5.843C445.182,5.843 447.621,6.586 449.2,8.072C450.779,9.559 451.569,11.673 451.569,14.413L451.569,62.563C451.569,67.069 452.057,70.936 453.033,74.165C454.008,77.394 455.39,80.052 457.179,82.143C458.966,84.233 461.091,85.766 463.554,86.742C466.016,87.717 468.711,88.205 471.637,88.205C474.378,88.205 476.909,87.741 479.233,86.811C481.555,85.883 483.564,84.454 485.26,82.527C486.955,80.599 488.279,78.171 489.232,75.244C490.183,72.318 490.66,68.834 490.66,64.792L490.66,14.413C490.66,11.673 491.45,9.559 493.029,8.072C494.608,6.586 497.047,5.843 500.346,5.843C503.644,5.843 506.095,6.586 507.697,8.072C509.3,9.559 510.101,11.673 510.101,14.413L510.101,62.841C510.101,69.624 509.206,75.57 507.418,80.68C505.63,85.79 503.052,90.052 499.684,93.465C496.315,96.881 492.181,99.447 487.281,101.165C482.379,102.884 476.817,103.743 470.592,103.743C464.321,103.743 458.792,102.918 454.008,101.269C449.223,99.622 445.217,97.183 441.988,93.954C438.759,90.725 436.309,86.696 434.637,81.864C432.965,77.034 432.128,71.436 432.128,65.071L432.128,14.413Z" style="fill:white;fill-rule:nonzero;"/>
-            <path d="M375.345,84.94C358.695,84.94 345.198,71.443 345.198,54.793C345.198,38.144 358.695,24.647 375.345,24.647C391.994,24.647 405.492,38.144 405.492,54.793C405.492,71.443 391.994,84.94 375.345,84.94ZM375.345,5.843C348.31,5.843 326.394,27.759 326.394,54.793C326.394,81.828 348.31,103.743 375.345,103.743C402.38,103.743 424.296,81.828 424.296,54.793C424.296,27.759 402.38,5.843 375.345,5.843Z" style="fill:white;fill-rule:nonzero;"/>
-        </g>
-        <path d="M302.215,36.053C302.215,52.737 288.689,66.263 272.004,66.263C255.32,66.263 241.794,52.737 241.794,36.053C241.794,19.368 255.32,5.843 272.004,5.843C288.689,5.843 302.215,19.368 302.215,36.053Z" style="fill:white;fill-rule:nonzero;"/>
-        <path d="M226.668,36.053C226.668,52.737 213.142,66.263 196.458,66.263C179.773,66.263 166.247,52.737 166.247,36.053C166.247,19.368 179.773,5.843 196.458,5.843C213.142,5.843 226.668,19.368 226.668,36.053Z" style="fill:white;fill-rule:nonzero;"/>
-        <path d="M151.121,36.053C151.121,52.737 137.595,66.263 120.911,66.263C104.226,66.263 90.7,52.737 90.7,36.053C90.7,19.368 104.226,5.843 120.911,5.843C137.595,5.843 151.121,19.368 151.121,36.053Z" style="fill:white;fill-rule:nonzero;"/>
-        <path d="M75.732,36.053C75.732,52.737 62.207,66.263 45.522,66.263C28.838,66.263 15.312,52.737 15.312,36.053C15.312,19.368 28.838,5.843 45.522,5.843C62.207,5.843 75.732,19.368 75.732,36.053Z" style="fill:white;fill-rule:nonzero;"/>
-        <path d="M288.346,141.206C289.312,141.206 290.096,141.99 290.096,142.956L290.096,198.514C290.096,199.48 289.312,200.264 288.346,200.264C287.379,200.264 286.596,199.48 286.596,198.514L286.596,142.956C286.596,141.99 287.379,141.206 288.346,141.206Z" style="fill:white;"/>
-        <path d="M271.969,134.148C272.936,134.148 273.719,134.931 273.719,135.898L273.719,198.514C273.719,199.48 272.936,200.264 271.969,200.264C271.002,200.264 270.219,199.48 270.219,198.514L270.219,135.898C270.219,134.931 271.002,134.148 271.969,134.148Z" style="fill:white;"/>
-        <path d="M255.593,141.206C256.56,141.206 257.342,141.99 257.342,142.956L257.342,198.514C257.342,199.48 256.56,200.264 255.593,200.264C254.626,200.264 253.843,199.48 253.843,198.514L253.843,142.956C253.843,141.99 254.626,141.206 255.593,141.206Z" style="fill:white;"/>
-        <path d="M179.922,155.982C178.955,155.982 178.172,155.198 178.172,154.232L178.172,98.675C178.172,97.708 178.955,96.925 179.922,96.925C180.889,96.925 181.672,97.708 181.672,98.675L181.672,154.232C181.672,155.198 180.889,155.982 179.922,155.982Z" style="fill:white;fill-rule:nonzero;"/>
-        <path d="M196.299,163.04C195.332,163.04 194.549,162.257 194.549,161.29L194.549,98.675C194.549,97.708 195.332,96.925 196.299,96.925C197.266,96.925 198.049,97.708 198.049,98.675L198.049,161.29C198.049,162.257 197.266,163.04 196.299,163.04Z" style="fill:white;fill-rule:nonzero;"/>
-        <path d="M212.675,155.982C211.708,155.982 210.925,155.198 210.925,154.232L210.925,98.675C210.925,97.708 211.708,96.925 212.675,96.925C213.642,96.925 214.425,97.708 214.425,98.675L214.425,154.232C214.425,155.198 213.642,155.982 212.675,155.982Z" style="fill:white;fill-rule:nonzero;"/>
-        <path d="M137.004,141.206C137.971,141.206 138.754,141.99 138.754,142.956L138.754,198.514C138.754,199.48 137.971,200.264 137.004,200.264C136.038,200.264 135.254,199.48 135.254,198.514L135.254,142.956C135.254,141.99 136.038,141.206 137.004,141.206Z" style="fill:white;fill-rule:nonzero;"/>
-        <path d="M120.627,134.148C121.594,134.148 122.377,134.931 122.377,135.898L122.377,198.514C122.377,199.48 121.594,200.264 120.627,200.264C119.661,200.264 118.877,199.48 118.877,198.514L118.877,135.898C118.877,134.931 119.661,134.148 120.627,134.148Z" style="fill:white;fill-rule:nonzero;"/>
-        <path d="M104.251,141.206C105.218,141.206 106.001,141.99 106.001,142.956L106.001,198.514C106.001,199.48 105.218,200.264 104.251,200.264C103.285,200.264 102.501,199.48 102.501,198.514L102.501,142.956C102.501,141.99 103.285,141.206 104.251,141.206Z" style="fill:white;fill-rule:nonzero;"/>
-        <path d="M28.863,156.005C27.896,156.005 27.113,155.222 27.113,154.255L27.113,98.698C27.113,97.732 27.896,96.948 28.863,96.948C29.83,96.948 30.613,97.732 30.613,98.698L30.613,154.255C30.613,155.222 29.83,156.005 28.863,156.005Z" style="fill:white;fill-rule:nonzero;"/>
-        <path d="M45.24,163.064C44.273,163.064 43.49,162.28 43.49,161.314L43.49,98.698C43.49,97.732 44.273,96.948 45.24,96.948C46.207,96.948 46.99,97.732 46.99,98.698L46.99,161.314C46.99,162.28 46.207,163.064 45.24,163.064Z" style="fill:white;fill-rule:nonzero;"/>
-        <path d="M61.616,156.005C60.649,156.005 59.866,155.222 59.866,154.255L59.866,98.698C59.866,97.732 60.649,96.948 61.616,96.948C62.583,96.948 63.366,97.732 63.366,98.698L63.366,154.255C63.366,155.222 62.583,156.005 61.616,156.005Z" style="fill:white;fill-rule:nonzero;"/>
-        <path d="M227.666,165.99C227.666,166.502 240.734,167.964 240.731,167.907L240.731,130.415C240.819,130.413 228.067,128.352 227.666,128.496L227.666,165.99Z" style="fill:white;"/>
-        <path d="M316.277,130.415C316.277,129.512 316.242,128.616 316.188,127.726C316.182,127.649 316.179,127.57 316.17,127.493C314.66,104.439 295.434,86.141 272.004,86.141C258.272,86.141 245.979,92.426 237.852,102.27C240.757,106.283 243.003,110.799 244.437,115.662C249.716,105.837 260.091,99.141 272.004,99.141C288.604,99.141 302.218,112.143 303.213,128.496L303.213,165.99C303.213,183.234 289.184,197.263 271.94,197.263C255.34,197.263 241.725,184.261 240.731,167.907L227.666,165.99C227.666,166.893 227.702,167.788 227.755,168.677C227.761,168.755 227.765,168.834 227.773,168.911C229.284,191.965 248.51,210.263 271.94,210.263C295.012,210.263 314.009,192.519 316.026,169.962C316.186,169.397 316.277,168.804 316.277,168.187L316.277,130.415Z" style="fill:white;"/>
-        <path d="M227.666,128.496L240.731,130.415C240.731,129.512 240.695,128.616 240.641,127.726C240.636,127.649 240.632,127.57 240.624,127.493C239.113,104.439 219.887,86.141 196.457,86.141C182.73,86.141 170.442,92.421 162.315,102.259C165.155,106.52 167.271,111.301 168.5,116.424C173.644,106.186 184.24,99.141 196.457,99.141C213.057,99.141 226.671,112.143 227.666,128.496Z" style="fill:white;"/>
-        <path id="Curve2" d="M196.457,210.263C173.264,210.263 154.191,192.332 152.344,169.606C152.242,169.149 152.184,165.99 152.184,165.99L152.184,130.415C152.184,114.313 139.952,101.019 124.293,99.327C123.181,99.207 122.054,99.141 120.91,99.141C115.827,99.141 111.033,100.375 106.787,102.538C100.836,105.569 95.97,110.439 92.967,116.41C92.968,116.415 92.969,116.419 92.97,116.424L92.965,116.413C92.966,116.412 92.966,116.411 92.967,116.41C90.964,108.168 86.801,102.282 86.786,102.261L86.785,102.259L86.786,102.261C91.986,95.965 98.893,91.136 106.787,88.467C111.225,86.966 115.971,86.141 120.91,86.141C122.05,86.141 123.175,86.197 124.293,86.281C145.932,87.926 163.267,105.188 165.024,126.798C165.126,127.255 165.184,127.729 165.184,128.217L165.184,165.99C165.184,183.234 179.213,197.263 196.457,197.263C208.76,197.263 219.422,190.12 224.525,179.765C225.551,185.081 227.527,190.061 230.276,194.519C222.148,204.138 210.007,210.263 196.457,210.263Z" style="fill:white;"/>
-        <g id="Curve1">
-            <path id="Curve1-transition" d="M76.955,169.606C78.803,192.332 89.795,183.234 89.795,165.99L89.795,128.217C89.795,127.729 89.737,127.255 89.635,126.798C87.788,104.072 76.795,113.17 76.795,130.415L76.795,165.99C76.795,165.99 76.853,169.149 76.955,169.606Z" style="fill:white;"/>
-            <path id="Curve1-b" d="M149.137,179.765C144.034,190.12 133.372,197.263 121.069,197.263C103.825,197.263 89.795,183.234 89.795,165.99L76.795,165.99C76.795,165.99 76.853,169.149 76.955,169.606C78.803,192.332 97.875,210.263 121.069,210.263C134.619,210.263 146.76,204.138 154.888,194.519C152.139,190.061 150.163,185.081 149.137,179.765Z" style="fill:white;"/>
-            <path id="Curve1-a" d="M76.795,130.415L89.795,130.415L89.795,128.217C89.795,127.729 89.737,127.255 89.635,126.798C87.788,104.072 68.715,86.141 45.522,86.141C22.092,86.141 2.866,104.439 1.356,127.493C1.348,127.57 1.344,127.649 1.339,127.726C1.285,128.616 1.249,129.512 1.249,130.415C1.249,130.415 1.341,169.397 1.501,169.962C3.518,192.519 22.515,210.263 45.587,210.263C59.293,210.263 71.563,204.002 79.691,194.19C76.892,189.789 74.843,184.868 73.739,179.601C68.669,190.045 57.956,197.263 45.587,197.263C28.343,197.263 14.314,183.234 14.314,165.99L14.314,128.496C15.309,112.143 28.922,99.141 45.522,99.141C62.766,99.141 76.795,113.17 76.795,130.415Z" style="fill:white;"/>
-        </g>
-        <g id="Bottom-text" serif:id="Bottom text">
-            <path d="M17.05,249.113L12.837,236.704L8.623,249.113L17.05,249.113ZM13.68,234.613L21.002,255.65L19.288,255.65L17.573,250.595L8.101,250.595L6.386,255.65L4.672,255.65L11.965,234.613L13.68,234.613Z" style="fill:white;fill-rule:nonzero;"/>
-            <path d="M25.074,247.136L25.074,234.613L26.643,234.613L26.643,247.136C26.643,252.367 28.27,254.401 32.018,254.401C35.738,254.401 37.365,252.367 37.365,247.136L37.365,234.613L38.934,234.613L38.934,247.136C38.934,253.093 36.668,255.941 32.018,255.941C27.34,255.941 25.074,253.093 25.074,247.136Z" style="fill:white;fill-rule:nonzero;"/>
-            <path d="M43.849,251.147L45.331,250.652C46.232,253.122 48.47,254.488 51.201,254.488C54.136,254.488 56.141,252.832 56.141,250.304C56.141,247.427 53.845,246.643 50.91,245.683C47.481,244.579 44.576,243.301 44.576,239.611C44.576,236.53 47.133,234.322 50.591,234.322C53.932,234.322 56.344,235.891 57.419,238.826L55.995,239.291C55.066,236.908 53.206,235.804 50.591,235.746C47.946,235.746 46.145,237.286 46.145,239.611C46.145,242.458 48.411,243.33 51.288,244.26C54.688,245.335 57.681,246.526 57.681,250.333C57.681,253.645 55.037,255.941 51.201,255.941C47.714,255.941 44.924,254.169 43.849,251.147Z" style="fill:white;fill-rule:nonzero;"/>
-            <path d="M66.344,236.152L61.113,236.152L61.113,234.613L73.085,234.613L73.085,236.152L67.913,236.152L67.913,255.65L66.344,255.65L66.344,236.152Z" style="fill:white;fill-rule:nonzero;"/>
-            <path d="M83.229,246.236C87.21,246.236 89.564,245.509 89.564,241.179C89.564,236.938 87.268,236.124 83.229,236.124L80.033,236.124L80.033,246.236L83.229,246.236ZM78.464,234.613L83.2,234.613C88.198,234.613 91.133,236.008 91.133,241.151C91.133,245.131 89.331,246.875 86.251,247.486L91.308,255.65L89.419,255.65L84.595,247.688C84.159,247.718 83.694,247.718 83.2,247.718L80.033,247.718L80.033,255.65L78.464,255.65L78.464,234.613Z" style="fill:white;fill-rule:nonzero;"/>
-            <path d="M106.596,249.113L102.383,236.704L98.169,249.113L106.596,249.113ZM103.225,234.613L110.548,255.65L108.833,255.65L107.119,250.595L97.646,250.595L95.931,255.65L94.217,255.65L101.511,234.613L103.225,234.613Z" style="fill:white;fill-rule:nonzero;"/>
-            <path d="M115.317,234.613L116.886,234.613L116.886,254.11L125.226,254.11L125.226,255.65L115.317,255.65L115.317,234.613Z" style="fill:white;fill-rule:nonzero;"/>
-            <rect x="130.575" y="234.613" width="1.569" height="21.037" style="fill:white;fill-rule:nonzero;"/>
-            <path d="M149.058,249.113L144.844,236.704L140.631,249.113L149.058,249.113ZM145.687,234.613L153.01,255.65L151.295,255.65L149.581,250.595L140.107,250.595L138.393,255.65L136.679,255.65L143.972,234.613L145.687,234.613Z" style="fill:white;fill-rule:nonzero;"/>
-            <path d="M157.778,234.613L159.464,234.613L170.07,252.832L170.07,234.613L171.639,234.613L171.639,255.65L170.041,255.65L159.348,237.286L159.348,255.65L157.778,255.65L157.778,234.613Z" style="fill:white;fill-rule:nonzero;"/>
-            <path d="M187.22,245.073C187.22,238.681 190.445,234.293 195.211,234.293C198.407,234.293 200.761,235.92 202.039,238.913L200.644,239.494C199.395,236.938 197.68,235.804 195.24,235.804C191.375,235.804 188.789,239.494 188.789,245.073C188.789,250.797 191.259,254.371 195.152,254.371C199.046,254.371 201.371,251.379 201.487,246.148L195.095,246.148L195.095,244.638L203.085,244.638L203.085,245.8C203.085,252.047 200.063,255.883 195.123,255.883C190.3,255.883 187.22,251.64 187.22,245.073Z" style="fill:white;fill-rule:nonzero;"/>
-            <path d="M208.959,234.613L219.972,234.613L219.972,236.152L210.528,236.152L210.528,244.173L219.566,244.173L219.566,245.655L210.528,245.655L210.528,254.11L219.972,254.11L219.972,255.65L208.959,255.65L208.959,234.613Z" style="fill:white;fill-rule:nonzero;"/>
-            <path d="M225.787,234.613L227.473,234.613L238.079,252.832L238.079,234.613L239.648,234.613L239.648,255.65L238.049,255.65L227.356,237.286L227.356,255.65L225.787,255.65L225.787,234.613Z" style="fill:white;fill-rule:nonzero;"/>
-            <path d="M246.16,234.613L257.173,234.613L257.173,236.152L247.729,236.152L247.729,244.173L256.765,244.173L256.765,245.655L247.729,245.655L247.729,254.11L257.173,254.11L257.173,255.65L246.16,255.65L246.16,234.613Z" style="fill:white;fill-rule:nonzero;"/>
-            <path d="M267.056,236.152L261.825,236.152L261.825,234.613L273.797,234.613L273.797,236.152L268.625,236.152L268.625,255.65L267.056,255.65L267.056,236.152Z" style="fill:white;fill-rule:nonzero;"/>
-            <rect x="279.177" y="234.613" width="1.568" height="21.037" style="fill:white;fill-rule:nonzero;"/>
-            <path d="M294.521,256C290.307,256 286.617,252.628 286.617,245.19C286.617,237.925 290.336,234.351 294.521,234.351C297.63,234.351 300.71,236.269 301.843,240.947L300.332,241.325C299.46,237.867 297.368,235.891 294.521,235.891C290.685,235.891 288.186,239.552 288.186,245.19C288.186,250.914 290.627,254.459 294.521,254.459C297.397,254.459 299.518,252.396 300.332,248.851L301.872,249.141C300.797,254.023 297.659,256 294.521,256Z" style="fill:white;fill-rule:nonzero;"/>
-            <path d="M321.143,254.11C326.955,254.11 329.454,251.466 329.454,245.103C329.454,238.768 326.984,236.152 321.143,236.152L318.847,236.152L318.847,254.11L321.143,254.11ZM317.278,234.613L321.143,234.613C328.088,234.613 331.023,237.751 331.023,245.103C331.023,252.454 328.059,255.65 321.143,255.65L317.278,255.65L317.278,234.613Z" style="fill:white;fill-rule:nonzero;"/>
-            <rect x="336.867" y="234.613" width="1.57" height="21.037" style="fill:white;fill-rule:nonzero;"/>
-            <path d="M342.971,234.613L344.686,234.613L351.137,253.558L357.587,234.613L359.302,234.613L351.98,255.65L350.265,255.65L342.971,234.613Z" style="fill:white;fill-rule:nonzero;"/>
-            <path d="M363.839,234.613L374.851,234.613L374.851,236.152L365.407,236.152L365.407,244.173L374.445,244.173L374.445,245.655L365.407,245.655L365.407,254.11L374.851,254.11L374.851,255.65L363.839,255.65L363.839,234.613Z" style="fill:white;fill-rule:nonzero;"/>
-            <path d="M385.432,246.236C389.413,246.236 391.766,245.509 391.766,241.179C391.766,236.938 389.471,236.124 385.432,236.124L382.235,236.124L382.235,246.236L385.432,246.236ZM380.666,234.613L385.403,234.613C390.4,234.613 393.335,236.008 393.335,241.151C393.335,245.131 391.534,246.875 388.454,247.486L393.51,255.65L391.621,255.65L386.797,247.688C386.362,247.718 385.897,247.718 385.403,247.718L382.235,247.718L382.235,255.65L380.666,255.65L380.666,234.613Z" style="fill:white;fill-rule:nonzero;"/>
-            <path d="M397.872,251.147L399.354,250.652C400.255,253.122 402.492,254.488 405.224,254.488C408.158,254.488 410.164,252.832 410.164,250.304C410.164,247.427 407.868,246.643 404.933,245.683C401.504,244.579 398.599,243.301 398.599,239.611C398.599,236.53 401.156,234.322 404.614,234.322C407.955,234.322 410.367,235.891 411.442,238.826L410.018,239.291C409.088,236.908 407.229,235.804 404.614,235.746C401.969,235.746 400.168,237.286 400.168,239.611C400.168,242.458 402.434,243.33 405.311,244.26C408.71,245.335 411.704,246.526 411.704,250.333C411.704,253.645 409.06,255.941 405.224,255.941C401.737,255.941 398.947,254.169 397.872,251.147Z" style="fill:white;fill-rule:nonzero;"/>
-            <rect x="417.083" y="234.613" width="1.568" height="21.037" style="fill:white;fill-rule:nonzero;"/>
-            <path d="M429.231,236.152L424,236.152L424,234.613L435.972,234.613L435.972,236.152L430.799,236.152L430.799,255.65L429.231,255.65L429.231,236.152Z" style="fill:white;fill-rule:nonzero;"/>
-            <path d="M446.552,249.548L439.375,234.613L441.147,234.613L447.336,247.718L453.613,234.613L455.415,234.613L448.121,249.548L448.121,255.65L446.552,255.65L446.552,249.548Z" style="fill:white;fill-rule:nonzero;"/>
-            <path d="M473.523,254.11C479.335,254.11 481.834,251.466 481.834,245.103C481.834,238.768 479.364,236.152 473.523,236.152L471.228,236.152L471.228,254.11L473.523,254.11ZM469.659,234.613L473.523,234.613C480.468,234.613 483.403,237.751 483.403,245.103C483.403,252.454 480.439,255.65 473.523,255.65L469.659,255.65L469.659,234.613Z" style="fill:white;fill-rule:nonzero;"/>
-            <path d="M498.662,249.113L494.449,236.704L490.235,249.113L498.662,249.113ZM495.291,234.613L502.614,255.65L500.9,255.65L499.185,250.595L489.712,250.595L487.998,255.65L486.284,255.65L493.577,234.613L495.291,234.613Z" style="fill:white;fill-rule:nonzero;"/>
-            <path d="M509.01,236.152L503.78,236.152L503.78,234.613L515.75,234.613L515.75,236.152L510.579,236.152L510.579,255.65L509.01,255.65L509.01,236.152Z" style="fill:white;fill-rule:nonzero;"/>
-            <path d="M529.091,249.113L524.878,236.704L520.664,249.113L529.091,249.113ZM525.721,234.613L533.043,255.65L531.329,255.65L529.615,250.595L520.142,250.595L518.427,255.65L516.713,255.65L524.005,234.613L525.721,234.613Z" style="fill:white;fill-rule:nonzero;"/>
-            <path d="M542.956,254.14C547.373,254.14 549.116,252.919 549.116,249.956C549.116,246.671 547.605,245.626 543.043,245.626L539.381,245.626L539.381,254.14L542.956,254.14ZM542.84,244.143C546.849,244.143 548.535,242.923 548.535,239.901C548.535,236.966 547.198,236.124 542.723,236.124L539.381,236.124L539.381,244.143L542.84,244.143ZM537.812,234.613L542.752,234.613C548.332,234.613 550.133,236.037 550.133,239.814C550.133,242.691 548.912,244.231 546.181,244.812C549.436,245.218 550.714,246.701 550.714,249.926C550.714,253.849 548.535,255.65 542.956,255.65L537.812,255.65L537.812,234.613Z" style="fill:white;fill-rule:nonzero;"/>
-            <path d="M566.641,249.113L562.428,236.704L558.214,249.113L566.641,249.113ZM563.27,234.613L570.593,255.65L568.878,255.65L567.164,250.595L557.691,250.595L555.977,255.65L554.262,255.65L561.556,234.613L563.27,234.613Z" style="fill:white;fill-rule:nonzero;"/>
-            <path d="M573.996,251.147L575.478,250.652C576.379,253.122 578.616,254.488 581.348,254.488C584.282,254.488 586.288,252.832 586.288,250.304C586.288,247.427 583.992,246.643 581.057,245.683C577.629,244.579 574.722,243.301 574.722,239.611C574.722,236.53 577.279,234.322 580.738,234.322C584.079,234.322 586.491,235.891 587.566,238.826L586.142,239.291C585.212,236.908 583.353,235.804 580.738,235.746C578.094,235.746 576.292,237.286 576.292,239.611C576.292,242.458 578.558,243.33 581.435,244.26C584.835,245.335 587.828,246.526 587.828,250.333C587.828,253.645 585.183,255.941 581.348,255.941C577.861,255.941 575.071,254.169 573.996,251.147Z" style="fill:white;fill-rule:nonzero;"/>
-            <path d="M593.207,234.613L604.22,234.613L604.22,236.152L594.776,236.152L594.776,244.173L603.813,244.173L603.813,245.655L594.776,245.655L594.776,254.11L604.22,254.11L604.22,255.65L593.207,255.65L593.207,234.613Z" style="fill:white;fill-rule:nonzero;"/>
-        </g>
-    </g>
-</svg>
diff --git a/web/src/pages/ourdna/OurDnaDashboard.tsx b/web/src/pages/ourdna/OurDnaDashboard.tsx
deleted file mode 100644
index d97ed1747..000000000
--- a/web/src/pages/ourdna/OurDnaDashboard.tsx
+++ /dev/null
@@ -1,299 +0,0 @@
-import { useQuery } from '@apollo/client'
-import { Container, Grid, GridColumn, GridRow } from 'semantic-ui-react'
-import { gql } from '../../__generated__'
-import { PaddedPage } from '../../shared/components/Layout/PaddedPage'
-import LoadingDucks from '../../shared/components/LoadingDucks/LoadingDucks'
-import MuckError from '../../shared/components/MuckError'
-import BarChart from '../../shared/components/ourdna/BarChart'
-import { ourdnaColours } from '../../shared/components/ourdna/Colours'
-import AlarmIcon from '../../shared/components/ourdna/dashboardIcons/AlarmIcon'
-import BloodSampleIcon from '../../shared/components/ourdna/dashboardIcons/BloodSampleIcon'
-import ClipboardIcon from '../../shared/components/ourdna/dashboardIcons/ClipboardIcon'
-import ClockIcon from '../../shared/components/ourdna/dashboardIcons/ClockIcon'
-import RocketIcon from '../../shared/components/ourdna/dashboardIcons/RocketIcon'
-import SyringeIcon from '../../shared/components/ourdna/dashboardIcons/SyringeIcon'
-import TestTubeIcon from '../../shared/components/ourdna/dashboardIcons/TestTubeIcon'
-import TruckIcon from '../../shared/components/ourdna/dashboardIcons/TruckIcon'
-import OurDonutChart from '../../shared/components/ourdna/OurDonutChart'
-import StatTile from '../../shared/components/ourdna/StatTile'
-import TableTile from '../../shared/components/ourdna/TableTile'
-import Tile from '../../shared/components/ourdna/Tile'
-import OurDNALogo from '../../shared/components/OurDNALogo'
-
-const GET_OURDNA_DASHBOARD = gql(`
-    query DashboardQuery($project: String!) {
-        project(name: $project) {
-            ourdnaDashboard {
-                collectionToProcessEndTime
-                collectionToProcessEndTime24h
-                collectionToProcessEndTimeStatistics
-                collectionToProcessEndTimeBucketStatistics
-                participantsConsentedNotCollected
-                participantsSignedNotConsented
-                processingTimesBySite
-                processingTimesByCollectionSite
-                samplesConcentrationGt1ug
-                samplesLostAfterCollection {
-                    collectionLab
-                    collectionTime
-                    courier
-                    courierActualDropoffTime
-                    courierActualPickupTime
-                    courierScheduledDropoffTime
-                    courierScheduledPickupTime
-                    courierTrackingNumber
-                    processEndTime
-                    processStartTime
-                    receivedBy
-                    receivedTime
-                    sampleId
-                    timeSinceCollection
-                }
-                totalSamplesByCollectionEventName
-            }
-        }
-    }
-`)
-
-const iconStyle = {
-    marginRight: '10px',
-    width: '24px',
-    height: '24px',
-}
-
-const Dashboard = () => {
-    const { loading, error, data } = useQuery(GET_OURDNA_DASHBOARD, {
-        variables: { project: import.meta.env.VITE_OURDNA_PROJECT_NAME || 'ourdna' },
-    })
-
-    if (!data) return <MuckError message={`Ah Muck, there's no data here`} />
-    if (loading) return <LoadingDucks />
-    if (error) return <>Error! {error.message}</>
-
-    const samplesLostAfterCollections =
-        data.project.ourdnaDashboard.samplesLostAfterCollection.reduce(
-            (rr: Record<string, number>, sample) => {
-                rr[sample.sampleId] =
-                    sample.timeSinceCollection != null ? sample.timeSinceCollection / 3600 : 0
-                return rr
-            },
-            {}
-        )
-
-    return (
-        <>
-            <Container
-                style={{
-                    marginTop: 0,
-                    paddingBottom: '20px',
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                }}
-            >
-                <OurDNALogo className="ourdna-logo-responsive" />
-            </Container>
-            <Grid stackable>
-                <GridRow centered>
-                    <GridColumn width={10}>
-                        <Grid stackable columns={2}>
-                            <GridColumn>
-                                <Tile
-                                    header="Awaiting Consent"
-                                    stat={`${data.project.ourdnaDashboard.participantsSignedNotConsented.length}`}
-                                    units="participants"
-                                    unitsColour="ourdna-blue-transparent"
-                                    description="The number of people who have signed up but not consented."
-                                    icon={
-                                        <ClipboardIcon
-                                            fill={ourdnaColours.blue}
-                                            style={{ ...iconStyle }}
-                                        />
-                                    }
-                                />
-                            </GridColumn>
-                            <GridColumn>
-                                <Tile
-                                    header="Awaiting Collection"
-                                    stat={`${data.project.ourdnaDashboard.participantsConsentedNotCollected.length}`}
-                                    units="participants"
-                                    unitsColour="ourdna-yellow-transparent"
-                                    description="The number of people who have consented but not given blood."
-                                    icon={
-                                        <SyringeIcon
-                                            fill={ourdnaColours.yellow}
-                                            style={{ ...iconStyle }}
-                                        />
-                                    }
-                                />
-                            </GridColumn>
-                            <GridColumn>
-                                <Tile
-                                    header="Samples Lost"
-                                    stat={`${
-                                        Object.keys(
-                                            data.project.ourdnaDashboard.samplesLostAfterCollection
-                                        ).length
-                                    }`}
-                                    units="samples"
-                                    unitsColour="ourdna-red-transparent"
-                                    description="Blood has been collected, but was not processed within 72 hours."
-                                    icon={
-                                        <BloodSampleIcon
-                                            fill={ourdnaColours.red}
-                                            style={{ ...iconStyle }}
-                                        />
-                                    }
-                                />
-                            </GridColumn>
-                            <GridColumn>
-                                <StatTile
-                                    header="Collection to Processing"
-                                    stats={[
-                                        {
-                                            value: `${(
-                                                data.project.ourdnaDashboard
-                                                    .collectionToProcessEndTimeStatistics.min / 3600
-                                            ).toFixed(1)}`,
-                                            units: 'shortest (h)',
-                                            unitsColour: 'ourdna-green-transparent',
-                                        },
-                                        {
-                                            value: `${(
-                                                data.project.ourdnaDashboard
-                                                    .collectionToProcessEndTimeStatistics.max / 3600
-                                            ).toFixed(1)}`,
-                                            units: 'longest (h)',
-                                            unitsColour: 'ourdna-red-transparent',
-                                        },
-                                        {
-                                            value: `${(
-                                                data.project.ourdnaDashboard
-                                                    .collectionToProcessEndTimeStatistics.average /
-                                                3600
-                                            ).toFixed(1)}`,
-                                            units: 'average (h)',
-                                            unitsColour: 'ourdna-blue-transparent',
-                                        },
-                                    ]}
-                                    description="The time between collection and processing for each sample."
-                                    icon={
-                                        <TruckIcon
-                                            fill={ourdnaColours.green}
-                                            style={{ ...iconStyle }}
-                                        />
-                                    }
-                                />
-                            </GridColumn>
-                        </Grid>
-                    </GridColumn>
-                    <GridColumn width={6}>
-                        <OurDonutChart
-                            header="Where we collected our samples"
-                            data={data.project.ourdnaDashboard.totalSamplesByCollectionEventName}
-                            icon={
-                                <TestTubeIcon fill={ourdnaColours.blue} style={{ ...iconStyle }} />
-                            }
-                        />
-                    </GridColumn>
-                </GridRow>
-                <GridRow centered>
-                    <GridColumn width={10}>
-                        <BarChart
-                            header="Processing time per Processing Site"
-                            data={data.project.ourdnaDashboard.processingTimesBySite}
-                            icon={
-                                <ClockIcon fill={ourdnaColours.yellow} style={{ ...iconStyle }} />
-                            }
-                        />
-                    </GridColumn>
-                    <GridColumn width={6}>
-                        <Grid stackable columns={1}>
-                            <GridColumn>
-                                <StatTile
-                                    header="Collection to Processing by 24h buckets"
-                                    stats={[
-                                        {
-                                            value: `${data.project.ourdnaDashboard.collectionToProcessEndTimeBucketStatistics['24h']}`,
-                                            units: '24 hours',
-                                            unitsColour: 'ourdna-green-transparent',
-                                        },
-                                        {
-                                            value: `${data.project.ourdnaDashboard.collectionToProcessEndTimeBucketStatistics['48h']}`,
-                                            units: '48 hours',
-                                            unitsColour: 'ourdna-red-transparent',
-                                        },
-                                        {
-                                            value: `${data.project.ourdnaDashboard.collectionToProcessEndTimeBucketStatistics['72h']}`,
-                                            units: '72 hours',
-                                            unitsColour: 'ourdna-blue-transparent',
-                                        },
-                                        {
-                                            value: `${data.project.ourdnaDashboard.collectionToProcessEndTimeBucketStatistics['>72h']}`,
-                                            units: '> 72 hours',
-                                            unitsColour: 'ourdna-yellow-transparent',
-                                        },
-                                    ]}
-                                    description="Count of samples processed within each 24h bucket."
-                                    icon={
-                                        <TruckIcon
-                                            fill={ourdnaColours.green}
-                                            style={{ ...iconStyle }}
-                                        />
-                                    }
-                                />
-                            </GridColumn>
-                        </Grid>
-                    </GridColumn>
-                </GridRow>
-                <GridRow centered>
-                    <GridColumn width={10}>
-                        <BarChart
-                            header="Processing time per Collection Site"
-                            data={data.project.ourdnaDashboard.processingTimesByCollectionSite}
-                            icon={<ClockIcon fill={ourdnaColours.green} style={{ ...iconStyle }} />}
-                        />
-                    </GridColumn>
-                    <GridColumn width={6}>
-                        <Grid stackable columns={1}>
-                            <GridColumn>
-                                <TableTile
-                                    header="Viable Long Read"
-                                    data={data.project.ourdnaDashboard.samplesConcentrationGt1ug}
-                                    columns={['Sample ID', 'Concentration']}
-                                    icon={
-                                        <RocketIcon
-                                            fill={ourdnaColours.green}
-                                            style={{ ...iconStyle }}
-                                        />
-                                    }
-                                />
-                            </GridColumn>
-                            <GridColumn>
-                                <TableTile
-                                    header="Lost Samples"
-                                    data={samplesLostAfterCollections}
-                                    columns={['Sample ID', 'Time (h)']}
-                                    icon={
-                                        <AlarmIcon
-                                            fill={ourdnaColours.red}
-                                            style={{ ...iconStyle }}
-                                        />
-                                    }
-                                />
-                            </GridColumn>
-                        </Grid>
-                    </GridColumn>
-                </GridRow>
-            </Grid>
-        </>
-    )
-}
-
-export default function DashboardPage() {
-    return (
-        <PaddedPage>
-            <Dashboard />
-        </PaddedPage>
-    )
-}
diff --git a/web/src/shared/components/OurDNALogo.tsx b/web/src/shared/components/OurDNALogo.tsx
deleted file mode 100644
index 9bcf1529d..000000000
--- a/web/src/shared/components/OurDNALogo.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as React from 'react'
-import ourDNA from '../../ourdna-logo-rgb.svg'
-import ourDNADark from '../../ourdna-white.svg'
-import { ThemeContext } from './ThemeProvider'
-
-const OurDNALogo: React.FunctionComponent<
-    React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>
-> = (props) => {
-    const theme = React.useContext(ThemeContext)
-    const isDarkMode = theme.theme === 'dark-mode'
-
-    const ourDNAlogo = isDarkMode ? ourDNADark : ourDNA
-    return <img src={ourDNAlogo} alt="OurDNA Logo" {...props} />
-}
-export default OurDNALogo
diff --git a/web/src/shared/components/ourdna/BarChart.tsx b/web/src/shared/components/ourdna/BarChart.tsx
deleted file mode 100644
index 649c2c56c..000000000
--- a/web/src/shared/components/ourdna/BarChart.tsx
+++ /dev/null
@@ -1,255 +0,0 @@
-import * as d3 from 'd3'
-import * as React from 'react'
-import { Card, Container } from 'semantic-ui-react'
-
-import { ourdnaColours } from './Colours'
-
-export const chartOptions = {
-    responsive: true,
-    plugins: {
-        legend: {
-            position: 'bottom' as const,
-            labels: {
-                padding: 20,
-            },
-        },
-        title: {
-            display: false,
-            text: 'Chart.js Bar Chart',
-        },
-    },
-}
-
-interface HistogramProps {
-    icon: React.ReactNode
-    header: string
-    data: object
-}
-
-const HistogramChart: React.FC<HistogramProps> = ({ icon, header, data }) => {
-    const svgRef = React.useRef<SVGSVGElement | null>(null)
-    interface TransformedData {
-        site: string
-        hour: string
-        count: number
-    }
-
-    const [dimensions, setDimensions] = React.useState<{ width: number; height: number }>({
-        width: 0,
-        height: 0,
-    })
-
-    // @ts-ignore
-    const transformedData: TransformedData[] = Object.entries(data).flatMap(([site, hours]) =>
-        Object.entries(hours).map(([hour, count]) => ({
-            site,
-            hour,
-            count,
-        }))
-    )
-
-    const groupedData = d3.groups(transformedData, (d) => d.hour)
-
-    React.useEffect(() => {
-        // Function to handle window resize events and update dimensions
-        const handleResize = () => {
-            if (svgRef.current) {
-                const { width, height } = svgRef.current.getBoundingClientRect()
-                setDimensions({ width, height })
-            }
-        }
-
-        // Initial call to set dimensions
-        handleResize()
-
-        // Add event listener for window resize
-        window.addEventListener('resize', handleResize)
-
-        // Cleanup event listener on component unmount
-        return () => window.removeEventListener('resize', handleResize)
-    }, [])
-
-    React.useEffect(() => {
-        if (dimensions.width === 0 || dimensions.height === 0) return
-
-        const svg = d3.select(svgRef.current)
-        const margin = { top: 20, right: 100, bottom: 60, left: 60 }
-        const width = dimensions.width - margin.left - margin.right
-        const height = dimensions.height - margin.top - margin.bottom
-
-        svg.selectAll('*').remove() // Clear previous content
-
-        const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`)
-
-        const x0 = d3
-            .scaleBand()
-            .domain(transformedData.map((d) => d.hour))
-            .rangeRound([0, width])
-            .paddingInner(0.1)
-
-        const y = d3
-            .scaleLinear()
-            .domain([0, d3.max(transformedData, (d) => d.count) || 1])
-            .nice()
-            .rangeRound([height, 0])
-
-        const color = d3
-            .scaleOrdinal<string>()
-            .domain(transformedData.map((d) => d.site))
-            .range(Object.values(ourdnaColours))
-
-        groupedData.forEach(([hour, values]) => {
-            if (x0(hour) === undefined) {
-                return
-            }
-
-            const x1 = d3
-                .scaleBand()
-                .domain(values.map((d) => d.site))
-                .rangeRound([0, x0.bandwidth()])
-                .padding(0.05)
-
-            if (Number.isNaN(x0(hour))) {
-                return
-            }
-
-            g.append('g')
-                .attr('transform', `translate(${x0(hour)},0)`)
-                .selectAll('rect')
-                .data(values)
-                .enter()
-                .append('rect')
-                // @ts-ignore
-                .attr('x', (d) => {
-                    const x = x1(d.site)
-                    if (Number.isNaN(x)) {
-                        return 0
-                    }
-                    return x
-                })
-                .attr('y', (d) => y(d.count))
-                .attr('width', x1.bandwidth())
-                .attr('height', (d) => Math.max(0, height - y(d.count)))
-                .attr('fill', (d) => color(d.site))
-        })
-
-        g.append('g')
-            .attr('class', 'axis-label')
-            .attr('transform', `translate(0,${height})`)
-            .call(d3.axisBottom(x0))
-            .selectAll('text')
-            .attr('dy', '1em') // Adjust the position of the x-axis labels
-
-        g.append('g')
-            .attr('class', 'axis-label')
-            // Added a `.ticks(5)` to reduce the number of ticks on the y-axis
-            .call(d3.axisLeft(y).ticks(5).tickFormat(d3.format('d')))
-            .selectAll('text')
-            .attr('dx', '-1em') // Adjust the position of the y-axis labels
-
-        g.append('text')
-            .attr('class', 'axis-label')
-            .attr('text-anchor', 'end')
-            .attr('x', width / 2)
-            .attr('y', height + margin.bottom - 15)
-            .text('Hours Taken')
-
-        g.append('text')
-            .attr('class', 'axis-label')
-            .attr('text-anchor', 'end')
-            .attr('transform', 'rotate(-90)')
-            .attr('x', -height / 2)
-            .attr('y', -margin.left + 15)
-            .text('Sample Count')
-
-        const legend = svg
-            .append('g')
-            .attr('font-family', 'sans-serif')
-            .attr('font-size', 10)
-            .attr('text-anchor', 'start')
-            .attr('transform', `translate(${dimensions.width - margin.right + 10},${margin.top})`)
-            .selectAll('g')
-            .data(transformedData.map((d) => d.site).filter((v, i, a) => a.indexOf(v) === i))
-            .enter()
-            .append('g')
-            .attr('transform', (d, i) => `translate(0,${i * 20})`)
-
-        // Append X axis
-        g.append('g')
-            .attr('class', 'axis-label')
-            .attr('transform', `translate(0,${height})`)
-            .call(d3.axisBottom(x0))
-            .selectAll('text')
-            .attr('dy', '1em') // Adjust the position of the x-axis labels
-            .style('fill', 'var(--color-text-primary)') // Change the color of the axis labels
-
-        // Change the color of the tick marks
-        g.selectAll('.tick line').style('stroke', 'var(--color-text-primary)') // Change the color of the tick marks
-        // Append Y axis
-        g.append('g')
-            .attr('class', 'axis-label')
-            // Added a `.ticks(5)` to reduce the number of ticks on the y-axis
-            .call(d3.axisLeft(y).ticks(5).tickFormat(d3.format('d')))
-            .selectAll('text')
-            .attr('dx', '-1em') // Adjust the position of the y-axis labels
-            .style('fill', 'var(--color-text-primary)') // Change the color of the axis labels
-
-        // Append X axis line
-        g.append('g')
-            .attr('class', 'axis-line')
-            .append('line')
-            .attr('x1', 0)
-            .attr('x2', width)
-            .attr('y1', height)
-            .attr('y2', height)
-            .style('stroke', 'var(--color-text-primary)') // Change the color of the axis line
-
-        // Append Y axis line
-        g.append('g')
-            .attr('class', 'axis-line')
-            .append('line')
-            .attr('x1', 0)
-            .attr('x2', 0)
-            .attr('y1', 0)
-            .attr('y2', height)
-            .style('stroke', 'var(--color-text-primary)') // Change the color of the axis line
-
-        legend
-            .append('rect')
-            .attr('x', 0)
-            .attr('width', 19)
-            .attr('height', 19)
-            .attr('fill', (d) => color(d))
-
-        legend
-            .append('text')
-            .attr('x', 24)
-            .attr('y', 9.5)
-            .attr('dy', '0.32em')
-            .text((d) => d)
-    }, [data, dimensions, groupedData, transformedData])
-
-    return (
-        <Card
-            fluid
-            style={{
-                backgroundColor: 'var(--color-bg-card)',
-                boxShadow: 'var(--color-bg-card-shadow)',
-            }}
-        >
-            <Card.Content>
-                <Card.Header className="dashboard-tile" style={{ fontSize: '1.25rem' }}>
-                    {icon}
-                    {header}
-                </Card.Header>
-                <Card.Description>
-                    <Container style={{ position: 'relative' }}>
-                        <svg ref={svgRef} width="100%" height="50vh"></svg>
-                    </Container>
-                </Card.Description>
-            </Card.Content>
-        </Card>
-    )
-}
-
-export default HistogramChart
diff --git a/web/src/shared/components/ourdna/Colours.tsx b/web/src/shared/components/ourdna/Colours.tsx
deleted file mode 100644
index 8521a8e32..000000000
--- a/web/src/shared/components/ourdna/Colours.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-const ourdnaColours = {
-    red: 'var(--ourdna-red)',
-    yellow: 'var(--ourdna-yellow)',
-    green: 'var(--ourdna-green)',
-    blue: 'var(--ourdna-blue)',
-    charcoal: 'var(--ourdna-charcoal)',
-}
-
-const ourdnaColoursTransparent = {
-    red: 'var(--ourdna-red-transparent)',
-    yellow: 'var(--ourdna-yellow-transparent)',
-    green: 'var(--ourdna-green-transparent)',
-    blue: 'var(--ourdna-blue-transparent)',
-    charcoal: 'var(--ourdna-charcoal-transparent)',
-}
-
-export { ourdnaColours, ourdnaColoursTransparent }
diff --git a/web/src/shared/components/ourdna/OurDonutChart.tsx b/web/src/shared/components/ourdna/OurDonutChart.tsx
deleted file mode 100644
index fa4b7ca12..000000000
--- a/web/src/shared/components/ourdna/OurDonutChart.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-import * as d3 from 'd3'
-import * as React from 'react'
-import { Card, Container } from 'semantic-ui-react'
-
-import { ourdnaColours } from './Colours'
-
-interface DonutChartData {
-    [key: string]: number
-}
-
-interface DonutChartProps {
-    header: string
-    data: DonutChartData
-    icon: React.ReactNode
-}
-
-const OurDonutChart: React.FC<DonutChartProps> = ({ header, data, icon }) => {
-    const svgRef = React.useRef<SVGSVGElement | null>(null)
-
-    const [dimensions, setDimensions] = React.useState<{ width: number; height: number }>({
-        width: 0,
-        height: 0,
-    })
-
-    React.useEffect(() => {
-        const handleResize = () => {
-            if (svgRef.current) {
-                const { width, height } = svgRef.current.getBoundingClientRect()
-                setDimensions({ width, height })
-            }
-        }
-
-        handleResize()
-
-        window.addEventListener('resize', handleResize)
-        return () => window.removeEventListener('resize', handleResize)
-    }, [])
-
-    React.useEffect(() => {
-        if (dimensions.width === 0 || dimensions.height === 0) return
-
-        const svg = d3.select(svgRef.current)
-        const margin = { top: 40, right: 40, bottom: 50, left: 40 }
-        const width = dimensions.width - margin.left - margin.right
-        const height = dimensions.height - margin.top - margin.bottom
-        const radius = Math.min(width, height) / 2
-
-        svg.selectAll('*').remove() // Clear previous content
-
-        const g = svg.append('g').attr('transform', `translate(${width / 2},${height / 2})`)
-
-        const color = d3
-            .scaleOrdinal<string>()
-            .domain(Object.keys(data))
-            .range(Object.values(ourdnaColours) || d3.schemeCategory10)
-
-        // Correctly map Object.entries to objects with { key, value } format
-        const formattedData = Object.entries(data).map(([key, value]) => ({ key, value }))
-
-        const pie = d3.pie<{ key: string; value: number }>().value((d) => d.value)
-        const data_ready = pie(formattedData)
-
-        const arc = d3
-            .arc<d3.PieArcDatum<{ key: string; value: number }>>()
-            .innerRadius(radius * 0.4)
-            .outerRadius(radius * 0.8)
-
-        const tooltip = d3
-            .select('body')
-            .append('div')
-            .style('position', 'absolute')
-            .style('visibility', 'hidden')
-            .style('background', 'rgba(0, 0, 0, 0.7)')
-            .style('color', '#fff')
-            .style('padding', '5px 10px')
-            .style('border-radius', '4px')
-            .style('text-align', 'center')
-            .text('')
-
-        g.selectAll('allSlices')
-            .data(data_ready)
-            .enter()
-            .append('path')
-            .attr('d', arc)
-            .attr('fill', (d) => color(d.data.key)) // Correct reference to key
-            .attr('stroke', 'white')
-            .style('stroke-width', '2px')
-            .style('opacity', 1)
-            .on('mouseover', function (event, d) {
-                tooltip.text(`${d.data.key}: ${d.data.value}`) // Correctly reference key and value
-                return tooltip.style('visibility', 'visible')
-            })
-            .on('mousemove', function (event) {
-                return tooltip
-                    .style('top', `${event.pageY - 10}px`)
-                    .style('left', `${event.pageX + 10}px`)
-            })
-            .on('mouseout', function () {
-                return tooltip.style('visibility', 'hidden')
-            })
-
-        // Remove any existing legend to avoid overlap
-        d3.selectAll('.legend').remove()
-
-        // Add legends at the bottom
-        const legend = svg
-            .append('g')
-            .attr('class', 'legend')
-            .attr('transform', `translate(${0}, ${height / 2 + radius + 40})`)
-
-        // Calculate how many items fit per row dynamically based on width
-        const itemsPerRow = Math.floor(width / 120) // Estimate based on width
-        const legendItems = legend
-            .selectAll('g')
-            .data(data_ready)
-            .enter()
-            .append('g')
-            .attr('transform', (d, i) => {
-                const row = Math.floor(i / itemsPerRow) // Wrap items based on available space
-                const col = i % itemsPerRow
-                return `translate(${col * 120}, ${row * 20})`
-            })
-
-        legendItems
-            .append('rect')
-            .attr('width', 18)
-            .attr('height', 18)
-            .attr('fill', (d) => color(d.data.key)) // Correct reference to key
-
-        legendItems
-            .append('text')
-            .attr('x', 24)
-            .attr('y', 9)
-            .attr('dy', '0.35em')
-            .text((d) => d.data.key) // Correct reference to key
-            .style('font-size', '12px')
-            .style('fill', 'var(--color-text-primary)')
-    }, [data, dimensions])
-
-    return (
-        <Card
-            fluid
-            style={{
-                height: '100%',
-                backgroundColor: 'var(--color-bg-card)',
-                boxShadow: 'var(--color-bg-card-shadow)',
-            }}
-        >
-            <Card.Content style={{ height: '100%' }}>
-                <Card.Header className="dashboard-tile" style={{ fontSize: '1.25rem' }}>
-                    {icon}
-                    {header}
-                </Card.Header>
-                <Card.Description style={{ height: '100%' }}>
-                    <Container style={{ position: 'relative', height: '100%' }}>
-                        <svg
-                            ref={svgRef}
-                            viewBox={`0 0 ${dimensions.width} ${dimensions.height}`}
-                            preserveAspectRatio="xMidYMid meet"
-                            style={{ width: '100%', height: '100%', minHeight: '300px' }}
-                        ></svg>
-                    </Container>
-                </Card.Description>
-            </Card.Content>
-        </Card>
-    )
-}
-
-export default OurDonutChart
diff --git a/web/src/shared/components/ourdna/StatTile.tsx b/web/src/shared/components/ourdna/StatTile.tsx
deleted file mode 100644
index da2557f5a..000000000
--- a/web/src/shared/components/ourdna/StatTile.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import * as React from 'react'
-import { Card, Grid, Label, SemanticWIDTHS, Statistic } from 'semantic-ui-react'
-
-interface StatTileProps {
-    header: string
-    stats: { value: string; units: string; unitsColour: string }[]
-    icon: React.ReactNode
-    description: string
-}
-
-const StatTile: React.FC<StatTileProps> = ({ header, stats, icon, description }) => (
-    <Card
-        fluid
-        style={{
-            backgroundColor: 'var(--color-bg-card)',
-            boxShadow: 'var(--color-bg-card-shadow)',
-        }}
-    >
-        <Card.Content>
-            <Card.Header className="dashboard-tile" style={{ fontSize: '1.25rem' }}>
-                {icon}
-                {header}
-            </Card.Header>
-            <Card.Description>
-                <Grid columns={stats.length.toString() as SemanticWIDTHS}>
-                    {stats.map((stat, index) => (
-                        <Grid.Column key={index}>
-                            <Statistic size="small">
-                                <Statistic.Value className="dashboard-tile">
-                                    {stat.value}
-                                </Statistic.Value>
-                                <Statistic.Label style={{ margin: 5 }}>
-                                    <Label
-                                        className="dashboard-tile"
-                                        style={{
-                                            backgroundColor: `var(--${stat.unitsColour})`,
-                                        }}
-                                    >
-                                        {stat.units}
-                                    </Label>
-                                </Statistic.Label>
-                            </Statistic>
-                        </Grid.Column>
-                    ))}
-                </Grid>
-            </Card.Description>
-        </Card.Content>
-        <Card.Content extra className="dashboard-tile">
-            {description}
-        </Card.Content>
-    </Card>
-)
-
-export default StatTile
diff --git a/web/src/shared/components/ourdna/TableTile.tsx b/web/src/shared/components/ourdna/TableTile.tsx
deleted file mode 100644
index 4243986b4..000000000
--- a/web/src/shared/components/ourdna/TableTile.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import * as React from 'react'
-import { Card, Table } from 'semantic-ui-react'
-
-interface TableTileProps {
-    header: string
-    data: Record<string, string | number>
-    columns: Array<string>
-    icon: React.ReactNode
-}
-
-const TableTile: React.FC<TableTileProps> = ({ header, data, columns, icon }) => (
-    <Card
-        fluid
-        style={{
-            backgroundColor: 'var(--color-bg-card)',
-            boxShadow: 'var(--color-bg-card-shadow)',
-        }}
-    >
-        <Card.Content>
-            <Card.Header className="dashboard-tile">
-                {icon}
-                {header}
-            </Card.Header>
-            <Card.Description>
-                <div style={{ maxHeight: '20vh', overflowY: 'auto' }}>
-                    <Table celled style={{ backgroundColor: 'var(--color-bg-card)' }}>
-                        <Table.Header
-                            style={{
-                                position: 'sticky',
-                                top: 0,
-                                zIndex: 1,
-                                backgroundColor: 'var(--color-bg-card)',
-                            }}
-                        >
-                            <Table.Row>
-                                {columns &&
-                                    columns.map((column, index) => (
-                                        <Table.HeaderCell
-                                            className="dashboard-tile"
-                                            key={index}
-                                            style={{ backgroundColor: 'var(--color-bg-card)' }}
-                                        >
-                                            {column}
-                                        </Table.HeaderCell>
-                                    ))}
-                            </Table.Row>
-                        </Table.Header>
-                        <Table.Body className="dashboard-tile">
-                            {data &&
-                                Object.keys(data).map((key, index) => (
-                                    <Table.Row key={index}>
-                                        <Table.Cell>{key}</Table.Cell>
-                                        <Table.Cell>{data[key]}</Table.Cell>
-                                    </Table.Row>
-                                ))}
-                        </Table.Body>
-                    </Table>
-                </div>
-            </Card.Description>
-        </Card.Content>
-    </Card>
-)
-
-export default TableTile
diff --git a/web/src/shared/components/ourdna/Tile.tsx b/web/src/shared/components/ourdna/Tile.tsx
deleted file mode 100644
index 082989b90..000000000
--- a/web/src/shared/components/ourdna/Tile.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as React from 'react'
-import { Card, Label, Statistic } from 'semantic-ui-react'
-
-interface TileProps {
-    header: string
-    stat: string
-    units: string
-    unitsColour: string
-    description: string
-    icon: React.ReactNode
-}
-
-const Tile: React.FC<TileProps> = ({ header, stat, units, unitsColour, description, icon }) => (
-    <Card
-        fluid
-        style={{
-            backgroundColor: 'var(--color-bg-card)',
-            boxShadow: 'var(--color-bg-card-shadow)',
-        }}
-    >
-        <Card.Content>
-            <Card.Header className="dashboard-tile" style={{ fontSize: '1.25rem' }}>
-                {icon}
-                {header}
-            </Card.Header>
-            <Card.Description>
-                <Statistic size="small">
-                    <Statistic.Value className="dashboard-tile">{stat}</Statistic.Value>
-                    <Statistic.Label style={{ margin: 5 }}>
-                        <Label
-                            className="dashboard-tile"
-                            style={{ backgroundColor: `var(--${unitsColour})` }}
-                        >
-                            {units}
-                        </Label>
-                    </Statistic.Label>
-                </Statistic>
-            </Card.Description>
-        </Card.Content>
-        <Card.Content className="dashboard-tile" extra>
-            {description}
-        </Card.Content>
-    </Card>
-)
-
-export default Tile
diff --git a/web/src/shared/components/ourdna/dashboardIcons/AlarmIcon.tsx b/web/src/shared/components/ourdna/dashboardIcons/AlarmIcon.tsx
deleted file mode 100644
index 6298cae37..000000000
--- a/web/src/shared/components/ourdna/dashboardIcons/AlarmIcon.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react'
-import { Image } from 'semantic-ui-react'
-
-interface IconProps {
-    fill?: string
-    width?: string
-    height?: string
-    className?: string
-    style?: React.CSSProperties
-}
-
-const AlarmIcon: React.FC<IconProps> = ({
-    fill,
-    width = '100%',
-    height = '100%',
-    className,
-    style,
-}) => (
-    <Image
-        as="svg"
-        viewBox="0 0 70 70" // Ensure viewBox covers the SVG's dimensions
-        style={{ width, height, ...style }}
-        className={className}
-    >
-        <rect width="70" height="70" fill="none" />
-        <g clipPath="url(#clip0_1_49)">
-            <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M20.4398 11.0518C22.0066 10.2172 22.6001 8.27045 21.7655 6.70369C20.9309 5.13693 18.9842 4.54343 17.4174 5.37805C12.9945 7.73416 9.04791 10.8915 5.7784 14.6893C4.6202 16.0346 4.77191 18.0641 6.11724 19.2223C7.46258 20.3805 9.49207 20.2288 10.6503 18.8834C13.4003 15.6891 16.7198 13.0335 20.4398 11.0518ZM35 65.0004C49.2016 65.0004 60.7143 53.4881 60.7143 39.2864C60.7143 25.0847 49.2016 13.5721 35 13.5721C20.7984 13.5721 9.28576 25.0847 9.28576 39.2864C9.28576 53.4881 20.7984 65.0004 35 65.0004ZM48.2347 6.70369C49.0691 5.13693 51.0161 4.54343 52.5826 5.37805C57.0054 7.73416 60.9521 10.8915 64.2217 14.6893C65.3797 16.0346 65.228 18.0641 63.8827 19.2223C62.5374 20.3805 60.5081 20.2288 59.3497 18.8834C56.6 15.6891 53.2803 13.0335 49.5603 11.0518C47.9934 10.2172 47.4 8.27045 48.2347 6.70369ZM37.6786 26.4286C37.6786 24.9492 36.4793 23.75 35 23.75C33.5207 23.75 32.3214 24.9492 32.3214 26.4286V39.2857C32.3214 40.7651 33.5207 41.9643 35 41.9643H45.7143C47.1936 41.9643 48.3929 40.7651 48.3929 39.2857C48.3929 37.8064 47.1936 36.6071 45.7143 36.6071H37.6786V26.4286Z"
-                fill={fill}
-            />
-        </g>
-        <defs>
-            <clipPath id="clip0_1_49">
-                <rect width="60" height="60" fill="white" transform="translate(5 5)" />
-            </clipPath>
-        </defs>
-    </Image>
-)
-
-export default AlarmIcon
diff --git a/web/src/shared/components/ourdna/dashboardIcons/BloodSampleIcon.tsx b/web/src/shared/components/ourdna/dashboardIcons/BloodSampleIcon.tsx
deleted file mode 100644
index 92d99e2c9..000000000
--- a/web/src/shared/components/ourdna/dashboardIcons/BloodSampleIcon.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react'
-import { Image } from 'semantic-ui-react'
-
-interface IconProps {
-    fill?: string
-    width?: string
-    height?: string
-    className?: string
-    style?: React.CSSProperties
-}
-
-const BloodSampleIcon: React.FC<IconProps> = ({
-    fill,
-    width = '100%',
-    height = '100%',
-    className,
-    style,
-}) => (
-    <Image
-        as="svg"
-        viewBox="0 0 70 70" // Ensure viewBox covers the SVG's dimensions
-        style={{ width, height, ...style }}
-        className={className}
-    >
-        <rect width="70" height="70" fill="none" />
-        <g clipPath="url(#clip0_1_7)">
-            <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M35 7.14286L36.7153 5.85851C36.3107 5.31812 35.6751 5 35 5C34.3249 5 33.6893 5.31812 33.2847 5.85851L35 7.14286ZM55.2179 50.672C56.012 48.4117 56.4286 46.013 56.4286 43.5714C56.4286 40.4016 55.0396 36.4242 53.2177 32.4791C51.3581 28.4519 48.8973 24.149 46.4639 20.2259C44.026 16.2955 41.5916 12.7078 39.7686 10.1048C38.8564 8.80241 38.0955 7.74417 37.5617 7.01013C37.2948 6.64306 37.0845 6.35691 36.9403 6.16168L36.7747 5.93821L36.7313 5.87993L36.7198 5.86455L36.7153 5.85851C36.7151 5.85815 36.7153 5.85851 35 7.14286C33.2847 5.85851 33.2849 5.85815 33.2847 5.85851L33.2802 5.86455L33.2687 5.87993L33.2253 5.93821L33.0597 6.16168C32.9155 6.35691 32.7052 6.64306 32.4383 7.01013C31.9045 7.74417 31.1436 8.80241 30.2314 10.1048C28.5267 12.5388 26.2875 15.8338 24.0107 19.465L10.4871 5.94144C9.23187 4.68619 7.1967 4.68619 5.94144 5.94144C4.68619 7.1967 4.68619 9.23187 5.94144 10.4871L59.513 64.0584C60.7683 65.3137 62.8031 65.3137 64.0584 64.0584C65.3137 62.8031 65.3137 60.7683 64.0584 59.513L55.2179 50.672ZM17.975 30.0155L48.3183 60.3586C44.5487 63.3496 39.8594 65 35 65C29.3168 65 23.8664 62.7423 19.8477 58.7236C15.8291 54.7053 13.5714 49.2547 13.5714 43.5714C13.5714 40.4016 14.9605 36.4242 16.7822 32.4791C17.1571 31.6673 17.5564 30.8443 17.975 30.0155Z"
-                fill={fill}
-            />
-        </g>
-        <defs>
-            <clipPath id="clip0_1_7">
-                <rect width="60" height="60" fill="white" transform="translate(5 5)" />
-            </clipPath>
-        </defs>
-    </Image>
-)
-
-export default BloodSampleIcon
diff --git a/web/src/shared/components/ourdna/dashboardIcons/ClipboardIcon.tsx b/web/src/shared/components/ourdna/dashboardIcons/ClipboardIcon.tsx
deleted file mode 100644
index c9e91a76e..000000000
--- a/web/src/shared/components/ourdna/dashboardIcons/ClipboardIcon.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react'
-import { Image } from 'semantic-ui-react'
-
-interface IconProps {
-    fill?: string
-    width?: string
-    height?: string
-    className?: string
-    style?: React.CSSProperties
-}
-
-const ClipboardIcon: React.FC<IconProps> = ({
-    fill,
-    width = '100%',
-    height = '100%',
-    className,
-    style,
-}) => (
-    <Image
-        as="svg"
-        viewBox="0 0 70 70" // Ensure viewBox covers the SVG's dimensions
-        style={{ width, height, ...style }}
-        className={className}
-    >
-        <rect width="70" height="70" fill="none" />
-        <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M28.5714 5C26.2045 5 24.2857 6.91878 24.2857 9.28571V11.4286C24.2857 13.7955 26.2045 15.7143 28.5714 15.7143H41.4286C43.7955 15.7143 45.7143 13.7955 45.7143 11.4286V9.28571C45.7143 6.91878 43.7955 5 41.4286 5H28.5714ZM18.9284 9.28571H16.7857C13.2353 9.28571 10.3571 12.1639 10.3571 15.7143V58.5714C10.3571 62.1217 13.2353 65 16.7857 65H53.2143C56.7646 65 59.6429 62.1217 59.6429 58.5714V15.7143C59.6429 12.1639 56.7646 9.28571 53.2143 9.28571H51.0714V11.4286C51.0714 16.7542 46.754 21.0714 41.4284 21.0714H28.5713C23.2457 21.0714 18.9284 16.7542 18.9284 11.4286V9.28571ZM21.0713 41.4286C21.0713 39.6534 22.5104 38.2143 24.2856 38.2143H45.7142C47.4893 38.2143 48.9286 39.6534 48.9286 41.4286C48.9286 43.2038 47.4893 44.6429 45.7142 44.6429H24.2856C22.5104 44.6429 21.0713 43.2038 21.0713 41.4286Z"
-            fill={fill}
-        />
-    </Image>
-)
-
-export default ClipboardIcon
diff --git a/web/src/shared/components/ourdna/dashboardIcons/ClockIcon.tsx b/web/src/shared/components/ourdna/dashboardIcons/ClockIcon.tsx
deleted file mode 100644
index f174b046b..000000000
--- a/web/src/shared/components/ourdna/dashboardIcons/ClockIcon.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react'
-import { Image } from 'semantic-ui-react'
-
-interface IconProps {
-    fill?: string
-    width?: string
-    height?: string
-    className?: string
-    style?: React.CSSProperties
-}
-
-const ClockIcon: React.FC<IconProps> = ({
-    fill,
-    width = '100%',
-    height = '100%',
-    className,
-    style,
-}) => (
-    <Image
-        as="svg"
-        viewBox="0 0 70 70" // Ensure viewBox covers the SVG's dimensions
-        style={{ width, height, ...style }}
-        className={className}
-    >
-        <rect width="70" height="70" fill="none" />
-        <g clipPath="url(#clip0_2_343)">
-            <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M35 65C51.5686 65 65 51.5686 65 35C65 18.4315 51.5686 5 35 5C18.4315 5 5 18.4315 5 35C5 51.5686 18.4315 65 35 65ZM37.6786 24.2857C37.6786 22.8064 36.4793 21.6071 35 21.6071C33.5207 21.6071 32.3214 22.8064 32.3214 24.2857V35C32.3214 35.6266 32.5411 36.2334 32.9423 36.7148L43.6565 49.5719C44.6036 50.7084 46.2926 50.8619 47.4291 49.9147C48.5656 48.968 48.719 47.2788 47.772 46.1423L37.6786 34.0302V24.2857Z"
-                fill={fill}
-            />
-        </g>
-        <defs>
-            <clipPath id="clip0_2_343">
-                <rect width="60" height="60" fill="white" transform="translate(5 5)" />
-            </clipPath>
-        </defs>
-    </Image>
-)
-
-export default ClockIcon
diff --git a/web/src/shared/components/ourdna/dashboardIcons/RocketIcon.tsx b/web/src/shared/components/ourdna/dashboardIcons/RocketIcon.tsx
deleted file mode 100644
index fa4da74bd..000000000
--- a/web/src/shared/components/ourdna/dashboardIcons/RocketIcon.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react'
-import { Image } from 'semantic-ui-react'
-
-interface IconProps {
-    fill?: string
-    width?: string
-    height?: string
-    className?: string
-    style?: React.CSSProperties
-}
-
-const RocketIcon: React.FC<IconProps> = ({
-    fill,
-    width = '100%',
-    height = '100%',
-    className,
-    style,
-}) => (
-    <Image
-        as="svg"
-        viewBox="0 0 70 70" // Ensure viewBox covers the SVG's dimensions
-        style={{ width, height, ...style }}
-        className={className}
-    >
-        <rect width="70" height="70" fill="none" />
-        <g clipPath="url(#clip0_2_189)">
-            <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M33.0585 48.9856L21.0144 36.9415C22.3385 34.724 23.6579 32.4313 24.9678 30.1547C29.323 22.586 33.5748 15.1968 37.558 11.3534C48.3749 0.536384 63.1914 6.80842 63.1914 6.80842C63.1914 6.80842 69.4636 21.625 58.6464 32.4419C54.8347 36.3924 47.5619 40.5806 40.051 44.9058C37.7109 46.2533 35.3473 47.6145 33.0585 48.9856ZM42.2324 20.9889C42.2324 17.2451 45.2673 14.2102 49.0113 14.2102C52.7549 14.2102 55.79 17.2451 55.79 20.9889C55.79 24.7327 52.7549 27.7677 49.0113 27.7677C45.2673 27.7677 42.2324 24.7327 42.2324 20.9889ZM24.7 19.9952C18.6233 18.3782 12.9214 21.3724 7.86219 26.013C6.84455 26.9465 7.05708 28.5792 8.23994 29.2918L16.4053 34.2107L16.4147 34.1948C17.5926 32.2223 18.9092 29.9375 20.2432 27.6227C21.7664 24.9795 23.3127 22.2962 24.7 19.9952ZM35.7894 53.5944L40.7084 61.7596C41.4209 62.9424 43.0537 63.155 43.9871 62.1376C48.6294 57.0766 51.6239 51.3727 50.0034 45.2937C47.769 46.6403 45.4194 47.996 43.092 49.3366L42.7369 49.541C40.386 50.8949 38.0595 52.2346 35.8115 53.5811L35.7894 53.5944ZM16.2377 45.041C17.3886 45.0207 18.5318 45.2324 19.5991 45.6635C20.6663 46.0946 21.6359 46.7363 22.4498 47.5502C23.2637 48.3641 23.9054 49.3336 24.3365 50.4011C24.7676 51.4683 24.9793 52.6113 24.959 53.7624C24.9387 54.9131 24.6868 56.048 24.2183 57.0997C23.7522 58.1459 23.0813 59.0879 22.2452 59.87C21.2947 60.7803 19.8075 61.4921 18.4287 62.0399C16.9586 62.6244 15.281 63.1464 13.7148 63.5737C12.1434 64.0027 10.6425 64.3477 9.50904 64.5727C8.94618 64.6841 8.44966 64.7711 8.06909 64.823C7.8864 64.8479 7.68462 64.871 7.49837 64.8791C7.41395 64.883 7.26134 64.8877 7.08683 64.871C7.00319 64.8629 6.84124 64.8436 6.64865 64.7861C6.52153 64.748 6.02771 64.5976 5.6163 64.1176C5.26392 63.7066 5.16799 63.2776 5.14488 63.1743C5.10783 63.0089 5.09651 62.8687 5.09222 62.7941C5.08333 62.6399 5.09005 62.5031 5.09531 62.4217C5.10672 62.2456 5.13104 62.0514 5.15748 61.8697C5.21223 61.493 5.30117 61.0006 5.4151 60.4391C5.64426 59.3098 5.99219 57.8159 6.42325 56.2511C6.8528 54.6916 7.37598 53.0219 7.96088 51.5578C8.50981 50.1838 9.22154 48.7031 10.1301 47.7548C10.9124 46.9187 11.8544 46.2478 12.9004 45.7817C13.9518 45.3132 15.0868 45.0613 16.2377 45.041Z"
-                fill={fill}
-            />
-        </g>
-        <defs>
-            <clipPath id="clip0_2_189">
-                <rect width="60" height="60" fill="white" transform="translate(5 5)" />
-            </clipPath>
-        </defs>
-    </Image>
-)
-
-export default RocketIcon
diff --git a/web/src/shared/components/ourdna/dashboardIcons/SyringeIcon.tsx b/web/src/shared/components/ourdna/dashboardIcons/SyringeIcon.tsx
deleted file mode 100644
index 7e1f177f9..000000000
--- a/web/src/shared/components/ourdna/dashboardIcons/SyringeIcon.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react'
-import { Image } from 'semantic-ui-react'
-
-interface IconProps {
-    fill?: string
-    width?: string
-    height?: string
-    className?: string
-    style?: React.CSSProperties
-}
-
-const SyringeIcon: React.FC<IconProps> = ({
-    fill,
-    width = '100%',
-    height = '100%',
-    className,
-    style,
-}) => (
-    <Image
-        as="svg"
-        viewBox="0 0 70 70" // Ensure viewBox covers the SVG's dimensions
-        style={{ width, height, ...style }}
-        className={className}
-    >
-        <rect width="70" height="70" fill="none" />
-        <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M45.1541 6.25526C46.8277 4.58158 49.5413 4.58158 51.2148 6.25526L62.8844 17.9249C64.5584 19.5985 64.5584 22.3121 62.8844 23.9858C61.2108 25.6595 58.4975 25.6595 56.8235 23.9858L54.0194 21.1814L48.4107 26.7902L58.9947 37.3743C60.6683 39.048 60.6683 41.7615 58.9947 43.4352C57.3211 45.1089 54.6074 45.1089 52.9338 43.4352L48.6443 39.1458L34.1941 53.8857L34.18 53.8998C33.2585 54.8225 32.1641 55.5545 30.9595 56.0538C29.7549 56.5531 28.4637 56.8103 27.1597 56.8103C25.8557 56.8103 24.5645 56.5531 23.3599 56.0538C22.409 55.6595 21.5267 55.1204 20.7439 54.457L12.3162 62.8844C10.6425 64.5584 7.92893 64.5584 6.25526 62.8844C4.58158 61.2108 4.58158 58.4975 6.25526 56.8235L14.683 48.3961C14.0195 47.6131 13.4803 46.7309 13.0861 45.7799C12.5867 44.5753 12.3297 43.2841 12.3297 41.9801C12.3297 40.6762 12.5867 39.385 13.0861 38.1804C13.5854 36.9758 14.3173 35.8814 15.2399 34.9599L15.2541 34.9457L29.9941 20.4955L25.7046 16.2061C24.0309 14.5324 24.0309 11.8188 25.7046 10.1451C27.3783 8.47145 30.0918 8.47145 31.7655 10.1451L42.3496 20.7293L47.9585 15.1205L45.1541 12.3162C43.4804 10.6425 43.4804 7.92893 45.1541 6.25526Z"
-            fill={fill}
-        />
-    </Image>
-)
-
-export default SyringeIcon
diff --git a/web/src/shared/components/ourdna/dashboardIcons/TestTubeIcon.tsx b/web/src/shared/components/ourdna/dashboardIcons/TestTubeIcon.tsx
deleted file mode 100644
index 07e17c3eb..000000000
--- a/web/src/shared/components/ourdna/dashboardIcons/TestTubeIcon.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react'
-import { Image } from 'semantic-ui-react'
-
-interface IconProps {
-    fill?: string
-    width?: string
-    height?: string
-    className?: string
-    style?: React.CSSProperties
-}
-
-const TestTubeIcon: React.FC<IconProps> = ({
-    fill,
-    width = '100%',
-    height = '100%',
-    className,
-    style,
-}) => (
-    <Image
-        as="svg"
-        viewBox="0 0 70 70" // Ensure viewBox covers the SVG's dimensions
-        style={{ width, height, ...style }}
-        className={className}
-    >
-        <rect width="70" height="70" fill="none" />
-        <g clipPath="url(#clip0_2_252)">
-            <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M16.8605 4.99542C15.0853 4.99542 13.6462 6.43451 13.6462 8.20971C13.6462 9.98493 15.0853 11.424 16.8605 11.424H20V16.4547H30.7143C32.1937 16.4547 33.3929 17.6539 33.3929 19.1333C33.3929 20.6126 32.1937 21.8118 30.7143 21.8118H20V30.1785H30.7143C32.1937 30.1785 33.3929 31.3778 33.3929 32.8571C33.3929 34.3364 32.1937 35.5357 30.7143 35.5357H20V43.9024H30.7143C32.1937 43.9024 33.3929 45.1016 33.3929 46.581C33.3929 48.0603 32.1937 49.2594 30.7143 49.2594H20V50C20 53.9784 21.5803 57.7936 24.3934 60.6067C27.2064 63.4199 31.0217 65 35 65C38.9782 65 42.7936 63.4199 45.6066 60.6067C48.4198 57.7936 50 53.9784 50 50V11.424H53.1393C54.9148 11.424 56.3536 9.98493 56.3536 8.20971C56.3536 6.43451 54.9148 4.99542 53.1393 4.99542H16.8605Z"
-                fill={fill}
-            />
-        </g>
-        <defs>
-            <clipPath id="clip0_2_252">
-                <rect width="60" height="60" fill="white" transform="translate(5 5)" />
-            </clipPath>
-        </defs>
-    </Image>
-)
-
-export default TestTubeIcon
diff --git a/web/src/shared/components/ourdna/dashboardIcons/TruckIcon.tsx b/web/src/shared/components/ourdna/dashboardIcons/TruckIcon.tsx
deleted file mode 100644
index eddf7d5f8..000000000
--- a/web/src/shared/components/ourdna/dashboardIcons/TruckIcon.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react'
-import { Image } from 'semantic-ui-react'
-
-interface IconProps {
-    fill?: string
-    width?: string
-    height?: string
-    className?: string
-    style?: React.CSSProperties
-}
-
-const TruckIcon: React.FC<IconProps> = ({
-    fill,
-    width = '100%',
-    height = '100%',
-    className,
-    style,
-}) => (
-    <Image
-        as="svg"
-        viewBox="0 0 70 70" // Ensure viewBox covers the SVG's dimensions
-        style={{ width, height, ...style }}
-        className={className}
-    >
-        <rect width="70" height="70" fill="none" />
-        <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M57.9423 23.7192L63.6774 35.461H50.2889V20.112H52.166C54.6226 20.112 56.8644 21.5119 57.9423 23.7192ZM39.9651 15.7143C41.9655 15.7143 43.7526 16.6281 44.9316 18.0609V38.1396C44.9316 39.6189 46.1309 40.8182 47.6102 40.8182H64.1274V49.7386C64.1274 53.2893 61.2492 56.1672 57.6989 56.1672H56.9849C56.9879 56.2537 56.9892 56.3403 56.9892 56.4273C56.9892 60.9149 53.351 64.553 48.8634 64.553C44.5572 64.553 41.0334 61.2029 40.7556 56.9669H29.8133C29.5356 61.2029 26.0117 64.553 21.7053 64.553C17.3991 64.553 13.8751 61.2029 13.5975 56.9669H12.2949C8.74454 56.9669 5.86636 54.0886 5.86636 50.5383V22.1429C5.86636 18.5925 8.74453 15.7143 12.2949 15.7143H39.9651ZM26.1314 25.3572C27.6108 25.3572 28.81 26.5564 28.81 28.0357V32.3214H33.0957C34.575 32.3214 35.7743 33.5207 35.7743 35C35.7743 36.4794 34.575 37.6786 33.0957 37.6786H28.81V41.9643C28.81 43.4436 27.6108 44.6429 26.1314 44.6429C24.6521 44.6429 23.4528 43.4436 23.4528 41.9643V37.6786H19.1671C17.6878 37.6786 16.4886 36.4794 16.4886 35C16.4886 33.5207 17.6878 32.3214 19.1671 32.3214H23.4528V28.0357C23.4528 26.5564 24.6521 25.3572 26.1314 25.3572Z"
-            fill={fill}
-        />
-    </Image>
-)
-
-export default TruckIcon

From d741d186f659cb1b30f13176ad1730430b8963f0 Mon Sep 17 00:00:00 2001
From: Dan Coates <dan.coates@populationgenomics.org.au>
Date: Wed, 29 Jan 2025 10:56:02 +1100
Subject: [PATCH 11/12] remove ourdna dashboard v1 backend code

---
 api/graphql/schema.py                |  38 --
 db/python/layers/__init__.py         |   1 -
 db/python/layers/ourdna/__init__.py  |   0
 db/python/layers/ourdna/dashboard.py | 461 ---------------------
 models/models/__init__.py            |   1 -
 models/models/ourdna.py              |  42 --
 test/test_ourdna_dashboard.py        | 593 ---------------------------
 web/src/index.css                    |   6 +-
 8 files changed, 2 insertions(+), 1140 deletions(-)
 delete mode 100644 db/python/layers/ourdna/__init__.py
 delete mode 100644 db/python/layers/ourdna/dashboard.py
 delete mode 100644 models/models/ourdna.py
 delete mode 100644 test/test_ourdna_dashboard.py

diff --git a/api/graphql/schema.py b/api/graphql/schema.py
index 382d363f0..f8dd4adff 100644
--- a/api/graphql/schema.py
+++ b/api/graphql/schema.py
@@ -33,7 +33,6 @@
     AssayLayer,
     CohortLayer,
     FamilyLayer,
-    OurDnaDashboardLayer,
     SampleLayer,
     SequencingGroupLayer,
 )
@@ -68,7 +67,6 @@
     DiscussionInternal,
 )
 from models.models.family import PedRowInternal
-from models.models.ourdna import OurDNADashboard, OurDNALostSample
 from models.models.project import (
     FullWriteAccessRoles,
     ProjectId,
@@ -110,30 +108,6 @@ async def m(info: Info[GraphQLContext, 'Query']) -> list[str]:
 GraphQLAnalysisStatus = strawberry.enum(AnalysisStatus)  # type: ignore
 
 
-@strawberry.experimental.pydantic.type(model=OurDNALostSample, all_fields=True)  # type: ignore
-class GraphQLOurDNALostSample:
-    """OurDNA Lost Sample GraphQL model to be used in OurDNA Dashboard"""
-
-    pass  # pylint: disable=unnecessary-pass
-
-
-@strawberry.experimental.pydantic.type(model=OurDNADashboard)  # type: ignore
-class GraphQLOurDNADashboard:
-    """OurDNA Dashboard model"""
-
-    collection_to_process_end_time: strawberry.scalars.JSON
-    collection_to_process_end_time_statistics: strawberry.scalars.JSON
-    collection_to_process_end_time_bucket_statistics: strawberry.scalars.JSON
-    collection_to_process_end_time_24h: strawberry.scalars.JSON
-    processing_times_by_site: strawberry.scalars.JSON
-    processing_times_by_collection_site: strawberry.scalars.JSON
-    total_samples_by_collection_event_name: strawberry.scalars.JSON
-    samples_lost_after_collection: list[GraphQLOurDNALostSample]
-    samples_concentration_gt_1ug: strawberry.scalars.JSON
-    participants_consented_not_collected: list[int]
-    participants_signed_not_consented: list[int]
-
-
 # Create cohort GraphQL model
 @strawberry.type
 class GraphQLCohort:
@@ -416,18 +390,6 @@ async def analysis_runner(
         analysis_runners = await alayer.query(filter_)
         return [GraphQLAnalysisRunner.from_internal(ar) for ar in analysis_runners]
 
-    @strawberry.field
-    async def ourdna_dashboard(
-        self, info: Info, root: 'Project'
-    ) -> 'GraphQLOurDNADashboard':
-        connection = info.context['connection']
-        ourdna_layer = OurDnaDashboardLayer(connection)
-        if not root.id:
-            raise ValueError('Project must have an id')
-        ourdna_dashboard = await ourdna_layer.query(project_id=root.id)
-        # pylint: disable=no-member
-        return GraphQLOurDNADashboard.from_pydantic(ourdna_dashboard)
-
     @strawberry.field()
     async def pedigree(
         self,
diff --git a/db/python/layers/__init__.py b/db/python/layers/__init__.py
index 56969ccaf..0c73249d6 100644
--- a/db/python/layers/__init__.py
+++ b/db/python/layers/__init__.py
@@ -7,7 +7,6 @@
 from db.python.layers.cohort import CohortLayer
 from db.python.layers.comment import CommentLayer
 from db.python.layers.family import FamilyLayer
-from db.python.layers.ourdna.dashboard import OurDnaDashboardLayer
 from db.python.layers.participant import ParticipantLayer
 from db.python.layers.project_insights import ProjectInsightsLayer
 from db.python.layers.sample import SampleLayer
diff --git a/db/python/layers/ourdna/__init__.py b/db/python/layers/ourdna/__init__.py
deleted file mode 100644
index e69de29bb..000000000
diff --git a/db/python/layers/ourdna/dashboard.py b/db/python/layers/ourdna/dashboard.py
deleted file mode 100644
index 39110845b..000000000
--- a/db/python/layers/ourdna/dashboard.py
+++ /dev/null
@@ -1,461 +0,0 @@
-# pylint: disable=too-many-locals
-import asyncio
-from collections import defaultdict
-from datetime import datetime
-from functools import cached_property
-from math import ceil
-from typing import Any
-
-from db.python.connect import Connection
-from db.python.filters import GenericFilter
-from db.python.layers.base import BaseLayer
-from db.python.layers.participant import ParticipantLayer
-from db.python.layers.sample import SampleLayer
-from db.python.tables.sample import SampleFilter
-from models.models import OurDNADashboard, OurDNALostSample, ProjectId, Sample
-from models.models.participant import ParticipantInternal
-
-
-class SampleProcessMeta:
-    """Helper class to encapsulate sample metadata properties and calculations."""
-
-    def __init__(self, sample: Sample):
-        self.sample = sample
-        self.meta = sample.meta
-
-    def get_property(self, property_name: str) -> Any:
-        """Get a property from the meta field of a sample."""
-        return self.meta.get(property_name) or self.meta.get(
-            property_name.replace('-', '_')
-        )
-
-    @staticmethod
-    def try_parse_datetime(d: str) -> datetime | None:
-        """
-        Attempts to parse a datetime string in the format '%Y-%m-%d %H:%M:%S'.
-
-        Args:
-            d (str): The datetime string to parse.
-
-        Returns:
-            datetime | None: A datetime object if parsing is successful, otherwise None.
-        """
-        if not d or d.strip() == '':
-            return None
-        try:
-            return datetime.strptime(d, '%Y-%m-%d %H:%M:%S')
-        except TypeError as e:
-            # Optionally log the error message
-            print(f'Datetime passed is not a str: {e}')
-            return None
-        except ValueError:
-            # Optionally log the error message
-            try:
-                return datetime.strptime(d, '%d/%m/%Y %H:%M:%S')
-            except TypeError as e:
-                # Optionally log the error message
-                print(f'Datetime passed is not a str: {e}')
-                return None
-            except ValueError as e:
-                print(f'Error parsing datetime: {e}')
-                return None
-
-    @cached_property
-    def collection_time(self) -> datetime | None:
-        """Returns the collection time for a sample."""
-        return self.try_parse_datetime(self.get_property('collection-time'))
-
-    @cached_property
-    def process_start_time(self) -> datetime | None:
-        """Returns the process start time for a sample."""
-        return self.try_parse_datetime(self.get_property('process-start-time'))
-
-    @cached_property
-    def process_end_time(self) -> datetime | None:
-        """Returns the process end time for a sample."""
-        return self.try_parse_datetime(self.get_property('process-end-time'))
-
-    @cached_property
-    def processing_time(self) -> int | None:
-        """Get processing time for a sample."""
-        if not (self.process_start_time and self.process_end_time):
-            return None
-        return int((self.process_end_time - self.process_start_time).total_seconds())
-
-    @cached_property
-    def processing_time_by_site(self) -> tuple[str | None, int | None]:
-        """Get processing times and site for a sample."""
-        return self.get_property('processing-site'), self.processing_time
-
-    @cached_property
-    def processing_time_by_collection_lab(self) -> tuple[str | None, int | None]:
-        """Get processing times and site for a sample."""
-        return self.get_property('collection-lab'), self.processing_time
-
-    @cached_property
-    def collection_to_process_end_time(self) -> int | None:
-        """Get the time taken from collection to process end."""
-        if self.collection_time and self.process_end_time:
-            return int((self.process_end_time - self.collection_time).total_seconds())
-        return None
-
-    @cached_property
-    def collection_to_process_start_time(self) -> int | None:
-        """Get the time taken from collection to process start."""
-        if self.collection_time and self.process_start_time:
-            return int((self.process_start_time - self.collection_time).total_seconds())
-        return None
-
-    @cached_property
-    def time_since_collection(self) -> int | None:
-        """Get the time since the sample was collected."""
-        if self.collection_time:
-            return int((datetime.now() - self.collection_time).total_seconds())
-        return None
-
-    @cached_property
-    def get_lost_sample_properties(self) -> OurDNALostSample:
-        """Returns the normalised properties to report for a sample that has been lost"""
-        return OurDNALostSample(
-            sample_id=self.sample.id,
-            collection_time=self.get_property('collection-time'),
-            process_start_time=self.get_property('process-start-time'),
-            process_end_time=self.get_property('process-end-time'),
-            received_time=self.get_property('received-time'),
-            received_by=self.get_property('received-by'),
-            collection_lab=self.get_property('collection-lab'),
-            courier=self.get_property('courier'),
-            courier_tracking_number=self.get_property('courier-tracking-number'),
-            courier_scheduled_pickup_time=self.get_property(
-                'courier-scheduled-pickup-time'
-            ),
-            courier_actual_pickup_time=self.get_property('courier-actual-pickup-time'),
-            courier_scheduled_dropoff_time=self.get_property(
-                'courier-scheduled-dropoff-time'
-            ),
-            courier_actual_dropoff_time=self.get_property(
-                'courier-actual-dropoff-time'
-            ),
-            time_since_collection=self.time_since_collection,
-        )
-
-    @cached_property
-    def is_lost(self) -> bool:
-        """Returns True if the sample is considered lost, otherwise False."""
-        # if time since collection time is > 72 hours and process_start_time is None, return True else False
-        if self.collection_time:
-            return (
-                datetime.now() - self.collection_time
-            ).total_seconds() > 72 * 60 * 60 and self.process_start_time is None
-        return False
-
-
-class OurDnaDashboardLayer(BaseLayer):
-    """Layer for analysis logic"""
-
-    def __init__(self, connection: Connection):
-        super().__init__(connection)
-
-        self.sample_layer = SampleLayer(connection)
-        self.participant_layer = ParticipantLayer(connection)
-
-        self._24_hr_threshold = 24 * 60 * 60
-        self._48_hr_threshold = 48 * 60 * 60
-        self._72_hr_threshold = 72 * 60 * 60
-
-    async def query(
-        self,
-        project_id: ProjectId,
-    ) -> OurDNADashboard:
-        """Get dashboard data"""
-        samples: list[Sample] = []
-        participants: list[ParticipantInternal] = []
-
-        s, participants = await asyncio.gather(
-            self.sample_layer.query(
-                filter_=SampleFilter(
-                    project=GenericFilter(eq=project_id),
-                    # Get the top level samples only
-                    sample_root_id=GenericFilter(isnull=True),
-                )
-            ),
-            self.participant_layer.get_participants(project=project_id),
-        )
-
-        # Converting to external to show stats per sample (with XPG ID) via the GraphQL API
-        samples = [sample.to_external() for sample in s]
-        participants_by_id = {p.id: p for p in participants}
-
-        grouped_participant_samples: dict[int, list] = defaultdict(list)
-
-        # Group instances of A by their foreign key
-        for sample in samples:
-            if sample.participant_id:
-                grouped_participant_samples[sample.participant_id].append(sample)
-
-        # Data to be returned
-        collection_to_process_end_time: dict[str, int] = (
-            self.process_collection_to_process_end_times(samples=samples)
-        )
-        collection_to_process_end_time_statistics: dict[str, float | None] = (
-            self.process_collection_to_process_end_times_statistics(
-                collection_to_process_end_time=collection_to_process_end_time
-            )
-        )
-        collection_to_process_end_time_bucket_statistics: dict[str, int] = (
-            self.process_collection_to_process_end_times_bucket_statistics(
-                collection_to_process_end_time=collection_to_process_end_time
-            )
-        )
-        collection_to_process_end_time_24h: dict[str, int] = (
-            self.process_collection_to_process_end_times_24h(samples=samples)
-        )
-        processing_times_by_site: dict[str, dict[int, int]] = (
-            self.process_processing_times_by_site(samples=samples)
-        )
-        processing_times_by_collection_site: dict[str, dict[int, int]] = (
-            self.process_processing_times_by_collection_site(samples=samples)
-        )
-        total_samples_by_collection_event_name: dict[str, int] = (
-            self.process_total_samples_by_collection_event_name(samples=samples)
-        )
-        samples_lost_after_collection: list[OurDNALostSample] = (
-            self.process_samples_lost_after_collection(samples=samples)
-        )
-        samples_concentration_gt_1ug: dict[str, float] = (
-            self.process_samples_concentration_gt_1ug(samples=samples)
-        )
-        participants_consented_not_collected: list[int] = (
-            self.process_participants_consented_not_collected(
-                participants_by_id, grouped_participant_samples
-            )
-        )
-        participants_signed_not_consented: list[int] = (
-            self.process_participants_signed_not_consented(
-                participants_by_id, grouped_participant_samples
-            )
-        )
-
-        return OurDNADashboard(
-            collection_to_process_end_time=collection_to_process_end_time,
-            collection_to_process_end_time_statistics=collection_to_process_end_time_statistics,
-            collection_to_process_end_time_bucket_statistics=collection_to_process_end_time_bucket_statistics,
-            collection_to_process_end_time_24h=collection_to_process_end_time_24h,
-            processing_times_by_site=processing_times_by_site,
-            processing_times_by_collection_site=processing_times_by_collection_site,
-            total_samples_by_collection_event_name=total_samples_by_collection_event_name,
-            samples_lost_after_collection=samples_lost_after_collection,
-            samples_concentration_gt_1ug=samples_concentration_gt_1ug,
-            participants_consented_not_collected=participants_consented_not_collected,
-            participants_signed_not_consented=participants_signed_not_consented,
-        )
-
-    def process_collection_to_process_end_times(self, samples: list[Sample]) -> dict:
-        """Get the time between blood collection and sample processing"""
-        collection_to_process_end_time: dict[str, int] = {}
-
-        for sample in samples:
-            processed_meta = SampleProcessMeta(sample)
-            if processed_meta.collection_to_process_end_time is not None:
-                collection_to_process_end_time[sample.id] = (
-                    processed_meta.collection_to_process_end_time
-                )
-        return collection_to_process_end_time
-
-    def process_collection_to_process_end_times_statistics(
-        self, collection_to_process_end_time: dict[str, int]
-    ) -> dict[str, float | None]:
-        """Get the statistics for the time between blood collection and sample processing"""
-        collection_to_process_end_time_statistics: dict[str, float | None] = {}
-
-        collection_to_process_end_time_statistics['average'] = (
-            sum(collection_to_process_end_time.values())
-            / len(collection_to_process_end_time)
-            if collection_to_process_end_time
-            else None
-        )
-
-        collection_to_process_end_time_statistics['min'] = (
-            min(collection_to_process_end_time.values())
-            if collection_to_process_end_time
-            else None
-        )
-
-        collection_to_process_end_time_statistics['max'] = (
-            max(collection_to_process_end_time.values())
-            if collection_to_process_end_time
-            else None
-        )
-
-        return collection_to_process_end_time_statistics
-
-    def process_collection_to_process_end_times_bucket_statistics(
-        self, collection_to_process_end_time: dict[str, int]
-    ) -> dict[str, int]:
-        """Get the statistics for the time between blood collection and sample processing in buckets of 24 hours, 48 hours and 72 hours."""
-        collection_to_process_end_time_bucket_statistics: dict[str, int] = defaultdict(
-            int
-        )
-
-        collection_to_process_end_time_bucket_statistics['24h'] = sum(
-            1
-            for time in collection_to_process_end_time.values()
-            if time <= self._24_hr_threshold
-        )
-
-        collection_to_process_end_time_bucket_statistics['48h'] = sum(
-            1
-            for time in collection_to_process_end_time.values()
-            if self._24_hr_threshold < time <= self._48_hr_threshold
-        )
-
-        collection_to_process_end_time_bucket_statistics['72h'] = sum(
-            1
-            for time in collection_to_process_end_time.values()
-            if self._48_hr_threshold < time <= self._72_hr_threshold
-        )
-
-        collection_to_process_end_time_bucket_statistics['>72h'] = sum(
-            1
-            for time in collection_to_process_end_time.values()
-            if time > self._72_hr_threshold
-        )
-
-        return collection_to_process_end_time_bucket_statistics
-
-    def process_collection_to_process_end_times_24h(
-        self, samples: list[Sample]
-    ) -> dict:
-        """Get the time between blood collection and sample processing"""
-        collection_to_process_end_time_24h: dict[str, int] = {}
-
-        for sample in samples:
-            processed_meta = SampleProcessMeta(sample)
-            if (
-                processed_meta.collection_to_process_end_time
-                and processed_meta.collection_to_process_end_time
-                > self._24_hr_threshold
-            ):
-                collection_to_process_end_time_24h[sample.id] = (
-                    processed_meta.collection_to_process_end_time
-                )
-        return collection_to_process_end_time_24h
-
-    def process_processing_times_by_site(self, samples: list[Sample]) -> dict:
-        """Get the processing times by site"""
-        processing_times_by_site: dict[str, dict[int, int]] = defaultdict(
-            lambda: defaultdict(int)
-        )
-
-        for sample in samples:
-            processed_meta = SampleProcessMeta(sample)
-            processing_site, processing_time = processed_meta.processing_time_by_site
-            if processing_site and processing_time:
-                hour_bucket = ceil(processing_time / 3600)
-                processing_times_by_site[processing_site][hour_bucket] += 1
-
-        # ENABLE THIS IF WE WANT VALUES FOR ALL HOURS
-        # for site in processing_times_by_site:
-        #     min_bucket = min(processing_times_by_site[site])
-        #     max_bucket = max(processing_times_by_site[site])
-        #     for i in range(min_bucket, max_bucket + 1):
-        #         processing_times_by_site[site].setdefault(i, 0)
-
-        return processing_times_by_site
-
-    def process_processing_times_by_collection_site(
-        self, samples: list[Sample]
-    ) -> dict:
-        """Get the processing times by collection site"""
-        processing_times_by_collection_site: dict[str, dict[int, int]] = defaultdict(
-            lambda: defaultdict(int)
-        )
-
-        for sample in samples:
-            processed_meta = SampleProcessMeta(sample)
-            processing_collection_site, processing_time = (
-                processed_meta.processing_time_by_collection_lab
-            )
-            if processing_collection_site and processing_time:
-                hour_bucket = ceil(processing_time / 3600)
-                processing_times_by_collection_site[processing_collection_site][
-                    hour_bucket
-                ] += 1
-        # ENABLE THIS IF WE WANT VALUES FOR ALL HOURS
-        # for site in processing_times_by_collection_site:
-        #     min_bucket = min(processing_times_by_collection_site[site])
-        #     max_bucket = max(processing_times_by_collection_site[site])
-        #     for i in range(min_bucket, max_bucket + 1):
-        #         processing_times_by_collection_site[site].setdefault(i, 0)
-
-        return processing_times_by_collection_site
-
-    def process_total_samples_by_collection_event_name(
-        self, samples: list[Sample]
-    ) -> dict:
-        """Get total number of samples collected from each type of collection-event-name"""
-        total_samples_by_collection_event_name: dict[str, int] = defaultdict(int)
-
-        for sample in samples:
-            processed_meta = SampleProcessMeta(sample)
-            _collection_event_name = processed_meta.get_property(
-                'collection-event-type'
-            )
-            total_samples_by_collection_event_name[
-                _collection_event_name or 'Unknown'
-            ] += 1
-        return total_samples_by_collection_event_name
-
-    def process_samples_lost_after_collection(
-        self, samples: list[Sample]
-    ) -> list[OurDNALostSample]:
-        """Get total number of many samples have been lost, EG: participants have been consented, blood collected, not processed (etc), Alert here (highlight after 72 hours)"""
-        samples_lost_after_collection: list[OurDNALostSample] = []
-
-        for sample in samples:
-            processed_meta = SampleProcessMeta(sample)
-            if processed_meta.is_lost:
-                samples_lost_after_collection.append(
-                    processed_meta.get_lost_sample_properties
-                )
-
-        return samples_lost_after_collection
-
-    def process_samples_concentration_gt_1ug(self, samples: list[Sample]) -> dict:
-        """Get the concentration of the sample where the concentration is more than 1 ug of DNA"""
-        samples_concentration_gt_1ug: dict[str, float] = {}
-
-        for sample in samples:
-            processed_meta = SampleProcessMeta(sample)
-            concentration = processed_meta.get_property('concentration')
-            if concentration and float(concentration) > 1:
-                samples_concentration_gt_1ug[sample.id] = float(concentration)
-        return samples_concentration_gt_1ug
-
-    def process_participants_consented_not_collected(
-        self,
-        participants: dict[int, ParticipantInternal],
-        grouped_participants_samples: dict[int, list[Sample]],
-    ) -> list[int]:
-        """Get the participants who have been consented but have not had a sample collected"""
-        filtered_participants: list[int] = []
-        for participant_id, samples in grouped_participants_samples.items():
-            participant = participants[participant_id]
-            if participant.meta.get('consent') and any(
-                SampleProcessMeta(sample).collection_time is None for sample in samples
-            ):
-                filtered_participants.append(participant.id)
-        return filtered_participants
-
-    def process_participants_signed_not_consented(
-        self,
-        participants: dict[int, ParticipantInternal],
-        grouped_participants_samples: dict[int, list[Sample]],
-    ) -> list[int]:
-        """Get the participants who have signed but have not been consented"""
-        filtered_participants: list[int] = []
-        for participant_id in grouped_participants_samples:
-            participant = participants[participant_id]
-            if not participant.meta.get('consent'):
-                filtered_participants.append(participant.id)
-        return filtered_participants
diff --git a/models/models/__init__.py b/models/models/__init__.py
index b7d937684..aa5c781a8 100644
--- a/models/models/__init__.py
+++ b/models/models/__init__.py
@@ -29,7 +29,6 @@
     FamilySimpleInternal,
     PedRowInternal,
 )
-from models.models.ourdna import OurDNADashboard, OurDNALostSample
 from models.models.output_file import OutputFileInternal
 from models.models.participant import (
     NestedParticipant,
diff --git a/models/models/ourdna.py b/models/models/ourdna.py
deleted file mode 100644
index 9aff10164..000000000
--- a/models/models/ourdna.py
+++ /dev/null
@@ -1,42 +0,0 @@
-from collections import defaultdict
-
-from pydantic import BaseModel
-
-
-class OurDNALostSample(BaseModel):
-    """Model for OurDNA Lost Sample"""
-
-    sample_id: str
-    time_since_collection: int | None
-    collection_time: str
-    process_start_time: str | None
-    process_end_time: str | None
-    received_time: str | None
-    received_by: str | None
-    collection_lab: str
-    courier: str | None
-    courier_tracking_number: str | None
-    courier_scheduled_pickup_time: str | None
-    courier_actual_pickup_time: str | None
-    courier_scheduled_dropoff_time: str | None
-    courier_actual_dropoff_time: str | None
-
-
-class OurDNADashboard(BaseModel):
-    """Model for OurDNA Dashboard"""
-
-    collection_to_process_end_time: dict[str, int] = {}
-    collection_to_process_end_time_statistics: dict[str, float | None] = {}
-    collection_to_process_end_time_bucket_statistics: dict[str, int] = {}
-    collection_to_process_end_time_24h: dict[str, int] = {}
-    processing_times_by_site: dict[str, dict[int, int]] = defaultdict(
-        lambda: defaultdict(int)
-    )
-    processing_times_by_collection_site: dict[str, dict[int, int]] = defaultdict(
-        lambda: defaultdict(int)
-    )
-    total_samples_by_collection_event_name: dict[str, int] = defaultdict(int)
-    samples_lost_after_collection: list[OurDNALostSample] = []
-    samples_concentration_gt_1ug: dict[str, float] = {}
-    participants_consented_not_collected: list[int] = []
-    participants_signed_not_consented: list[int] = []
diff --git a/test/test_ourdna_dashboard.py b/test/test_ourdna_dashboard.py
deleted file mode 100644
index db8618260..000000000
--- a/test/test_ourdna_dashboard.py
+++ /dev/null
@@ -1,593 +0,0 @@
-from collections import defaultdict
-from datetime import datetime
-from math import ceil
-from test.testbase import DbIsolatedTest, run_as_sync
-
-from db.python.enum_tables.sample_type import SampleTypeTable
-from db.python.layers.ourdna.dashboard import OurDnaDashboardLayer
-from db.python.layers.participant import ParticipantLayer
-from db.python.layers.sample import SampleLayer
-from models.models import (
-    PRIMARY_EXTERNAL_ORG,
-    OurDNADashboard,
-    ParticipantUpsertInternal,
-    SampleUpsert,
-    SampleUpsertInternal,
-)
-
-
-def str_to_datetime(timestamp_str):
-    """Convert string timestamp to datetime"""
-    return datetime.strptime(timestamp_str, '%Y-%m-%d %H:%M:%S')
-
-
-def convert_to_dict(d):
-    """Converts a defaultdict into a dict recursively"""
-    if isinstance(d, defaultdict):
-        d = {k: convert_to_dict(v) for k, v in d.items()}
-    return d
-
-
-class OurDNADashboardTest(DbIsolatedTest):
-    """Test sample class"""
-
-    @run_as_sync
-    async def setUp(self) -> None:
-        # don't need to await because it's tagged @run_as_sync
-        super().setUp()
-        self.odd = OurDnaDashboardLayer(self.connection)
-        self.sl = SampleLayer(self.connection)
-        self.pl = ParticipantLayer(self.connection)
-
-        self.stt = SampleTypeTable(self.connection)
-        await self.stt.insert('ebld')
-
-        participants = await self.pl.upsert_participants(
-            [
-                ParticipantUpsertInternal(
-                    external_ids={PRIMARY_EXTERNAL_ORG: 'EX01'},
-                    reported_sex=2,
-                    karyotype='XX',
-                    meta={'consent': True, 'field': 1},
-                    samples=[
-                        SampleUpsertInternal(
-                            external_ids={PRIMARY_EXTERNAL_ORG: 'Test01'},
-                            meta={
-                                'collection-time': '2022-07-03 13:28:00',
-                                'processing-site': 'Garvan',
-                                'process-start-time': '2022-07-06 16:28:00',
-                                'process-end-time': '2022-07-06 19:28:00',
-                                'received-time': '2022-07-03 14:28:00',
-                                'received-by': 'YP',
-                                'collection-lab': 'XYZ LAB',
-                                'collection-event-type': 'walk-in',
-                                'courier': 'ABC COURIERS',
-                                'courier-tracking-number': 'ABCDEF12562',
-                                'courier-scheduled-pickup-time': '2022-07-03 13:28:00',
-                                'courier-actual-pickup-time': '2022-07-03 13:28:00',
-                                'courier-scheduled-dropoff-time': '2022-07-03 13:28:00',
-                                'courier-actual-dropoff-time': '2022-07-03 13:28:00',
-                                'concentration': 1.45,
-                            },
-                            type='ebld',
-                            active=True,
-                            nested_samples=[
-                                # add a random sample here to test it's not collected
-                                SampleUpsertInternal(
-                                    external_ids={PRIMARY_EXTERNAL_ORG: 'Test01-01'},
-                                    type='blood',
-                                    meta={
-                                        # something wild
-                                        'collection-time': '1999-01-01 12:34:56',
-                                    },
-                                )
-                            ],
-                        )
-                    ],
-                ),
-                ParticipantUpsertInternal(
-                    external_ids={PRIMARY_EXTERNAL_ORG: 'EX02'},
-                    reported_sex=1,
-                    karyotype='XY',
-                    meta={'field': 2},
-                    samples=[
-                        SampleUpsertInternal(
-                            external_ids={PRIMARY_EXTERNAL_ORG: 'Test02'},
-                            meta={
-                                'collection-time': '2022-07-03 13:28:00',
-                                'processing-site': 'BBV',
-                                # 'process-start-time': '2022-07-06 16:28:00',
-                                # 'process-end-time': '2022-07-06 19:28:00',
-                                'received-time': '2022-07-03 14:28:00',
-                                'received-by': 'YP',
-                                'collection-lab': 'XYZ LAB',
-                                'collection-event-type': 'OSS',
-                                'courier': 'ABC COURIERS',
-                                'courier-tracking-number': 'ABCDEF12562',
-                                'courier-scheduled-pickup-time': '2022-07-03 13:28:00',
-                                'courier-actual-pickup-time': '2022-07-03 13:28:00',
-                                'courier-scheduled-dropoff-time': '2022-07-03 13:28:00',
-                                'courier-actual-dropoff-time': '2022-07-03 13:28:00',
-                                'concentration': 0.98,
-                            },
-                            type='ebld',
-                            active=True,
-                        )
-                    ],
-                ),
-                ParticipantUpsertInternal(
-                    external_ids={PRIMARY_EXTERNAL_ORG: 'EX03'},
-                    reported_sex=2,
-                    karyotype='XX',
-                    meta={'consent': True, 'field': 3},
-                    samples=[
-                        SampleUpsertInternal(
-                            external_ids={PRIMARY_EXTERNAL_ORG: 'Test03'},
-                            meta={
-                                # 'collection-time': '2022-07-03 13:28:00',
-                                'processing-site': 'Garvan',
-                                # 'process-start-time': '2022-07-03 16:28:00',
-                                # 'process-end-time': '2022-07-03 19:28:00',
-                                'received-time': '2022-07-03 14:28:00',
-                                'received-by': 'YP',
-                                'collection-lab': 'XYZ LAB',
-                                'courier': 'ABC COURIERS',
-                                'courier-tracking-number': 'ABCDEF12562',
-                                'courier-scheduled-pickup-time': '2022-07-03 13:28:00',
-                                'courier-actual-pickup-time': '2022-07-03 13:28:00',
-                                'courier-scheduled-dropoff-time': '2022-07-03 13:28:00',
-                                'courier-actual-dropoff-time': '2022-07-03 13:28:00',
-                                'concentration': 1.66,
-                            },
-                            type='ebld',
-                            active=True,
-                        )
-                    ],
-                ),
-                ParticipantUpsertInternal(
-                    external_ids={PRIMARY_EXTERNAL_ORG: 'EX04'},
-                    reported_sex=2,
-                    karyotype='XX',
-                    meta={'consent': True, 'field': 3},
-                    samples=[
-                        SampleUpsertInternal(
-                            external_ids={PRIMARY_EXTERNAL_ORG: 'Test04'},
-                            meta={
-                                'collection-time': '2022-07-03 13:28:00',
-                                'processing-site': 'Garvan',
-                                'process-start-time': '2022-07-03 16:28:00',
-                                'process-end-time': '2022-07-04 19:28:00',
-                                'received-time': '2022-07-03 14:28:00',
-                                'received-by': 'YP',
-                                'collection-lab': 'XYZ LAB',
-                                'courier': 'ABC COURIERS',
-                                'courier-tracking-number': 'ABCDEF12562',
-                                'courier-scheduled-pickup-time': '2022-07-03 13:28:00',
-                                'courier-actual-pickup-time': '2022-07-03 13:28:00',
-                                'courier-scheduled-dropoff-time': '2022-07-03 13:28:00',
-                                'courier-actual-dropoff-time': '2022-07-03 13:28:00',
-                                'concentration': 1.66,
-                            },
-                            type='ebld',
-                            active=True,
-                        )
-                    ],
-                ),
-                ParticipantUpsertInternal(
-                    external_ids={PRIMARY_EXTERNAL_ORG: 'EX05'},
-                    reported_sex=2,
-                    karyotype='XX',
-                    meta={'consent': True, 'field': 3},
-                    samples=[
-                        SampleUpsertInternal(
-                            external_ids={PRIMARY_EXTERNAL_ORG: 'Test05'},
-                            meta={
-                                'collection-time': '2022-07-03 13:28:00',
-                                'processing-site': 'Garvan',
-                                'process-start-time': '2022-07-03 16:28:00',
-                                'process-end-time': '2022-07-05 19:28:00',
-                                'received-time': '2022-07-03 14:28:00',
-                                'received-by': 'YP',
-                                'collection-lab': 'XYZ LAB',
-                                'courier': 'ABC COURIERS',
-                                'courier-tracking-number': 'ABCDEF12562',
-                                'courier-scheduled-pickup-time': '2022-07-03 13:28:00',
-                                'courier-actual-pickup-time': '2022-07-03 13:28:00',
-                                'courier-scheduled-dropoff-time': '2022-07-03 13:28:00',
-                                'courier-actual-dropoff-time': '2022-07-03 13:28:00',
-                                'concentration': 1.66,
-                            },
-                            type='ebld',
-                            active=True,
-                        )
-                    ],
-                ),
-                ParticipantUpsertInternal(
-                    external_ids={PRIMARY_EXTERNAL_ORG: 'EX06'},
-                    reported_sex=2,
-                    karyotype='XX',
-                    meta={'consent': True, 'field': 3},
-                    samples=[
-                        SampleUpsertInternal(
-                            external_ids={PRIMARY_EXTERNAL_ORG: 'Test06'},
-                            meta={
-                                'collection-time': '2022-07-03 13:28:00',
-                                'processing-site': 'Garvan',
-                                'process-start-time': '2022-07-03 16:28:00',
-                                'process-end-time': '2022-07-06 11:28:00',
-                                'received-time': '2022-07-03 14:28:00',
-                                'received-by': 'YP',
-                                'collection-lab': 'XYZ LAB',
-                                'courier': 'ABC COURIERS',
-                                'courier-tracking-number': 'ABCDEF12562',
-                                'courier-scheduled-pickup-time': '2022-07-03 13:28:00',
-                                'courier-actual-pickup-time': '2022-07-03 13:28:00',
-                                'courier-scheduled-dropoff-time': '2022-07-03 13:28:00',
-                                'courier-actual-dropoff-time': '2022-07-03 13:28:00',
-                                'concentration': 1.66,
-                            },
-                            type='ebld',
-                            active=True,
-                        )
-                    ],
-                ),
-            ],
-        )
-
-        self.participants_external_objects = [
-            participant.to_external() for participant in participants
-        ]
-
-        self.sample_external_objects: list[SampleUpsert] = []
-        self.sample_internal_objects: list[SampleUpsertInternal] = []
-
-        self.sample_internal_objects.extend(
-            sample for participant in participants for sample in participant.samples
-        )
-        self.sample_external_objects.extend(
-            sample.to_external() for sample in self.sample_internal_objects
-        )
-
-    @run_as_sync
-    async def test_get_dashboard(self):
-        """Test get_dashboard"""
-        dashboard = await self.odd.query(project_id=self.project_id)
-
-        # Check that the dashboard is not empty and is a dict
-        self.assertTrue(dashboard)
-        self.assertIsInstance(dashboard, OurDNADashboard)
-
-    @run_as_sync
-    async def test_collection_to_process_end_time(self):
-        """I want to know how long it took between blood collection and sample processing"""
-        dashboard = await self.odd.query(project_id=self.project_id)
-        collection_to_process_end_time = dashboard.collection_to_process_end_time
-
-        # Check that collection_to_process_end_time is not empty and is a dict
-        self.assertTrue(collection_to_process_end_time)
-        self.assertIsInstance(collection_to_process_end_time, dict)
-
-        samples_filtered: list[str] = []
-        for sample in self.sample_external_objects:
-            assert isinstance(sample.meta, dict)
-            collection_time = sample.meta.get('collection-time')
-            process_end_time = sample.meta.get('process-end-time')
-            # Skip samples that don't have collection_time or process_end_time
-            if not collection_time or not process_end_time:
-                continue
-            time_difference = str_to_datetime(process_end_time) - str_to_datetime(
-                collection_time
-            )
-            if time_difference.total_seconds():
-                # Check that the time difference matches
-                assert isinstance(sample.id, str)
-
-                samples_filtered.append(sample.id)
-
-                self.assertEqual(
-                    time_difference.total_seconds(),
-                    collection_to_process_end_time[sample.id],
-                )
-
-        # Check the number of samples in the cohort
-        self.assertCountEqual(collection_to_process_end_time.keys(), samples_filtered)
-
-        for _sample_id, time_diff in collection_to_process_end_time.items():
-            self.assertGreater(time_diff, 0)
-            self.assertIsInstance(time_diff, int)
-
-    @run_as_sync
-    async def test_collection_to_process_end_time_24h(self):
-        """I want to know which samples took more than 24 hours between blood collection and sample processing completion"""
-        dashboard = await self.odd.query(project_id=self.project_id)
-        collection_to_process_end_time_24h = (
-            dashboard.collection_to_process_end_time_24h
-        )
-
-        # Check that collection_to_process_end_time is not empty and is a dict
-        self.assertTrue(collection_to_process_end_time_24h)
-        self.assertIsInstance(collection_to_process_end_time_24h, dict)
-
-        samples_filtered: list[str] = []
-        for sample in self.sample_external_objects:
-            assert isinstance(sample.meta, dict)
-            collection_time = sample.meta.get('collection-time')
-            process_end_time = sample.meta.get('process-end-time')
-            # Skip samples that don't have collection_time or process_end_time
-            if not collection_time or not process_end_time:
-                continue
-            time_difference = str_to_datetime(process_end_time) - str_to_datetime(
-                collection_time
-            )
-            if time_difference.total_seconds() > 24 * 3600:
-                # Check that the time difference matches
-                assert isinstance(sample.id, str)
-
-                samples_filtered.append(sample.id)
-
-                self.assertEqual(
-                    time_difference.total_seconds(),
-                    collection_to_process_end_time_24h[sample.id],
-                )
-
-        # check that there are a correct number of matching results
-        self.assertCountEqual(
-            collection_to_process_end_time_24h.keys(), samples_filtered
-        )
-
-    @run_as_sync
-    async def test_processing_times_per_site(self):
-        """I want to know what the sample processing times were for samples at each designated site"""
-        dashboard = await self.odd.query(project_id=self.project_id)
-        processing_times_by_site = dashboard.processing_times_by_site
-
-        # Check that processing_times_per_site is not empty and is a dict
-        self.assertTrue(processing_times_by_site)
-        self.assertIsInstance(processing_times_by_site, dict)
-
-        sample_tally: dict[str, dict[int, int]] = defaultdict(lambda: defaultdict(int))
-        for sample in self.sample_external_objects:
-            assert isinstance(sample.meta, dict)
-            processing_site = sample.meta.get('processing-site', 'Unknown')
-            process_start_time = sample.meta.get('process-start-time')
-            process_end_time = sample.meta.get('process-end-time')
-            # Skip samples that don't have process_start_time or process_end_time
-            if not process_start_time or not process_end_time:
-                continue
-            time_difference = str_to_datetime(process_end_time) - str_to_datetime(
-                process_start_time
-            )
-            current_bucket = ceil(time_difference.total_seconds() / 3600)
-            sample_tally[processing_site][current_bucket] += 1
-
-        # ENABLE THIS IF WE WANT VALUES FOR ALL HOURS
-        # for site in sample_tally:
-        #     min_bucket = min(sample_tally[site])
-        #     max_bucket = max(sample_tally[site])
-        #     for i in range(min_bucket, max_bucket + 1):
-        #         sample_tally[site].setdefault(i, 0)
-
-        # Checks that we have identical dicts (by extension, keys and their values)
-        self.assertDictEqual(processing_times_by_site, convert_to_dict(sample_tally))
-
-    @run_as_sync
-    async def test_processing_times_per_collection_site(self):
-        """I want to know how long it took to process samples collected at each site"""
-        dashboard = await self.odd.query(project_id=self.project_id)
-        processing_times_by_collection_site = (
-            dashboard.processing_times_by_collection_site
-        )
-
-        # Check that processing_times_per_site is not empty and is a dict
-        self.assertTrue(processing_times_by_collection_site)
-        self.assertIsInstance(processing_times_by_collection_site, dict)
-
-        sample_tally: dict[str, dict[int, int]] = defaultdict(lambda: defaultdict(int))
-        for sample in self.sample_external_objects:
-            assert isinstance(sample.meta, dict)
-            collection_site = sample.meta.get('collection-lab', 'Unknown')
-            process_start_time = sample.meta.get('process-start-time')
-            process_end_time = sample.meta.get('process-end-time')
-            # Skip samples that don't have process_start_time or process_end_time
-            if not process_start_time or not process_end_time:
-                continue
-            time_difference = str_to_datetime(process_end_time) - str_to_datetime(
-                process_start_time
-            )
-            current_bucket = ceil(time_difference.total_seconds() / 3600)
-            sample_tally[collection_site][current_bucket] += 1
-
-        # ENABLE THIS IF WE WANT VALUES FOR ALL HOURS
-        # for site in sample_tally:
-        #     min_bucket = min(sample_tally[site])
-        #     max_bucket = max(sample_tally[site])
-        #     for i in range(min_bucket, max_bucket + 1):
-        #         sample_tally[site].setdefault(i, 0)
-
-        # Checks that we have identical dicts (by extension, keys and their values)
-        self.assertDictEqual(processing_times_by_collection_site, sample_tally)
-
-    @run_as_sync
-    async def test_total_samples_by_collection_event_name(self):
-        """I want to know how many samples were collected from walk-ins vs during events or scheduled activities"""
-        dashboard = await self.odd.query(project_id=self.project_id)
-        total_samples_by_collection_event_name = (
-            dashboard.total_samples_by_collection_event_name
-        )
-
-        # Check that total_samples_by_collection_event_name is not empty and is a dict
-        self.assertTrue(total_samples_by_collection_event_name)
-        self.assertIsInstance(total_samples_by_collection_event_name, dict)
-
-        sample_tally: dict[str, int] = defaultdict()
-        for sample in self.sample_external_objects:
-            assert isinstance(sample.meta, dict)
-            event_name = sample.meta.get('collection-event-type', 'Unknown')
-            if event_name in sample_tally:
-                sample_tally[event_name] += 1
-            else:
-                sample_tally[event_name] = 1
-
-        # Check that the tally and the total_samples_by_collection_event_name are the same, by extension, keys and their values
-        self.assertDictEqual(total_samples_by_collection_event_name, sample_tally)
-
-    @run_as_sync
-    async def test_samples_lost_after_collection(self):
-        """I need to know how many samples have been lost, EG: participants have been consented, blood collected, not processed"""
-        dashboard = await self.odd.query(project_id=self.project_id)
-        samples_lost_after_collection = dashboard.samples_lost_after_collection
-
-        # Check that samples_lost_after_collection is not empty and is a dict
-        self.assertTrue(samples_lost_after_collection)
-        self.assertIsInstance(samples_lost_after_collection, list)
-
-        # Check that the number of samples in the list is correct
-        samples_filtered: list[str] = []
-        sample_ids_lost_after_collection = [
-            sample.sample_id for sample in samples_lost_after_collection
-        ]
-        for sample in self.sample_external_objects:
-            assert isinstance(sample.meta, dict)
-            collection_time = sample.meta.get('collection-time')
-            process_start_time = sample.meta.get('process-start-time')
-            # Skip samples that don't have collection_time or process_end_time
-            if not collection_time:
-                continue
-            time_difference = datetime.now() - str_to_datetime(collection_time)
-            if time_difference.total_seconds() > 72 * 3600 and not process_start_time:
-                # Check that the time difference matches
-                assert isinstance(sample.id, str)
-
-                samples_filtered.append(sample.id)
-
-                for sample_data in samples_lost_after_collection:
-                    if sample_data.sample_id == sample.id:
-                        self.assertEqual(
-                            int(time_difference.total_seconds()),
-                            sample_data.time_since_collection,
-                        )
-
-        # check that there are a correct number of matching results
-        self.assertCountEqual(sample_ids_lost_after_collection, samples_filtered)
-
-        # TODO: Add assertions VB
-
-    @run_as_sync
-    async def test_samples_more_than_1ug_dna(self):
-        """I want to generate a list of samples containing more than 1 ug of DNA to prioritise them for long-read sequencing applications"""
-        dashboard = await self.odd.query(project_id=self.project_id)
-        samples_more_than_1ug_dna = dashboard.samples_concentration_gt_1ug
-
-        # Check that samples_concentratiom_gt_1ug is not empty and is a dict
-        self.assertTrue(samples_more_than_1ug_dna)
-        self.assertIsInstance(samples_more_than_1ug_dna, dict)
-
-        # Check that the number of samples in the list is correct
-        samples_filtered: list[str] = []
-        for sample in self.sample_external_objects:
-            assert isinstance(sample.meta, dict)
-            if sample.meta['concentration'] and sample.meta['concentration'] > 1:
-                assert isinstance(sample.id, str)
-
-                samples_filtered.append(sample.id)
-
-        self.assertCountEqual(samples_more_than_1ug_dna, samples_filtered)
-
-    @run_as_sync
-    async def test_participants_consented_not_collected(self):
-        """I want to know how many people who have consented and NOT given blood"""
-        dashboard = await self.odd.query(project_id=self.project_id)
-        # print(dashboard)
-        participants_consented_not_collected = (
-            dashboard.participants_consented_not_collected
-        )
-
-        # Check that participants_consented_not_collected is not empty and is a dict
-        self.assertTrue(participants_consented_not_collected)
-        self.assertIsInstance(participants_consented_not_collected, list)
-
-        # Check that the number of participants in the list is correct
-        participants_filtered: list[int] = []
-        for participant in self.participants_external_objects:
-            assert isinstance(participant.meta, dict)
-            samples_for_participant = [
-                sample
-                for sample in self.sample_external_objects
-                if sample.participant_id == participant.id
-                and isinstance(sample.meta, dict)
-            ]
-            if participant.meta.get('consent') and any(
-                isinstance(sample.meta, dict)
-                and sample.meta.get('collection-time') is None
-                for sample in samples_for_participant
-            ):
-                assert isinstance(participant.id, int)
-                participants_filtered.append(participant.id)
-
-        self.assertCountEqual(
-            participants_consented_not_collected, participants_filtered
-        )
-
-    @run_as_sync
-    async def test_participants_signed_not_consented(self):
-        """I want to know how many people have signed up but not consented"""
-        dashboard = await self.odd.query(project_id=self.project_id)
-        # print(dashboard)
-        participants_signed_not_consented = dashboard.participants_signed_not_consented
-
-        # Check that participants_signed_not_consented is not empty and is a dict
-        self.assertTrue(participants_signed_not_consented)
-        self.assertIsInstance(participants_signed_not_consented, list)
-
-        # Check that the number of participants in the list is correct
-        participants_filtered: list[int] = []
-        for participant in self.participants_external_objects:
-            assert isinstance(participant.meta, dict)
-            if not participant.meta.get('consent'):
-                assert isinstance(participant.id, int)
-                participants_filtered.append(participant.id)
-
-        self.assertCountEqual(participants_signed_not_consented, participants_filtered)
-
-    @run_as_sync
-    async def test_collection_to_process_end_time_bucket_statistics(self):
-        """Bucket the number of samples processed within 24, 48 and 72 hours"""
-        dashboard = await self.odd.query(project_id=self.project_id)
-        collection_to_process_end_time_bucket_statistics = (
-            dashboard.collection_to_process_end_time_bucket_statistics
-        )
-
-        # Check that collection_to_process_end_time_bucket_statistics is not empty and is a dict
-        self.assertTrue(collection_to_process_end_time_bucket_statistics)
-        self.assertIsInstance(collection_to_process_end_time_bucket_statistics, dict)
-
-        # Check that the number of samples in the list is correct
-        samples_filtered: dict[str, int] = {
-            '24h': 0,
-            '48h': 0,
-            '72h': 0,
-            '>72h': 0,
-        }
-        for sample in self.sample_external_objects:
-            assert isinstance(sample.meta, dict)
-            collection_time = sample.meta.get('collection-time')
-            process_end_time = sample.meta.get('process-end-time')
-            # Skip samples that don't have collection_time or process_end_time
-            if not collection_time or not process_end_time:
-                continue
-            time_difference = str_to_datetime(process_end_time) - str_to_datetime(
-                collection_time
-            )
-            current_bucket = ceil(time_difference.total_seconds() / 3600)
-            if current_bucket <= 24:
-                samples_filtered['24h'] += 1
-            elif current_bucket <= 48:
-                samples_filtered['48h'] += 1
-            elif current_bucket <= 72:
-                samples_filtered['72h'] += 1
-            else:
-                samples_filtered['>72h'] += 1
-
-        self.assertDictEqual(
-            collection_to_process_end_time_bucket_statistics, samples_filtered
-        )
diff --git a/web/src/index.css b/web/src/index.css
index f119aba34..de65423d2 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -346,8 +346,6 @@ html[data-theme='dark-mode'] .ui.table {
     color: var(--color-text-primary);
 }
 
-
-
 /* Project Insights dashboard */
 .html-tooltip .MuiTooltip-tooltip {
     background-color: #f5f5f9;
@@ -469,7 +467,6 @@ html[data-theme='dark-mode'] .ui.table {
     display: flex !important;
 }
 
-
 /*
     hax to fix bad cascading styles.
     There are a few conflicting css frameworks on metamist for strange historical reasons.
@@ -477,6 +474,7 @@ html[data-theme='dark-mode'] .ui.table {
     is sometimes necessary to remove styles that cascade from bad global definitions.
 */
 
-.MuiTablePagination-selectLabel, .MuiTablePagination-displayedRows {
+.MuiTablePagination-selectLabel,
+.MuiTablePagination-displayedRows {
     margin-bottom: 0 !important;
 }

From 405c74ee8e5881cdb8210deb7fc5a100d3780a14 Mon Sep 17 00:00:00 2001
From: Dan Coates <dan.coates@populationgenomics.org.au>
Date: Thu, 30 Jan 2025 17:12:52 +1100
Subject: [PATCH 12/12] update script to generate data for ourdna dashbaord

---
 test/data/generate_ourdna_data.py   | 305 ++++++++++++++++++++--------
 web/src/pages/report/SqlQueryUI.tsx |   1 +
 2 files changed, 216 insertions(+), 90 deletions(-)

diff --git a/test/data/generate_ourdna_data.py b/test/data/generate_ourdna_data.py
index eb12856f3..e2f3ee77e 100644
--- a/test/data/generate_ourdna_data.py
+++ b/test/data/generate_ourdna_data.py
@@ -1,118 +1,242 @@
 #!/usr/bin/env python3
 """
-This is a simple script to generate 3 participants & its samples in the ourdna project
+This is a simple script to generate some participants and samples for testing ourdna
 Local Backend API needs to run prior executing this script
 
-NOTE: This is WIP and will be updated with more features
-If you want to regenerate the data you would need to
-delete records from table sample and participant first
 """
 
 import argparse
 import asyncio
+import datetime
+import random
+import uuid
+from typing import Sequence, Union
 
 from metamist.apis import ParticipantApi
 from metamist.models import ParticipantUpsert, SampleUpsert
 
 PRIMARY_EXTERNAL_ORG = ''
 
-PARTICIPANTS = [
-    ParticipantUpsert(
-        external_ids={PRIMARY_EXTERNAL_ORG: 'EX01'},
-        reported_sex=2,
-        karyotype='XX',
-        meta={'consent': True, 'field': 1},
-        samples=[
+
+ANCESTRIES = [
+    'Vietnamese',
+    'Filipino',
+    'Australian',
+    'Spanish',
+    'Acehnese',
+    'Afghan',
+    'African American',
+    'American',
+    'Amhara',
+    'British',
+    'Chinese',
+    'English',
+    'German',
+    'Greek',
+    'Indian',
+    'Irish',
+    'Italian',
+    'Japanese',
+    'Malay',
+    'Norwegian',
+    'Scottish',
+    'Venezuelan',
+]
+
+BIRTHPLACES = [
+    'Philippines',
+    'Vietnam',
+    'Cambodia',
+    'Australia',
+    "I don't know",
+    "I'd prefer not to say",
+    'Thailand',
+]
+
+LANGUAGES = [
+    'Vietnamese',
+    'Filipino',
+    'Tagalog',
+    'Cebuano',
+    'English',
+    'Bisaya',
+    'Ilonggo (Hiligaynon)',
+    'Cantonese',
+    'Other Southern Asian Languages',
+    'Spanish',
+    'Ilokano',
+    'Bikol',
+    'American Languages',
+    'IIokano',
+    'Hawaiian English',
+    'Armenian',
+    'Khmer',
+    'Acehnese',
+    'Other Southeast Asian Languages',
+    'Urdu',
+    'French',
+    'Japanese',
+    'Thai',
+    'Italian',
+    'Croatian',
+    'Chin Haka',
+    'Arabic',
+]
+
+
+event_type = ['OSS', 'Walk in']
+processing_site = ['bbv', 'Westmead']
+
+
+def random_date_range():
+    "Generate a random date range"
+    # Throw in the occasional invalid date to simulate the current state of the data
+    # this should be removed once the data is cleaned up
+    if random.randint(0, 10) == 0:
+        return 'N/A', 'N/A'
+    start_date = datetime.datetime.now() - datetime.timedelta(
+        days=random.randint(1, 365)
+    )
+    end_date = start_date + datetime.timedelta(hours=random.randint(1, 150))
+    return start_date.strftime('%Y-%m-%d %H:%M:%S'), end_date.strftime(
+        '%Y-%m-%d %H:%M:%S'
+    )
+
+
+def random_choice(
+    choices: Sequence[Union[str, bool, int]], weight_by_index: bool = False
+):
+    "Pick a random choice from a list of choices"
+    weighted_choices = list(choices)
+    if weight_by_index:
+        for i, choice in enumerate(choices):
+            weighted_choices.extend([choice] * (len(choices) - i))
+    return weighted_choices[random.randint(0, len(weighted_choices) - 1)]
+
+
+def random_list(
+    choices: Sequence[Union[str, bool, int]],
+    weight_by_index: bool = False,
+    min_len: int = 1,
+    max_len: int = 5,
+):
+    "Generate a random list of choices"
+    result: list[Union[str, bool, int]] = []
+    desired_len = random.randint(min_len, max_len)
+    if desired_len > len(choices):
+        raise ValueError(
+            f'Desired length {desired_len} is greater than the number of choices {len(choices)}'
+        )
+    while len(result) < desired_len:
+        choice = random_choice(choices, weight_by_index)
+        if choice not in result:
+            result.append(choice)
+
+    return result
+
+
+def create_samples():
+    """Create a sample with nested samples"""
+    start_date, end_date = random_date_range()
+
+    meta = {
+        'collection-time': start_date,
+        'process-end-time': end_date,
+        'collection-event-type': random_choice(event_type),
+        'processing-site': random_choice(processing_site),
+    }
+
+    sample = SampleUpsert(
+        external_ids={PRIMARY_EXTERNAL_ORG: str(uuid.uuid4())},
+        type='blood',
+        active=True,
+        nested_samples=[
             SampleUpsert(
-                external_ids={PRIMARY_EXTERNAL_ORG: 'Test01'},
-                type='blood',
+                external_ids={PRIMARY_EXTERNAL_ORG: str(uuid.uuid4())},
+                type='guthrie-card',
                 active=True,
-                meta={
-                    'collection-time': '2022-07-03 13:28:00',
-                    'processing-site': 'Garvan',
-                    'process-start-time': '2022-07-06 16:28:00',
-                    'process-end-time': '2022-07-06 19:28:00',
-                    'received-time': '2022-07-03 14:28:00',
-                    'received-by': 'YP',
-                    'collection-lab': 'XYZ LAB',
-                    'collection-event-name': 'walk-in',
-                    'courier': 'ABC COURIERS',
-                    'courier-tracking-number': 'ABCDEF12562',
-                    'courier-scheduled-pickup-time': '2022-07-03 13:28:00',
-                    'courier-actual-pickup-time': '2022-07-03 13:28:00',
-                    'courier-scheduled-dropoff-time': '2022-07-03 13:28:00',
-                    'courier-actual-dropoff-time': '2022-07-03 13:28:00',
-                    'concentration': 1.45,
-                },
-            )
-        ],
-    ),
-    ParticipantUpsert(
-        external_ids={PRIMARY_EXTERNAL_ORG: 'EX02'},
-        reported_sex=1,
-        karyotype='XY',
-        meta={'field': 2},
-        samples=[
+                meta=meta,
+            ),
             SampleUpsert(
-                external_ids={PRIMARY_EXTERNAL_ORG: 'Test02'},
-                type='blood',
+                external_ids={PRIMARY_EXTERNAL_ORG: str(uuid.uuid4())},
+                type='plasma',
                 active=True,
-                meta={
-                    'collection-time': '2022-07-03 13:28:00',
-                    'processing-site': 'BBV',
-                    'process-start-time': '2022-07-06 16:28:00',
-                    'process-end-time': '2022-07-06 19:28:00',
-                    'received-time': '2022-07-03 14:28:00',
-                    'received-by': 'YP',
-                    'collection-lab': 'XYZ LAB',
-                    'collection-event-name': 'EventA',
-                    'courier': 'ABC COURIERS',
-                    'courier-tracking-number': 'ABCDEF12562',
-                    'courier-scheduled-pickup-time': '2022-07-03 13:28:00',
-                    'courier-actual-pickup-time': '2022-07-03 13:28:00',
-                    'courier-scheduled-dropoff-time': '2022-07-03 13:28:00',
-                    'courier-actual-dropoff-time': '2022-07-03 13:28:00',
-                    'concentration': 0.98,
-                },
-            )
-        ],
-    ),
-    ParticipantUpsert(
-        external_ids={PRIMARY_EXTERNAL_ORG: 'EX03'},
-        reported_sex=2,
-        karyotype='XX',
-        meta={'consent': True, 'field': 3},
-        samples=[
+                meta=meta,
+            ),
+            SampleUpsert(
+                external_ids={PRIMARY_EXTERNAL_ORG: str(uuid.uuid4())},
+                type='buffy-coat',
+                active=True,
+                meta=meta,
+            ),
             SampleUpsert(
-                external_ids={PRIMARY_EXTERNAL_ORG: 'Test03'},
-                type='blood',
+                external_ids={PRIMARY_EXTERNAL_ORG: str(uuid.uuid4())},
+                type='pbmc',
                 active=True,
-                meta={
-                    # 'collection-time': '2022-07-03 13:28:00',
-                    'processing-site': 'Garvan',
-                    # 'process-start-time': '2022-07-03 16:28:00',
-                    # 'process-end-time': '2022-07-03 19:28:00',
-                    'received-time': '2022-07-03 14:28:00',
-                    'received-by': 'YP',
-                    'collection-lab': 'XYZ LAB',
-                    'courier': 'ABC COURIERS',
-                    'courier-tracking-number': 'ABCDEF12562',
-                    'courier-scheduled-pickup-time': '2022-07-03 13:28:00',
-                    'courier-actual-pickup-time': '2022-07-03 13:28:00',
-                    'courier-scheduled-dropoff-time': '2022-07-03 13:28:00',
-                    'courier-actual-dropoff-time': '2022-07-03 13:28:00',
-                    'concentration': 1.66,
-                },
-            )
+                meta=meta,
+            ),
         ],
-    ),
-]
+        meta=meta,
+    )
+
+    return sample
+
 
+def create_participant():
+    """Create a participant with nested samples"""
+    participant = ParticipantUpsert(
+        external_ids={PRIMARY_EXTERNAL_ORG: str(uuid.uuid4())},
+        reported_sex=random_choice([1, 2]),
+        meta={
+            'ancestry-participant-ancestry': random_list(
+                ANCESTRIES, weight_by_index=True, min_len=1, max_len=2
+            ),
+            'ancestry-mother-ancestry': random_list(
+                ANCESTRIES, weight_by_index=True, min_len=1, max_len=2
+            ),
+            'ancestry-father-ancestry': random_list(
+                ANCESTRIES, weight_by_index=True, min_len=1, max_len=2
+            ),
+            'ancestry-mother-birthplace': random_list(
+                BIRTHPLACES, weight_by_index=True, min_len=1, max_len=2
+            ),
+            'ancestry-father-birthplace': random_list(
+                BIRTHPLACES, weight_by_index=True, min_len=1, max_len=2
+            ),
+            'ancestry-language-other-than-english': random_list(
+                LANGUAGES, weight_by_index=True, min_len=1, max_len=2
+            ),
+            'birth-year': random.randint(1900, 2010),
+            'blood-consent': random_choice(['yes', 'no']),
+            'informed-consent': random_choice(['yes', 'no']),
+            'choice-receive-genetic-info': random_choice(['yes', 'no']),
+            'choice-family-receive-genetic-info': random_choice(['yes', 'no']),
+            'choice-recontact': random_choice(['yes', 'no']),
+            'choice-general-updates': random_choice(['yes', 'no']),
+            'choice-use-of-cells-in-future-research-consent': random_choice(
+                ['yes', 'no']
+            ),
+            'choice-use-of-cells-in-future-research-understanding': random_list(
+                [
+                    'grown_indefinitely',
+                    'used_by_approved_researchers',
+                ],
+                min_len=1,
+                max_len=2,
+            ),
+        },
+        samples=[create_samples()],
+    )
+
+    return participant
 
-async def main(project='ourdna'):
+
+async def main(project='ourdna', num_participants=10):
     """Doing the generation for you"""
     participant_api = ParticipantApi()
-    participants_rec = participant_api.upsert_participants(project, PARTICIPANTS)
+
+    participants = [create_participant() for _ in range(num_participants)]
+    participants_rec = participant_api.upsert_participants(project, participants)
     print('inserted participants:', participants_rec)
 
 
@@ -121,5 +245,6 @@ async def main(project='ourdna'):
         description='Script for generating data in the ourdna test project'
     )
     parser.add_argument('--project', type=str, default='ourdna')
+    parser.add_argument('--num-participants', type=str, default=10)
     args = vars(parser.parse_args())
     asyncio.new_event_loop().run_until_complete(main(**args))
diff --git a/web/src/pages/report/SqlQueryUI.tsx b/web/src/pages/report/SqlQueryUI.tsx
index 32291966f..778438b45 100644
--- a/web/src/pages/report/SqlQueryUI.tsx
+++ b/web/src/pages/report/SqlQueryUI.tsx
@@ -425,6 +425,7 @@ export default function SqlQueryUi() {
                         {projectName && (selectedTableQuery || tableQueryValue) && (
                             <TableFromQuery
                                 project={projectName}
+                                showToolbar
                                 query={selectedTableQuery || tableQueryValue}
                             />
                         )}