@teselagen/ove 0.7.28 → 0.7.29

package/ove.css

@@ -9676,7 +9676,7 @@ body:not(.drag-active)
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  margin-top: 20px;
+  margin-top: 10px;
 }
 
 .ReactTable {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.7.28",
+  "version": "0.7.29",
   "main": "./src/index.js",
   "type": "module",
   "exports": {
@@ -13,7 +13,7 @@
   "dependencies": {
     "@teselagen/sequence-utils": "0.3.31",
     "@teselagen/range-utils": "0.3.13",
-    "@teselagen/ui": "0.8.6",
+    "@teselagen/ui": "0.8.6-beta.23",
     "@teselagen/file-utils": "0.3.20",
     "@teselagen/bio-parsers": "0.4.28",
     "@blueprintjs/core": "3.54.0",
@@ -62,10 +62,6 @@
     "biomsa": "^0.2.4",
     "shortid": "2.2.16",
     "@use-gesture/react": "10.3.0",
-    "vite": "^5.2.11",
-    "@vitejs/plugin-react": "^4.3.0",
-    "vite-plugin-libcss": "^1.1.1",
-    "vite-tsconfig-paths": "^4.3.2",
     "@playwright/test": "^1.44.1"
   },
   "license": "MIT"

package/src/helperComponents/PropertiesDialog/TranslationProperties.js

@@ -45,7 +45,7 @@ class TranslationProperties extends React.Component {
       let aaString = "";
       for (let i = 0; i < translation.aminoAcids.length; i++) {
         // sometimes the `translation.aminoAcids[i].aminoAcid` is null
-        aaString += translation.aminoAcids[i].aminoAcid?.value || '';
+        aaString += translation.aminoAcids[i].aminoAcid?.value || "";
       }
       return {
         ...translation,

package/AASliver.js

@@ -1,187 +0,0 @@
-// import PropTypes from "prop-types";
-import React from "react";
-import pureNoFunc from "../../utils/pureNoFunc";
-
-function AASliver(props) {
-  const {
-    forward,
-    aminoAcidIndex,
-    showAAColors = true,
-    onClick,
-    onContextMenu,
-    width,
-    height,
-    isFiller,
-    isTruncatedStart,
-    isTruncatedEnd,
-    relativeAAPositionInTranslation,
-    title,
-    color,
-    showAminoAcidNumbers,
-    letter
-  } = props;
-
-  if (letter === "-") {
-    return null;
-  }
-
-  const dirX1 = 1 / Math.sqrt(26);
-  const dirY1 = 5 * dirX1;
-
-  const dirX2 = 16 / Math.sqrt(2756);
-  const dirY2 = 50 / Math.sqrt(2756);
-
-  const roundedCorner = 15;
-  let path = "";
-  path = isFiller
-    ? "25,0 49,0 60,50 49,100 25,100 38,50 25,0"
-    : isTruncatedStart
-      ? // ? "0,0 50,0 60,50 50,100 00,100 16,50 0,0"
-        `M ${roundedCorner / 3}, 0
-                  L ${50 - roundedCorner / 3}, 0
-                  Q 50 0 ${50 + roundedCorner * dirX1} ${roundedCorner * dirY1}
-                  L ${60 - roundedCorner * dirX1}, ${50 - roundedCorner * dirY1}
-                  Q 60 50 ${60 - roundedCorner * dirX1} ${
-                    50 + roundedCorner * dirY1
-                  }
-                  L ${50 + roundedCorner * dirX1}, ${
-                    100 - roundedCorner * dirY1
-                  }
-                  Q 50 100 ${50 - roundedCorner} 100
-                  L ${roundedCorner / 3}, 100
-                  Q 0 100 ${roundedCorner * dirX2} ${
-                    100 - roundedCorner * dirY2
-                  }
-                  L ${16 - roundedCorner * dirX2}, ${50 + roundedCorner * dirY2}
-                  Q 16 50 ${16 - roundedCorner * dirX2} ${
-                    50 - roundedCorner * dirY2
-                  }
-                  L ${roundedCorner * dirX2}, ${roundedCorner * dirY2}
-                  Q 0 0 ${roundedCorner / 3} 0
-                  z`
-      : isTruncatedEnd
-        ? // ? "24,0 74,0 84,50 74,100 24,100 40,50 24,0"
-          `M ${24 + roundedCorner / 3}, 0
-                  L ${74 - roundedCorner / 3}, 0
-                  Q 74 0 ${74 + roundedCorner * dirX1} ${roundedCorner * dirY1}
-                  L ${84 - roundedCorner * dirX1}, ${50 - roundedCorner * dirY1}
-                  Q 84 50 ${84 - roundedCorner * dirX1} ${
-                    50 + roundedCorner * dirY1
-                  }
-                  L ${74 + roundedCorner * dirX1}, ${
-                    100 - roundedCorner * dirY1
-                  }
-                  Q 74 100 ${74 - roundedCorner} 100
-                  L ${24 + roundedCorner / 3}, 100
-                  Q 24 100 ${24 + roundedCorner * dirX2} ${
-                    100 - roundedCorner * dirY2
-                  }
-                  L ${40 - roundedCorner * dirX2}, ${50 + roundedCorner * dirY2}
-                  Q 40 50 ${40 - roundedCorner * dirX2}, ${
-                    50 - roundedCorner * dirY2
-                  }
-                  L ${24 + roundedCorner * dirX2}, ${roundedCorner * dirY2}
-                  Q 24 0 ${24 + roundedCorner / 3} 0
-                  z`
-        : `M ${roundedCorner / 3}, 0
-                  L ${74 - roundedCorner / 3}, 0
-                  Q 74 0 ${74 + roundedCorner * dirX1} ${roundedCorner * dirY1}
-                  L ${84 - roundedCorner * dirX1}, ${50 - roundedCorner * dirY1}
-                  Q 84 50 ${84 - roundedCorner * dirX1} ${
-                    50 + roundedCorner * dirY1
-                  }
-                  L ${74 + roundedCorner * dirX1}, ${
-                    100 - roundedCorner * dirY1
-                  }
-                  Q 74 100 ${74 - roundedCorner / 3} 100
-                  L ${roundedCorner / 3}, 100
-                  Q 0 100 ${roundedCorner * dirX2} ${
-                    100 - roundedCorner * dirY2
-                  }
-                  L ${16 - roundedCorner * dirX2}, ${50 + roundedCorner * dirY2}
-                  Q 16 50 ${16 - roundedCorner * dirX2}, ${
-                    50 - roundedCorner * dirY2
-                  }
-                  L ${roundedCorner * dirX2}, ${roundedCorner * dirY2}
-                  Q 0 0 ${roundedCorner / 3} 0
-                  z`;
-  return (
-    <g
-      onClick={onClick}
-      onContextMenu={onContextMenu}
-      transform={
-        "scale(" +
-        (width / 100) * 1.25 +
-        ", " +
-        height / 100 +
-        ") translate(" +
-        ((forward ? -20 : -50) +
-          ((relativeAAPositionInTranslation - 1) * 100) / 1.25) +
-        ",0)"
-      }
-    >
-      <title>{title}</title>
-      {showAAColors &&
-        (isFiller ? (
-          <polyline
-            className={letter}
-            transform={forward ? "scale(3,1)" : "translate(300,0) scale(-3,1) "}
-            points={
-              isFiller
-                ? "25,0 49,0 60,50 49,100 25,100 38,50 25,0"
-                : isTruncatedStart
-                  ? "0,0 50,0 60,50 50,100 00,100 16,50 0,0"
-                  : isTruncatedEnd
-                    ? "24,0 74,0 84,50 74,100 24,100 40,50 24,0"
-                    : "0,0 74,0 85,50 74,100 0,100 16,50 0,0"
-            }
-            strokeWidth="5"
-            fill={color || "gray"}
-          />
-        ) : (
-          <path
-            className={letter}
-            transform={forward ? "scale(3,1)" : "translate(300,0) scale(-3,1) "}
-            d={path}
-            strokeWidth="5"
-            fill={color || "gray"}
-          />
-        ))}
-
-      {/* isTruncatedEnd && isTruncatedStart is the special case of a single base exon */}
-      {(!isFiller || (isTruncatedEnd && isTruncatedStart)) && (
-        <text
-          fontSize={25}
-          stroke="black"
-          strokeWidth={2}
-          transform={`scale(${(3 / width) * 10},3) translate(${
-            ((forward ? 45 : 55) * width) / 10
-          },21)`}
-          x="0"
-          y="4"
-          style={{ textAnchor: "middle" }}
-        >
-          {letter}
-        </text>
-      )}
-
-      {showAminoAcidNumbers && (aminoAcidIndex + 1) % 5 === 0 && (
-        <text
-          fontSize={25}
-          stroke="black"
-          strokeWidth={2}
-          transform={`scale(${(3 / width) * 10},3) translate(${
-            ((forward ? 45 : 55) * width) / 10
-          },51)`}
-          x="0"
-          y="4"
-          style={{ textAnchor: "middle" }}
-        >
-          {aminoAcidIndex + 1}
-        </text>
-      )}
-    </g>
-  );
-}
-
-export default pureNoFunc(AASliver);

package/AddLaddersDialog.js

@@ -1,82 +0,0 @@
-import { FileUploadField, wrapDialog } from "@teselagen/ui";
-import React from "react";
-import { compose } from "recompose";
-import { reduxForm } from "redux-form";
-import useLadders from "../utils/useLadders";
-import { MenuItem } from "@blueprintjs/core";
-import downloadjs from "downloadjs";
-import { isArray } from "lodash-es";
-import { hideDialog } from "../GlobalDialogUtils";
-
-export const AddLaddersDialog = compose(
-  wrapDialog({ title: "Add Ladder" }),
-  reduxForm({ form: "AddLaddersDialog" })
-)(function AddLaddersDialog({ setSelectedLadder }) {
-  const [additionalLadders, setLadders] = useLadders();
-  return (
-    <div className="bp3-dialog-body">
-      <FileUploadField
-        fileLimit={1}
-        threeDotMenuItems={
-          <MenuItem
-            text="Download Example File"
-            onClick={() => {
-              downloadjs(
-                `{
-  "value": "exampleRuler",
-  "label": "Example Ladder 2Kb",
-  "markings": [
-    40000, 20000, 8000, 3000, 1500, 900, 440, 333,
-    222, 17
-  ]
-}
-`,
-                `exampleLadderFile.json`,
-                "text/plain"
-              );
-            }}
-          />
-        }
-        name="ladderUpload"
-        innerText="Upload a new ladder .json file"
-        accept={[".json"]}
-        readBeforeUpload
-        style={{ maxWidth: 400 }}
-        beforeUpload={async files => {
-          try {
-            const newLadder = JSON.parse(files[0].parsedString);
-            if (!newLadder) {
-              throw new Error(
-                "No new ladder found. Use the example file for the proper JSON format"
-              );
-            }
-            if (typeof newLadder.value !== "string") {
-              throw new Error(
-                "Incorrect value. Use the example file for the proper JSON format"
-              );
-            }
-            if (typeof newLadder.label !== "string") {
-              throw new Error(
-                "Incorrect label. Use the example file for the proper JSON format"
-              );
-            }
-            if (!isArray(newLadder.markings)) {
-              throw new Error(
-                "Incorrect markings. Use the example file for the proper JSON format"
-              );
-            }
-            setLadders([...additionalLadders, newLadder]);
-            window.toastr.success(`Added New Ladder ${newLadder.label}`);
-            setSelectedLadder(newLadder.value);
-          } catch (e) {
-            console.error(`e:`, e);
-            window.toastr.error(
-              "Something went wrong with the file upload. Check the dev console for more details. Use the example file for the proper JSON format"
-            );
-          }
-          hideDialog();
-        }}
-      />
-    </div>
-  );
-});