From 92d9ee50f84bc404862295e2bdb9e3b9aaf99bdf Mon Sep 17 00:00:00 2001 From: Axel Bocciarelli Date: Tue, 26 Apr 2022 16:27:56 +0200 Subject: [PATCH] Add demos homepage --- README.md | 29 +++--- apps/demo/package.json | 1 + apps/demo/src/DemoApp.tsx | 6 +- apps/demo/src/Home.module.css | 155 ++++++++++++++++++++++++++++ apps/demo/src/Home.tsx | 184 ++++++++++++++++++++++++++++++++++ packages/app/README.md | 2 +- pnpm-lock.yaml | 2 + 7 files changed, 362 insertions(+), 17 deletions(-) create mode 100644 apps/demo/src/Home.module.css create mode 100644 apps/demo/src/Home.tsx diff --git a/README.md b/README.md index 69a252941..ec4a4156c 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # H5Web: React components for data visualization and exploration -[![Demo](https://img.shields.io/website?down_message=offline&label=demo&up_message=online&url=https%3A%2F%2Fh5web.panosc.eu%2F)](https://h5web.panosc.eu/) +[![Demos](https://img.shields.io/website?down_message=offline&label=demo&up_message=online&url=https%3A%2F%2Fh5web.panosc.eu%2F)](https://h5web.panosc.eu/) H5Web is a collection of React components to visualize and explore data. It consists of three packages: @@ -69,23 +69,24 @@ visualizations. Several demos are available, one per data provider: ### [H5Grove](https://github.com/silx-kit/h5grove) -This demo is available at https://h5web.panosc.eu. +This demo is available at https://h5web.panosc.eu/h5grove. The following HDF5 files can be reached with a URL of the form -`https://h5web.panosc.eu/?file=`: +`https://h5web.panosc.eu/h5grove?file=`: -- [`water_224.h5`](https://h5web.panosc.eu/) (**default**): A typical NeXus file - with various real-world datasets to demonstrate the visualizations. -- [`compressed.h5`](https://h5web.panosc.eu/?file=compressed.h5): A file with - datasets compressed with various filters to test decompression. -- [`epics.h5`](https://h5web.panosc.eu/?file=epics.h5): A test file from +- [`water_224.h5`](https://h5web.panosc.eu/h5grove) (**default**): A typical + NeXus file with various real-world datasets to demonstrate the visualizations. +- [`compressed.h5`](https://h5web.panosc.eu/h5grove?file=compressed.h5): A file + with datasets compressed with various filters to test decompression. +- [`epics.h5`](https://h5web.panosc.eu/h5grove?file=epics.h5): A test file from [EPICS](https://epics.anl.gov/) group (Argonne national lab). -- [`grove.h5`](https://h5web.panosc.eu/?file=grove.h5): A file used to test the - provider. It contains datasets with NaN/Infinity values, booleans, complexes - and other types of datasets such as RGB images and 4D stacks. -- [`links.h5`](https://h5web.panosc.eu/?file=links.h5): A file with external - links, soft links and a virtual dataset to test link resolution. -- [`tall.h5`](https://h5web.panosc.eu/?file=tall.h5): The demo file of HSDS. +- [`grove.h5`](https://h5web.panosc.eu/h5grove?file=grove.h5): A file used to + test the provider. It contains datasets with NaN/Infinity values, booleans, + complexes and other types of datasets such as RGB images and 4D stacks. +- [`links.h5`](https://h5web.panosc.eu/h5grove?file=links.h5): A file with + external links, soft links and a virtual dataset to test link resolution. +- [`tall.h5`](https://h5web.panosc.eu/h5grove?file=tall.h5): The demo file of + HSDS. ### [HSDS](https://github.com/HDFGroup/hsds) diff --git a/apps/demo/package.json b/apps/demo/package.json index 976120785..183541235 100644 --- a/apps/demo/package.json +++ b/apps/demo/package.json @@ -27,6 +27,7 @@ "react": "17.0.2", "react-dom": "17.0.2", "react-dropzone": "12.0.5", + "react-icons": "4.3.1", "react-router-dom": "6.2.1" }, "devDependencies": { diff --git a/apps/demo/src/DemoApp.tsx b/apps/demo/src/DemoApp.tsx index 380baac03..6d0a8d284 100644 --- a/apps/demo/src/DemoApp.tsx +++ b/apps/demo/src/DemoApp.tsx @@ -6,6 +6,7 @@ import { } from 'react-router-dom'; import H5GroveApp from './H5GroveApp'; +import Home from './Home'; import HsdsApp from './HsdsApp'; import MockApp from './MockApp'; import H5WasmApp from './h5wasm/H5WasmApp'; @@ -14,11 +15,12 @@ function DemoApp() { return ( - } /> + } /> + } /> } /> } /> } /> - } /> + } /> ); diff --git a/apps/demo/src/Home.module.css b/apps/demo/src/Home.module.css new file mode 100644 index 000000000..6fed09442 --- /dev/null +++ b/apps/demo/src/Home.module.css @@ -0,0 +1,155 @@ +.root { + font-size: 1.125em; + line-height: 1.5; +} + +.header { + background-color: var(--primary-bg); +} + +.max { + margin: 0 auto; + padding: 0 1.5em; +} + +.header > .max { + padding-top: 3em; + padding-bottom: 3em; +} + +.title { + font-size: 2em; + font-weight: 300; + margin: 0; +} + +.intro { + margin: 0.5em 0 0.75em; +} + +.intro > span { + white-space: nowrap; +} + +.cta { + display: flex; +} + +.ctaBtn { + text-decoration: none; + background-color: var(--primary); + margin-right: 0.5em; + padding: 0.5em 1em; + border-radius: 0.75em 0.25em; + color: inherit; +} + +.ctaBtn:hover, +.ctaBtn:focus-visible { + background-color: var(--secondary); +} + +.ctaBtn:hover { + text-decoration: underline; +} + +.demos { + margin-bottom: 3em; +} + +.demos h2 { + margin-top: 1.5em; +} + +.demos a:not(.demoLink):hover, +.demos a:not(.demoLink):focus-visible { + text-decoration: none; +} + +.demoLink { + display: inline-flex; + align-items: center; + color: var(--primary-dark); + text-decoration: none; +} + +.demoLink:hover, +.demoLink:focus-visible { + color: var(--secondary-dark); +} + +.demoLink:hover { + text-decoration: underline; +} + +.demoLink > svg { + margin-left: 0.25em; +} + +.demoContext { + padding-left: 1em; + border-left: 5px solid var(--secondary-bg); + color: var(--secondary-dark); + font-style: italic; +} + +.demoContext > a { + color: inherit; +} + +.demoFiles { + font-size: 0.875em; +} + +@media (min-width: 40em) { + .max { + max-width: 45em; + padding: 0 2em; + } + + .title { + font-size: 3em; + } + + .intro { + font-size: 1.25em; + } +} + +@media (min-width: 70em) { + .root { + font-size: 1.25em; + } + + .max { + max-width: 90em; + padding: 0 3em; + } + + .title { + font-size: 4em; + } + + .intro { + font-size: 1.5em; + font-weight: 300; + } + + .ctaBtn { + margin-right: 0.75em; + } + + .demos { + display: grid; + grid-template-columns: 1fr 1fr; + padding-top: 1.5em; + } + + .demos > section:nth-child(odd) { + padding-right: 2.5em; + } + + .demos > section:nth-child(even) { + padding-left: 2.5em; + } +} diff --git a/apps/demo/src/Home.tsx b/apps/demo/src/Home.tsx new file mode 100644 index 000000000..2d21165f9 --- /dev/null +++ b/apps/demo/src/Home.tsx @@ -0,0 +1,184 @@ +import { FiChevronsRight } from 'react-icons/fi'; +import { Link } from 'react-router-dom'; + +import styles from './Home.module.css'; + +function Home() { + return ( +
+
+
+

+ Welcome to H5Web +

+

+ Explore and visualize data stored in HDF5 files.{' '} + Try out our demos below! +

+ +
+
+
+
+
+

+ + H5Grove + +

+

+ + h5grove + {' '} + is a Python package that helps design back-end solutions to serve + HDF5 file contents (data, metadata, attributes). +

+

+ This demo of H5Web communicates with a basic H5Grove server + implementation. The following HDF5 files are available: +

+
    +
  • + + water_224.h5 + {' '} + (default) - a typical NeXus file with various real-world + datasets to demonstrate H5Web's core visualizations. +
    • +
  • + compressed.h5 - a + file with datasets compressed with various filters to test + decompression. +
    • +
  • + epics.h5 - a test file + from the{' '} + + + EPICS + + {' '} + group (Argonne National Laboratory). +
    • +
  • + grove.h5 - a file used + to test the H5GroveProvider provider; it contains + datasets with NaN, Infinity, boolean + and complex values, as well as RGB images and 4D stacks. +
    • +
  • + links.h5 - a file with + external links, soft links and a virtual dataset to test link + resolution. +
    • +
  • + tall.h5 - the demo file + of HSDS. +
    • +
+
+
+

+ + H5Wasm + +

+

+ + h5wasm + {' '} + is a WebAssembly-powered library, based on the{' '} + + HDF5 C API + + , for reading and writing HDF5 files from JavaScript. +

+

+ This demo allows you to open any HDF5 files on + your computer with H5Web. Note that if your files contain external + links, they will not be resolved. +

+
+
+

+ + HSDS + +

+

+ + HSDS + {' '} + is a back-end solution specialised in serving HDF5 files from + object storage (AWS S3, Azure Blob Storage, or OpenIO). +

+

+ This demo communicates with an HSDS test server, which serves the + same files as the H5Grove demo above:{' '} + water_224.h5 (default),{' '} + compressed.h5 (note that + bitshuffle is not yet supported by HSDS),{' '} + epics.h5,{' '} + grove.h5,{' '} + links.h5,{' '} + tall.h5. +

+
+
+

+ + Mock data + +

+

+ This demo is used for development and automated testing purposes. + It provides a good overview of H5Web's functionalities, including + the core visualizations and their toolbars, slicing and mapping of + nD datasets, NeXus visualizations and default plot detection, RGB + images, error handling, loading state, etc. +

+
+
+
+
+ ); +} + +export default Home; diff --git a/packages/app/README.md b/packages/app/README.md index dd9324e19..b8e5a20ba 100644 --- a/packages/app/README.md +++ b/packages/app/README.md @@ -1,6 +1,6 @@ # H5Web App & Providers -[![Demo](https://img.shields.io/website?down_message=offline&label=demo&up_message=online&url=https%3A%2F%2Fh5web.panosc.eu%2F)](https://h5web.panosc.eu/) +[![Demos](https://img.shields.io/website?down_message=offline&label=demo&up_message=online&url=https%3A%2F%2Fh5web.panosc.eu%2F)](https://h5web.panosc.eu/) [![Version](https://img.shields.io/npm/v/@h5web/app)](https://www.npmjs.com/package/@h5web/app) [H5Web](https://github.com/silx-kit/h5web) is a collection of React components diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6b0297bda..6cd2db624 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -56,6 +56,7 @@ importers: react: 17.0.2 react-dom: 17.0.2 react-dropzone: 12.0.5 + react-icons: 4.3.1 react-router-dom: 6.2.1 typescript: 4.5.5 vite: 2.8.4 @@ -67,6 +68,7 @@ importers: react: 17.0.2 react-dom: 17.0.2_react@17.0.2 react-dropzone: 12.0.5_react@17.0.2 + react-icons: 4.3.1_react@17.0.2 react-router-dom: 6.2.1_react-dom@17.0.2+react@17.0.2 devDependencies: '@types/react': 17.0.39