Architecture¶
| UI | React 18, react-router-dom 6, Redux, MUI and react-bootstrap |
| Charts | recharts for area, bar and line charts, D3 for the force-directed graphs |
| Auth | AWS Amplify Auth against Cognito |
| Data | three public APIs, read in web workers; see APIs |
| Bundler | webpack, with build:prod and build:dev |
| Styles | scss, compiled separately with sass |
A static bundle¶
The application is a static bundle. It is compiled into static/, published to object
storage and served through a CDN; there is no server-side rendering and no application
server. Everything it displays comes from the three public APIs, called from the
reader's browser at runtime.
The JavaScript is compiled from JSX by Babel, with the presets in
jsx/.babelrc,
and bundled by webpack into a single content.js, per
jsx/webpack.config.js.
The JSX transform is the classic one, so <Foo /> compiles to
React.createElement(Foo) -- which is why every component file imports React, and
why the lint needs eslint-plugin-react to see those imports as used; see
Lint and hooks.
The stylesheet is compiled separately from
scss/style.scss,
which imports one partial per area of the site.
Web workers¶
API responses are parsed off the main thread. Each page hands the response to a worker
under
jsx/import/worker/,
one per stream or dataset, so a large month of records does not stall scrolling or the
charts while it is reduced to what they draw.
Configuration¶
Three files follow the same .replace pattern: a committed template holding
REPLACE-* tokens, and a real file that is gitignored.
| Template | Becomes | Holds |
|---|---|---|
jsx/aws-exports.js.replace |
jsx/aws-exports.js |
Cognito pool, client and region |
jsx/is_local.js.replace |
jsx/is_local.js |
whether this build is local |
deploy.replace |
deploy |
the identifiers the deploy script substitutes |
That is why a fresh clone has the templates but not the files. The templates are
exempted by name in
.gitignore,
because the globs that hide the generated files would otherwise hide the templates too
-- and a clone with no templates has nothing to build from.
The three API endpoints are not configuration. They are the same for every deployment,
and live in
jsx/import/general/api-url.js.