This document is under development.
This project uses the React.js framework.
Builds are accomplished with standard node/React scripts.
From the project directory:
Runs the IARE app in development mode.
Open http://localhost:3000 to view it in your browser.
Changes made in the source code automatically reloads the page.
Any lint errors found during compilation are shown in the console.
Builds a production IARE app to the project's build folder.
The build is minified and ready to be deployed for testing purposes.
Whenever a new commit is uploaded to the IARE repo, a GitHub Action is automatically performed that creates a production-ready version of the IARE app, and made available at the address:
https://internetarchive.github.io/iare/
Build a deployment Docker image:
$ docker image build -t iare .
Run a container from the newly built image:
$ docker container run --rm -it -p 3000:3000 iare
If you are running this locally, you casn open the application in a web browser at http://localhost:3000
Throughout the code you may see "NB ..." in a comment. NB stands for "Nota Bene", meaning "note well" in latin, and is used to call out certain aspects in the code worth calling out. See https://en.wikipedia.org/wiki/Nota_bene.
You cannot use "ref" as a component variable name in a react javascript project - it will give you strange errors. If you need to use a variable to represent a reference, use "_ref"...I found this out the hard way!
- ReactTooltip / react-tooltip
- Chart.js
- react-chartjs-2
- chart.js/helpers
- chart.js options
- chartjs-plugin-datalabels
When page article data is first received from the fetch, it is rendered with the src/PageDisplay component, eventually resolving to the src/v2/PageDisplayV2 component for typical wiki pages.
The PageDisplayV2 contains the PageInfo component, to display some top-level information about the page retrieval, and the PageData component, which does the actual work of showing the retrieved page data.
<PageDisplayV2>
<PageInfo pageData={pageData} />
<PageData pageData={pageData} />
Within the PageData component, the raw data is massaged and decorated with anything needed for further rendering. These decorationg actions include:
- fetching the status code of all the URLs
- transforming the references so that they can be filtered and displayed in a more comfortable manner.
<Loader/> // displays while data is being fetched
One of the following views is displayed, showing the information in different ways:
<FldDisplay pageData={pageData} />
<UrlDisplay pageData={pageData} <options> />
<RefDisplay pageData={pageData} <options> />
<UrlDisplay>
<UrlOverview>
<UrlFlock>
<RefFlock>
Contains the graphs and charts depicting URL statistics. Clicking on these charts produces a filter upon the URL List (represented by UrlFlock)
(Fld is the legacy moniker for "First Level Domain". It just means the Domains view):
<FldDisplay>
<FldFlock>
<RefFlock>
<RefDisplay>
<RefOverview>
<RefFlock>
You will notice that each display type includes the RefFlock component. This is because each view is essentially a grandiose filter for the list of references. The RefFlock component can display a list of references, and receive a filter definition "from the outside".
TBD