buildscripts/libdeps/graph_visualizer_web_stack/src/App.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

import React from "react";
import SplitPane from "react-split-pane";

import theme from "./theme";

import GraphCommitDisplay from "./GraphCommitDisplay";
import GraphInfoTabs from "./GraphInfoTabs";
import DrawGraph from "./DrawGraph";

const resizerStyle = {
  background: theme.palette.text.secondary,
  width: "1px",
  cursor: "col-resize",
  margin: "1px",
  padding: "1px",
  height: "100%",
};

const topPaneStyle = {
  height: "100vh",
  overflow: "visible",
};

export default function App() {
  const [infosize, setInfosize] = React.useState(450);
  const [drawsize, setDrawsize] = React.useState(
    window.screen.width - infosize
  );

  React.useEffect(() => {
    setInfosize(window.screen.width - drawsize);
  }, [drawsize]);

  return (
    <SplitPane
      pane1Style={{ height: "12%" }}
      pane2Style={{ height: "88%" }}
      split="horizontal"
      style={topPaneStyle}
    >
      <GraphCommitDisplay />
      <SplitPane
        split="vertical"
        minSize={100}
        style={{ position: "relative" }}
        defaultSize={infosize}
        pane1Style={{ height: "100%" }}
        pane2Style={{ height: "100%", width: "100%" }}
        resizerStyle={resizerStyle}
        onChange={(size) => setDrawsize(window.screen.width - size)}
      >
        <GraphInfoTabs width={infosize} />
        <DrawGraph size={drawsize} />
      </SplitPane>
    </SplitPane>
  );
}