https://github.com/internetarchive/iare
An interactive IARI JSON viewer
https://github.com/internetarchive/iare
Last synced: 8 months ago
JSON representation
An interactive IARI JSON viewer
- Host: GitHub
- URL: https://github.com/internetarchive/iare
- Owner: internetarchive
- License: agpl-3.0
- Created: 2023-03-03T16:19:27.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-02-26T09:25:56.000Z (11 months ago)
- Last Synced: 2025-03-31T11:51:14.515Z (10 months ago)
- Language: JavaScript
- Homepage:
- Size: 12.8 MB
- Stars: 5
- Watchers: 15
- Forks: 5
- Open Issues: 35
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Internet Archive Reference Explorer (IARE) App
_This document is under development._
This project uses the React.js framework.
## Development Scripts
Builds are accomplished with standard node/React scripts.
From the project directory:
### `npm start`
Runs the IARE app in development mode.\
Open [http://localhost:3000](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.
### `npm run build`
Builds a production IARE app to the project's `build` folder.\
The build is minified and ready to be deployed for testing purposes.
## Automatic deployment
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/
```
## Deploy in Docker
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
## Under the Hood
### General Coding Notes
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.
#### Warning!
You cannot use "ref" as a component parameter 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!
### External components used
* ReactTooltip / react-tooltip
* Chart.js
* react-chartjs-2
* chart.js/helpers
* chart.js options
* chartjs-plugin-datalabels
### React Component Architecture
When page data is received from the fetch, it is rendered with the src/components/PageDisplay component, eventually resolving to the src/components/v2/PageDisplayV2 component for typical wiki pages.
The PageDisplayV2 contains the PageInfo component (which displays some top-level page retrieval information) and the PageData component, which does the actual work of displaying the retrieved page data.
```
```
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.
#### The PageData component
```
// displays while data is being fetched
One of the following views is displayed, showing the information in different ways:
/>
/>
```
#### UrlDisplay
```
```
#### UrlOverview
Contains the graphs and charts depicting URL statistics. Clicking on these charts produces a filter upon the URL List (represented by UrlFlock)
#### FldDisplay
_(Fld is the legacy moniker for "First Level Domain". It just means the Domains view)_:
```
```
#### RefDisplay
```
```
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".
### Filter / Flock Architecture
TBD
## Bugs and Features
### GitHub Issues
https://github.com/internetarchive/iare/issues