Observable notebook's cells in independent React Components

Community Help
1

I have been reproducing locally this nice tutorial https://observablehq.com/@observablehq/how-to-embed-a-notebook-in-a-react-app from @jashkenas.
It embed two linked cells in one React App Component.

What I cannot figure out is how to embed two cells in two React Components.
I would like to embed observable cells (say a speed input slider and the associated graph) in React grid components such as http://mzabriskie.github.io/react-draggable/example/.

If I understand correctly this means passing some information between Components and that is the opposite of React’s design rational. So I’m probably not approaching the problem the right way. Or is there a way using React Ref ?
Should I rather try embedding the react grid in an observable notebook ?

I very new to react and still not comfortable with d3.js as a whole. If someone could shade some light on the way to go, although this is not really an observable question, that would be very helpful. I’m annoyed because I spend to much time trying to understand how to design dashboards and not how to fill it with nice d3 graphs.

I mean pen and paper have great advantages (in the end) and as for animation, why is it that people don’t get that “radios’ screens are always bigger than that of any TV”.

1 Like
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