WIP: Create samples from sequence run

src/main/resources/i18n/messages.properties

@@ -1578,6 +1578,17 @@ SequencingRunDetailsPage.list.description=Description
 SequencingRunDetailsPage.table.fileName=Filename
 SequencingRunDetailsPage.table.size=Size
 SequencingRunDetailsPage.table.download=Download
+SequencingRunDetailsPage.button=Create Samples
+
+SequencingRunCreateSamplesPage.title=Sequencing Run {0}
+SequencingRunCreateSamplesPage.files.title=Sequencing Files
+SequencingRunCreateSamplesPage.samples.title=Samples
+SequencingRunCreateSamplesPage.samples.button= Add New Sample
+SequencingRunCreateSamplesPage.empty=No Sequencing Run Files.
+
+SequencingRunSamplesList.empty=Add a new sample to get started.
+
+SequencingRunSampleFilesList.empty=Drag & drop sequencing files.
 
 server.sequencingruns.status.COMPLETE=Complete
 server.sequencingruns.status.UPLOADING=Uploading

src/main/webapp/resources/js/apis/sequencing-runs/sequencing-runs.js

@@ -29,6 +29,11 @@ export const sequencingRunsApi = createApi({
       query: (runId) => ({
         url: `${runId}/sequenceFiles`,
       }),
+      transformResponse(response, meta) {
+        return response.map((file) => {
+          return { ...file, show: true };
+        });
+      },
     }),
     /*
     Delete a sequencing run.

src/main/webapp/resources/js/pages/sequencing-runs/components/SequencingRunCreateSamplesPage.jsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { PageWrapper } from "../../../components/page/PageWrapper";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { useGetSequencingRunFilesQuery } from "../../../apis/sequencing-runs/sequencing-runs";
+import { useNavigate, useParams } from "react-router-dom";
+import { Col, Row, Typography } from "antd";
+import { AddNewButton } from "../../../components/Buttons/AddNewButton";
+import { SequencingRunSamplesList } from "./SequencingRunSamplesList";
+import { SequencingRunFilesList } from "./SequencingRunFilesList";
+import { useDispatch, useSelector } from "react-redux";
+import { addSample, setFiles } from "../services/runReducer";
+
+/**
+ * React component to display page that creates samples from a sequencing run.
+ * @returns {*}
+ * @constructor
+ */
+export default function SequencingRunCreateSamplesPage() {
+  const { runId } = useParams();
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const { data = [] } = useGetSequencingRunFilesQuery(runId);
+
+  React.useEffect(() => {
+    dispatch(setFiles(data));
+  }, [data]);
+
+  const { files, samples } = useSelector((state) => state.reducer);
+
+  const addNewSample = () => {
+    dispatch(
+      addSample({
+        sampleName: "New Sample",
+        forwardSequenceFile: null,
+        reverseSequenceFile: null,
+      })
+    );
+  };
+
+  return (
+    <PageWrapper
+      title={i18n("SequencingRunCreateSamplesPage.title", runId)}
+      onBack={() => navigate(-1)}
+      headerExtras={
+        <AddNewButton
+          onClick={addNewSample}
+          text={i18n("SequencingRunCreateSamplesPage.samples.button")}
+        />
+      }
+    >
+      <DndProvider backend={HTML5Backend}>
+        <Row gutter={32}>
+          <Col span={16}>
+            <Typography.Title level={5}>
+              {i18n("SequencingRunCreateSamplesPage.samples.title")}
+            </Typography.Title>
+            <SequencingRunSamplesList samples={samples} />
+          </Col>
+          <Col span={8}>
+            <Typography.Title level={5}>
+              {i18n("SequencingRunCreateSamplesPage.files.title")}
+            </Typography.Title>
+            <SequencingRunFilesList
+              samples={samples}
+              files={files.filter((item) => item.show)}
+            />
+          </Col>
+        </Row>
+      </DndProvider>
+    </PageWrapper>
+  );
+}

src/main/webapp/resources/js/pages/sequencing-runs/components/SequencingRunDetailsPage.jsx

@@ -14,6 +14,7 @@ import { NarrowPageWrapper } from "../../../components/page/NarrowPageWrapper";
 import { SequencingRunStatusBadge } from "./SequencingRunStatusBadge";
 import { grey1 } from "../../../styles/colors";
 import { SPACE_LG } from "../../../styles/spacing";
+import { AddNewButton } from "../../../components/Buttons/AddNewButton";
 
 const { Content } = Layout;
 
@@ -123,6 +124,12 @@ export default function SequencingRunDetailsPage() {
     <NarrowPageWrapper
       title={i18n("SequencingRunDetailsPage.title", runId)}
       onBack={showBack ? goToAdminSequenceRunListPage : undefined}
+      headerExtras={
+        <AddNewButton
+          href={setBaseUrl(`sequencing-runs/${runId}/samples`)}
+          text={i18n("SequencingRunDetailsPage.button")}
+        />
+      }
     >
       <Layout>
         <Content

src/main/webapp/resources/js/pages/sequencing-runs/components/SequencingRunFileCard.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { useDrag } from "react-dnd";
+import { Card } from "antd";
+
+/**
+ * React component to render a drag'n'drop card.
+ * @param {object} file - the file that is being stored in the card
+ * @param {number} index - the index of the array the card is moving from
+ * @param {object} children - content to display in card
+ * @param {object} props - any other attributes to add
+ * @returns {JSX.Element} - Returns a card component
+ */
+export function SequencingRunFileCard({
+  file,
+  index = null,
+  children,
+  ...props
+}) {
+  const [{ isDragging }, drag] = useDrag({
+    type: "card",
+    item: { file, prevIndex: index },
+  });
+
+  return (
+    <Card ref={drag} {...props}>
+      {children}
+    </Card>
+  );
+}

src/main/webapp/resources/js/pages/sequencing-runs/components/SequencingRunFilesList.jsx

@@ -0,0 +1,66 @@
+import { Empty, List } from "antd";
+import { SequencingRunFileCard } from "./SequencingRunFileCard";
+import React from "react";
+import { useDrop } from "react-dnd";
+import { addFile, updateSample } from "../services/runReducer";
+import { useDispatch } from "react-redux";
+
+/**
+ * React component to render the list of sequencing run files.
+ * @param {array} samples - list of samples
+ * @param {array} files - list of sequencing run files
+ * @returns {JSX.Element} - Returns a list component
+ */
+export function SequencingRunFilesList({ samples, files }) {
+  const dispatch = useDispatch();
+
+  const [{ canDrop, isOver }, drop] = useDrop({
+    accept: "card",
+    canDrop: (item, monitor) => {
+      if (item.prevIndex === null) {
+        return false;
+      } else {
+        return true;
+      }
+    },
+    drop: (item) => {
+      const { file, prevIndex } = item;
+      const prevSample = samples[prevIndex];
+      const newSample = {
+        sampleName: prevSample.sampleName,
+        forwardSequenceFile:
+          prevSample.forwardSequenceFile?.id === file.id
+            ? prevSample.reverseSequenceFile
+            : prevSample.forwardSequenceFile,
+        reverseSequenceFile: null,
+      };
+      dispatch(updateSample(newSample, prevIndex));
+      dispatch(addFile(file.id));
+    },
+  });
+
+  return (
+    <div ref={drop}>
+      {files.length === 0 ? (
+        <Empty
+          description={i18n("SequencingRunCreateSamplesPage.empty")}
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+        />
+      ) : (
+        <List
+          grid={{ column: 1 }}
+          dataSource={files}
+          renderItem={(file) => {
+            return (
+              <List.Item>
+                <SequencingRunFileCard file={file}>
+                  {file.fileName}
+                </SequencingRunFileCard>
+              </List.Item>
+            );
+          }}
+        />
+      )}
+    </div>
+  );
+}

src/main/webapp/resources/js/pages/sequencing-runs/components/SequencingRunSample.jsx

@@ -0,0 +1,174 @@
+import React from "react";
+import { useDrop } from "react-dnd";
+import { Button, Card, Col, Row } from "antd";
+import {
+  IconArrowLeft,
+  IconArrowRight,
+  IconRemove,
+  IconSwap,
+} from "../../../components/icons/Icons";
+import { grey1 } from "../../../styles/colors";
+import { FONT_COLOR_PRIMARY } from "../../../styles/fonts";
+import { SequencingRunFileCard } from "./SequencingRunFileCard";
+import { SPACE_LG } from "../../../styles/spacing";
+import {
+  addFile,
+  deleteSample,
+  removeFile,
+  updateSample,
+} from "../services/runReducer";
+import { useDispatch } from "react-redux";
+
+/**
+ * React component to render a sample.
+ * @param {array} samples - list of samples
+ * @param {object} sample - the sample
+ * @param {number} index - the index of the sample in the samples array
+ * @returns {JSX.Element} - Returns a sample component
+ */
+export function SequencingRunSample({ samples, sample, index }) {
+  const dispatch = useDispatch();
+
+  const removeSample = () => {
+    if (sample.forwardSequenceFile !== null)
+      dispatch(addFile(sample.forwardSequenceFile.id));
+    if (sample.reverseSequenceFile !== null)
+      dispatch(addFile(sample.reverseSequenceFile.id));
+    dispatch(deleteSample(index));
+  };
+
+  const switchPair = () => {
+    const newSample = {
+      sampleName: sample.sampleName,
+      forwardSequenceFile: sample.reverseSequenceFile,
+      reverseSequenceFile: sample.forwardSequenceFile,
+    };
+    dispatch(updateSample(newSample, index));
+  };
+
+  const [{ canDrop, isOver }, drop] = useDrop({
+    accept: "card",
+    canDrop: (item, monitor) => {
+      //do not drop on the same sample card
+      if (item.prevIndex === index) {
+        return false;
+        //do not drop on a full sample card
+      } else if (
+        sample.forwardSequenceFile !== null &&
+        sample.reverseSequenceFile !== null
+      ) {
+        return false;
+      } else {
+        return true;
+      }
+    },
+    drop: (item) => {
+      const { file, prevIndex } = item;
+
+      //remove file from previous location
+      if (prevIndex === null) {
+        dispatch(removeFile(file.id));
+      } else {
+        const prevSample = samples[prevIndex];
+        const newSample = {
+          sampleName: prevSample.sampleName,
+          forwardSequenceFile:
+            file.id === prevSample.forwardSequenceFile?.id
+              ? prevSample.reverseSequenceFile
+              : prevSample.forwardSequenceFile,
+          reverseSequenceFile: null,
+        };
+        dispatch(updateSample(newSample, prevIndex));
+      }
+
+      //add file to target location
+      if (sample.forwardSequenceFile === null) {
+        const newSample = {
+          sampleName: sample.sampleName,
+          forwardSequenceFile: file,
+          reverseSequenceFile: sample.reverseSequenceFile,
+        };
+        dispatch(updateSample(newSample, index));
+      } else if (sample.reverseSequenceFile === null) {
+        const newSample = {
+          sampleName: sample.sampleName,
+          forwardSequenceFile: sample.forwardSequenceFile,
+          reverseSequenceFile: file,
+        };
+        dispatch(updateSample(newSample, index));
+      } else {
+        //do nothing
+      }
+    },
+  });
+
+  return (
+    <Card
+      title={sample.sampleName}
+      ref={drop}
+      extra={
+        <Button
+          onClick={removeSample}
+          style={{ border: "none" }}
+          icon={<IconRemove />}
+        />
+      }
+    >
+      <Row align="middle" justify="center">
+        {sample.forwardSequenceFile !== null && (
+          <>
+            <Col flex="75px">
+              <IconArrowRight
+                style={{
+                  fontSize: "2em",
+                  flex: 1,
+                  padding: SPACE_LG,
+                  color: grey1,
+                  backgroundColor: FONT_COLOR_PRIMARY,
+                }}
+              />
+            </Col>
+            <Col flex="auto">
+              <SequencingRunFileCard
+                file={sample.forwardSequenceFile}
+                index={index}
+              >
+                {sample.forwardSequenceFile.fileName}
+              </SequencingRunFileCard>
+            </Col>
+          </>
+        )}
+        {sample.reverseSequenceFile !== null && (
+          <>
+            <Col span={2} offset={1}>
+              <Button
+                onClick={switchPair}
+                style={{ border: "none" }}
+                icon={<IconSwap />}
+              />
+            </Col>
+            <Col flex="75px">
+              <IconArrowLeft
+                style={{
+                  fontSize: "2em",
+                  flex: 1,
+                  padding: SPACE_LG,
+                  color: grey1,
+                  backgroundColor: FONT_COLOR_PRIMARY,
+                }}
+              />
+            </Col>
+            <Col flex="auto">
+              <SequencingRunFileCard
+                file={sample.reverseSequenceFile}
+                index={index}
+              >
+                {sample.reverseSequenceFile.fileName}
+              </SequencingRunFileCard>
+            </Col>
+          </>
+        )}
+      </Row>
+    </Card>
+  );
+}