Merge pull request #309 from AllenInstitute/feature/replace-homepage-…

…images

Replace homepage images

packages/web/src/components/Home/FeatureOptions/Datasets/index.ts

@@ -0,0 +1,37 @@
+import AddDataSource from "./AddDataSource.png";
+import GroupedDataSources from "./GroupedDataSources.png";
+import LoadSource from "./LoadSource.png";
+import NewDataSourceColumns from "./NewDataSourceColumns.png";
+import SaveMetadataAs from "./SaveMetadataAs.png";
+import { Feature } from "../Feature";
+
+export default {
+    id: 2,
+    text: "Create or combine data sources",
+    slides: [
+        {
+            imgSrc: LoadSource,
+            caption:
+                "Data can be loaded from a CSV, Parquet, or JSON file. The data source must include a column that contains the file path to the data. The data source can be loaded from a URL or uploaded from your computer.",
+        },
+        {
+            imgSrc: AddDataSource,
+            caption: "Additional data sources can be added the same way as the first.",
+        },
+        {
+            imgSrc: GroupedDataSources,
+            caption:
+                'After you have added data, you can filter, group, and sort it. This screenshot shows an example of grouping by an automatically generated column, "Data source," which represents the source of each file.',
+        },
+        {
+            imgSrc: SaveMetadataAs,
+            caption:
+                'New data sources can be generated from any number of existing data sources (filtered or whole). Right-click your file selection, select "Save metadata as", and choose your preferred file format.',
+        },
+        {
+            imgSrc: NewDataSourceColumns,
+            caption:
+                "You will be prompted for the columns you would like to include in the resulting new data source.",
+        },
+    ],
+} as Feature;

packages/web/src/components/Home/FeatureOptions/Feature.ts

@@ -0,0 +1,10 @@
+interface Slide {
+    caption: string; // Caption above image
+    imgSrc: string; // Image src
+}
+
+export interface Feature {
+    id: number;
+    text: string; // Left menu
+    slides: Slide[]; // Right carousel
+}

packages/web/src/components/Home/FeatureOptions/FindingData/index.ts

@@ -0,0 +1,28 @@
+import FilterColumn from "./FilterColumn.png";
+import FilterValue from "./FilterValue.png";
+import Group from "./Group.png";
+import Sort from "./Sort.png";
+import { Feature } from "../Feature";
+
+export default {
+    id: 1,
+    text: "Find target files quickly",
+    slides: [
+        {
+            imgSrc: Group,
+            caption: `Unlike traditional file systems, BioFile Finder allows you to dynamically generate your folder structure based on the metadata of your files. In this screenshot, the files are organized (grouped) by the "Structure" and "Plate Barcode" columns found in the selected data source.`,
+        },
+        {
+            imgSrc: FilterColumn,
+            caption: "To filter, first select a column name...",
+        },
+        {
+            imgSrc: FilterValue,
+            caption: `...then select the desired values.`,
+        },
+        {
+            imgSrc: Sort,
+            caption: `Sort by clicking on the column header or the "Sort" button.`,
+        },
+    ],
+} as Feature;

packages/web/src/components/Home/FeatureOptions/OmeZarr/index.ts

@@ -0,0 +1,20 @@
+import Thumbnail from "./Thumbnail.png";
+import Zarr from "./Zarr.png";
+import { Feature } from "../Feature";
+
+export default {
+    id: 5,
+    text: "View OME.Zarr or pre-generated thumbnail previews of files instantly",
+    slides: [
+        {
+            imgSrc: Zarr,
+            caption:
+                "OME.Zarr files are a format for storing multi-dimensional arrays in a chunked, compressed, and efficient manner. BioFile Finder can read these files and preview them as thumbnails automatically.",
+        },
+        {
+            imgSrc: Thumbnail,
+            caption:
+                'For other file formats, BioFile Finder can render pre-generated thumbnails for quick previewing. To do so, in your CSV, Parquet, or JSON file, include a column that contains the file path to the thumbnail image named "Thumbnail"',
+        },
+    ],
+} as Feature;

packages/web/src/components/Home/FeatureOptions/Share/index.ts

@@ -0,0 +1,26 @@
+import CodeSnippet from "./CodeSnippet.png";
+import Download from "./Download.png";
+import URL from "./URL.png";
+import { Feature } from "../Feature";
+
+export default {
+    id: 4,
+    text: "Share via URL, code snippet, or download",
+    slides: [
+        {
+            imgSrc: URL,
+            caption:
+                "Your exact file selection (filters, groups, sorts, open folders) can be shared via URL. Anyone with the URL can see the same view as you, as long as the data source is accessible to them. Local files, for example, must be re-selected by the user.",
+        },
+        {
+            imgSrc: CodeSnippet,
+            caption:
+                "A code snippet can be generated that recreates your exact view (filters, groups, sorts) programmatically. This allows you to export or share your view to a Jupyter notebook.",
+        },
+        {
+            imgSrc: Download,
+            caption:
+                'You can also download files directly from BioFile Finder. Select the file(s) you want to download, right-click to open the context menu, and select "Download."',
+        },
+    ],
+} as Feature;

packages/web/src/components/Home/FeatureOptions/Viewers/index.ts

@@ -0,0 +1,20 @@
+import ContextMenu from "./ContextMenu.png";
+import WebViewer from "./WebViewer.png";
+import { Feature } from "../Feature";
+
+export default {
+    id: 3,
+    text: "Directly open images in a web-based viewer",
+    slides: [
+        {
+            imgSrc: ContextMenu,
+            caption:
+                'Right-click your file selection to open a context menu of external applications that can open the files. This example highlights the "3D Web Viewer," a free open source visualization tool also developed by AICS.',
+        },
+        {
+            imgSrc: WebViewer,
+            caption:
+                "This is that same file we were looking at in the context menu, now opened in the 3D Web Viewer instantly from BioFile Finder.",
+        },
+    ],
+} as Feature;

packages/web/src/components/Home/FeatureOptions/index.ts

@@ -0,0 +1,7 @@
+import OmeZarr from "./OmeZarr";
+import Share from "./Share";
+import Viewers from "./Viewers";
+import Datasets from "./Datasets";
+import FindingData from "./FindingData";
+
+export default [FindingData, Datasets, Viewers, Share, OmeZarr];