This package bundles the UI for SCT QC reports.
We use Vite for building, React to manage the DOM, and tailwind for styling. Typescript keeps our runtime errors to a minimum.
- Install npm and yarn
- Clone the repository
- In the repo, run
yarn - Run a development server with hot module replacement with
yarn dev. It'll print a link you can click or copy into your browser.
yarn build- Open the bundled index.html in your browser
:)- it'll live indist/
Since a main use case for QC reports is offline generation and viewing, and since modern browsers
don't trust filesystem resources without modifying the browser, we need a way to package
the built JS and CSS that doesn't trigger CORS errors. The original way this was done seems to be by
appending the <script> tags to the body with relative import paths like _assets/main.js.
Vite by default packages distributed JS and CSS the standard way, as minified modules. Lucky for us, there's already a great plugin that stuffs all the generated code into index.html. This, obviously, makes for a messy HTML file, but it has the advantage of living in a single file that we can distribute.
Running yarn build, you'll see something like
rendering chunks (1)...
Inlining: index-D6DutMGV.js
Inlining: style-CLOgedyW.css
as the plugin runs.
In order to add data to the report, simply overwrite datasets.js, which is a simple JS file that
populates window.SCT_QC_DATASETS with a JSON array of datasets. You can find a reference version in
public/datasets.js