TS Revert (1) (#2402)

* revert all commits to before Typescript migration * update compat workflow to match latest deps (#2335) * update compat workflow to match latest deps * attempt to debug * attempt to debug * remove debugging code * typo * update deps to match desktop (#2340) * fix: don't run lint with `--fix` on push tests (#2273) * fix: don't run lint with `--fix` on push tests * npx Co-authored-by: maniarathi <mani.arathi@gmail.com> Co-authored-by: Madison Dunitz <madison.dunitz@chanzuckerberg.com> * rename X_approx_distribution to X_approximate_distribution (#2337) * Correctly handle non-finite numbers in heuristic determination of X distribution (#2342) * handle non-finites explicitly * improve and test edge case handling for distribution estimation * revert debugging changes * code readability * clean up type inferencing (#2332) * unit tests for 64 bit conversion * clean up type handling * type inference tests * more type inference fixes * use schema to determine user intent for data typing * stop using deprecated API * fbs type encoding test * add missing test * add more tests * correctly infer X type for CXG adaptor * lint * fix typo * ts migration * cleanup from PR review * lint * PR review changes * remove unused packages from client (#2359) * remove unused packages from client * add missing peer dep * fix: disable FE auth testing on compatibility tests (#2377) * update: release process (#2277) Co-authored-by: maniarathi <mani.arathi@gmail.com> * fix: remove spaces in param setup (#2380) * delete deploy workflow (#2396) * undo reformatting which now does not pass lint * fix snapshots which changed due to npm dep changes * add missing quoting to snapshot * another snapshot typo fix * TS Revert (2) - replay PR #2347 and #2354 (#2403) * replay edits from PR 2347 * TS Revert (3) - replay edits in PR #2327 (#2404) * replay edits in PR 2327 * TS Revert (4) - replay PR #2355 (#2405) * replay edits in PR 2355 * add additional babel config * reformat with new prettier config Co-authored-by: Severiano Badajoz <sbadajoz@chanzuckerberg.com> Co-authored-by: maniarathi <mani.arathi@gmail.com> Co-authored-by: Madison Dunitz <madison.dunitz@chanzuckerberg.com>
2026-09-29 08:38:11 +08:00 · 2021-08-23 15:01:36 -07:00
parent 295590a7c6
commit eaae6df5e3
253 changed files with 11175 additions and 22271 deletions
@@ -0,0 +1,89 @@
+import React from "react";
+import * as globals from "../../globals";
+
+class Layout extends React.Component {
+  /*
+    Layout - this react component contains all the layout style and logic for the application once it has loaded.
+
+    The layout is based on CSS grid: the left and right sidebars have fixed widths, the graph in the middle takes the
+    remaining space.
+
+    Note, the renderGraph child is a function rather than a fully-instantiated element because the middle pane of the
+    app is dynamically-sized. It must have access to the containing viewport in order to know how large the graph
+    should be.
+  */
+
+  componentDidMount() {
+    /*
+      This is a bit of a hack. In order for the graph to size correctly, it needs to know the size of the parent
+      viewport. Unfortunately, it can only do this once the parent div has been rendered, so we need to render twice.
+    */
+    this.forceUpdate();
+  }
+
+  render() {
+    const { children } = this.props;
+    const [leftSidebar, renderGraph, rightSidebar] = children;
+    return (
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: `
+          [left-sidebar-start] ${globals.leftSidebarWidth + 1}px
+          [left-sidebar-end graph-start] auto
+          [graph-end right-sidebar-start] ${
+            globals.rightSidebarWidth + 1
+          }px [right-sidebar-end]
+        `,
+          gridTemplateRows: "[top] auto [bottom]",
+          gridTemplateAreas: "left-sidebar | graph | right-sidebar",
+          columnGap: "0px",
+          justifyItems: "stretch",
+          alignItems: "stretch",
+          height: "inherit",
+          width: "inherit",
+          position: "relative",
+          top: 0,
+          left: 0,
+          minWidth: "1240px",
+        }}
+      >
+        <div
+          style={{
+            gridArea: "top / left-sidebar-start / bottom / left-sidebar-end",
+            position: "relative",
+            height: "inherit",
+            overflowY: "auto",
+          }}
+        >
+          {leftSidebar}
+        </div>
+        <div
+          style={{
+            zIndex: 0,
+            gridArea: "top / graph-start / bottom / graph-end",
+            position: "relative",
+            height: "inherit",
+          }}
+          ref={(ref) => {
+            this.viewportRef = ref;
+          }}
+        >
+          {this.viewportRef ? renderGraph(this.viewportRef) : null}
+        </div>
+        <div
+          style={{
+            gridArea: "top / right-sidebar-start / bottom / right-sidebar-end",
+            position: "relative",
+            height: "inherit",
+            overflowY: "auto",
+          }}
+        >
+          {rightSidebar}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Layout;