Revisiting the React UI

[danielballan]

Overview

Background

I dashed this together in 15 days, to have an accessible demonstration of Tiled's potential which I could use in a talk for a broad audience of scientists. At the time I had no React experience beyond reading a couple tutorials. I did a little cleanup afterward (mostly on the build system) but have not touched it much since.

There are some aspects that I think are good, but it needs a lot of work. Below I try to give context on what may be worth keeping and what should be overhauled.

Intended Scope

• A general-purpose interface to Tiled, for finding and previewing data
• A reference implementation for building domain- or workflow-specific web-based interfaces that load data from Tiled
• NOT a richly-featured data visualization UI
• NOT a data analysis platform

Developer Experience

• I started with create-react-app which was since deprecated. There might still be some detritus in the codebase from this, to be cleaned up.
• I switched to using vite for the build. I was specifically compelled by the really fast build times, enabling a nimble development process. As we've learned from DUTC trainings, a fast "iteration cycle" is key to keeping a good flow. I also like that the configuration is simple.
• I put significant effort into the build process. Crucially, pip install "tiled[server]" delivers a built React app with no need for the user (maybe a scientist with no JS experience) to install node and build the React app locally. The patterns in that build script come from prior art in the Jupyter ecosystem, which has done a lot to drive good patterns for mixed Python/JS architectures.
• We need unit tests (!) Use playwright to test the React app #704
• The linter configuration needs review. The code formatting is probably poor.
• The dependencies are stale and have some (low-grade, unexploitable) vulnerabilities
• Dependencies are not declared quite right Front end dependencies can move into devDependencies #345
• Some kind of state synchronization issue generates spurious requests: noise in the console and the server logs. Fix extraneous requests from UI #359

User Experience

• Some good things to mentioN:
  • use of lazy loading with a skeleton for fast page load times while data trickles in afterward
  • use of data grid for lazy-loading paginated access to data
  • breadcrumbs
• Nascent mechanism for customizing which metadata is displayed in the content views needs to be built out.

Major Features Missing

• Authentication is not yet supported by the UI, has been stalled for years Front End Authentication #350. Thus, the UI only works for unauthenticated access, such as on https://tiled-demo.blueskyproject.io/. Support for authentication is necessary to make the UI usable on https://tiled.nsls2.bnl.gov, which does not allow any unauthenticated access (beyond the landing page).
• Newer structure families (sparse, awkward, composite [removed]) are not well supported
• Sorting API is not exposed in the UI
• Search API is not exposed in the UI
• The UI provides no way to upload or register data—needs discussion
• The UI does not interact with Tiled's streaming WS interface at all