React Materials Cloud Band Structure Visualizer

A React component to visualize band structures and density of states (dos) on the Materials Cloud platform.

The BandsVisualizer component (only the folder src/lib) is published as a npm package, which can be installed via npm install mc-react-bands.

In order to use the library, the peer dependencies (see package.json) need to be installed separately in the consuming application. Additionally, the chart.js plugins need to be registered.

Basic usage is the following:

import BandsVisualizer from "mc-react-bands";

import si_bands from "./exampleData/si_bands.json";
import si_dos from "./exampleData/si_dos.json";

// Chart.js plugins need to be registered outside the library
import Chart from "chart.js/auto";
import zoomPlugin from "chartjs-plugin-zoom";
import annotationPlugin from "chartjs-plugin-annotation";
Chart.register(zoomPlugin);
Chart.register(annotationPlugin);

function App() {
  return (
    <BandsVisualizer
      bandsDataList={[si_bands]}
      dosData={si_dos}
    />
  );
}
export default App;

This repository also contains example usage in the src/App.jsx file. src/data contains the data format of the band and dos files.

The core of this app is based on jquery and chart.js.

Related repositories:

• https://github.com/osscar-org/widget-bandsplot (corresponding Jupyter widget)
• https://github.com/materialscloud-org/bands-widget (original, outdated version used in legacy Materials Cloud)

Development

For local development, and running the example, just install and run this repository:

npm install
npm run dev

Publishing a new version

To make a new version and publish to npm via GitHub Actions:

npm version major/minor/patch
git push --follow-tags