Merge branch 'main' into feature/local_cloud_toggle

.github/workflows/aws-deployment.yml

@@ -35,7 +35,7 @@ jobs:
 
       - uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8
         with:
-          node-version: "16"
+          node-version: 16
 
       - name: Install Dependencies
         run: npm ci

.github/workflows/integration.yml

@@ -1,10 +1,94 @@
 name: integration
 
-on: pull_request
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+  schedule:
+    # <minute [0,59]> <hour [0,23]> <day of the month [1,31]>
+    # <month of the year [1,12]> <day of the week [0,6]>
+    # https://pubs.opengroup.org/onlinepubs/9699919799/utilities/crontab.html#tag_20_25_07
+    # Run every Monday at 07:24:00 PST
+    # (Since these CRONs are used by a lot of people -
+    # let's be nice to the servers and schedule it _not_ on the hour)
+    - cron: "24 7 * * 1"
 
 jobs:
-  build-fms-file-explorer-electron:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@main
+
+      - name: Install Node.js
+        uses: actions/setup-node@main
+        with:
+          node-version: 16
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Lint
+        run: npm run lint
+
+  test-core:
+    runs-on: ubuntu-latest
+    needs: lint
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@main
+
+      - name: Install Node.js
+        uses: actions/setup-node@main
+        with:
+          node-version: 16
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Unit Test
+        run: npm run test:core
+
+  test-web:
+    runs-on: ubuntu-latest
+    needs: lint
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@main
+
+      - name: Install Node.js
+        uses: actions/setup-node@main
+        with:
+          node-version: 16
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Unit Test
+        run: npm run test:web
+
+  test-desktop:
+    runs-on: ubuntu-latest
+    needs: lint
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@main
+
+      - name: Install Node.js
+        uses: actions/setup-node@main
+        with:
+          node-version: 16
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Unit Test
+        run: npm run test:desktop
+
+  build-desktop:
     runs-on: ${{ matrix.os }}
+    needs: [test-desktop, test-web, test-core]
     strategy:
       matrix:
         os: [ubuntu-latest, windows-latest, macos-latest]
@@ -13,12 +97,12 @@ jobs:
       - name: Check out Git repository
         uses: actions/checkout@main
 
-      - name: Install Node.js, NPM and Yarn
+      - name: Install Node.js
         uses: actions/setup-node@main
         with:
           node-version: 16
 
-      - name: Build/release Electron app
+      - name: Build Electron app
         uses: AllenCellSoftware/action-electron-builder@fms-file-explorer
         with:
           # GitHub token, automatically provided to the action
@@ -27,4 +111,4 @@ jobs:
           package_root: "packages/desktop"
           release: false  # Never release on an integration build
           windows_certs: ${{ secrets.CSC_LINK }}
-          windows_certs_password: ${{ secrets.CSC_KEY_PASSWORD }}
+          windows_certs_password: ${{ secrets.CSC_KEY_PASSWORD }}

.github/workflows/release.yml

@@ -7,7 +7,7 @@ on:
       - v*
 
 jobs:
-  release-fms-file-explorer-desktop:
+  release-desktop:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
@@ -19,7 +19,7 @@ jobs:
         with:
           ref: ${{ github.event.client_payload.ref }}
 
-      - name: Install Node.js, NPM and Yarn
+      - name: Install Node.js
         uses: actions/setup-node@main
         with:
           node-version: 16

README.md

@@ -1,8 +1,8 @@
 BioFile Finder
 =================
 
-BioFile Finder is an application designed to simplify access and exploration of data produced by the Allen
-Institute for Cell Science, provide an intuitive mechanism for organizing that data, and provide simple hooks for
+BioFile Finder is an application produced by the Allen
+Institute for Cell Science designed to simplify access and exploration of data, provide an intuitive mechanism for organizing that data, and provide simple hooks for
 incorporating that data into both programmatic and non-programmatic workflows.
 
 

packages/core/components/Buttons/useButtonMenu.ts

@@ -1,4 +1,5 @@
 import { ContextualMenuItemType, IContextualMenuItem, IContextualMenuProps } from "@fluentui/react";
+import { noop } from "lodash";
 import * as React from "react";
 
 import styles from "./useButtonMenu.module.css";
@@ -30,6 +31,7 @@ function normalizeButtonMenu(menu: IContextualMenuProps): IContextualMenuProps {
         className: styles.buttonMenu,
         calloutProps: { className: styles.buttonMenuCallout },
         items: menu.items.map((item) => normalizeButtonMenuItem(item)),
+        onRestoreFocus: noop, // Prevent button from refocusing on menu close
     };
 }
 

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

@@ -17,10 +17,10 @@ interface Props {
 }
 
 const ADDITIONAL_COLUMN_DETAILS = [
-    'If a "Thumbnail" column (case-sensitive) is present it should contain a web URL to a thumbnail image for the file. ',
-    'If a "File Name" column (case-sensitive) 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 (case-sensitive) is present it should contain the size of the file in bytes. ',
-    'If an "Uploaded" column (case-sensitive) 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 "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. 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,19 +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 (case-sensitive) &
-                            must be unique by the &quot;File Path&quot; column. Any other columns
-                            are optional and will be available as annotations to query by.
-                        </li>
-                        <li className={styles.details}>
-                            The &quot;File Path&quot; column should contain full path to a file in a
-                            cloud storage.
-                        </li>
-                    </ul>
                     <h4 className={styles.details}>Advanced:</h4>
                     <ul className={styles.detailsList}>
                         <li className={styles.details}>
@@ -98,7 +129,7 @@ export default function DataSourcePrompt(props: Props) {
                             as&quot; options.
                         </li>
                         <li className={styles.details}>
-                            These are additional special columns that are optional, but will be
+                            These are additional pre-defined columns that are optional, but will be
                             handled as a special case in the application:
                         </li>
                         <ul className={styles.detailsList}>

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/Header.module.css

@@ -61,6 +61,6 @@
   transform: translateY(0px);
 }
 
-.list-parent > div > div:nth-child(even) div {
+.list-parent > div > div:nth-child(even) > div {
   background-color: var(--primary-background-color);
 }

packages/core/components/FileList/LazilyRenderedRow.tsx

@@ -46,34 +46,43 @@ export default function LazilyRenderedRow(props: LazilyRenderedRowProps) {
 
     const file = fileSet.getFileByIndex(index);
 
-    const isSelected = React.useMemo(() => {
-        return fileSelection.isSelected(fileSet, index);
-    }, [fileSelection, fileSet, index]);
+    const isSelected = React.useMemo(() => fileSelection.isSelected(fileSet, index), [
+        fileSelection,
+        fileSet,
+        index,
+    ]);
 
-    const isFocused = React.useMemo(() => {
-        return fileSelection.isFocused(fileSet, index);
-    }, [fileSelection, fileSet, index]);
+    const isFocused = React.useMemo(() => fileSelection.isFocused(fileSet, index), [
+        fileSelection,
+        fileSet,
+        index,
+    ]);
 
-    let content = null;
+    let content: React.ReactElement;
     if (file) {
-        const cells = map(annotations, (annotation) => ({
-            columnKey: annotation.name,
-            displayValue: annotation.extractFromFile(file),
-            width: columnWidths[annotation.name] || 1 / annotations.length,
-        }));
         content = (
-            <FileRow cells={cells} rowIdentifier={{ index, id: file.id }} onSelect={onSelect} />
+            <FileRow
+                cells={map(annotations, (annotation) => ({
+                    columnKey: annotation.name,
+                    displayValue: annotation.extractFromFile(file),
+                    width: columnWidths[annotation.name] || 1 / annotations.length,
+                }))}
+                rowIdentifier={{ index, id: file.uid }}
+                onSelect={onSelect}
+            />
         );
+    } else {
+        // Unable to convince FluentUI to style the shimmer wave pattern accurately
+        // with pure css so have to rely on extracting the colors from the global document
+        // here and then applying them directly
+        const globalStyle = getComputedStyle(document.body);
+        const shimmerColors: IShimmerColors = {
+            background: globalStyle.getPropertyValue("--primary-dark"),
+            shimmer: globalStyle.getPropertyValue("--primary-dark"),
+            shimmerWave: globalStyle.getPropertyValue("--aqua"),
+        };
+        content = <Shimmer className={styles.shimmer} shimmerColors={shimmerColors} />;
     }
-    // Unable to convince FluentUI to style the shimmer wave pattern accurately
-    // with pure css so have to rely on extracting the colors from the global document
-    // here and then applying them directly
-    const globalStyle = getComputedStyle(document.body);
-    const shimmerColors: IShimmerColors = {
-        background: globalStyle.getPropertyValue("--primary-dark"),
-        shimmer: globalStyle.getPropertyValue("--primary-dark"),
-        shimmerWave: globalStyle.getPropertyValue("--aqua"),
-    };
 
     return (
         <div
@@ -88,13 +97,7 @@ export default function LazilyRenderedRow(props: LazilyRenderedRowProps) {
             }}
             onContextMenu={onContextMenu}
         >
-            <Shimmer
-                className={classNames({ [styles.shimmer]: !file })}
-                isDataLoaded={!!file}
-                shimmerColors={shimmerColors}
-            >
-                {content}
-            </Shimmer>
+            {content}
         </div>
     );
 }