Observable notebook's cells in independent React Components

Community Help
2

Here is an example rendering two Observable cells in a react grid.
The control cell can change stuff in the chart cell and the React grid makes the Observable cell dragable.

import React, { Component } from "react";
import GridLayout from "react-grid-layout";
import { Runtime, Inspector } from "./runtime.js";
import define from "./@maliky/notebook.js";

var runtime = new Runtime();

class MyFirstGrid extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    runtime.module(define, name => {
      if (name === "controles") {
        return Inspector.into("#controles")();
      }
      if (name === "chart-user-form-point") {
        return Inspector.into("#chart-user-form-point")();
      }
    });
  }
  render() {
    var layout = [
      { i: "a", x: 0, y: 0, w: 1, h: 2, static: true },
      { i: "b", x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 },
      { i: "c", x: 4, y: 0, w: 1, h: 2 }
    ];
    return (
      <GridLayout
        className="layout"
        layout={layout}
        cols={12}
        rowHeight={30}
        width={1200}
      >
        <div key="a">First Grid</div>
        <div key="b" id="controles">
          b
        </div>
        <div key="c" id="chart-user-form-point">
          c
        </div>
      </GridLayout>
    );
  }
}

export default MyFirstGrid;
2 Likes