@teselagen/ove 0.7.14 → 0.7.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.7.14",
+  "version": "0.7.15",
   "main": "./src/index.js",
   "exports": {
     ".": {
@@ -60,7 +60,6 @@
     "mock-fs": "5.2.0",
     "nanoid": "^4.0.0",
     "node-interval-tree": "^1.3.3",
-    "papaparse": "5.3.2",
     "paths-js": "^0.4.11",
     "pluralize": "^7.0.0",
     "popper.js": "^1.16.1",

package/src/CircularView/RotateCircularViewSlider.js

@@ -12,16 +12,17 @@ export function RotateCircularViewSlider({
   smallSlider,
   editorName
 }) {
+  const mainSelector = editorName ? `.veEditor.${editorName}` : ".veEditor";
   const target = React.useRef();
   const svgEleRef = React.useRef();
 
   useEffect(() => {
     // use document.querySelector so that the code can still work after changing the parent node of this component
     const svgEle = document
-      .querySelector(`.veEditor.${editorName}`)
+      .querySelector(mainSelector)
       ?.querySelector(".veCircularView .circularViewSvg");
     svgEleRef.current = svgEle;
-  }, [editorName]);
+  }, [editorName, mainSelector]);
 
   const showLabelsDebounced = useDebouncedCallback(
     el => {
@@ -56,10 +57,11 @@ export function RotateCircularViewSlider({
           const val = 360 - _val;
           if (!svgEleRef.current) {
             svgEleRef.current = document
-              .querySelector(`.veEditor.${editorName}`)
+              .querySelector(mainSelector)
               ?.querySelector(".veCircularView .circularViewSvg");
           }
           const el = svgEleRef.current;
+          if (!el) return;
           const innerEl = el?.querySelector("g");
           innerEl.style.transform = `rotate(${val}deg)`;
           setRotationRadians((val * Math.PI) / 180);

package/src/SimpleCircularOrLinearView.js

@@ -46,7 +46,8 @@ export default props => {
     withFullscreen,
     selectionLayer,
     selectionLayerUpdate,
-    caretPositionUpdate
+    caretPositionUpdate,
+    editorName = "tg-simple-dna-view"
   } = props;
   const [previewType, setPreviewType] = useState(
     _sequenceData.circular ? "circular" : "linear"
@@ -216,7 +217,7 @@ export default props => {
         <Component
           {...{
             showCicularViewInternalLabels: true,
-            className: "tg-simple-dna-view veEditor",
+            className: `${editorName} veEditor tg-simple-dna-view`,
             width: 300,
             height: 300,
             noWarnings,