https://github.com/internetarchive/wayback-diff
React components to render differences between captures at the Wayback Machine
https://github.com/internetarchive/wayback-diff
Last synced: 8 months ago
JSON representation
React components to render differences between captures at the Wayback Machine
- Host: GitHub
- URL: https://github.com/internetarchive/wayback-diff
- Owner: internetarchive
- License: gpl-3.0
- Created: 2018-08-24T18:38:20.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2025-04-29T06:23:00.000Z (9 months ago)
- Last Synced: 2025-04-29T07:34:24.058Z (9 months ago)
- Language: JavaScript
- Homepage:
- Size: 14.3 MB
- Stars: 33
- Watchers: 19
- Forks: 8
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Wayback-diff
This React project is a fork of [EDGI](https://envirodatagov.org/)'s [web-monitoring-ui](https://github.com/edgi-govdata-archiving/web-monitoring-ui) project to enable analysts to quickly assess changes to monitored government websites.
It works with EDGI's [web-monitoring-processing](https://github.com/edgi-govdata-archiving/web-monitoring-processing) server and the Internet Archive's [Wayback Machine](https://web.archive.org) to render the differences between two captures of the same web page.
In addition, this project contains a `Sunburst` component to illustrate the differences of a web page capture
compared to other captures for the same year at the Wayback Machine.
##### Table of Contents
[Installation and Requirements](#inst)
[Usage](#usage)
[Build the project](#build)
## Installation and Requirements
Install node dependencies with: `yarn install`
[web-monitoring-processing](https://github.com/edgi-govdata-archiving/web-monitoring-processing) server must be running with CORS mechanism enabled.
This component uses Bootstrap 3, so make sure to include it in your entry point HTML document.
You need to have a CORS-enabled browser for this component to work stand alone.
## Usage
Run the server with: `yarn start`
There are three types of URL calls:
**1)**
> http://localhost:port(default 3000)/diff/WEBSITE
Example request: http://localhost:3000/diff/iskme.org
**2)**
> http://localhost:port(default 3000)/diff/TIMESTAMP_A/TIMESTAMP_B/WEBSITE
Example request: http://localhost:3000/diff/20170223193029/20171212125810/archive.org
**3)**
> http://localhost:port(default 3000)/diagram/WEBPAGE/YEAR/TIMESTAMP/
Example request: http://localhost:3000/diagram/iskme.org/2018/20180813072115
#### Props
##### DiffContainer can receive up to eight props. All of them are optional.
The **conf** prop receives a JSON file that contains the configuration of the wayback-diff component.
- If null is passed to either one of the fetchCallback props a default fallback method is going to be used instead.
- The callback function should return a fetch Promise.
If you use this prop, the **limit** conf option does not have any effect.
The **loader** prop is a React Component that displays when loading. If this is not set or it is null, a default loader is used instead.
The **timestampA** and **timestampB** props are the timestamps extracted from the URL.
The **url** prop is the webpage for which the snapshots are shown.
The **noTimestamps** prop which should only be set to true in the ```/diff///WEBPAGE``` path schema.
##### SunburstContainer can receive up to five props. All of them are optional.
The **loader** prop is a React Component that displays when loading. If this is not set or it is null, a default loader is used instead.
The **timestamp** which is the timestamp whose simhash is compared to others.
The **url** which is the webpage for which the the simhashes to be compared.
The **conf** which is a JSON file that contains the configuration of the wayback-diff component.
- If null is passed to either one of the fetchCallback props a default fallback method is going to be used instead.
- The callback function should return a fetch Promise.
##### conf.json
The configuration file should have the following format:
```
{
"webMonitoringProcessingURL": "http://localhost:8888",
"limit": "1000",
"snapshotsPrefix": "http://web.archive.org/web/",
"urlPrefix": "/diff/",
"diffgraphPrefix": "/diffgraph/",
"cdxServer": "http://web.archive.org/cdx/",
"sparklineURL": "http://web.archive.org/__wb/sparkline",
"waybackDiscoverDiff": "http://localhost:4000",
"maxSunburstLevelLength": "70",
"compressedSimhash": true
}
```
## Build the project
Run `yarn build:dev`
### Install the library
To install the component library, inside your new project directory you should run:
```
yarn add file:[PATH_TO]/wayback-diff
```
where [PATH_TO] equals with the path where you have wayback-diff saved.
If you are installing this component as a library from this Github repository:
```
yarn add https://github.com/ftsalamp/wayback-diff
```
### Import the component
In the file you want to use the wayback-diff component use the following code to import it:
```Javascript
import {DiffContainer, SunburstContainer} from 'wayback-diff';
```
### Use the component
After importing the component you might use it like any other React component:
```Javascript
} />
} />
} />
} />
}
/>
}
/>
}/>
```
### Example project
If you need an example on how to use the component check out [this repository](https://github.com/ftsalamp/wayback-diff-test)