A toolkit for building, hosting and deploying widgets that visualise LibP2P Introspection data.
To get started locally, first, clone the repo, and run yarn install
. The UI can then be deployed and connected to a data source:
Run npm run start:app
to run a dev build of the app
package, containing a catalogue UI for browsing built-in React widgets and connecting these to a data source.
When the UI is loaded, three types of data sources are available:
Pre-made data samples are provided to show how the UI works. They can be loaded using the Sample data
button and selecting one of the datasets.
Just like the pre-made samples, it's possible to upload your own dataset. Compatible datasets can be exported using the UI's "Export data" button, and mock data files can be generated using the command npm run mock-file
with optional flags below.
To get live introspection data streaming into the UI, enter the websockets address of a LibP2P introspection server.
For example, if a LibP2P node is running an introspection server under introspect
on local port 12345, connect to ws://localhost:12345/introspect
.
If no active LibP2P introspection server is available, in addition to the built-in data samples there are two easy ways to obtain data:
To run generate mock data that simulates a LibP2P network with randomised activity, use one of these two commands, from either the repo root directory or the samples package:
npm run mock-sock
starts a mock data server on port 8080 that can be connected to via a websocket npm run mock-file
writes a mock data file that can be uploadedBoth accept several options to define certain aspects of the mock P2P network or output.
The LibP2P REPL provides a simple way to connect to real LibP2P activity:
/introspect
. For example, if My Info gave a listening address of 127.0.0.1/12345, connect to ws://127.0.0.1:12345/introspect
This is a Lerna monorepo, managed with Yarn Workspaces.
Each directory in the packages
directory is an independent package, published to NPM, installable and usable in projects. The packages can be grouped broadly into four types:
sdk
provides the core UI components and theming, shell
provides the UI for selecting and controlling data and catalogue
provides the UI for browsing and selecting widgetsconnections-table
, dht-buckets
, streams-table
, events-table
, streams-table
,create-widget
), performing common data operations in Node.js or a React build (data
), converting binary Protobuf messages to or from JavaScript (proto
), and generating or importing mock LibP2P Introspection data in protobuf format (samples
)app
that deploys a catalogue containing each example widget, and testing
utilities to aid testing widget components in Jest and Storybook.For more detail on packages and a more detailed overview, see the packages directory readme