Each directory in this directory represents a lerna package. Yarn is configured to treat each package as a Yarn Workspace.
Each has its own package.json and node_modules directory, and its own dependencies.
Each is published to NPM as an independent package, with a name like @libp2p/observer-${name}. For example:
catalogueis published as@libp2p/observer-catalogueconnections-tableis published as@libp2p/observer-connections-tablecreate-widgetis the only exception to the pattern: for compatibility withyarn createandnpm init, it is published as@libp2p/create-observer-widget
When working locally, after running yarn install:
- All packages' dependencies are installed according to each package's
package.json. - Packages that have each other as dependencies reference each other using symlinks. This makes it easy to work on PRs and other units of work that require interdependent changes to multiple packages.
- Yarn "hoists" common dependencies to the root
node_modulesdirectory. This helps us ensure that, for example, the exact same versions of React and Styled Components are used everywhere, avoiding the errors that can occur if a build ends up using multiple versions of one of these dependencies.
packages/catalogue: React components, pages and routing for building browsable catalogues of libp2p Observer widgets based on a provided list of widgets.packages/sdk: A Software Development Kit consisting of a library of core components, hooks, theming and utilities used across all widgets and UI packages.packages/shell: React components comprising the common interface around an active widget, such as data timeline, data selection tools, settings and filter controls.
A "widget" is a React app based on the libp2p Observer SDK, for visualising libp2p Introspection data. Each widget is expected to run inside the libp2p Observer Shell and may be included in a libp2p Observer Catalogue.
packages/connections-tableAn interactive data table showing the connections observed at a user-selected point in time, including cumulative traffic, peer Ids, connection status and transports.packages/dht-bucketsA visualisation of live activity of peers on the DHT routing table. Currently on hold due to ongoing changes to the libp2p DHT model.packages/events-tableA configurable interactive data table showing incoming events in real time, based on provided data about known event types.packages/streams-tableA streams datatable added to demonstrate switching between visualizations in the catalogue.
packages/create-widget: Generates a new empty widget based on CLI input, and is compatible withnpm initandyarn create.packages/data: Helper functions for common operations on libp2p Introspection protobuf data.packages/proto: The definition and Javscript encoder/decoder of the protobuf used for libp2p introspection data, with utilities for bundling and unpacking the protobuf data alongside checksums and byte counts.packages/samples: Scripts for generating mock libp2p Introspection data, saved to a binary file or via a mock websocket server. Also includes a set of pre-generated sample files.
packages/app: A React app, based on Craco, which builds a demo libp2p Observer catalogue containing the widgets included in this repo.packages/testingUtilities for easing testing of React components, including scripts and fixtures for loading data in Jest and Storybook, and custom queries for react-testing-library.