Dataset form cleanup (#187)

Author: jessica-cheng

frontend/packages/@depmap/dataset-manager/src/components/ChunkedFileUploader.tsx

@@ -1,9 +1,12 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
 import * as React from "react";
-import { FormControl, ProgressBar } from "react-bootstrap";
+import { FormControl, HelpBlock, ProgressBar } from "react-bootstrap";
 import { useState } from "react";
 import { UploadFileResponse } from "@depmap/types";
 import * as SparkMD5 from "spark-md5";
 
+import styles from "../styles/ChunkedFileUploader.scss";
+
 interface ChunkedFileUploaderProps {
   uploadFile: (fileArgs: { file: File | Blob }) => Promise<UploadFileResponse>;
   forwardFileIdsAndHash: (fileIds: Array<string>, hash: string | null) => void;
@@ -17,6 +20,96 @@ export default function ChunkedFileUploader({
   const [progress, setProgress] = useState(0);
   const [uploadSuccessful, setUploadSuccessful] = useState<boolean>(true);
 
+  const FormattingHelp = () => {
+    return (
+      <div>
+        <div>
+          Upload a dataset CSV file with <i>samples</i> and/or <i>features</i>.
+          See below examples for more details.
+        </div>
+
+        <details>
+          <summary>Formatting Examples</summary>
+          <div>
+            <b>
+              Matrix Dataset <i>(DEFAULT)</i>
+            </b>
+            <p>
+              Samples (e.g. depmap models with &apos;depmap_id&apos; as their
+              identifiers) are row headers and features (e.g. genes with
+              &apos;entrez_id&apos; as their identifiers) are column headers
+            </p>
+          </div>
+          <table className={styles.uploadExampleTable}>
+            <thead>
+              <tr>
+                <th />
+                <th>6663</th>
+                <th>4893</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>ACH-00001</td>
+                <td>0.05</td>
+                <td>0.34</td>
+              </tr>
+              <tr>
+                <td>ACH-00002</td>
+                <td>0.4</td>
+                <td>NA</td>
+              </tr>
+            </tbody>
+          </table>
+
+          <div>Which in CSV format would be:</div>
+          <pre>
+            <div>,6663,4893</div>
+            <div>ACH-00001,0.05,0.34</div>
+            <div>ACH-00002,0.4,</div>
+          </pre>
+
+          <div>
+            <b>Tabular Dataset</b>
+            <p>
+              Samples or features as row headers and additional metadata are
+              columns.
+            </p>
+          </div>
+          <table className={styles.uploadExampleTable}>
+            <thead>
+              <tr>
+                <th />
+                <th>symbol</th>
+                <th>status</th>
+                <th>other metadata</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>6663</td>
+                <td>SOX10</td>
+                <td>Yes</td>
+                <td>NA</td>
+              </tr>
+              <tr>
+                <td>4839</td>
+                <td>NRAS</td>
+                <td>No</td>
+                <td>123</td>
+              </tr>
+            </tbody>
+          </table>
+          <pre>
+            <div>,symbol,status,other metadata</div>
+            <div>6663,SOX10,Yes,</div>
+            <div>4839,NRAS,No,123</div>
+          </pre>
+        </details>
+      </div>
+    );
+  };
+
   const chunkedUpload = async (file: File) => {
     const chunkSize = 5 * 1024 * 1024; // Arbitrarily set to 5MB. Adjust if necessary
     const totalChunks = Math.ceil(file.size / chunkSize);
@@ -84,6 +177,7 @@ export default function ChunkedFileUploader({
 
   return (
     <div style={{ marginBottom: "10px" }}>
+      <HelpBlock>{FormattingHelp()}</HelpBlock>
       <FormControl
         name="file_upload"
         type="file"

frontend/packages/@depmap/dataset-manager/src/components/DatasetForm.tsx

@@ -52,8 +52,13 @@ export default function DatasetForm(props: DatasetFormProps) {
         Object.keys(matrixFormSchema.properties)
           .concat("allowed_values")
           .forEach((key) => {
-            if (!isAdvancedMode && key === "value_type") {
-              initForm[key] = "continuous";
+            if (!isAdvancedMode) {
+              if (key === "value_type") {
+                initForm[key] = "continuous";
+              }
+              if (key === "data_type") {
+                initForm[key] = "User upload";
+              }
             } else if (
               typeof matrixFormSchema.properties[key] === "object" &&
               // @ts-ignore

frontend/packages/@depmap/dataset-manager/src/components/MatrixDatasetForm.tsx

@@ -232,11 +232,15 @@ export function MatrixDatasetForm({
       },
     };
     if (!isAdvancedMode) {
-      ["feature_type", "value_type", "priority", "dataset_metadata"].forEach(
-        (key) => {
-          formUiSchema[key] = { "ui:widget": "hidden" };
-        }
-      );
+      [
+        "feature_type",
+        "value_type",
+        "priority",
+        "dataset_metadata",
+        "data_type",
+      ].forEach((key) => {
+        formUiSchema[key] = { "ui:widget": "hidden" };
+      });
     }
     return formUiSchema;
   }, [isAdvancedMode]);

frontend/packages/@depmap/dataset-manager/src/models/matrixDatasetFormSchema.ts

@@ -85,8 +85,7 @@ export const matrixFormSchema: Required<Pick<RJSFSchema, "properties">> &
     group_id: {
       title: "Group Id",
       type: "string",
-      description:
-        "ID of the group the dataset belongs to. Required for non-transient datasets.",
+      description: "The group the dataset belongs to",
       format: "uuid",
     },
     priority: {

frontend/packages/@depmap/dataset-manager/src/styles/ChunkedFileUploader.scss

@@ -0,0 +1,11 @@
+.uploadExampleTable {
+  border-collapse: collapse;
+  border: 1px solid black;
+  color: #333;
+
+  th,
+  td {
+    border: 1px solid black;
+    padding: 4px;
+  }
+}