Merge pull request #323 from AllenInstitute/feature/hide-unique-id-fo…

…r-data-sources

Feature/hide unique id for data sources

packages/core/components/DataSourcePrompt/DataSourcePrompt.module.css

@@ -53,12 +53,30 @@
     justify-content: left;
 }
 
+.table-example, .table-example > tr > :is(th, td) {
+    border: 2px solid var(--secondary-background-color);
+    border-collapse: collapse;
+}
+
+.table-example > tr > :is(th, td) {
+    padding: 5px;
+}
+
+.light-border.table-example, .light-border.table-example > tr > :is(th, td) {
+    border: 2px solid var(--primary-background-color);
+}
+
+.left-text-align {
+    text-align: left !important;
+}
+
 .title {
     margin-bottom: 6px;
 }
 
 .datasource-subhead {
-    margin-bottom: 26px !important;
+    margin-bottom: 13px !important;
+    text-align: left;
     font-weight: 600;
 }
 

packages/core/components/DataSourcePrompt/index.tsx

@@ -19,8 +19,8 @@ interface Props {
 const ADDITIONAL_COLUMN_DETAILS = [
     'If a "Thumbnail" column is present it should contain a web URL to a thumbnail image for the file. ',
     'If a "File Name" column is present it should be the file\'s name (this will replace the "File Name" created by default from the path). ',
-    'If a "File Size" column is present it should contain the size of the file in bytes. ',
-    'If an "Uploaded" column is present it should contain the date the file was uploaded to the cloud storage and be formatted as YYYY-MM-DD HH:MM:SS.Z where Z is a timezone offset. ',
+    'If a "File Size" column is present it should contain the size of the file in bytes. This is used for showing feedback to the user during downloads. ',
+    'If an "Uploaded" column is present it should contain the date the file was uploaded to the storage and be formatted as YYYY-MM-DD HH:MM:SS.Z where Z is a timezone offset. ',
 ];
 
 /**
@@ -77,16 +77,50 @@ export default function DataSourcePrompt(props: Props) {
                 To get started, load a CSV, Parquet, or JSON file containing metadata (annotations)
                 about your files to view them.
             </p>
+            <p
+                className={classNames(styles.text, {
+                    [styles.datasourceSubhead]: !props?.hideTitle,
+                })}
+            >
+                The first row should contain metadata tags, and each subsequent row include metadata
+                for a file, with &quot;File Path&quot; being the only required column. Other columns
+                are optional and can be used for querying additional file metadata.
+            </p>
+            <p
+                className={classNames(styles.text, {
+                    [styles.datasourceSubhead]: !props?.hideTitle,
+                    [styles.leftTextAlign]: !props?.hideTitle,
+                })}
+            >
+                Example CSV:
+            </p>
+            <table
+                className={classNames(styles.tableExample, {
+                    [styles.lightBorder]: !props?.hideTitle,
+                })}
+            >
+                <thead>
+                    <tr>
+                        <th>File Path</th>
+                        <th>Gene (Just an example)</th>
+                        <th>Color (Also an example)</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>/some/path/to/storage/somewhere.zarr</td>
+                        <td>CDH2</td>
+                        <td>Blue</td>
+                    </tr>
+                    <tr>
+                        <td>/another/path/to/another/file.txt</td>
+                        <td>VIM</td>
+                        <td>Green</td>
+                    </tr>
+                </tbody>
+            </table>
             {isDataSourceDetailExpanded ? (
                 <>
-                    <ul className={styles.detailsList}>
-                        <li className={styles.details}>
-                            The file must contain a &quot;File Path&quot; column & must be unique by
-                            the &quot;File Path&quot; column or have a unique &quot;File ID&quot;
-                            column. Any other columns are optional and will be available as
-                            annotations to query by.
-                        </li>
-                    </ul>
                     <h4 className={styles.details}>Advanced:</h4>
                     <ul className={styles.detailsList}>
                         <li className={styles.details}>

packages/core/components/FileDetails/index.tsx

@@ -99,7 +99,7 @@ export default function FileDetails(props: Props) {
             dispatch(
                 interaction.actions.downloadFiles([
                     {
-                        id: fileDetails.id,
+                        id: fileDetails.uid,
                         name: fileDetails.name,
                         size: fileDetails.size,
                         path: fileDetails.downloadPath,
@@ -145,7 +145,7 @@ export default function FileDetails(props: Props) {
                                     <PrimaryButton
                                         className={styles.primaryButton}
                                         disabled={processStatuses.some((status) =>
-                                            status.data.fileId?.includes(fileDetails.id)
+                                            status.data.fileId?.includes(fileDetails.uid)
                                         )}
                                         iconName="Download"
                                         text="Download"

packages/core/components/FileList/LazilyRenderedRow.tsx

@@ -67,7 +67,7 @@ export default function LazilyRenderedRow(props: LazilyRenderedRowProps) {
                     displayValue: annotation.extractFromFile(file),
                     width: columnWidths[annotation.name] || 1 / annotations.length,
                 }))}
-                rowIdentifier={{ index, id: file.id }}
+                rowIdentifier={{ index, id: file.uid }}
                 onSelect={onSelect}
             />
         );

packages/core/components/FileList/LazilyRenderedThumbnail.tsx

@@ -79,7 +79,7 @@ export default function LazilyRenderedThumbnail(props: LazilyRenderedThumbnailPr
 
         if (onSelect && file !== undefined) {
             onSelect(
-                { index: overallIndex, id: file.id },
+                { index: overallIndex, id: file.uid },
                 {
                     // Details on different OS keybindings
                     // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent#Properties

packages/core/components/FileRow/index.tsx

@@ -19,7 +19,7 @@ export interface CellConfig {
 interface FileRowProps {
     cells: CellConfig[];
     className?: string;
-    rowIdentifier?: any;
+    rowIdentifier?: { index: number; id: string };
     onContextMenu?: (evt: React.MouseEvent) => void;
     onResize?: (columnKey: string, nextWidth?: number) => void;
     onSelect?: OnSelect;

packages/core/constants/index.ts

@@ -15,14 +15,13 @@ export const TOP_LEVEL_FILE_ANNOTATIONS = [
     new Annotation({
         annotationDisplayName: "File ID",
         annotationName: AnnotationName.FILE_ID,
-        description:
-            "Auto or manually generated unique ID for file. Should not be used for collaboration or sharing as it may change.",
+        description: "ID for file.",
         type: AnnotationType.STRING,
     }),
     new Annotation({
         annotationDisplayName: "File Name",
         annotationName: AnnotationName.FILE_NAME,
-        description: "Name of file",
+        description: "Name of file.",
         type: AnnotationType.STRING,
     }),
     new Annotation({

packages/core/entity/FileDetail/index.ts

@@ -73,7 +73,8 @@ export interface FmsFile {
  * Facade for a FileDetailResponse.
  */
 export default class FileDetail {
-    private fileDetail: FmsFile;
+    private readonly fileDetail: FmsFile;
+    private readonly uniqueId?: string;
 
     private static convertAicsDrivePathToAicsS3Path(path: string): string {
         const pathWithoutDrive = path.replace("/allen/programs/allencell/data/proj0", "");
@@ -82,14 +83,19 @@ export default class FileDetail {
         return `https://s3.us-west-2.amazonaws.com/production.files.allencell.org${pathWithoutDrive}`;
     }
 
-    constructor(fileDetail: FmsFile) {
+    constructor(fileDetail: FmsFile, uniqueId?: string) {
         this.fileDetail = fileDetail;
+        this.uniqueId = uniqueId;
     }
 
     public get details() {
         return this.fileDetail;
     }
 
+    public get uid(): string {
+        return this.uniqueId || this.id;
+    }
+
     public get id(): string {
         const id = this.fileDetail.file_id || this.getFirstAnnotationValue("File ID");
         if (id === undefined) {