The visualization dashboard is a modular component that will take in an Explanation Object from any Explainer and visualize the results. This folder contains the Typescript code that will later be rendered into a Jupyter Widget.
The dashboard uses Typescript and React as it's main language and framework. NPM is the package management system that will be used throughout this document, but other package management systems can be used.
The dashboard currently uses Office UI Fabric and mlchartlib for development.
The source code is broken into localization and MLIDashboard. Localization is used as to display the static strings in the dashboard to different languages, while MLIDashboard houses the Typescript code for functionality.
The dashboard is then broken down into controls and interfaces. The control folder contains the components used in the dashboard while the interfaces provides the skeleton structure for the data needed to be passed into the component.
The dashboard uses SCSS for styling. Flexbox is used to setup the layout of the dashboard.
Before testing in the widget, the dashboard can be tested locally by running the following commands.
- from interpret-community-text/visualization/dashboard
npm run-script build npm run-script build-css
- from interpret-community-text/visualization/test
npm run-script build npm start
This will open up a local web app which will display the dashboard. Then, the dashboard can be converted into an ipywidget and be rendered in a Jupyter Notebook.
The README in the widget folder describes the contract between the Python API and Explanation Dashboard. It also details how to build and compile the dashboard in widget form.