Refactors

scottcain · Dec 12, 2024 · 80a9b41 · 80a9b41
1 parent f7f0d1c
commit 80a9b41
Show file tree

Hide file tree

Showing 7 changed files with 1,269 additions and 721 deletions.
diff --git a/app/package.json b/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"
   }
 }
diff --git a/lib/package.json b/lib/package.json
@@ -34,14 +34,15 @@
   "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",
+    "@jbrowse/core": "2.18.0",
     "copy-to-clipboard": "^3.3.3",
-    "reactstrap": "^9.2.2",
+    "generic-filehandle": "^3.2.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",

diff --git a/lib/src/NCListFeature.ts b/lib/src/NCListFeature.ts
@@ -81,19 +81,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;
   }
 }
diff --git a/lib/src/components/GenericGeneSeqPanel.tsx b/lib/src/components/GenericGeneSeqPanel.tsx
@@ -3,6 +3,7 @@ import { useState, useEffect } from "react";
 import GenericSeqPanel from "./GenericSeqPanel";
 import transcriptList from "../fetchTranscripts";
 import { Feature } from "@jbrowse/core/util";
+import { SequenceFeatureDetailsF } from "@jbrowse/core/BaseFeatureWidget/SequenceFeatureDetails/model";
 
 export default function GenericGeneSeqPanel(props: {
   nclistbaseurl: string;
@@ -18,8 +19,8 @@ export default function GenericGeneSeqPanel(props: {
   const [result, setResult] = useState<Feature[]>();
   const [error, setError] = useState<unknown>();
   const [transcript, setTranscript] = useState<Feature>();
-  const [mode, setMode] = useState("gene");
   const feature = transcript || result?.[0];
+  const [model] = useState(SequenceFeatureDetailsF().create({}));
 
   useEffect(() => {
     (async () => {
@@ -61,7 +62,7 @@ export default function GenericGeneSeqPanel(props: {
             ))}
           </select>
           &nbsp; Mode:
-          <select onChange={e => setMode(e.target.value)}>
+          <select onChange={e => model.setMode(e.target.value)}>
             <option value="gene">gene</option>
             <option value="cds">CDS</option>
             <option value="cdna">cDNA</option>
@@ -82,7 +83,7 @@ export default function GenericGeneSeqPanel(props: {
           </select>
         </p>
         {feature ? (
-          <GenericSeqPanel {...props} transcript={feature} mode={mode} />
+          <GenericSeqPanel {...props} transcript={feature} model={model} />
         ) : null}
       </div>
     );

diff --git a/lib/src/components/GenericSeqPanel.tsx b/lib/src/components/GenericSeqPanel.tsx
@@ -1,33 +1,34 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { useState, useEffect, useRef } from "react";
-import SequencePanel from "@jbrowse/core/BaseFeatureWidget/SequencePanel";
+import SequencePanel from "@jbrowse/core/BaseFeatureWidget/SequenceFeatureDetails/SequencePanel";
 import { assembleBundle } from "../assembleBundle";
 import { Feature } from "@jbrowse/core/util";
 import copy from "copy-to-clipboard";
 import { Button, Tooltip } from "reactstrap";
+import { SequenceFeatureDetailsModel } from "@jbrowse/core/BaseFeatureWidget/SequenceFeatureDetails/model";
 
 type Bundle = Awaited<ReturnType<typeof assembleBundle>>;
 
 export default function GenericSeqPanel({
   nclistbaseurl,
   fastaurl,
   refseq,
-  mode,
   start,
   end,
   gene,
   transcript,
   urltemplate,
+  model,
 }: {
   nclistbaseurl: string;
   fastaurl: string;
   refseq: string;
-  mode: string;
   start: number;
   end: number;
   gene: string;
   transcript: Feature;
   urltemplate: string;
+  model: SequenceFeatureDetailsModel;
 }) {
   const [result, setResult] = useState<Bundle>();
   const [error, setError] = useState<unknown>();
@@ -48,7 +49,6 @@ export default function GenericSeqPanel({
           refseq,
         });
         setResult(res);
-        //	console.log(res.sequence.seq);
       } catch (e) {
         console.error(e);
         setError(e);
@@ -128,7 +128,7 @@ export default function GenericSeqPanel({
           <div className="p-2">
             <SequencePanel
               ref={seqPanelRef}
-              mode={mode}
+              model={model}
               sequence={result.sequence}
               feature={result.feature as any}
             />

diff --git a/package.json b/package.json
@@ -10,26 +10,26 @@
     "lint": "eslint lib app"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.1.0",
-    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^16.0.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.5.1",
+    "@types/jest": "^29.5.14",
     "@types/node": "^20.14.2",
-    "@types/node-fetch": "^2.6.11",
+    "@types/node-fetch": "^2.6.12",
     "@typescript-eslint/eslint-plugin": "^7.13.0",
     "@typescript-eslint/parser": "^7.13.0",
-    "eslint": "^8.0.0",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.7",
-    "eslint-plugin-unicorn": "^53.0.0",
+    "eslint": "^9.16.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "eslint-plugin-unicorn": "^56.0.1",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "node-fetch": "^2.0.0",
-    "prettier": "^3.3.2",
-    "rimraf": "^5.0.0",
-    "ts-jest": "^29.1.0",
-    "typescript": "^5.0.4"
+    "prettier": "^3.4.2",
+    "rimraf": "^6.0.1",
+    "ts-jest": "^29.2.5",
+    "typescript": "^5.7.2"
   }
 }