Replace react-sizeme with react-resize-detector

Lattice-Automation · Oct 22, 2022 · 0bad8cf · 0bad8cf
1 parent f5176ce
commit 0bad8cf
Show file tree

Hide file tree

Showing 14 changed files with 265 additions and 340 deletions.
diff --git a/demo/lib/App.tsx b/demo/lib/App.tsx
@@ -38,7 +38,7 @@ interface AppState {
   showIndex: boolean;
   showSelectionMeta: boolean;
   showSidebar: boolean;
-  translations: {start: number, end: number}[],
+  translations: { end: number; start: number }[];
   viewType: string;
   zoom: number;
 }
@@ -57,7 +57,7 @@ export default class App extends React.Component<any, AppState> {
     showIndex: true,
     showSelectionMeta: false,
     showSidebar: false,
-    translations: [{start: 61, end: 910}],
+    translations: [{ end: 910, start: 61 }],
     viewType: "",
     zoom: 50,
   };
@@ -148,14 +148,14 @@ export default class App extends React.Component<any, AppState> {
                     annotations={this.state.annotations}
                     enzymes={this.state.enzymes}
                     name={this.state.name}
-                    onSelection={selection => this.setState({ selection })}
                     search={this.state.search}
                     seq={this.state.seq}
                     showComplement={this.state.showComplement}
                     showIndex={this.state.showIndex}
                     translations={this.state.translations}
                     viewer={this.state.viewType as "linear" | "circular"}
                     zoom={{ linear: this.state.zoom }}
+                    onSelection={selection => this.setState({ selection })}
                   />
                 )}
               </div>

diff --git a/demo/package-lock.json b/demo/package-lock.json
diff --git a/demo/package.json b/demo/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "build": "next build && next export",
     "deploy": "npm update seqviz && npm run build && aws s3 sync ./out s3://lattice-tools-s3/seqviz --profile lattice --delete && aws cloudfront create-invalidation --distribution-id E3NMX6D92LFTAV --paths '/seqviz/*' --profile lattice",
-    "fix": "prettier ./lib/** --write && eslint lib --ext ts,tsx --fix",
+    "fix": "prettier ./lib/** ./pages/** --write && eslint lib --ext ts,tsx --fix",
     "lint": "prettier ./lib/** --check && eslint lib --ext ts,tsx --quiet",
     "start": "open http://localhost:3010/ && next dev -p 3010"
   },
@@ -15,10 +15,10 @@
     "caniuse-lite": "^1.0.30001390",
     "history": "^4.10.1",
     "lodash": "^4.17.21",
-    "next": "^12.2.5",
+    "next": "^12.3.1",
     "next-with-less": "^2.0.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "semantic-ui-css": "^2.4.1",
     "semantic-ui-react": "^2.1.3",
     "typescript": "^4.8.2"

diff --git a/demo/pages/_document.tsx b/demo/pages/_document.tsx
@@ -0,0 +1,30 @@
+import { Head, Html, Main, NextScript } from "next/document";
+import Script from "next/script";
+import * as React from "react";
+
+export default function Document() {
+  return (
+    <Html>
+      <Head>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#000000" />
+
+        <title>seqviz - Sequence Visualizer by Lattice Automation</title>
+        <link rel="shortcut icon" type="image/x-icon" href="https://tools.latticeautomation.com/seqviz/favicon.ico" />
+        <meta name="Description" content="DNA Sequence Visualizer by Lattice Automation" />
+        <meta name="google" content="notranslate" />
+
+        {/* <!-- IMPORT SEMANTIC-UI-REACT --> */}
+        <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css" />
+
+        {/* <!-- Global site tag (gtag.js) - Google Analytics --> */}
+        <Script async src="https://www.googletagmanager.com/gtag/js?id=UA-135275522-2"></Script>
+      </Head>
+
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}
diff --git a/demo/pages/index.tsx b/demo/pages/index.tsx
@@ -1,29 +1,8 @@
 import dynamic from "next/dynamic";
-import Head from "next/head";
 import * as React from "react";
 
 const App = dynamic(() => import("../lib/App"), {
   ssr: false,
 });
 
-export default () => (
-  <React.Fragment>
-    <Head>
-      <meta name="viewport" content="width=device-width, initial-scale=1" />
-      <meta name="theme-color" content="#000000" />
-
-      <title>seqviz - Sequence Visualizer by Lattice Automation</title>
-      <link rel="shortcut icon" type="image/x-icon" href="https://tools.latticeautomation.com/seqviz/favicon.ico" />
-      <meta name="Description" content="DNA Sequence Visualizer by Lattice Automation" />
-      <meta name="google" content="notranslate" />
-
-      {/* <!-- IMPORT SEMANTIC-UI-REACT --> */}
-      <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css" />
-
-      {/* <!-- Global site tag (gtag.js) - Google Analytics --> */}
-      <script async src="https://www.googletagmanager.com/gtag/js?id=UA-135275522-2"></script>
-    </Head>
-
-    <App />
-  </React.Fragment>
-);
+export default () => <App />;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -47,7 +47,7 @@
     "not dead"
   ],
   "dependencies": {
-    "react-sizeme": "^3.0.0",
+    "react-resize-detector": "^7.1.2",
     "seqparse": "^0.1.9"
   },
   "devDependencies": {

diff --git a/src/Circular/Circular.tsx b/src/Circular/Circular.tsx
@@ -56,7 +56,6 @@ interface CircularProps {
   onUnmount: (id: string) => void;
   radius: number;
   search: Range[];
-  selection: SelectionType;
   seq: string;
   setCentralIndex: (type: "linear" | "circular", update: number) => void;
   setSelection: (selection: SelectionType) => void;
@@ -427,4 +426,5 @@ export const Arc = (props: {
   );
 };
 
+// @ts-ignore
 export default withViewerHOCs(Circular);