Refactors to support new jbrowse/core

.github/workflows/push.yml

@@ -4,23 +4,23 @@ on: push
 
 jobs:
   test:
-    name: Lint, build, and test on node 18.x and ubuntu-latest
+    name: Lint, build, and test on node 22.x and ubuntu-latest
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-      - name: Use Node.js 18.x
+      - name: Use Node.js 22.x
         uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version: 22.x
       - name: Install deps (with cache)
         uses: bahmutov/npm-install@v1
       - name: Test codebase
         run: yarn test
-      - name: Lint codebase
-        run: yarn lint
       - name: Build lib
         working-directory: lib
         run: yarn build
+      - name: Lint codebase
+        run: yarn lint
       - name: Build app
         working-directory: app
         run: yarn build

app/package.json

@@ -14,15 +14,15 @@
   "dependencies": {
     "buffer": "^6.0.3",
     "generic-sequence-panel": "^1.4.0",
-    "gh-pages": "^6.1.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "gh-pages": "^6.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "@vitejs/plugin-react": "^4.0.0",
-    "typescript": "^5.0.2",
-    "vite": "^5.2.13"
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.3"
   }
 }

app/src/App.tsx

@@ -1,47 +1,8 @@
-import { GenericGeneSeqPanel, fetchTranscripts } from "generic-sequence-panel";
-import { useEffect, useState } from "react";
+import { GenericGeneSeqPanel } from "generic-sequence-panel";
 
 export default function App() {
-  const [result, setResult] = useState<unknown>();
-  useEffect(() => {
-    (async () => {
-      try {
-        const res = await fetchTranscripts({
-          nclistbaseurl:
-            "https://s3.amazonaws.com/agrjbrowse/docker/7.0.0/human/",
-          refseq: "X",
-          start: 31097677,
-          end: 33339609,
-          gene: "DMD",
-          urltemplate: "tracks/All_Genes/{refseq}/trackData.jsonz",
-        });
-        console.log(res);
-        setResult(res);
-      } catch (e) {
-        console.error(e);
-      }
-    })();
-  }, []);
-
   return (
     <div>
-      {!result ? (
-        <div>Loading example of the fetchTranscripts function...</div>
-      ) : (
-        <div>
-          Got result from fetchTranscripts:{" "}
-          {JSON.stringify(result).slice(0, 100)} etc. etc...
-        </div>
-      )}
-      <GenericGeneSeqPanel
-        refseq="NC_045512.2"
-        start={8555}
-        end={10054}
-        gene="nsp4"
-        nclistbaseurl="https://s3.amazonaws.com/agrjbrowse/docker/3.2.0/SARS-CoV-2/"
-        urltemplate="tracks/All Genes/{refseq}/trackData.jsonz"
-        fastaurl="https://s3.amazonaws.com/agrjbrowse/fasta/sarscov2.fasta.gz"
-      />
       <GenericGeneSeqPanel
         refseq="X"
         start={31097677}

app/src/main.tsx

@@ -1,11 +1,5 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 //import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
-import { Buffer } from "buffer";
 
-window.Buffer = Buffer;
-
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <App />,
-);
+ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

eslint.config.mjs

@@ -0,0 +1,65 @@
+import eslint from "@eslint/js";
+import eslintPluginReact from "eslint-plugin-react";
+import eslintPluginReactHooks from "eslint-plugin-react-hooks";
+import eslintPluginReactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  {
+    ignores: [
+      "**/build/**/*",
+      "**/dist/**/*",
+      "**/esm/**/*",
+      "**/public/**/*",
+      "eslint.config.mjs",
+    ],
+  },
+  {
+    languageOptions: {
+      parserOptions: {
+        project: ["./tsconfig.json"],
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+  },
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  ...tseslint.configs.stylisticTypeChecked,
+  ...tseslint.configs.strictTypeChecked,
+  eslintPluginReact.configs.flat.recommended,
+  {
+    plugins: {
+      "react-hooks": eslintPluginReactHooks,
+    },
+    rules: eslintPluginReactHooks.configs.recommended.rules,
+  },
+  {
+    // in main config for TSX/JSX source files
+    plugins: {
+      "react-refresh": eslintPluginReactRefresh,
+    },
+    rules: {},
+  },
+  {
+    rules: {
+      "@typescript-eslint/ban-ts-comment": "off",
+      "@typescript-eslint/no-base-to-string": "off",
+      "@typescript-eslint/restrict-template-expressions": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "react/react-in-jsx-scope": "off",
+      "no-console": [
+        "warn",
+        {
+          allow: ["error", "warn"],
+        },
+      ],
+      curly: "error",
+    },
+  },
+);

lib/package.json

@@ -32,16 +32,17 @@
     "react-dom": "^17.0.1 || ^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@gmod/indexedfasta": "^2.0.4",
-    "@gmod/nclist": "^1.0.0",
-    "@jbrowse/core": "2.4.2",
-    "generic-filehandle": "^3.0.1",
-    "mobx": "^6.8.0",
-    "mobx-state-tree": "^5.1.8",
+    "@gmod/indexedfasta": "^3.0.1",
+    "@gmod/nclist": "^2.0.0",
+    "@jbrowse/core": "2.18.0",
     "copy-to-clipboard": "^3.3.3",
-    "reactstrap": "^9.2.2",
+    "generic-filehandle2": "^1.0.0",
+    "mobx": "^6.13.5",
+    "mobx-react": "^9.2.0",
+    "mobx-state-tree": "^5.1.8",
+    "reactstrap": "^9.2.3",
     "rxjs": "^7.8.0",
-    "tslib": "^2.1.0"
+    "tslib": "^2.8.1"
   },
   "scripts": {
     "build:esm": "tsc --target es2018 --outDir esm",

lib/src/NCListFeature.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-assignment,@typescript-eslint/prefer-nullish-coalescing,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-return,@typescript-eslint/no-unsafe-call */
 import {
   Feature,
   SimpleFeatureSerialized,
@@ -15,7 +16,6 @@ export default class NCListFeature implements Feature {
 
   private uniqueId: string;
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   constructor(
     private ncFeature: any,
     parent?: Feature,
@@ -42,11 +42,9 @@ export default class NCListFeature implements Feature {
     return mapped;
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   get(attrName: string): any {
     const attr = this.ncFeature.get(this.jb2TagToJb1Tag(attrName));
     if (attr && attrName === "subfeatures") {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       return attr.map((subfeature: any) => new NCListFeature(subfeature, this));
     }
     return attr;
@@ -81,19 +79,21 @@ export default class NCListFeature implements Feature {
   }
 
   toJSON(): SimpleFeatureSerialized {
-    const data: SimpleFeatureSerialized = { uniqueId: this.id() };
+    const data = { uniqueId: this.id(), subfeatures: [] } as Record<
+      string,
+      unknown
+    >;
     this.ncFeature.tags().forEach((tag: string) => {
       const mappedTag = this.jb1TagToJb2Tag(tag);
       const value = this.ncFeature.get(tag);
       if (mappedTag === "subfeatures") {
-        data.subfeatures = (value || []).map((f: Feature) => {
-          // note: was new NCListFeature(f, `${this.id()}-${i}`, this).toJSON()
-          return new NCListFeature(f, this).toJSON();
-        });
+        data.subfeatures = (value || []).map((f: Feature) =>
+          new NCListFeature(f, this).toJSON(),
+        );
       } else {
         data[mappedTag] = value;
       }
     });
-    return data;
+    return data as SimpleFeatureSerialized;
   }
 }

lib/src/accessFasta.ts

@@ -1,11 +1,12 @@
-import { RemoteFile } from "generic-filehandle";
+import { RemoteFile } from "generic-filehandle2";
 import { BgzipIndexedFasta } from "@gmod/indexedfasta";
 
 export async function accessFasta(
   refseq: string,
   start: number,
   end: number,
   fastaURL: string,
+  upDownBp: number,
 ) {
   const fastaFilehandle = new RemoteFile(fastaURL);
   const faiFilehandle = new RemoteFile(fastaURL + ".fai");
@@ -17,15 +18,15 @@ export async function accessFasta(
     gzi: gziFilehandle,
   });
 
-  const upstreamstart = start - 499 < 0 ? 0 : start - 499;
-  const downstreamend = end + 499;
+  const upstreamstart = Math.max(0, start - upDownBp);
+  const downstreamend = end + upDownBp;
   const seq = await t.getSequence(refseq, start, end);
   const upstream = await t.getSequence(refseq, upstreamstart, start);
   const downstream = await t.getSequence(refseq, end, downstreamend);
 
   return {
-    seq: seq || "",
-    upstream: upstream || "",
-    downstream: downstream || "",
+    seq: seq ?? "",
+    upstream: upstream ?? "",
+    downstream: downstream ?? "",
   };
 }

lib/src/assembleBundle.ts

@@ -1,28 +1,25 @@
 import { Feature } from "@jbrowse/core/util";
-import NCListFeature from "./NCListFeature";
 import { accessFasta } from "./accessFasta";
 
-export async function assembleBundle(props: {
-  nclistbaseurl: string;
-  urltemplate: string;
+export async function assembleBundle({
+  fastaurl,
+  transcript,
+  refseq,
+  upDownBp,
+}: {
   fastaurl: string;
   refseq: string;
-  gene: string;
   transcript: Feature;
+  upDownBp: number;
 }) {
-  const { fastaurl, transcript, refseq } = props;
-  const sequence = await accessFasta(
-    refseq,
-    transcript.get("start"),
-    transcript.get("end"),
-    fastaurl,
-  );
-
-  const f = new NCListFeature(transcript);
   return {
-    feature: f.toJSON(),
-    sequence,
-    mode: "protein", //this will probably be overridden by the SeqPanel component
-    intronBp: 10,
+    feature: transcript.toJSON(),
+    sequence: await accessFasta(
+      refseq,
+      transcript.get("start"),
+      transcript.get("end"),
+      fastaurl,
+      upDownBp,
+    ),
   };
 }