diff --git a/packages/web/src/components/Home/FeatureOptions.ts b/packages/web/src/components/Home/FeatureOptions.ts deleted file mode 100644 index d891d4e0..00000000 --- a/packages/web/src/components/Home/FeatureOptions.ts +++ /dev/null @@ -1,135 +0,0 @@ -import AddDataSource from "./assets/Datasets/AddDataSource.png"; -import GroupedDataSources from "./assets/Datasets/GroupedDataSources.png"; -import LoadSource from "./assets/Datasets/LoadSource.png"; -import NewDataSourceColumns from "./assets/Datasets/NewDataSourceColumns.png"; -import SaveMetadataAs from "./assets/Datasets/SaveMetadataAs.png"; -import FilterColumn from "./assets/FindingData/FilterColumn.png"; -import FilterValue from "./assets/FindingData/FilterValue.png"; -import Group from "./assets/FindingData/Group.png"; -import Sort from "./assets/FindingData/Sort.png"; -import Thumbnail from "./assets/OmeZarr/Thumbnail.png"; -import Zarr from "./assets/OmeZarr/Zarr.png"; -import CodeSnippet from "./assets/Share/CodeSnippet.png"; -import Download from "./assets/Share/Download.png"; -import URL from "./assets/Share/URL.png"; -import ContextMenu from "./assets/Viewers/ContextMenu.png"; -import WebViewer from "./assets/Viewers/WebViewer.png"; - -interface Slide { - caption: string; // Caption above image - imgSrc: string; // Image src -} - -interface Feature { - id: number; - text: string; // Left menu - slides: Slide[]; // Right carousel -} - -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 by (Grouped by) the "Gene" and "Structure" 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.`, - }, - ], - }, - { - 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.", - }, - ], - }, - { - 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.", - }, - ], - }, - { - 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.'", - }, - ], - }, - { - 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[]; diff --git a/packages/web/src/components/Home/FeatureOptions/Datasets/AddDataSource.png b/packages/web/src/components/Home/FeatureOptions/Datasets/AddDataSource.png new file mode 100644 index 00000000..6a174ac2 Binary files /dev/null and b/packages/web/src/components/Home/FeatureOptions/Datasets/AddDataSource.png differ diff --git a/packages/web/src/components/Home/FeatureOptions/Datasets/GroupedDataSources.png b/packages/web/src/components/Home/FeatureOptions/Datasets/GroupedDataSources.png new file mode 100644 index 00000000..ebf8d715 Binary files /dev/null and b/packages/web/src/components/Home/FeatureOptions/Datasets/GroupedDataSources.png differ diff --git a/packages/web/src/components/Home/FeatureOptions/Datasets/LoadSource.png b/packages/web/src/components/Home/FeatureOptions/Datasets/LoadSource.png new file mode 100644 index 00000000..6ad8d781 Binary files /dev/null and b/packages/web/src/components/Home/FeatureOptions/Datasets/LoadSource.png differ diff --git a/packages/web/src/components/Home/FeatureOptions/Datasets/NewDataSourceColumns.png b/packages/web/src/components/Home/FeatureOptions/Datasets/NewDataSourceColumns.png new file mode 100644 index 00000000..45dfdafa Binary files /dev/null and b/packages/web/src/components/Home/FeatureOptions/Datasets/NewDataSourceColumns.png differ diff --git a/packages/web/src/components/Home/FeatureOptions/Datasets/SaveMetadataAs.png b/packages/web/src/components/Home/FeatureOptions/Datasets/SaveMetadataAs.png new file mode 100644 index 00000000..361e754d Binary files /dev/null and b/packages/web/src/components/Home/FeatureOptions/Datasets/SaveMetadataAs.png differ diff --git a/packages/web/src/components/Home/FeatureOptions/Datasets/index.ts b/packages/web/src/components/Home/FeatureOptions/Datasets/index.ts new file mode 100644 index 00000000..99499dff --- /dev/null +++ b/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; diff --git a/packages/web/src/components/Home/FeatureOptions/Feature.ts b/packages/web/src/components/Home/FeatureOptions/Feature.ts new file mode 100644 index 00000000..85d2b7bf --- /dev/null +++ b/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 +} diff --git a/packages/web/src/components/Home/FeatureOptions/FindingData/FilterColumn.png b/packages/web/src/components/Home/FeatureOptions/FindingData/FilterColumn.png new file mode 100644 index 00000000..bc90482d Binary files /dev/null and b/packages/web/src/components/Home/FeatureOptions/FindingData/FilterColumn.png differ diff --git a/packages/web/src/components/Home/FeatureOptions/FindingData/FilterValue.png b/packages/web/src/components/Home/FeatureOptions/FindingData/FilterValue.png new file mode 100644 index 00000000..c1132205 Binary files /dev/null and b/packages/web/src/components/Home/FeatureOptions/FindingData/FilterValue.png differ diff --git a/packages/web/src/components/Home/FeatureOptions/FindingData/Group.png b/packages/web/src/components/Home/FeatureOptions/FindingData/Group.png new file mode 100644 index 00000000..29326469 Binary files /dev/null and b/packages/web/src/components/Home/FeatureOptions/FindingData/Group.png differ diff --git a/packages/web/src/components/Home/FeatureOptions/FindingData/Sort.png b/packages/web/src/components/Home/FeatureOptions/FindingData/Sort.png new file mode 100644 index 00000000..a3a9615a Binary files /dev/null and b/packages/web/src/components/Home/FeatureOptions/FindingData/Sort.png differ diff --git a/packages/web/src/components/Home/FeatureOptions/FindingData/index.ts b/packages/web/src/components/Home/FeatureOptions/FindingData/index.ts new file mode 100644 index 00000000..7e24a906 --- /dev/null +++ b/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; diff --git a/packages/web/src/components/Home/FeatureOptions/OmeZarr/Thumbnail.png b/packages/web/src/components/Home/FeatureOptions/OmeZarr/Thumbnail.png new file mode 100644 index 00000000..0e21d178 Binary files /dev/null and b/packages/web/src/components/Home/FeatureOptions/OmeZarr/Thumbnail.png differ diff --git a/packages/web/src/components/Home/FeatureOptions/OmeZarr/Zarr.png b/packages/web/src/components/Home/FeatureOptions/OmeZarr/Zarr.png new file mode 100644 index 00000000..2e7f67b5 Binary files /dev/null and b/packages/web/src/components/Home/FeatureOptions/OmeZarr/Zarr.png differ diff --git a/packages/web/src/components/Home/FeatureOptions/OmeZarr/index.ts b/packages/web/src/components/Home/FeatureOptions/OmeZarr/index.ts new file mode 100644 index 00000000..aff5ca4a --- /dev/null +++ b/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; diff --git a/packages/web/src/components/Home/FeatureOptions/Share/CodeSnippet.png b/packages/web/src/components/Home/FeatureOptions/Share/CodeSnippet.png new file mode 100644 index 00000000..bab89bc9 Binary files /dev/null and b/packages/web/src/components/Home/FeatureOptions/Share/CodeSnippet.png differ diff --git a/packages/web/src/components/Home/FeatureOptions/Share/Download.png b/packages/web/src/components/Home/FeatureOptions/Share/Download.png new file mode 100644 index 00000000..1f9687a6 Binary files /dev/null and b/packages/web/src/components/Home/FeatureOptions/Share/Download.png differ diff --git a/packages/web/src/components/Home/FeatureOptions/Share/URL.png b/packages/web/src/components/Home/FeatureOptions/Share/URL.png new file mode 100644 index 00000000..5937877f Binary files /dev/null and b/packages/web/src/components/Home/FeatureOptions/Share/URL.png differ diff --git a/packages/web/src/components/Home/FeatureOptions/Share/index.ts b/packages/web/src/components/Home/FeatureOptions/Share/index.ts new file mode 100644 index 00000000..576c78f1 --- /dev/null +++ b/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; diff --git a/packages/web/src/components/Home/FeatureOptions/Viewers/ContextMenu.png b/packages/web/src/components/Home/FeatureOptions/Viewers/ContextMenu.png new file mode 100644 index 00000000..d3017236 Binary files /dev/null and b/packages/web/src/components/Home/FeatureOptions/Viewers/ContextMenu.png differ diff --git a/packages/web/src/components/Home/FeatureOptions/Viewers/WebViewer.png b/packages/web/src/components/Home/FeatureOptions/Viewers/WebViewer.png new file mode 100644 index 00000000..ce9a7bcf Binary files /dev/null and b/packages/web/src/components/Home/FeatureOptions/Viewers/WebViewer.png differ diff --git a/packages/web/src/components/Home/FeatureOptions/Viewers/index.ts b/packages/web/src/components/Home/FeatureOptions/Viewers/index.ts new file mode 100644 index 00000000..53370cf8 --- /dev/null +++ b/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; diff --git a/packages/web/src/components/Home/FeatureOptions/index.ts b/packages/web/src/components/Home/FeatureOptions/index.ts new file mode 100644 index 00000000..57f15b1a --- /dev/null +++ b/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]; diff --git a/packages/web/src/components/Home/assets/Datasets/AddDataSource.png b/packages/web/src/components/Home/assets/Datasets/AddDataSource.png deleted file mode 100644 index 37345fe1..00000000 Binary files a/packages/web/src/components/Home/assets/Datasets/AddDataSource.png and /dev/null differ diff --git a/packages/web/src/components/Home/assets/Datasets/GroupedDataSources.png b/packages/web/src/components/Home/assets/Datasets/GroupedDataSources.png deleted file mode 100644 index 7f725c73..00000000 Binary files a/packages/web/src/components/Home/assets/Datasets/GroupedDataSources.png and /dev/null differ diff --git a/packages/web/src/components/Home/assets/Datasets/LoadSource.png b/packages/web/src/components/Home/assets/Datasets/LoadSource.png deleted file mode 100644 index 0f2087ff..00000000 Binary files a/packages/web/src/components/Home/assets/Datasets/LoadSource.png and /dev/null differ diff --git a/packages/web/src/components/Home/assets/Datasets/NewDataSourceColumns.png b/packages/web/src/components/Home/assets/Datasets/NewDataSourceColumns.png deleted file mode 100644 index 37e2a4db..00000000 Binary files a/packages/web/src/components/Home/assets/Datasets/NewDataSourceColumns.png and /dev/null differ diff --git a/packages/web/src/components/Home/assets/Datasets/SaveMetadataAs.png b/packages/web/src/components/Home/assets/Datasets/SaveMetadataAs.png deleted file mode 100644 index 468be0b3..00000000 Binary files a/packages/web/src/components/Home/assets/Datasets/SaveMetadataAs.png and /dev/null differ diff --git a/packages/web/src/components/Home/assets/FindingData/FilterColumn.png b/packages/web/src/components/Home/assets/FindingData/FilterColumn.png deleted file mode 100644 index f7962640..00000000 Binary files a/packages/web/src/components/Home/assets/FindingData/FilterColumn.png and /dev/null differ diff --git a/packages/web/src/components/Home/assets/FindingData/FilterValue.png b/packages/web/src/components/Home/assets/FindingData/FilterValue.png deleted file mode 100644 index 883c41de..00000000 Binary files a/packages/web/src/components/Home/assets/FindingData/FilterValue.png and /dev/null differ diff --git a/packages/web/src/components/Home/assets/FindingData/Group.png b/packages/web/src/components/Home/assets/FindingData/Group.png deleted file mode 100644 index 6b452a27..00000000 Binary files a/packages/web/src/components/Home/assets/FindingData/Group.png and /dev/null differ diff --git a/packages/web/src/components/Home/assets/FindingData/Sort.png b/packages/web/src/components/Home/assets/FindingData/Sort.png deleted file mode 100644 index dd751579..00000000 Binary files a/packages/web/src/components/Home/assets/FindingData/Sort.png and /dev/null differ diff --git a/packages/web/src/components/Home/assets/OmeZarr/Thumbnail.png b/packages/web/src/components/Home/assets/OmeZarr/Thumbnail.png deleted file mode 100644 index 05dc6a98..00000000 Binary files a/packages/web/src/components/Home/assets/OmeZarr/Thumbnail.png and /dev/null differ diff --git a/packages/web/src/components/Home/assets/OmeZarr/Zarr.png b/packages/web/src/components/Home/assets/OmeZarr/Zarr.png deleted file mode 100644 index b63c2f63..00000000 Binary files a/packages/web/src/components/Home/assets/OmeZarr/Zarr.png and /dev/null differ diff --git a/packages/web/src/components/Home/assets/Share/CodeSnippet.png b/packages/web/src/components/Home/assets/Share/CodeSnippet.png deleted file mode 100644 index 4161000b..00000000 Binary files a/packages/web/src/components/Home/assets/Share/CodeSnippet.png and /dev/null differ diff --git a/packages/web/src/components/Home/assets/Share/Download.png b/packages/web/src/components/Home/assets/Share/Download.png deleted file mode 100644 index 2a0cf64b..00000000 Binary files a/packages/web/src/components/Home/assets/Share/Download.png and /dev/null differ diff --git a/packages/web/src/components/Home/assets/Share/URL.png b/packages/web/src/components/Home/assets/Share/URL.png deleted file mode 100644 index f6c3bc98..00000000 Binary files a/packages/web/src/components/Home/assets/Share/URL.png and /dev/null differ diff --git a/packages/web/src/components/Home/assets/Viewers/ContextMenu.png b/packages/web/src/components/Home/assets/Viewers/ContextMenu.png deleted file mode 100644 index 92830bb7..00000000 Binary files a/packages/web/src/components/Home/assets/Viewers/ContextMenu.png and /dev/null differ diff --git a/packages/web/src/components/Home/assets/Viewers/WebViewer.png b/packages/web/src/components/Home/assets/Viewers/WebViewer.png deleted file mode 100644 index 2f90d5ec..00000000 Binary files a/packages/web/src/components/Home/assets/Viewers/WebViewer.png and /dev/null differ