TS migration. #2288. (#2328)

* Added TS. Updated build and linting config. Added types. * [ts-migrate][.] Rename files from JS/JSX to TS/TSX Co-authored-by: ts-migrate <> * [ts-migrate][.] Run TS Migrate Co-authored-by: ts-migrate <> * Corrected files mangled by ts-migrate. * Updated lint config, minor linting. * Re-enabled Husky. * Updated tests and config. * Reverted webpack devtool config. * Removed obsolete snapshots. * Added annotations snap. * Updated tsconfig includes wrt linting. * Removed ts-migrate. Co-authored-by: Timmy Huang <tihuan@users.noreply.github.com>
2026-10-01 05:48:12 +08:00 · 2021-07-26 20:18:17 +00:00
parent 7328cbdbd5
commit 934cc5c69b
206 changed files with 4719 additions and 2085 deletions
@@ -1,89 +0,0 @@
-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;