Implementation:Interpretml Interpret VisRenderer

Knowledge Sources	Interpretml Interpret
Domains	Visualization, React, JavaScript
Last Updated	2026-02-07 12:00 GMT

Overview

React-based visualization renderer that provides an interactive UI for selecting and displaying InterpretML explanation components, supporting Plotly charts, HTML iframes, Cytoscape graphs, and a dropdown selector.

Description

This module exports two components that form the core visualization layer for InterpretML explanations:

App component -- A React functional component that renders the full explanation viewer:

• Dropdown selector -- Uses react-select to build a dropdown from the explanation's selector data. Options include a "Summary" option (value -1) for the overall explanation, plus one option per specific instance showing up to 3 columns of data.
• Visualization rendering -- Based on the type field of the selected explanation, renders one of four visualization types:
  • "plotly" -- Renders interactive Plotly charts via react-plotly.js with auto-sizing and resize handling. Optionally displays help text with a "Learn more" link.
  • "html" -- Renders HTML content in a sandboxed iframe with allow-same-origin allow-scripts and no-referrer policy.
  • "cytoscape" -- Renders network/graph visualizations using react-cytoscapejs from JSON-encoded element, style, stylesheet, and layout data.
  • "none" -- Displays a "No Overall Graph" placeholder.
• Layout -- Uses a card-based layout with a header/body pattern for both the selector and the visualization area.

RenderApp function -- A helper that mounts the App component into a specified DOM element by ID, taking an explanations data object and an optional default selection value.

Usage

This module is compiled into the interpret-inline.js bundle and is used to render InterpretML explanations in Jupyter notebooks, dashboards, and standalone HTML exports. The explanations data structure is produced by InterpretML's Python explanation objects and contains selector metadata, overall figures, and per-instance specific figures.

Code Reference

Source Location

• Repository: Interpretml_Interpret
• File: shared/vis/src/index.js

Signature

const App = props => {
  // props.explanations: { name, selector: { columns, data }, overall, specific }
  // props.defaultSelectValue: number (default: -1)
  ...
};

const RenderApp = (elementId, explanations, defaultSelectValue = -1) => {
  const mountNode = document.getElementById(elementId);
  ReactDOM.render(
    <App explanations={explanations} defaultSelectValue={defaultSelectValue} />,
    mountNode
  );
};

export { App, RenderApp };

Import

import { App, RenderApp } from 'interpret-inline';

I/O Contract

Inputs

Name	Type	Required	Description
explanations	object	Yes	Explanation data containing name, selector, overall, and specific figures
explanations.name	string	Yes	Display name for the explanation
explanations.selector	object	Yes	Selector with columns (array of strings) and data (array of records)
explanations.overall	object	Yes	Overall summary figure with type and figure fields
explanations.specific	array	Yes	Array of per-instance explanations, each with type and figure fields
defaultSelectValue	number	No	Default selected option index (-1 for Summary, default: -1)
elementId	string	Yes	DOM element ID to mount the React app into (for RenderApp)

Outputs

Name	Type	Description
Rendered DOM	React element	Interactive visualization with dropdown selector and chart/graph display

Usage Examples

// Mount the visualization renderer into a DOM element
const explanations = {
  name: "EBM Global Explanation",
  selector: {
    columns: ["Feature", "Importance"],
    data: [
      {"Feature": "age", "Importance": 0.85},
      {"Feature": "income", "Importance": 0.72},
    ]
  },
  overall: {
    type: "plotly",
    figure: {
      data: [{x: ["age", "income"], y: [0.85, 0.72], type: "bar"}],
      layout: {title: "Feature Importances"}
    }
  },
  specific: [
    {
      type: "plotly",
      figure: {
        data: [{x: [0, 1, 2], y: [0.1, 0.5, 0.3], type: "scatter"}],
        layout: {title: "age"}
      }
    }
  ]
};

RenderApp("my-chart-container", explanations, -1);

Related Pages

• Interpretml_Interpret_StitchWidget -- Python widget backend that hosts visualizations in iframes
• Interpretml_Interpret_StitchWidget_TS -- TypeScript widget frontend that manages iframe communication
• Interpretml_Interpret_CI_Workflow -- CI workflow that builds the vis bundle