@teselagen/ove 0.7.27 → 0.7.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.7.27",
+  "version": "0.7.28",
   "main": "./src/index.js",
   "type": "module",
   "exports": {
@@ -11,11 +11,11 @@
     "./*": "./*"
   },
   "dependencies": {
-    "@teselagen/sequence-utils": "0.3.30",
+    "@teselagen/sequence-utils": "0.3.31",
     "@teselagen/range-utils": "0.3.13",
-    "@teselagen/ui": "0.7.26",
+    "@teselagen/ui": "0.8.6",
     "@teselagen/file-utils": "0.3.20",
-    "@teselagen/bio-parsers": "0.4.27",
+    "@teselagen/bio-parsers": "0.4.28",
     "@blueprintjs/core": "3.54.0",
     "@hello-pangea/dnd": "16.2.0",
     "@risingstack/react-easy-state": "^6.3.0",
@@ -65,7 +65,8 @@
     "vite": "^5.2.11",
     "@vitejs/plugin-react": "^4.3.0",
     "vite-plugin-libcss": "^1.1.1",
-    "vite-tsconfig-paths": "^4.3.2"
+    "vite-tsconfig-paths": "^4.3.2",
+    "@playwright/test": "^1.44.1"
   },
   "license": "MIT"
 }

package/panelsShown.js

@@ -0,0 +1,294 @@
+import { map, flatMap } from "lodash-es";
+import { createReducer } from "redux-act";
+import createAction from "./utils/createMetaAction";
+import { removeItem } from "../utils/arrayUtils";
+import immer from "immer";
+
+//manages which tab panels are shown in the editor
+
+// ------------------------------------
+// Actions
+// ------------------------------------
+export const panelsShownUpdate = createAction("PANELS_SHOWN_UPDATE");
+export const addPanelIfItDoesntAlreadyExist = createAction(
+  "addPanelIfItDoesntAlreadyExist"
+);
+export const togglePanelFullScreen = createAction("togglePanelFullScreen");
+export const collapsePanel = createAction("collapsePanel");
+export const closePanel = createAction("closePanel");
+export const _collapseSplitScreen = createAction("_collapseSplitScreen");
+export const setPanelAsActive = createAction("setPanelAsActive");
+export const flipActiveTabFromLinearOrCircularIfNecessary = createAction(
+  "flipActiveTabFromLinearOrCircularIfNecessary"
+);
+export const expandTabToSplitScreen = createAction("expandTabToSplitScreen");
+export const propertiesViewOpen = (unused, meta) => {
+  return setPanelAsActive("properties", meta);
+};
+export const createNewDigest = (unused, meta) => {
+  return dispatch => {
+    dispatch(
+      addPanelIfItDoesntAlreadyExist(
+        {
+          id: "digestTool",
+          name: "New Digest",
+          active: true,
+          canClose: true
+        },
+        meta
+      )
+    );
+    dispatch(setPanelAsActive("digestTool", meta));
+  };
+};
+export const createNewPCR = (unused, meta) => {
+  return dispatch => {
+    dispatch(
+      addPanelIfItDoesntAlreadyExist(
+        {
+          id: "pcrTool",
+          name: "New PCR",
+          active: true,
+          canClose: true
+        },
+        meta
+      )
+    );
+    dispatch(setPanelAsActive("pcrTool", meta));
+  };
+};
+
+export const createNewAlignment = (payload, meta) => {
+  return dispatch => {
+    dispatch(
+      addPanelIfItDoesntAlreadyExist(
+        {
+          type: "alignment",
+          name: "New Alignment",
+          active: true,
+          canClose: true,
+          ...payload
+        },
+        meta
+      )
+    );
+    dispatch(setPanelAsActive(payload.id, meta));
+  };
+};
+
+export const createNewMismatchesList = (payload, meta) => {
+  return dispatch => {
+    dispatch(
+      addPanelIfItDoesntAlreadyExist(
+        {
+          type: "mismatches",
+          name: "Mismatches",
+          active: true,
+          canClose: true,
+          ...payload
+        },
+        meta
+      )
+    );
+    dispatch(setPanelAsActive(payload.id, meta));
+  };
+};
+
+export const collapseSplitScreen = (activePanelId, meta) => {
+  return dispatch => {
+    dispatch(_collapseSplitScreen(activePanelId, meta));
+    activePanelId && dispatch(setPanelAsActive(activePanelId, meta));
+  };
+};
+
+// ------------------------------------
+// Reducer
+// ------------------------------------
+const reducer = createReducer(
+  {
+    [addPanelIfItDoesntAlreadyExist]: (state, panelToAdd) => {
+      if (
+        !state.some(panelGroup => {
+          return panelGroup.some(({ id }) => {
+            return id === panelToAdd.id;
+          });
+        })
+      ) {
+        return state.map((panelGroup, index) => {
+          if (index === 0) return [panelToAdd, ...panelGroup];
+          return panelGroup;
+        });
+      }
+      return state;
+    },
+    [panelsShownUpdate]: (state, payload) => {
+      return payload.filter(group => group.length); //filter out any empty groups
+    },
+    [flipActiveTabFromLinearOrCircularIfNecessary]: (state, setCircActive) => {
+      const newState = immer(state, s => {
+        s.forEach(g => {
+          flipActiveForGroup(g, setCircActive);
+        });
+      });
+
+      return newState;
+    },
+    [closePanel]: (state, idToClose) => {
+      const newState = state.map(group => {
+        let indexToClose;
+        group.forEach(({ id }, i) => {
+          if (id === idToClose) indexToClose = i;
+        });
+        if (indexToClose > -1) {
+          const newPanels = removeItem(group, indexToClose);
+          let mostRecentIndex = 0;
+          newPanels.forEach(p => {
+            if (
+              (p.lastActive || 0) > (newPanels[mostRecentIndex].lastActive || 0)
+            ) {
+              mostRecentIndex = newPanels.indexOf(p);
+            }
+          });
+
+          return newPanels.map((tab, i) => {
+            if (i === mostRecentIndex) return { ...tab, active: true };
+            else {
+              return tab;
+            }
+          });
+        }
+        return group;
+      });
+      return newState.filter(group => group.length); //filter out any empty groups
+    },
+    [_collapseSplitScreen]: state => {
+      return [flatMap(state)];
+    },
+    [expandTabToSplitScreen]: (state, activePanelId) => {
+      let panelToMove;
+      return [
+        state[0]
+          .filter(panel => {
+            if (panel.id === activePanelId) {
+              panelToMove = panel;
+              return false;
+            }
+            return true;
+          })
+          .map((panel, i) => {
+            return i === 0 ? { ...panel, active: true } : panel;
+          }),
+        [{ ...panelToMove, active: true }]
+      ];
+    },
+    [setPanelAsActive]: (state, panelId) => {
+      return map(state, panelGroup => {
+        const isPanelInGroup = panelGroup.some(({ id }) => {
+          return panelId === id;
+        });
+        return panelGroup.map(panel => {
+          return {
+            ...panel,
+            active:
+              panelId === panel.id
+                ? true
+                : isPanelInGroup
+                  ? false
+                  : panel.active
+          };
+        });
+      });
+    },
+    [togglePanelFullScreen]: (state, panelId) => {
+      return map(state, panelGroup => {
+        const isPanelInGroup = panelGroup.some(({ id }) => {
+          return panelId === id;
+        });
+        return panelGroup.map(panel => {
+          return {
+            ...panel,
+            active:
+              panelId === panel.id
+                ? true
+                : isPanelInGroup
+                  ? false
+                  : panel.active,
+            fullScreen:
+              panelId === panel.id
+                ? !panel.fullScreen
+                : isPanelInGroup
+                  ? false
+                  : panel.fullScreen
+          };
+        });
+      });
+    },
+    [collapsePanel]: (state, panelToCloseId) => {
+      return [
+        flatMap(state, panelGroup => {
+          return panelGroup;
+        }).map(panel => {
+          if (panel.id === panelToCloseId) {
+            return {
+              ...panel,
+              active: false
+            };
+          }
+          return panel;
+        })
+      ];
+    }
+  },
+  [
+    [
+      {
+        id: "circular",
+        name: "Circular Map",
+        active: true
+        //   canClose: true
+      },
+      {
+        id: "rail",
+        name: "Linear Map",
+        active: false
+      }
+    ],
+    [
+      {
+        id: "sequence",
+        name: "Sequence Map",
+        active: true
+      },
+      {
+        id: "properties",
+        name: "Properties",
+        active: false
+      }
+    ]
+  ]
+);
+
+export default (state, action) => {
+  const nextState = reducer(state, action);
+  nextState.forEach(pg => {
+    pg.forEach(p => {
+      if (p.active) {
+        p.lastActive = Date.now();
+      }
+    });
+  });
+  return nextState;
+};
+function flipActiveForGroup(group, setCircActive) {
+  const activeTab = group.find(({ active }) => active);
+  if (activeTab?.id === (setCircActive ? "rail" : "circular")) {
+    //we're on the wrong tab type so check if the other tab is in
+    const newTabToActivate = group.find(
+      ({ id }) => id === (setCircActive ? "circular" : "rail")
+    );
+    if (newTabToActivate) {
+      newTabToActivate.active = true;
+      activeTab.active = false;
+    }
+  }
+}

package/partLengthsToHide.js

@@ -0,0 +1,23 @@
+import createMergedDefaultStateReducer from "./utils/createMergedDefaultStateReducer";
+import createAction from "./utils/createMetaAction";
+
+// ------------------------------------
+// Actions
+// ------------------------------------
+export const updatePartLengthsToHide = createAction("updatePartLengthsToHide");
+export const togglePartLengthsToHide = createAction("togglePartLengthsToHide");
+
+// ------------------------------------
+// Reducer
+// ------------------------------------
+export default createMergedDefaultStateReducer(
+  {
+    [updatePartLengthsToHide]: (state, payload) => {
+      return { ...state, ...payload };
+    },
+    [togglePartLengthsToHide]: state => {
+      return { ...state, enabled: !state["enabled"] };
+    }
+  },
+  { enabled: false, min: 0, max: 800 }
+);

package/partOverhangs.js

@@ -0,0 +1,6 @@
+export const partOverhangs = [
+  "fivePrimeOverhang",
+  "fivePrimeUnderhang",
+  "threePrimeOverhang",
+  "threePrimeUnderhang"
+];

package/partTagSearch.js

@@ -0,0 +1,69 @@
+import React from "react";
+import withEditorProps from "../withEditorProps";
+import { TgSelect, getKeyedTagsAndTagOptions } from "@teselagen/ui";
+import { flatMap } from "lodash-es";
+import { uniqBy } from "lodash-es";
+
+export const PartTagSearch = withEditorProps(PartToolDropdown);
+
+function PartToolDropdown({
+  sequenceData,
+  updateSelectedPartTags,
+  selectedPartTags,
+  allPartTags,
+  annotationVisibilityShow,
+  editTagsLink,
+  dontAutoOpen
+}) {
+  if (!sequenceData) return <div>No Parts Present</div>;
+  const keyedTags = getKeyedTagsAndTagOptions(allPartTags);
+
+  // this is what keyedTags looks like:
+  // keyedTags = {
+  //   '12:4': {label,value,id},
+  //   '12:1': {label,value,id},
+  //   '44': {label,value,id},
+  // }
+
+  const tags = uniqBy(
+    flatMap(sequenceData.parts, ({ tags }) => {
+      return flatMap(tags, t => {
+        const tag = keyedTags[t];
+        if (!tag) return [];
+        return tag;
+      });
+    }),
+    "value"
+  );
+  return (
+    <div style={{ width: "100%" }}>
+      <div>Search Parts By Tag: </div>
+      <div style={{ display: "flex" }}>
+        <TgSelect
+          value={selectedPartTags.parts}
+          onChange={(...args) => {
+            annotationVisibilityShow("parts");
+            updateSelectedPartTags(...args);
+          }}
+          isTagSelect
+          multi
+          popoverProps={{
+            usePortal: false,
+            modifiers: {
+              preventOverflow: { enabled: false },
+              hide: {
+                enabled: false
+              },
+              flip: {
+                boundariesElement: "viewport"
+              }
+            }
+          }}
+          options={tags}
+          autoOpen={!dontAutoOpen}
+        ></TgSelect>
+        {editTagsLink || null}
+      </div>
+    </div>
+  );
+}

package/partTool.js

@@ -0,0 +1,45 @@
+import { Icon } from "@blueprintjs/core";
+// import { Checkbox, Button } from "@blueprintjs/core";
+import React from "react";
+// import { connect } from "react-redux";
+// import { convertRangeTo1Based } from "@teselagen/range-utils";
+//import { partIcon } from "@teselagen/ui";
+import ToolbarItem from "./ToolbarItem";
+import { connectToEditor } from "../withEditorProps";
+import { PartTagSearch } from "../helperComponents/partTagSearch";
+
+export default connectToEditor(
+  ({ annotationVisibility = {}, toolBar = {} }) => {
+    return {
+      toggled: annotationVisibility.parts,
+      isOpen: toolBar.openItem === "partTool"
+    };
+  }
+)(({
+  allPartTags,
+  editTagsLink,
+  toolbarItemProps,
+  toggled,
+  annotationVisibilityToggle,
+  isOpen
+}) => {
+  return (
+    <ToolbarItem
+      {...{
+        Icon: <Icon icon="doughnut-chart" />,
+        onIconClick: function () {
+          annotationVisibilityToggle("parts");
+        },
+        toggled,
+        editTagsLink,
+        allPartTags,
+        tooltip: "Show parts",
+        tooltipToggled: "Hide parts",
+        noDropdownIcon: !allPartTags,
+        Dropdown: PartTagSearch,
+        dropdowntooltip: (!isOpen ? "Show" : "Hide") + " Part Options",
+        ...toolbarItemProps
+      }}
+    />
+  );
+});

package/parts.js

@@ -0,0 +1,19 @@
+import { createReducer } from "redux-act";
+import createAction from "../utils/createMetaAction";
+import upsertDeleteActionGenerator from "./upsertDeleteActionGenerator";
+
+// ------------------------------------
+// Actions
+// ------------------------------------
+export const upsertPart = createAction("UPSERT_PART");
+export const deletePart = createAction("DELETE_PART");
+
+// ------------------------------------
+// Reducer
+// ------------------------------------
+export default createReducer(
+  {
+    ...upsertDeleteActionGenerator(upsertPart, deletePart)
+  },
+  {}
+);

package/partsSelector.js

@@ -0,0 +1,8 @@
+import { createSelector } from "reselect";
+import sequenceDataSelector from "./sequenceDataSelector";
+
+function partsRawSelector(sequenceData) {
+  return sequenceData.parts;
+}
+
+export default createSelector(sequenceDataSelector, partsRawSelector);

package/polarToSpecialCartesian.js

@@ -0,0 +1,7 @@
+export default function polarToSpecialCartesian(radius, angle) {
+  //the 0 angle returns the 0,1 point on the unit circle instead of the 1,0 point like normal
+  return {
+    x: radius * Math.cos(angle - Math.PI / 2),
+    y: radius * Math.sin(angle - Math.PI / 2)
+  };
+}

package/positionCutsites.js

@@ -0,0 +1,6 @@
+export function positionCutsites(annotation) {
+  return {
+    start: annotation.topSnipPosition,
+    end: annotation.topSnipPosition
+  };
+}

package/prepareRowData.js

@@ -0,0 +1,64 @@
+import { mapAnnotationsToRows } from "@teselagen/sequence-utils";
+import { annotationTypes } from "@teselagen/sequence-utils";
+export default function prepareRowData(sequenceData, bpsPerRow) {
+  const sequenceLength = sequenceData.noSequence
+    ? sequenceData.size
+    : sequenceData.sequence.length;
+  const totalRows = Math.ceil(sequenceLength / bpsPerRow) || 1; //this check makes sure there is always at least 1 row!
+  const rows = [];
+  const rowMap = {};
+  if (sequenceData.isProtein) {
+    rowMap.primaryProteinSequence = mapAnnotationsToRows(
+      [
+        {
+          id: "primaryProteinSequence",
+          forward: true,
+          start: 0,
+          end: sequenceLength - 1,
+          proteinSequence: sequenceData.proteinSequence,
+          aminoAcids: sequenceData.aminoAcidDataForEachBaseOfDNA
+        }
+      ],
+      sequenceLength,
+      bpsPerRow
+    );
+  }
+  annotationTypes.forEach(function (type) {
+    rowMap[type] = mapAnnotationsToRows(
+      sequenceData[type],
+      sequenceLength,
+      bpsPerRow,
+      { splitForwardReverse: type === "primers" }
+    );
+  });
+
+  for (let rowNumber = 0; rowNumber < totalRows; rowNumber++) {
+    const row = {};
+    row.rowNumber = rowNumber;
+    row.start = rowNumber * bpsPerRow;
+    row.end =
+      (rowNumber + 1) * bpsPerRow - 1 < sequenceLength
+        ? (rowNumber + 1) * bpsPerRow - 1
+        : sequenceLength - 1;
+    if (row.end < 0) {
+      row.end = 0;
+    }
+    annotationTypes.forEach(function (type) {
+      row[type] = rowMap[type][rowNumber] || [];
+    });
+    if (sequenceData.isProtein) {
+      row.isProtein = true;
+      row.primaryProteinSequence =
+        rowMap.primaryProteinSequence &&
+        (rowMap.primaryProteinSequence[rowNumber] || []);
+    }
+    row.sequence = sequenceData.noSequence
+      ? {
+          length: row.end + 1 - row.start
+        }
+      : sequenceData.sequence.slice(row.start, row.end + 1);
+
+    rows[rowNumber] = row;
+  }
+  return rows;
+}