import React from "react";

import React, { useCallback, useState } from "react";
import { NodeDetail } from "./components/NodeDetail";

  const [focusedNode, setFocusedNode] = useState({ chunk: null, node: null });
  const handleFocusedNodeChange = useCallback(
    (chunk, node) => {
      console.log("asdf");
      setFocusedNode({ chunk, node });
    },
    [setFocusedNode]
  );

      <PixiComponent />

      <PixiComponent onFocusedNodeChange={handleFocusedNodeChange} />
      <NodeDetail focusedNode={focusedNode} />

.layout {
  position:fixed;
  right:0;
  left:auto;
  height:100%;
  width:30%;
  top:0;
  flex:1 0 auto;
  overflow-y:auto;
  flex-direction: column;
  background-color: rgba(30,30,30,.30)
}

import React, { useState } from "react";
import "./NodeDetail.css";
const a = [1, 2, 3, 4, 5, 6];
export function NodeDetail({ focusedNode }: { focusedNode: any }) {
  console.log(focusedNode);
  return (
    <>
      <div className="layout">
        <h1>{focusedNode.chunk?.id}</h1>
        {a.map((z) => (
          <div>{z}</div>
        ))}
      </div>
    </>
  );
}

export function PixiComponent(props: { whatever?: any }) {

export function PixiComponent(props: {
  whatever?: any;
  onFocusedNodeChange: (...x: any) => void;
}) {

    container.current!.appendChild(application.app.view)

    container.current!.appendChild(application.app.view);

  }

  };

      <button onClick={() => { }}>draw circle</button>
      <button onClick={() => {
        container.current!.removeChild(application.app.view);
        // application = new Application({ originalWindowWidth: window.innerHeight * .75, originalWindowHeight: window.innerHeight * .75 });
        application = new Application({ originalWindowWidth: window.innerWidth, originalWindowHeight: window.innerHeight});
        container.current!.appendChild(application.app.view);
        application.drawStart();
      }}>[DEBUG] reset and rerender</button>

      <button onClick={() => {}}>draw circle</button>
      <button
        onClick={() => {
          container.current!.removeChild(application.app.view);
          // application = new Application({ originalWindowWidth: window.innerHeight * .75, originalWindowHeight: window.innerHeight * .75 });
          application = new Application({
            originalWindowWidth: window.innerWidth,
            originalWindowHeight: window.innerHeight,
          });
          container.current!.appendChild(application.app.view);
          application.drawStart();
        }}
      >
        [DEBUG] reset and rerender
      </button>

  onFocusedNodeChange?: Function;

        chunksContainer.addChild((new RenderedChunk(new Chunk(this.randomSeed, new Vector2(i, j)), this.app.ticker)).container);

        chunksContainer.addChild(
          new RenderedChunk(
            new Chunk(this.randomSeed, new Vector2(i, j)),
            this.app.ticker,
            this.config.onFocusedNodeChange
          ).container
        );

  public chunk!: Chunk

  public chunk!: Chunk;

  constructor(chunk: Chunk, ticker: Pixi.Ticker) {

  constructor(chunk: Chunk, ticker: Pixi.Ticker, onNodeFocus?: Function) {

        node.x * this.spacingPx - this.nodeSizePx/2,
        node.y * this.spacingPx - this.nodeSizePx/2,

        node.x * this.spacingPx - this.nodeSizePx / 2,
        node.y * this.spacingPx - this.nodeSizePx / 2,

      g.addListener('pointerdown', () => {

      g.addListener("pointerdown", () => {
        onNodeFocus?.(chunk, node);

        g.tint = 0x0000FF;

        g.tint = 0x0000ff;

      })

      });