Seqr loading wizard

.dockerignore

@@ -1 +1,3 @@
-ui/node_modules/
+ui/node_modules/
+.idea/
+.vscode/

.envrc.template

@@ -0,0 +1,26 @@
+# Database settings for Django
+export POSTGRES_SERVICE_HOSTNAME=localhost
+export POSTGRES_SERVICE_PORT=5433
+export POSTGRES_USERNAME=postgres
+export POSTGRES_PASSWORD=a-very-secure-password
+export POSTGRES_DATABASE=seqrdb
+
+# Leave blank for local env
+export DEPLOYMENT_TYPE=
+
+# Convenience commands for creating database
+export CREATE_REF_DB_CMD="psql -W -U ${POSTGRES_USERNAME} -h ${POSTGRES_SERVICE_HOSTNAME} -p ${POSTGRES_SERVICE_PORT} -c 'create database reference_data_db;'"
+export LIST_DBS_CMD="psql -W -U ${POSTGRES_USERNAME} -h ${POSTGRES_SERVICE_HOSTNAME} -p ${POSTGRES_SERVICE_PORT} -c '\list'"
+
+# ----------------------------------------------------------------------------
+# Apple Developers
+# ----------------------------------------------------------------------------
+# Install libpg for the Postgres client library without the server (brew install libpg)
+# Export these variables so that pip packages know where to find the appropriate binaries, libs and headers.
+# export PATH="/opt/homebrew/opt/libpq/bin:$PATH"
+# export LDFLAGS="-L/opt/homebrew/opt/libpq/lib $LDFLAGS"
+# export CPPFLAGS="-I/opt/homebrew/opt/libpq/include $CPPFLAGS"
+
+# Apple silicon (M1 chip etc) fix for grpcio
+# export GRPC_PYTHON_BUILD_SYSTEM_OPENSSL=1
+# export GRPC_PYTHON_BUILD_SYSTEM_ZLIB=1

.gitignore

@@ -1,4 +1,5 @@
 .idea*
+.vscode*
 *.iml
 *.sqlite3
 *.log
@@ -22,3 +23,7 @@ seqr_settings
 django_key
 static/
 .coverage
+
+.envrc
+
+data/

docker-compose-dev.yml

@@ -0,0 +1,19 @@
+version: '2.4'
+
+services:
+  postgres:
+    image: postgres:12.6
+    command: postgres -c listen_addresses='*'
+    environment:
+      - PGPORT=5433
+      - POSTGRES_DB=seqrdb
+      - POSTGRES_PASSWORD=a-very-secure-password
+    volumes:
+      - ./data/postgres:/var/lib/postgresql/data
+    ports:
+      - "5433:5433"
+    healthcheck:
+      test: pg_isready -h postgres -U postgres
+      interval: 5s
+      timeout: 10s
+      retries: 100

environment-dev.yaml

@@ -0,0 +1,13 @@
+name: seqr
+
+channels:
+  - cpg
+  - bioconda
+  - conda-forge
+dependencies:
+  - python=3.8
+  - pip
+  - nodejs==16.10.0
+  - pip:
+    - '-r requirements-dev.txt'
+    - '-r requirements.txt'

ui/config/webpack.config.dev.js

@@ -10,6 +10,10 @@ const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const glob = require('glob');
 const paths = require('./paths');
 
+// HACK: OpenSSL 3 does not support md4 any more, but webpack hardcodes it all over the place: https://github.com/webpack/webpack/issues/13572
+const crypto = require('crypto');
+const cryptoOriginalCreateHash = crypto.createHash;
+crypto.createHash = algorithm => cryptoOriginalCreateHash(algorithm === 'md4' ? 'sha256' : algorithm);
 
 // This is the development configuration.
 

ui/config/webpack.config.prod.js

@@ -16,6 +16,11 @@ const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const paths = require('./paths');
 const getClientEnvironment = require('./env');
 
+// HACK: OpenSSL 3 does not support md4 any more, but webpack hardcodes it all over the place: https://github.com/webpack/webpack/issues/13572
+const crypto = require('crypto');
+const cryptoOriginalCreateHash = crypto.createHash;
+crypto.createHash = algorithm => cryptoOriginalCreateHash(algorithm === 'md4' ? 'sha256' : algorithm);
+
 // Webpack uses `publicPath` to determine where the app is being served from.
 // It requires a trailing slash, or the file assets will get an incorrect path.
 const publicPath = paths.servedPath;

ui/package.json

@@ -83,6 +83,7 @@
     "lodash": "^4.17.21",
     "markdown-draft-js": "^2.4.0",
     "object-hash": "^1.3.0",
+    "papaparse": "^5.3.1",
     "pedigreejs": "github:CCGE-BOADICEA/pedigreejs#2e17296",
     "prop-types": "^15.7.2",
     "query-string": "^6.1.0",

ui/pages/Project/Project.jsx

@@ -12,6 +12,7 @@ import CaseReview from './components/CaseReview'
 import FamilyPage from './components/FamilyPage'
 import Matchmaker from './components/Matchmaker'
 import SavedVariants from './components/SavedVariants'
+import DataLoadingWizard from './components/DataLoadingWizard/DataLoadingWizard'
 
 class Project extends React.PureComponent {
 
@@ -45,6 +46,7 @@ class Project extends React.PureComponent {
           <Route path={`${match.url}/family_page/:familyGuid/matchmaker_exchange`} component={Matchmaker} />
           <Route path={`${match.url}/family_page/:familyGuid`} component={FamilyPage} />
           <Route path={`${match.url}/saved_variants`} component={SavedVariants} />
+          <Route path={`${match.url}/wizard/`} component={DataLoadingWizard} />
           <Route component={Error404} />
         </Switch>
       )

ui/pages/Project/components/DataLoadingWizard/DataLoadingWizard.jsx

@@ -0,0 +1,196 @@
+/* eslint-disable react-perf/jsx-no-new-function-as-prop */
+/* eslint-disable no-console */
+/* eslint-disable no-alert */
+
+import React, { useState, useEffect, useCallback } from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { Breadcrumb } from 'semantic-ui-react'
+
+import { Error404 } from '../../../../shared/components/page/Errors'
+import { getCurrentProject } from '../../selectors'
+
+import { Centered, FormSection, FormStepButtons } from './ui'
+import { Welcome, TemplateUpload } from './steps'
+import PedigreeTemplateColumns from './templates/Pedigree'
+import IndividualTemplateColumns from './templates/Individual'
+import FamilyTemplateColumns from './templates/Family'
+import TemplateFile from './templates/File/TemplateFile'
+import TemplateHelp from './TemplateHelp'
+
+const BREADCRUMBS = [
+  { key: 0, content: 'Welcome', link: true, active: true },
+  { key: 1, content: 'Pedigree', link: true, active: false },
+  { key: 2, content: 'Individual metadata', link: true, active: false },
+  { key: 3, content: 'Family metadata', link: true, active: false },
+  { key: 4, content: 'Sample mapping', link: true, active: false },
+  { key: 5, content: 'Review', link: true, active: false },
+]
+
+const BaseMultistepForm = ({ project }) => {
+  // ---- Debug ---- //
+  console.group('Project Object')
+  console.log(project)
+  console.groupEnd()
+
+  // ---- State ----- //
+  const [breadCrumbs, setBreadcrumbs] = useState(BREADCRUMBS.map(b => ({ ...b })))
+  const [activeFormStepIndex, setActiveFormStepIndex] = useState(0)
+  const [formSteps, setFormSteps] = useState(BREADCRUMBS.map(
+    (_, index) => ({ formData: {}, isComplete: (index === 0) }),
+  ))
+
+  // ---- Callbacks ----- //
+  const updateFormStep = useCallback((stepNumber, { formData, isComplete }) => {
+    setFormSteps(formSteps.map(
+      (step, index) => {
+        if (stepNumber === index) {
+          return { formData, isComplete }
+        }
+        return { ...step }
+      },
+    ))
+  }, [formSteps])
+
+  const enableReview = useCallback(() => formSteps
+    .slice(0, formSteps.length - 1)
+    .reduce((acc, step) => acc && step.isComplete, true), [formSteps])
+
+  const enableNext = useCallback(() => {
+    if (activeFormStepIndex === (formSteps.length - 2)) {
+      return enableReview()
+    }
+
+    return activeFormStepIndex < formSteps.length
+  }, [formSteps, activeFormStepIndex, enableReview])
+
+  const getFormStepComponent = useCallback(() => {
+    const onFormChange = ({ formData, isComplete }) => updateFormStep(activeFormStepIndex, { formData, isComplete })
+
+    switch (activeFormStepIndex) {
+      case 0:
+        return <Welcome />
+      case 1:
+        return (
+          <TemplateUpload
+            id="pedigree-upload"
+            key="pedigree-upload"
+            label="Pedigree"
+            template={new TemplateFile(PedigreeTemplateColumns())}
+            onFormChange={onFormChange}
+            information={<TemplateHelp />}
+            project={project}
+          />
+        )
+      case 2:
+        return (
+          <TemplateUpload
+            id="individual-metadata-upload"
+            key="individual-metadata-upload"
+            label="Individual Metadata"
+            template={new TemplateFile(IndividualTemplateColumns())}
+            onFormChange={onFormChange}
+            information={<TemplateHelp />}
+            project={project}
+          />
+        )
+      case 3:
+        return (
+          <TemplateUpload
+            id="family-metadata-upload"
+            key="family-metadata-upload"
+            label="Family Metadata"
+            template={new TemplateFile(FamilyTemplateColumns())}
+            onFormChange={onFormChange}
+            information={<TemplateHelp />}
+            project={project}
+          />
+        )
+      case 4:
+        return <div>{ breadCrumbs[activeFormStepIndex].content }</div>
+      case 5:
+        return <div>{ breadCrumbs[activeFormStepIndex].content }</div>
+      default:
+        return <Error404 />
+    }
+  }, [project, activeFormStepIndex, updateFormStep])
+
+  // ---- Effects ---- //
+  useEffect(() => {
+    setBreadcrumbs(breadCrumbs.map((b, index) => ({ ...b, active: (index === activeFormStepIndex) })))
+  }, [activeFormStepIndex])
+
+  useEffect(() => {
+    setBreadcrumbs(
+      breadCrumbs.map((b, index) => {
+        if (index === (breadCrumbs.length - 1)) {
+          return {
+            ...b,
+            link: enableReview(),
+            onClick: enableReview() ? () => setActiveFormStepIndex(index) : null,
+          }
+        }
+
+        return {
+          ...b,
+          link: true,
+          onClick: () => setActiveFormStepIndex(index),
+        }
+      }),
+    )
+  }, [enableReview])
+
+  // ---- Render ----- //
+  return (
+    <section>
+      <FormSection>
+        <Centered>
+          <Breadcrumb
+            icon="right angle"
+            size="large"
+            sections={breadCrumbs}
+          />
+        </Centered>
+      </FormSection>
+
+      <FormSection>
+        {getFormStepComponent()}
+      </FormSection>
+
+      <FormSection>
+        <FormStepButtons
+          isLastStep={activeFormStepIndex === (formSteps.length - 1)}
+          onNext={() => setActiveFormStepIndex(Math.min(activeFormStepIndex + 1, formSteps.length - 1))}
+          onBack={() => setActiveFormStepIndex(Math.max(0, activeFormStepIndex - 1))}
+          enableNext={enableNext()}
+          enableSubmit={enableReview()}
+          onSubmit={() => alert('Yay')}
+        />
+      </FormSection>
+
+      <FormSection>
+        <Centered>
+          <Breadcrumb
+            icon="right angle"
+            size="small"
+            sections={breadCrumbs}
+          />
+        </Centered>
+      </FormSection>
+    </section>
+  )
+}
+
+BaseMultistepForm.propTypes = {
+  project: PropTypes.object.isRequired,
+}
+
+const mapStateToProps = state => ({
+  project: getCurrentProject(state),
+})
+
+export const MultistepForm = connect(mapStateToProps)(BaseMultistepForm)
+
+const DataLoadingWizard = () => <MultistepForm />
+
+export default DataLoadingWizard

ui/pages/Project/components/DataLoadingWizard/TemplateDirectoryLink.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+const TemplateDirectoryLink = () => (
+  <a
+    href="https://drive.google.com/drive/folders/1iHYMDY8-RzfqvvyEdubOHOmGzbLGUSUk"
+    target="_blank"
+    rel="noreferrer"
+  >
+    here
+  </a>
+)
+
+export default TemplateDirectoryLink

ui/pages/Project/components/DataLoadingWizard/TemplateHelp.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import { ReadableText } from './ui'
+import TemplateDirectoryLink from './TemplateDirectoryLink'
+
+const TemplateHelp = () => (
+  <ReadableText>
+    In this section, you will provide all information relating to the family pedigree and associated metadata in your
+    project. Please download the families template from
+    {' '}
+    <TemplateDirectoryLink />
+    { '. ' }
+    Once you have filled in this template, upload it via this step and correct any validation errors before proceeding.
+  </ReadableText>
+)
+
+export default TemplateHelp