diff --git a/demo/lib/App.tsx b/demo/lib/App.tsx
index 5f8e7a89f..7462b94e2 100644
--- 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,7 +148,6 @@ 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}
@@ -156,6 +155,7 @@ export default class App extends React.Component<any, AppState> {
                     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
index 84308fe2b..f957d0a59 100644
--- a/demo/package-lock.json
+++ b/demo/package-lock.json
@@ -12,10 +12,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"
@@ -177,14 +177,14 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "12.2.5",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-12.2.5.tgz",
-      "integrity": "sha512-vLPLV3cpPGjUPT3PjgRj7e3nio9t6USkuew3JE/jMeon/9Mvp1WyR18v3iwnCuX7eUAm1HmAbJHHLAbcu/EJcw=="
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-12.3.1.tgz",
+      "integrity": "sha512-9P9THmRFVKGKt9DYqeC2aKIxm8rlvkK38V1P1sRE7qyoPBIs8l9oo79QoSdPtOWfzkbDAVUqvbQGgTMsb8BtJg=="
     },
     "node_modules/@next/swc-android-arm-eabi": {
-      "version": "12.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.2.5.tgz",
-      "integrity": "sha512-cPWClKxGhgn2dLWnspW+7psl3MoLQUcNqJqOHk2BhNcou9ARDtC0IjQkKe5qcn9qg7I7U83Gp1yh2aesZfZJMA==",
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.3.1.tgz",
+      "integrity": "sha512-i+BvKA8tB//srVPPQxIQN5lvfROcfv4OB23/L1nXznP+N/TyKL8lql3l7oo2LNhnH66zWhfoemg3Q4VJZSruzQ==",
       "cpu": [
         "arm"
       ],
@@ -197,9 +197,9 @@
       }
     },
     "node_modules/@next/swc-android-arm64": {
-      "version": "12.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.2.5.tgz",
-      "integrity": "sha512-vMj0efliXmC5b7p+wfcQCX0AfU8IypjkzT64GiKJD9PgiA3IILNiGJr1fw2lyUDHkjeWx/5HMlMEpLnTsQslwg==",
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.3.1.tgz",
+      "integrity": "sha512-CmgU2ZNyBP0rkugOOqLnjl3+eRpXBzB/I2sjwcGZ7/Z6RcUJXK5Evz+N0ucOxqE4cZ3gkTeXtSzRrMK2mGYV8Q==",
       "cpu": [
         "arm64"
       ],
@@ -212,9 +212,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "12.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.2.5.tgz",
-      "integrity": "sha512-VOPWbO5EFr6snla/WcxUKtvzGVShfs302TEMOtzYyWni6f9zuOetijJvVh9CCTzInnXAZMtHyNhefijA4HMYLg==",
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.3.1.tgz",
+      "integrity": "sha512-hT/EBGNcu0ITiuWDYU9ur57Oa4LybD5DOQp4f22T6zLfpoBMfBibPtR8XktXmOyFHrL/6FC2p9ojdLZhWhvBHg==",
       "cpu": [
         "arm64"
       ],
@@ -227,9 +227,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "12.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.2.5.tgz",
-      "integrity": "sha512-5o8bTCgAmtYOgauO/Xd27vW52G2/m3i5PX7MUYePquxXAnX73AAtqA3WgPXBRitEB60plSKZgOTkcpqrsh546A==",
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.3.1.tgz",
+      "integrity": "sha512-9S6EVueCVCyGf2vuiLiGEHZCJcPAxglyckTZcEwLdJwozLqN0gtS0Eq0bQlGS3dH49Py/rQYpZ3KVWZ9BUf/WA==",
       "cpu": [
         "x64"
       ],
@@ -242,9 +242,9 @@
       }
     },
     "node_modules/@next/swc-freebsd-x64": {
-      "version": "12.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-12.2.5.tgz",
-      "integrity": "sha512-yYUbyup1JnznMtEBRkK4LT56N0lfK5qNTzr6/DEyDw5TbFVwnuy2hhLBzwCBkScFVjpFdfiC6SQAX3FrAZzuuw==",
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-12.3.1.tgz",
+      "integrity": "sha512-qcuUQkaBZWqzM0F1N4AkAh88lLzzpfE6ImOcI1P6YeyJSsBmpBIV8o70zV+Wxpc26yV9vpzb+e5gCyxNjKJg5Q==",
       "cpu": [
         "x64"
       ],
@@ -257,9 +257,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm-gnueabihf": {
-      "version": "12.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.2.5.tgz",
-      "integrity": "sha512-2ZE2/G921Acks7UopJZVMgKLdm4vN4U0yuzvAMJ6KBavPzqESA2yHJlm85TV/K9gIjKhSk5BVtauIUntFRP8cg==",
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.3.1.tgz",
+      "integrity": "sha512-diL9MSYrEI5nY2wc/h/DBewEDUzr/DqBjIgHJ3RUNtETAOB3spMNHvJk2XKUDjnQuluLmFMloet9tpEqU2TT9w==",
       "cpu": [
         "arm"
       ],
@@ -272,9 +272,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "12.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.2.5.tgz",
-      "integrity": "sha512-/I6+PWVlz2wkTdWqhlSYYJ1pWWgUVva6SgX353oqTh8njNQp1SdFQuWDqk8LnM6ulheVfSsgkDzxrDaAQZnzjQ==",
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.3.1.tgz",
+      "integrity": "sha512-o/xB2nztoaC7jnXU3Q36vGgOolJpsGG8ETNjxM1VAPxRwM7FyGCPHOMk1XavG88QZSQf+1r+POBW0tLxQOJ9DQ==",
       "cpu": [
         "arm64"
       ],
@@ -287,9 +287,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "12.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.2.5.tgz",
-      "integrity": "sha512-LPQRelfX6asXyVr59p5sTpx5l+0yh2Vjp/R8Wi4X9pnqcayqT4CUJLiHqCvZuLin3IsFdisJL0rKHMoaZLRfmg==",
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.3.1.tgz",
+      "integrity": "sha512-2WEasRxJzgAmP43glFNhADpe8zB7kJofhEAVNbDJZANp+H4+wq+/cW1CdDi8DqjkShPEA6/ejJw+xnEyDID2jg==",
       "cpu": [
         "arm64"
       ],
@@ -302,9 +302,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "12.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.2.5.tgz",
-      "integrity": "sha512-0szyAo8jMCClkjNK0hknjhmAngUppoRekW6OAezbEYwHXN/VNtsXbfzgYOqjKWxEx3OoAzrT3jLwAF0HdX2MEw==",
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.3.1.tgz",
+      "integrity": "sha512-JWEaMyvNrXuM3dyy9Pp5cFPuSSvG82+yABqsWugjWlvfmnlnx9HOQZY23bFq3cNghy5V/t0iPb6cffzRWylgsA==",
       "cpu": [
         "x64"
       ],
@@ -317,9 +317,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "12.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.2.5.tgz",
-      "integrity": "sha512-zg/Y6oBar1yVnW6Il1I/08/2ukWtOG6s3acdJdEyIdsCzyQi4RLxbbhkD/EGQyhqBvd3QrC6ZXQEXighQUAZ0g==",
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.3.1.tgz",
+      "integrity": "sha512-xoEWQQ71waWc4BZcOjmatuvPUXKTv6MbIFzpm4LFeCHsg2iwai0ILmNXf81rJR+L1Wb9ifEke2sQpZSPNz1Iyg==",
       "cpu": [
         "x64"
       ],
@@ -332,9 +332,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "12.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.2.5.tgz",
-      "integrity": "sha512-3/90DRNSqeeSRMMEhj4gHHQlLhhKg5SCCoYfE3kBjGpE63EfnblYUqsszGGZ9ekpKL/R4/SGB40iCQr8tR5Jiw==",
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.3.1.tgz",
+      "integrity": "sha512-hswVFYQYIeGHE2JYaBVtvqmBQ1CppplQbZJS/JgrVI3x2CurNhEkmds/yqvDONfwfbttTtH4+q9Dzf/WVl3Opw==",
       "cpu": [
         "arm64"
       ],
@@ -347,9 +347,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "12.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.2.5.tgz",
-      "integrity": "sha512-hGLc0ZRAwnaPL4ulwpp4D2RxmkHQLuI8CFOEEHdzZpS63/hMVzv81g8jzYA0UXbb9pus/iTc3VRbVbAM03SRrw==",
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.3.1.tgz",
+      "integrity": "sha512-Kny5JBehkTbKPmqulr5i+iKntO5YMP+bVM8Hf8UAmjSMVo3wehyLVc9IZkNmcbxi+vwETnQvJaT5ynYBkJ9dWA==",
       "cpu": [
         "ia32"
       ],
@@ -362,9 +362,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "12.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.2.5.tgz",
-      "integrity": "sha512-7h5/ahY7NeaO2xygqVrSG/Y8Vs4cdjxIjowTZ5W6CKoTKn7tmnuxlUc2h74x06FKmbhAd9agOjr/AOKyxYYm9Q==",
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.3.1.tgz",
+      "integrity": "sha512-W1ijvzzg+kPEX6LAc+50EYYSEo0FVu7dmTE+t+DM4iOLqgGHoW9uYSz9wCVdkXOEEMP9xhXfGpcSxsfDucyPkA==",
       "cpu": [
         "x64"
       ],
@@ -399,9 +399,9 @@
       }
     },
     "node_modules/@swc/helpers": {
-      "version": "0.4.3",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.3.tgz",
-      "integrity": "sha512-6JrF+fdUK2zbGpJIlN7G3v966PQjyx/dPt1T9km2wj+EUBqgrxCk3uX4Kct16MIm9gGxfKRcfax2hVf5jvlTzA==",
+      "version": "0.4.11",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.11.tgz",
+      "integrity": "sha512-rEUrBSGIoSFuYxwBYtlUFMlE2CwGhmW+w9355/5oduSw8e5h2+Tj4UrAGNNgP9915++wj5vkQo0UuOBqOAq4nw==",
       "dependencies": {
         "tslib": "^2.4.0"
       }
@@ -684,9 +684,9 @@
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001390",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001390.tgz",
-      "integrity": "sha512-sS4CaUM+/+vqQUlCvCJ2WtDlV81aWtHhqeEVkLokVJJa3ViN4zDxAGfq9R8i1m90uGHxo99cy10Od+lvn3hf0g==",
+      "version": "1.0.30001423",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001423.tgz",
+      "integrity": "sha512-09iwWGOlifvE1XuHokFMP7eR38a0JnajoyL3/i87c8ZjRWRrdKo1fqjNfugfBD0UDBIOz0U+jtNhJ0EPm1VleQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -1170,15 +1170,15 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
     },
     "node_modules/next": {
-      "version": "12.2.5",
-      "resolved": "https://registry.npmjs.org/next/-/next-12.2.5.tgz",
-      "integrity": "sha512-tBdjqX5XC/oFs/6gxrZhjmiq90YWizUYU6qOWAfat7zJwrwapJ+BYgX2PmiacunXMaRpeVT4vz5MSPSLgNkrpA==",
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/next/-/next-12.3.1.tgz",
+      "integrity": "sha512-l7bvmSeIwX5lp07WtIiP9u2ytZMv7jIeB8iacR28PuUEFG5j0HGAPnMqyG5kbZNBG2H7tRsrQ4HCjuMOPnANZw==",
       "dependencies": {
-        "@next/env": "12.2.5",
-        "@swc/helpers": "0.4.3",
-        "caniuse-lite": "^1.0.30001332",
+        "@next/env": "12.3.1",
+        "@swc/helpers": "0.4.11",
+        "caniuse-lite": "^1.0.30001406",
         "postcss": "8.4.14",
-        "styled-jsx": "5.0.4",
+        "styled-jsx": "5.0.7",
         "use-sync-external-store": "1.2.0"
       },
       "bin": {
@@ -1188,19 +1188,19 @@
         "node": ">=12.22.0"
       },
       "optionalDependencies": {
-        "@next/swc-android-arm-eabi": "12.2.5",
-        "@next/swc-android-arm64": "12.2.5",
-        "@next/swc-darwin-arm64": "12.2.5",
-        "@next/swc-darwin-x64": "12.2.5",
-        "@next/swc-freebsd-x64": "12.2.5",
-        "@next/swc-linux-arm-gnueabihf": "12.2.5",
-        "@next/swc-linux-arm64-gnu": "12.2.5",
-        "@next/swc-linux-arm64-musl": "12.2.5",
-        "@next/swc-linux-x64-gnu": "12.2.5",
-        "@next/swc-linux-x64-musl": "12.2.5",
-        "@next/swc-win32-arm64-msvc": "12.2.5",
-        "@next/swc-win32-ia32-msvc": "12.2.5",
-        "@next/swc-win32-x64-msvc": "12.2.5"
+        "@next/swc-android-arm-eabi": "12.3.1",
+        "@next/swc-android-arm64": "12.3.1",
+        "@next/swc-darwin-arm64": "12.3.1",
+        "@next/swc-darwin-x64": "12.3.1",
+        "@next/swc-freebsd-x64": "12.3.1",
+        "@next/swc-linux-arm-gnueabihf": "12.3.1",
+        "@next/swc-linux-arm64-gnu": "12.3.1",
+        "@next/swc-linux-arm64-musl": "12.3.1",
+        "@next/swc-linux-x64-gnu": "12.3.1",
+        "@next/swc-linux-x64-musl": "12.3.1",
+        "@next/swc-win32-arm64-msvc": "12.3.1",
+        "@next/swc-win32-ia32-msvc": "12.3.1",
+        "@next/swc-win32-x64-msvc": "12.3.1"
       },
       "peerDependencies": {
         "fibers": ">= 3.1.0",
@@ -1333,28 +1333,26 @@
       }
     },
     "node_modules/react": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
-      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
       "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       },
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/react-dom": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
-      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "scheduler": "^0.20.2"
+        "scheduler": "^0.23.0"
       },
       "peerDependencies": {
-        "react": "17.0.2"
+        "react": "^18.2.0"
       }
     },
     "node_modules/react-fast-compare": {
@@ -1425,12 +1423,11 @@
       "peer": true
     },
     "node_modules/scheduler": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
-      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
       "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       }
     },
     "node_modules/schema-utils": {
@@ -1542,9 +1539,9 @@
       }
     },
     "node_modules/styled-jsx": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.4.tgz",
-      "integrity": "sha512-sDFWLbg4zR+UkNzfk5lPilyIgtpddfxXEULxhujorr5jtePTUqiPDc5BC0v1NRqTr/WaFBGQQUoYToGlF4B2KQ==",
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.7.tgz",
+      "integrity": "sha512-b3sUzamS086YLRuvnaDigdAewz1/EFYlHpYBP5mZovKEdQQOIIYq8lApylub3HHZ6xFjV051kkGU7cudJmrXEA==",
       "engines": {
         "node": ">= 12.0.0"
       },
@@ -1857,86 +1854,86 @@
       }
     },
     "@next/env": {
-      "version": "12.2.5",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-12.2.5.tgz",
-      "integrity": "sha512-vLPLV3cpPGjUPT3PjgRj7e3nio9t6USkuew3JE/jMeon/9Mvp1WyR18v3iwnCuX7eUAm1HmAbJHHLAbcu/EJcw=="
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-12.3.1.tgz",
+      "integrity": "sha512-9P9THmRFVKGKt9DYqeC2aKIxm8rlvkK38V1P1sRE7qyoPBIs8l9oo79QoSdPtOWfzkbDAVUqvbQGgTMsb8BtJg=="
     },
     "@next/swc-android-arm-eabi": {
-      "version": "12.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.2.5.tgz",
-      "integrity": "sha512-cPWClKxGhgn2dLWnspW+7psl3MoLQUcNqJqOHk2BhNcou9ARDtC0IjQkKe5qcn9qg7I7U83Gp1yh2aesZfZJMA==",
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.3.1.tgz",
+      "integrity": "sha512-i+BvKA8tB//srVPPQxIQN5lvfROcfv4OB23/L1nXznP+N/TyKL8lql3l7oo2LNhnH66zWhfoemg3Q4VJZSruzQ==",
       "optional": true
     },
     "@next/swc-android-arm64": {
-      "version": "12.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.2.5.tgz",
-      "integrity": "sha512-vMj0efliXmC5b7p+wfcQCX0AfU8IypjkzT64GiKJD9PgiA3IILNiGJr1fw2lyUDHkjeWx/5HMlMEpLnTsQslwg==",
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.3.1.tgz",
+      "integrity": "sha512-CmgU2ZNyBP0rkugOOqLnjl3+eRpXBzB/I2sjwcGZ7/Z6RcUJXK5Evz+N0ucOxqE4cZ3gkTeXtSzRrMK2mGYV8Q==",
       "optional": true
     },
     "@next/swc-darwin-arm64": {
-      "version": "12.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.2.5.tgz",
-      "integrity": "sha512-VOPWbO5EFr6snla/WcxUKtvzGVShfs302TEMOtzYyWni6f9zuOetijJvVh9CCTzInnXAZMtHyNhefijA4HMYLg==",
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.3.1.tgz",
+      "integrity": "sha512-hT/EBGNcu0ITiuWDYU9ur57Oa4LybD5DOQp4f22T6zLfpoBMfBibPtR8XktXmOyFHrL/6FC2p9ojdLZhWhvBHg==",
       "optional": true
     },
     "@next/swc-darwin-x64": {
-      "version": "12.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.2.5.tgz",
-      "integrity": "sha512-5o8bTCgAmtYOgauO/Xd27vW52G2/m3i5PX7MUYePquxXAnX73AAtqA3WgPXBRitEB60plSKZgOTkcpqrsh546A==",
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.3.1.tgz",
+      "integrity": "sha512-9S6EVueCVCyGf2vuiLiGEHZCJcPAxglyckTZcEwLdJwozLqN0gtS0Eq0bQlGS3dH49Py/rQYpZ3KVWZ9BUf/WA==",
       "optional": true
     },
     "@next/swc-freebsd-x64": {
-      "version": "12.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-12.2.5.tgz",
-      "integrity": "sha512-yYUbyup1JnznMtEBRkK4LT56N0lfK5qNTzr6/DEyDw5TbFVwnuy2hhLBzwCBkScFVjpFdfiC6SQAX3FrAZzuuw==",
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-12.3.1.tgz",
+      "integrity": "sha512-qcuUQkaBZWqzM0F1N4AkAh88lLzzpfE6ImOcI1P6YeyJSsBmpBIV8o70zV+Wxpc26yV9vpzb+e5gCyxNjKJg5Q==",
       "optional": true
     },
     "@next/swc-linux-arm-gnueabihf": {
-      "version": "12.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.2.5.tgz",
-      "integrity": "sha512-2ZE2/G921Acks7UopJZVMgKLdm4vN4U0yuzvAMJ6KBavPzqESA2yHJlm85TV/K9gIjKhSk5BVtauIUntFRP8cg==",
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.3.1.tgz",
+      "integrity": "sha512-diL9MSYrEI5nY2wc/h/DBewEDUzr/DqBjIgHJ3RUNtETAOB3spMNHvJk2XKUDjnQuluLmFMloet9tpEqU2TT9w==",
       "optional": true
     },
     "@next/swc-linux-arm64-gnu": {
-      "version": "12.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.2.5.tgz",
-      "integrity": "sha512-/I6+PWVlz2wkTdWqhlSYYJ1pWWgUVva6SgX353oqTh8njNQp1SdFQuWDqk8LnM6ulheVfSsgkDzxrDaAQZnzjQ==",
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.3.1.tgz",
+      "integrity": "sha512-o/xB2nztoaC7jnXU3Q36vGgOolJpsGG8ETNjxM1VAPxRwM7FyGCPHOMk1XavG88QZSQf+1r+POBW0tLxQOJ9DQ==",
       "optional": true
     },
     "@next/swc-linux-arm64-musl": {
-      "version": "12.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.2.5.tgz",
-      "integrity": "sha512-LPQRelfX6asXyVr59p5sTpx5l+0yh2Vjp/R8Wi4X9pnqcayqT4CUJLiHqCvZuLin3IsFdisJL0rKHMoaZLRfmg==",
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.3.1.tgz",
+      "integrity": "sha512-2WEasRxJzgAmP43glFNhADpe8zB7kJofhEAVNbDJZANp+H4+wq+/cW1CdDi8DqjkShPEA6/ejJw+xnEyDID2jg==",
       "optional": true
     },
     "@next/swc-linux-x64-gnu": {
-      "version": "12.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.2.5.tgz",
-      "integrity": "sha512-0szyAo8jMCClkjNK0hknjhmAngUppoRekW6OAezbEYwHXN/VNtsXbfzgYOqjKWxEx3OoAzrT3jLwAF0HdX2MEw==",
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.3.1.tgz",
+      "integrity": "sha512-JWEaMyvNrXuM3dyy9Pp5cFPuSSvG82+yABqsWugjWlvfmnlnx9HOQZY23bFq3cNghy5V/t0iPb6cffzRWylgsA==",
       "optional": true
     },
     "@next/swc-linux-x64-musl": {
-      "version": "12.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.2.5.tgz",
-      "integrity": "sha512-zg/Y6oBar1yVnW6Il1I/08/2ukWtOG6s3acdJdEyIdsCzyQi4RLxbbhkD/EGQyhqBvd3QrC6ZXQEXighQUAZ0g==",
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.3.1.tgz",
+      "integrity": "sha512-xoEWQQ71waWc4BZcOjmatuvPUXKTv6MbIFzpm4LFeCHsg2iwai0ILmNXf81rJR+L1Wb9ifEke2sQpZSPNz1Iyg==",
       "optional": true
     },
     "@next/swc-win32-arm64-msvc": {
-      "version": "12.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.2.5.tgz",
-      "integrity": "sha512-3/90DRNSqeeSRMMEhj4gHHQlLhhKg5SCCoYfE3kBjGpE63EfnblYUqsszGGZ9ekpKL/R4/SGB40iCQr8tR5Jiw==",
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.3.1.tgz",
+      "integrity": "sha512-hswVFYQYIeGHE2JYaBVtvqmBQ1CppplQbZJS/JgrVI3x2CurNhEkmds/yqvDONfwfbttTtH4+q9Dzf/WVl3Opw==",
       "optional": true
     },
     "@next/swc-win32-ia32-msvc": {
-      "version": "12.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.2.5.tgz",
-      "integrity": "sha512-hGLc0ZRAwnaPL4ulwpp4D2RxmkHQLuI8CFOEEHdzZpS63/hMVzv81g8jzYA0UXbb9pus/iTc3VRbVbAM03SRrw==",
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.3.1.tgz",
+      "integrity": "sha512-Kny5JBehkTbKPmqulr5i+iKntO5YMP+bVM8Hf8UAmjSMVo3wehyLVc9IZkNmcbxi+vwETnQvJaT5ynYBkJ9dWA==",
       "optional": true
     },
     "@next/swc-win32-x64-msvc": {
-      "version": "12.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.2.5.tgz",
-      "integrity": "sha512-7h5/ahY7NeaO2xygqVrSG/Y8Vs4cdjxIjowTZ5W6CKoTKn7tmnuxlUc2h74x06FKmbhAd9agOjr/AOKyxYYm9Q==",
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.3.1.tgz",
+      "integrity": "sha512-W1ijvzzg+kPEX6LAc+50EYYSEo0FVu7dmTE+t+DM4iOLqgGHoW9uYSz9wCVdkXOEEMP9xhXfGpcSxsfDucyPkA==",
       "optional": true
     },
     "@popperjs/core": {
@@ -1954,9 +1951,9 @@
       }
     },
     "@swc/helpers": {
-      "version": "0.4.3",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.3.tgz",
-      "integrity": "sha512-6JrF+fdUK2zbGpJIlN7G3v966PQjyx/dPt1T9km2wj+EUBqgrxCk3uX4Kct16MIm9gGxfKRcfax2hVf5jvlTzA==",
+      "version": "0.4.11",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.11.tgz",
+      "integrity": "sha512-rEUrBSGIoSFuYxwBYtlUFMlE2CwGhmW+w9355/5oduSw8e5h2+Tj4UrAGNNgP9915++wj5vkQo0UuOBqOAq4nw==",
       "requires": {
         "tslib": "^2.4.0"
       }
@@ -2209,9 +2206,9 @@
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
     },
     "caniuse-lite": {
-      "version": "1.0.30001390",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001390.tgz",
-      "integrity": "sha512-sS4CaUM+/+vqQUlCvCJ2WtDlV81aWtHhqeEVkLokVJJa3ViN4zDxAGfq9R8i1m90uGHxo99cy10Od+lvn3hf0g=="
+      "version": "1.0.30001423",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001423.tgz",
+      "integrity": "sha512-09iwWGOlifvE1XuHokFMP7eR38a0JnajoyL3/i87c8ZjRWRrdKo1fqjNfugfBD0UDBIOz0U+jtNhJ0EPm1VleQ=="
     },
     "chrome-trace-event": {
       "version": "1.0.3",
@@ -2572,28 +2569,28 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
     },
     "next": {
-      "version": "12.2.5",
-      "resolved": "https://registry.npmjs.org/next/-/next-12.2.5.tgz",
-      "integrity": "sha512-tBdjqX5XC/oFs/6gxrZhjmiq90YWizUYU6qOWAfat7zJwrwapJ+BYgX2PmiacunXMaRpeVT4vz5MSPSLgNkrpA==",
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/next/-/next-12.3.1.tgz",
+      "integrity": "sha512-l7bvmSeIwX5lp07WtIiP9u2ytZMv7jIeB8iacR28PuUEFG5j0HGAPnMqyG5kbZNBG2H7tRsrQ4HCjuMOPnANZw==",
       "requires": {
-        "@next/env": "12.2.5",
-        "@next/swc-android-arm-eabi": "12.2.5",
-        "@next/swc-android-arm64": "12.2.5",
-        "@next/swc-darwin-arm64": "12.2.5",
-        "@next/swc-darwin-x64": "12.2.5",
-        "@next/swc-freebsd-x64": "12.2.5",
-        "@next/swc-linux-arm-gnueabihf": "12.2.5",
-        "@next/swc-linux-arm64-gnu": "12.2.5",
-        "@next/swc-linux-arm64-musl": "12.2.5",
-        "@next/swc-linux-x64-gnu": "12.2.5",
-        "@next/swc-linux-x64-musl": "12.2.5",
-        "@next/swc-win32-arm64-msvc": "12.2.5",
-        "@next/swc-win32-ia32-msvc": "12.2.5",
-        "@next/swc-win32-x64-msvc": "12.2.5",
-        "@swc/helpers": "0.4.3",
-        "caniuse-lite": "^1.0.30001332",
+        "@next/env": "12.3.1",
+        "@next/swc-android-arm-eabi": "12.3.1",
+        "@next/swc-android-arm64": "12.3.1",
+        "@next/swc-darwin-arm64": "12.3.1",
+        "@next/swc-darwin-x64": "12.3.1",
+        "@next/swc-freebsd-x64": "12.3.1",
+        "@next/swc-linux-arm-gnueabihf": "12.3.1",
+        "@next/swc-linux-arm64-gnu": "12.3.1",
+        "@next/swc-linux-arm64-musl": "12.3.1",
+        "@next/swc-linux-x64-gnu": "12.3.1",
+        "@next/swc-linux-x64-musl": "12.3.1",
+        "@next/swc-win32-arm64-msvc": "12.3.1",
+        "@next/swc-win32-ia32-msvc": "12.3.1",
+        "@next/swc-win32-x64-msvc": "12.3.1",
+        "@swc/helpers": "0.4.11",
+        "caniuse-lite": "^1.0.30001406",
         "postcss": "8.4.14",
-        "styled-jsx": "5.0.4",
+        "styled-jsx": "5.0.7",
         "use-sync-external-store": "1.2.0"
       },
       "dependencies": {
@@ -2683,22 +2680,20 @@
       }
     },
     "react": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
-      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
       "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       }
     },
     "react-dom": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
-      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
       "requires": {
         "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "scheduler": "^0.20.2"
+        "scheduler": "^0.23.0"
       }
     },
     "react-fast-compare": {
@@ -2750,12 +2745,11 @@
       "peer": true
     },
     "scheduler": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
-      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
       "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       }
     },
     "schema-utils": {
@@ -2844,9 +2838,9 @@
       }
     },
     "styled-jsx": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.4.tgz",
-      "integrity": "sha512-sDFWLbg4zR+UkNzfk5lPilyIgtpddfxXEULxhujorr5jtePTUqiPDc5BC0v1NRqTr/WaFBGQQUoYToGlF4B2KQ==",
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.7.tgz",
+      "integrity": "sha512-b3sUzamS086YLRuvnaDigdAewz1/EFYlHpYBP5mZovKEdQQOIIYq8lApylub3HHZ6xFjV051kkGU7cudJmrXEA==",
       "requires": {}
     },
     "supports-color": {
diff --git a/demo/package.json b/demo/package.json
index 7d37c0d6e..6871633b5 100644
--- 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
new file mode 100644
index 000000000..73f811d88
--- /dev/null
+++ 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/semantic-ui@2.4.2/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
index e9d7761da..b57403da5 100644
--- 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/semantic-ui@2.4.2/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
index 1966f26fe..67cfe34eb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "3.5.29",
       "license": "MIT",
       "dependencies": {
-        "react-sizeme": "^3.0.0",
+        "react-resize-detector": "^7.1.2",
         "seqparse": "^0.1.9"
       },
       "devDependencies": {
@@ -3070,11 +3070,6 @@
       "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
       "dev": true
     },
-    "node_modules/batch-processor": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz",
-      "integrity": "sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA=="
-    },
     "node_modules/big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -4148,14 +4143,6 @@
       "integrity": "sha512-EpuHPqu8YhonqLBXHoU6hDJCD98FCe6KDoet3/gY1qsQ6usjJoHqBH2YIVs8FXaAtHwVL8Uqa/fsYao/vq9VWQ==",
       "dev": true
     },
-    "node_modules/element-resize-detector": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.4.tgz",
-      "integrity": "sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==",
-      "dependencies": {
-        "batch-processor": "1.0.0"
-      }
-    },
     "node_modules/emitter-component": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/emitter-component/-/emitter-component-1.1.1.tgz",
@@ -5999,14 +5986,6 @@
         "node": ">= 0.10"
       }
     },
-    "node_modules/invariant": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
-      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
-      "dependencies": {
-        "loose-envify": "^1.0.0"
-      }
-    },
     "node_modules/ipaddr.js": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
@@ -7799,8 +7778,7 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "node_modules/lodash.memoize": {
       "version": "4.1.2",
@@ -9357,7 +9335,6 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
       "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -9369,7 +9346,6 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
       "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.0"
@@ -9384,15 +9360,16 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true
     },
-    "node_modules/react-sizeme": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/react-sizeme/-/react-sizeme-3.0.2.tgz",
-      "integrity": "sha512-xOIAOqqSSmKlKFJLO3inBQBdymzDuXx4iuwkNcJmC96jeiOg5ojByvL+g3MW9LPEsojLbC6pf68zOfobK8IPlw==",
+    "node_modules/react-resize-detector": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-7.1.2.tgz",
+      "integrity": "sha512-zXnPJ2m8+6oq9Nn8zsep/orts9vQv3elrpA+R8XTcW7DVVUJ9vwDwMXaBtykAYjMnkCIaOoK9vObyR7ZgFNlOw==",
       "dependencies": {
-        "element-resize-detector": "^1.2.2",
-        "invariant": "^2.2.4",
-        "shallowequal": "^1.1.0",
-        "throttle-debounce": "^3.0.1"
+        "lodash": "^4.17.21"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/readable-stream": {
@@ -9750,7 +9727,6 @@
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
       "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       }
@@ -9993,11 +9969,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/shallowequal": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
-      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
-    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -10724,14 +10695,6 @@
         "real-require": "^0.2.0"
       }
     },
-    "node_modules/throttle-debounce": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
-      "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==",
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/thunky": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
@@ -14230,11 +14193,6 @@
       "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
       "dev": true
     },
-    "batch-processor": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz",
-      "integrity": "sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA=="
-    },
     "big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -15048,14 +15006,6 @@
       "integrity": "sha512-EpuHPqu8YhonqLBXHoU6hDJCD98FCe6KDoet3/gY1qsQ6usjJoHqBH2YIVs8FXaAtHwVL8Uqa/fsYao/vq9VWQ==",
       "dev": true
     },
-    "element-resize-detector": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.4.tgz",
-      "integrity": "sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==",
-      "requires": {
-        "batch-processor": "1.0.0"
-      }
-    },
     "emitter-component": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/emitter-component/-/emitter-component-1.1.1.tgz",
@@ -16430,14 +16380,6 @@
       "integrity": "sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==",
       "dev": true
     },
-    "invariant": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
-      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
-      "requires": {
-        "loose-envify": "^1.0.0"
-      }
-    },
     "ipaddr.js": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
@@ -17778,8 +17720,7 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "lodash.memoize": {
       "version": "4.1.2",
@@ -18964,7 +18905,6 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
       "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.1.0"
       }
@@ -18973,7 +18913,6 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
       "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.0"
@@ -18985,15 +18924,12 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true
     },
-    "react-sizeme": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/react-sizeme/-/react-sizeme-3.0.2.tgz",
-      "integrity": "sha512-xOIAOqqSSmKlKFJLO3inBQBdymzDuXx4iuwkNcJmC96jeiOg5ojByvL+g3MW9LPEsojLbC6pf68zOfobK8IPlw==",
+    "react-resize-detector": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-7.1.2.tgz",
+      "integrity": "sha512-zXnPJ2m8+6oq9Nn8zsep/orts9vQv3elrpA+R8XTcW7DVVUJ9vwDwMXaBtykAYjMnkCIaOoK9vObyR7ZgFNlOw==",
       "requires": {
-        "element-resize-detector": "^1.2.2",
-        "invariant": "^2.2.4",
-        "shallowequal": "^1.1.0",
-        "throttle-debounce": "^3.0.1"
+        "lodash": "^4.17.21"
       }
     },
     "readable-stream": {
@@ -19252,7 +19188,6 @@
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
       "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.1.0"
       }
@@ -19464,11 +19399,6 @@
         "kind-of": "^6.0.2"
       }
     },
-    "shallowequal": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
-      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
-    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -20011,11 +19941,6 @@
         "real-require": "^0.2.0"
       }
     },
-    "throttle-debounce": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
-      "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg=="
-    },
     "thunky": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
diff --git a/package.json b/package.json
index 8942c33be..c75850f01 100644
--- 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
index 5fe8f3e95..d5730e363 100644
--- 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);
diff --git a/src/Linear/Linear.tsx b/src/Linear/Linear.tsx
index 91d2598f6..96b65cf21 100644
--- a/src/Linear/Linear.tsx
+++ b/src/Linear/Linear.tsx
@@ -26,7 +26,6 @@ export interface LinearProps {
   name: string;
   onUnmount: (id: string) => void;
   search: NameRange[];
-  selection: Selection;
   seq: string;
   seqFontSize: number;
   setSelection: (selection: Selection) => void;
@@ -181,7 +180,6 @@ class Linear extends React.Component<LinearProps> {
           lineHeight={lineHeight}
           mouseEvent={this.props.mouseEvent}
           searchRows={searchRows[i]}
-          selection={this.props.selection}
           seq={seqs[i]}
           seqFontSize={this.props.seqFontSize}
           showComplement={showComplement}
@@ -211,4 +209,5 @@ class Linear extends React.Component<LinearProps> {
   }
 }
 
+// @ts-ignore
 export default withViewerHOCs(Linear);
diff --git a/src/Linear/Selection.tsx b/src/Linear/Selection.tsx
index c5568f4ad..a0a075b8a 100644
--- a/src/Linear/Selection.tsx
+++ b/src/Linear/Selection.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import { InputRefFunc } from "../elements";
-import { Selection, SelectionContext } from "../handlers/selection";
+import { SelectionContext } from "../handlers/selection";
 import randomid from "../randomid";
 import { FindXAndWidthType } from "./SeqBlock";
 
@@ -113,7 +113,6 @@ interface BlockProps {
   lastBase: number;
   onUnmount: (a: string) => void;
   selectHeight: number;
-  selection: Selection;
 }
 
 /**
diff --git a/src/Linear/SeqBlock.tsx b/src/Linear/SeqBlock.tsx
index 4fd923129..58ce6ee7c 100644
--- a/src/Linear/SeqBlock.tsx
+++ b/src/Linear/SeqBlock.tsx
@@ -1,7 +1,6 @@
 import * as React from "react";
 
 import { Annotation, CutSite, Highlight, InputRefFunc, NameRange, Range, Size, Translation } from "../elements";
-import { Selection as SelectionType } from "../handlers/selection";
 import AnnotationRows from "./Annotations";
 import CutSiteRow from "./CutSites";
 import Find from "./Find";
@@ -43,7 +42,6 @@ interface SeqBlockProps {
   mouseEvent: React.MouseEventHandler<SVGSVGElement>;
   onUnmount: (a: string) => void;
   searchRows: Range[];
-  selection: SelectionType;
   seq: string;
   seqFontSize: number;
   showComplement: boolean;
@@ -230,7 +228,6 @@ export default class SeqBlock extends React.PureComponent<SeqBlockProps> {
       mouseEvent,
       onUnmount,
       searchRows,
-      selection,
       seq,
       seqFontSize,
       showComplement,
@@ -328,7 +325,6 @@ export default class SeqBlock extends React.PureComponent<SeqBlockProps> {
           inputRef={inputRef}
           lastBase={lastBase}
           selectHeight={selectHeight}
-          selection={selection}
           onUnmount={onUnmount}
         />
         <Highlights
diff --git a/src/SeqViewer.tsx b/src/SeqViewer.tsx
index 4f917f851..c24b875a6 100644
--- a/src/SeqViewer.tsx
+++ b/src/SeqViewer.tsx
@@ -1,11 +1,11 @@
 import * as React from "react";
-import * as sizeMe from "react-sizeme";
+import { withResizeDetector } from "react-resize-detector";
 
 import Circular from "./Circular/Circular";
 import Linear from "./Linear/Linear";
 import { Annotation, CutSite, Highlight, NameRange, Range } from "./elements";
 import CentralIndexContext from "./handlers/centralIndex";
-import { Selection } from "./handlers/selection";
+import { Selection, SelectionContext } from "./handlers/selection";
 import isEqual from "./isEqual";
 
 interface SeqViewerProps {
@@ -14,19 +14,20 @@ interface SeqViewerProps {
   bpColors: { [key: number | string]: string };
   compSeq: string;
   cutSites: CutSite[];
+  height: number;
   highlights: Highlight[];
   name: string;
   search: NameRange[];
-  selection: Selection;
   seq: string;
   setSelection: (update: Selection) => void;
   showComplement: boolean;
   showIndex: boolean;
-  size: { height: number; width: number };
+  targetRef: React.LegacyRef<HTMLDivElement>;
   /** testSize is a forced height/width that overwrites anything from sizeMe. For testing */
   testSize?: { height: number; width: number };
   translations: Range[];
   viewer: string;
+  width: number;
   zoom: { circular: number; linear: number };
 }
 
@@ -35,7 +36,10 @@ interface SeqViewerProps {
  * the linear and circular sequence viewers. The Header is an example
  */
 class SeqViewer extends React.Component<SeqViewerProps> {
-  /** this is here because the size listener is returning a new "size" prop every time */
+  static contextType = SelectionContext;
+  declare context: React.ContextType<typeof SelectionContext>;
+
+  /** this is here because the size listener is returning a new size prop every time */
   shouldComponentUpdate = (nextProps: SeqViewerProps, nextState: any) =>
     !isEqual(nextProps, this.props) || !isEqual(nextState, this.state);
 
@@ -45,7 +49,7 @@ class SeqViewer extends React.Component<SeqViewerProps> {
    */
   linearProps = () => {
     const { seq } = this.props;
-    const size = this.props.testSize || this.props.size;
+    const size = this.props.testSize || { height: this.props.height, width: this.props.width };
     const zoom = this.props.zoom.linear;
 
     const seqFontSize = Math.min(Math.round(zoom * 0.1 + 9.5), 18); // max 18px
@@ -99,7 +103,7 @@ class SeqViewer extends React.Component<SeqViewerProps> {
     const {
       seq: { length: seqLength },
     } = this.props;
-    const size = this.props.testSize || this.props.size;
+    const size = this.props.testSize || { height: this.props.height, width: this.props.width };
     const zoom = this.props.zoom.circular;
 
     const center = {
@@ -129,29 +133,26 @@ class SeqViewer extends React.Component<SeqViewerProps> {
   };
 
   render() {
-    const size = this.props.testSize || this.props.size;
-
     return (
-      <div className="la-vz-viewer" data-testid="la-vz-seq-viewer">
+      <div ref={this.props.targetRef} className="la-vz-viewer" data-testid="la-vz-seq-viewer">
         {this.props.Circular ? (
           <CentralIndexContext.Consumer>
             {({ circular, setCentralIndex }) => (
               <Circular
                 {...this.props}
-                {...this.state}
                 {...this.circularProps()}
                 centralIndex={circular}
+                selection={this.context}
                 setCentralIndex={setCentralIndex}
-                size={size}
               />
             )}
           </CentralIndexContext.Consumer>
         ) : (
-          <Linear {...this.props} {...this.state} {...this.linearProps()} size={size} />
+          <Linear {...this.props} {...this.linearProps()} selection={this.context} />
         )}
       </div>
     );
   }
 }
 
-export default sizeMe.withSize({ monitorHeight: true, monitorWidth: true })(SeqViewer);
+export default withResizeDetector(SeqViewer);
diff --git a/src/SeqViewerContainer.tsx b/src/SeqViewerContainer.tsx
index f64f3a8cd..f3eab5f61 100644
--- a/src/SeqViewerContainer.tsx
+++ b/src/SeqViewerContainer.tsx
@@ -83,10 +83,10 @@ export default class SeqViewerContainer extends React.Component<SeqViewerContain
 
     // Arrange the viewers based on the viewer prop.
     const linear = (viewer === "linear" || viewer.includes("both")) && (
-      <SeqViewer key="linear" Circular={false} selection={selection} setSelection={this.setSelection} {...this.props} />
+      <SeqViewer key="linear" Circular={false} setSelection={this.setSelection} {...this.props} />
     );
     const circular = (viewer === "circular" || viewer.includes("both")) && (
-      <SeqViewer key="circular" Circular selection={selection} setSelection={this.setSelection} {...this.props} />
+      <SeqViewer key="circular" Circular setSelection={this.setSelection} {...this.props} />
     );
     const bothFlipped = viewer === "both_flip";
     const viewers = bothFlipped ? [linear, circular] : [circular, linear];
diff --git a/src/handlers/selection.tsx b/src/handlers/selection.tsx
index cea997e6f..e869f48e2 100644
--- a/src/handlers/selection.tsx
+++ b/src/handlers/selection.tsx
@@ -65,7 +65,6 @@ export interface WithSelectionProps extends WithEventsProps {
   mouseEvent: (e: any) => void;
   name: string;
   onUnmount: (id: string) => void;
-  selection: Selection;
   seq: string;
   setCentralIndex?: (viewer: "linear" | "circular", index: number) => void;
   setSelection: (selection: Selection) => void;
@@ -79,7 +78,6 @@ export interface SelectionHandlerProps {
   center?: { x: number; y: number };
   centralIndex?: number;
   name: string;
-  selection: Selection;
   seq: string;
   setCentralIndex?: (viewer: "linear" | "circular", index: number) => void;
   setSelection: (selection: Selection) => void;
@@ -98,6 +96,9 @@ export default <T extends WithSelectionProps>(WrappedComp: React.ComponentType<T
   class extends React.Component<T & SelectionHandlerProps> {
     static displayName = "WithSelectionHandler";
 
+    static contextType = SelectionContext;
+    declare context: React.ContextType<typeof SelectionContext>;
+
     /** Only state is the selection range */
     state = { ...defaultSelection };
 
@@ -257,7 +258,7 @@ export default <T extends WithSelectionProps>(WrappedComp: React.ComponentType<T
      * Handle a sequence selection on a linear viewer
      */
     linearSeqEvent = (e: SeqVizMouseEvent, knownRange: { end: number; start: number }) => {
-      const { selection } = this.props;
+      const selection = this.context;
 
       const currBase = this.calculateBaseLinear(e, knownRange);
       const clockwiseDrag = selection.start !== null && currBase >= selection.start;
@@ -290,7 +291,9 @@ export default <T extends WithSelectionProps>(WrappedComp: React.ComponentType<T
      * Handle a sequence selection event on the circular viewer
      */
     circularSeqEvent = (e: SeqVizMouseEvent) => {
-      const { selection, seq } = this.props;
+      const { seq } = this.props;
+      const selection = this.context;
+
       const { start } = selection;
       let { clockwise, end } = selection;
 
@@ -325,8 +328,7 @@ export default <T extends WithSelectionProps>(WrappedComp: React.ComponentType<T
         const crossedZero = change > changeThreshold; // zero was crossed if base jumped more than changeThreshold
         this.forward = increased ? !crossedZero : crossedZero; // bases increased XOR crossed zero
         const lengthChange = crossedZero ? seqLength - change : change; // the change at the point where we cross zero has to be normalized by seqLength
-        let sameDirectionMove =
-          this.forward === this.props.selection.clockwise || this.props.selection.clockwise === null; // moving in same direction as start of drag or start of drag
+        let sameDirectionMove = this.forward === selection.clockwise || selection.clockwise === null; // moving in same direction as start of drag or start of drag
 
         if (sameDirectionMove) {
           this.fullSelectionLength += lengthChange;
@@ -337,7 +339,7 @@ export default <T extends WithSelectionProps>(WrappedComp: React.ComponentType<T
         this.previousBase = currBase; // done comparing with previous base, update previous base
         if (this.fullSelectionLength < seqLength * 0.01 && !this.shiftSelection) {
           clockwise = this.forward; // near selection start so selection direction is up for grabs
-          const check = this.calcSelectionLength(this.props.selection.start, currBase, this.forward); // check actual current selection length
+          const check = this.calcSelectionLength(selection.start, currBase, this.forward); // check actual current selection length
           if (this.fullSelectionLength < 0) {
             this.fullSelectionLength = check; // This is to correct for errors when dragging too fast
           }
@@ -346,9 +348,9 @@ export default <T extends WithSelectionProps>(WrappedComp: React.ComponentType<T
           }
           end = currBase;
         }
-        sameDirectionMove = this.forward === this.props.selection.clockwise; // recalculate this in case we've switched selection directionality
+        sameDirectionMove = this.forward === selection.clockwise; // recalculate this in case we've switched selection directionality
 
-        const check = this.calcSelectionLength(this.props.selection.start, currBase, this.props.selection.clockwise); // check the selection length, this is agnostic to the ALL reference and will always calculate from where you cursor is to the start of selection
+        const check = this.calcSelectionLength(selection.start, currBase, selection.clockwise); // check the selection length, this is agnostic to the ALL reference and will always calculate from where you cursor is to the start of selection
 
         if (this.selectionStarted && this.shiftSelection && check > this.fullSelectionLength) {
           this.fullSelectionLength = check; // shift select catch up
@@ -445,18 +447,20 @@ export default <T extends WithSelectionProps>(WrappedComp: React.ComponentType<T
      * properties of the selection that should be updated.
      */
     setSelection = (newSelection: Selection) => {
+      const selection = this.context;
       const { setSelection } = this.props;
+
       if (
-        newSelection.start === this.props.selection.start &&
-        newSelection.end === this.props.selection.end &&
-        newSelection.ref === this.props.selection.ref &&
+        newSelection.start === selection.start &&
+        newSelection.end === selection.end &&
+        newSelection.ref === selection.ref &&
         // to support reclicking the annotation and causing it to fire a la gh issue https://github.com/Lattice-Automation/seqviz/issues/142
         ["SEQ", "AMINOACID", ""].includes(newSelection.type || "")
       ) {
         return;
       }
       const { clockwise, element, end, name, ref, start, type }: any = {
-        ...this.props.selection,
+        ...selection,
         ...newSelection,
       };
 
@@ -465,7 +469,7 @@ export default <T extends WithSelectionProps>(WrappedComp: React.ComponentType<T
       const gc = calcGC(seq);
       const tm = calcTm(seq);
 
-      const selection = {
+      setSelection({
         clockwise,
         element,
         end,
@@ -477,9 +481,7 @@ export default <T extends WithSelectionProps>(WrappedComp: React.ComponentType<T
         start,
         tm,
         type,
-      };
-
-      setSelection(selection);
+      });
     };
 
     /**