@teselagen/ove 0.0.14 → 0.0.16

package/src/helperComponents/RemoveDuplicates/index.js

@@ -0,0 +1,194 @@
+import React from "react";
+import { reduxForm } from "redux-form";
+
+import {
+  wrapDialog,
+  DataTable,
+  withSelectedEntities,
+  SwitchField,
+  tgFormValues
+} from "@teselagen/ui";
+import { compose } from "redux";
+import { Button, Classes, Popover } from "@blueprintjs/core";
+import classNames from "classnames";
+
+import withEditorProps from "../../withEditorProps";
+import { forEach, camelCase, startCase } from "lodash";
+import { sizeSchema } from "../PropertiesDialog/utils";
+import { getRangeLength } from "@teselagen/range-utils";
+
+const schema = {
+  fields: [
+    // ...(noColor
+    //   ? []
+    //   : [
+    //       {
+    //         path: "color",
+    //         type: "string",
+    //         render: color => {
+    //           return (
+    //             <ColorPickerPopover>
+    //               <div style={{ height: 20, width: 20, background: color }} />
+    //             </ColorPickerPopover>
+    //           );
+    //         }
+    //       }
+    //     ]),
+    { path: "name", type: "string" },
+    // ...(noType ? [] : [{ path: "type", type: "string" }]),
+    sizeSchema,
+    { path: "strand", type: "string" }
+  ]
+};
+
+class RemoveDuplicatesDialog extends React.Component {
+  state = {
+    dups: []
+  };
+  componentDidMount() {
+    this.recomputeDups();
+  }
+
+  checkboxStyle = { marginTop: 0, marginBottom: 0 };
+
+  delayedRecomputeDups = () => {
+    setTimeout(() => {
+      this.recomputeDups();
+    });
+  };
+  recomputeDups = () => {
+    const {
+      // hideModal,
+      type,
+      sequenceData = { sequence: "" },
+      // handleSubmit,
+      sequenceLength,
+      ignoreName,
+      ignoreStrand,
+      ignoreStartAndEnd
+      // circular,
+      // upsertFeature
+    } = this.props;
+
+    const annotations = sequenceData[type];
+    const dups = [];
+    const seqsHashByStartEndStrandName = {};
+    forEach(annotations, (a) => {
+      const hash = `${ignoreStartAndEnd ? "" : a.start}&${
+        ignoreStartAndEnd ? "" : a.end
+      }&${ignoreStrand ? "" : a.strand}&${ignoreName ? "" : a.name}`;
+      if (seqsHashByStartEndStrandName[hash]) {
+        dups.push({ ...a, size: getRangeLength(a, sequenceLength) });
+      } else {
+        seqsHashByStartEndStrandName[hash] = true;
+      }
+    });
+    this.setState({ dups });
+  };
+  render() {
+    const { duplicatesToRemoveSelectedEntities, hideModal, type } = this.props;
+
+    const selectedIds = this.state.dups.map((d) => d.id);
+    // const sequenceLength = sequenceData.sequence.length;
+    // const isCirc = (this.state || {}).circular;
+    return (
+      <div className={classNames(Classes.DIALOG_BODY, "tg-min-width-dialog")}>
+        {/* {dups.map((d) => {
+          return <div>
+
+          </div>
+        })} */}
+        <DataTable
+          noPadding
+          withCheckboxes
+          noFullscreenButton
+          // onRowSelect={this.onRowSelect}
+          maxHeight={400}
+          selectedIds={selectedIds}
+          formName="duplicatesToRemove"
+          noRouter
+          noRowsFoundMessage="No duplicates found"
+          compact
+          noHeader
+          noFooter
+          withSearch={false}
+          hideSelectedCount
+          isInfinite
+          schema={schema}
+          entities={this.state.dups}
+        />
+        <div
+          style={{
+            marginTop: 10,
+            display: "flex",
+            justifyContent: "space-between"
+          }}
+        >
+          <Popover
+            target={<Button icon="settings" />}
+            content={
+              <div style={{ padding: 20, maxWidth: 250 }}>
+                <div>Ignore These Fields While Finding Duplicates:</div>
+                <br></br>
+                <SwitchField
+                  containerStyle={{ marginBottom: 2 }}
+                  //delay the call to recompute dups until redux has had time to update
+                  onFieldSubmit={this.delayedRecomputeDups}
+                  style={this.checkboxStyle}
+                  name="ignoreName"
+                  label="Name"
+                ></SwitchField>
+                <SwitchField
+                  containerStyle={{ marginBottom: 2 }}
+                  //delay the call to recompute dups until redux has had time to update
+                  onFieldSubmit={this.delayedRecomputeDups}
+                  style={this.checkboxStyle}
+                  name="ignoreStrand"
+                  label="Strand"
+                ></SwitchField>
+                <SwitchField
+                  containerStyle={{ marginBottom: 2 }}
+                  //delay the call to recompute dups until redux has had time to update
+                  onFieldSubmit={this.delayedRecomputeDups}
+                  style={this.checkboxStyle}
+                  name="ignoreStartAndEnd"
+                  label="Start and End"
+                ></SwitchField>
+              </div>
+            }
+          ></Popover>
+
+          <Button
+            intent="primary"
+            onClick={() => {
+              this.props[camelCase(`delete_${type}`).slice(0, -1)](
+                duplicatesToRemoveSelectedEntities.map((d) => d.id)
+              );
+              window.toastr.success(
+                `Successfully Deleted ${
+                  duplicatesToRemoveSelectedEntities.length
+                } ${startCase(type)}`
+              );
+              hideModal();
+            }}
+            disabled={!(duplicatesToRemoveSelectedEntities || []).length}
+          >
+            Remove {duplicatesToRemoveSelectedEntities.length} Duplicates
+          </Button>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default compose(
+  wrapDialog(),
+  withEditorProps,
+
+  withSelectedEntities("duplicatesToRemove"),
+
+  reduxForm({
+    form: "RemoveDuplicatesDialog"
+  }),
+  tgFormValues("ignoreName", "ignoreStrand", "ignoreStartAndEnd")
+)(RemoveDuplicatesDialog);

package/src/helperComponents/RenameSequenceDialog.js

@@ -0,0 +1,7 @@
+import createSimpleDialog from "./createSimpleDialog";
+
+export default createSimpleDialog({
+  formName: "renameSequenceDialog",
+  fields: [{ name: "newName", isRequired: true }],
+  withDialogProps: { title: "Rename Sequence", height: 190 }
+});

package/src/helperComponents/SelectDialog.js

@@ -0,0 +1,150 @@
+import { convertRangeTo0Based } from "@teselagen/range-utils";
+import classNames from "classnames";
+import React from "react";
+
+import { reduxForm } from "redux-form";
+import { tgFormValues, wrapDialog } from "@teselagen/ui";
+import { compose } from "redux";
+import { Button, Intent, Classes } from "@blueprintjs/core";
+
+import { NumericInputField } from "@teselagen/ui";
+import { get } from "lodash";
+import { getRangeLength } from "@teselagen/range-utils";
+import { tryToRefocusEditor } from "../utils/editorUtils";
+
+// Single validation function - from & to have the same range
+const validate = (val, vals, props) => {
+  const { min, max } = get(props, "extraProps.from", {});
+  const circular = get(props, "extraProps.circular");
+  if ((min && val < min) || (max && val > max)) {
+    return "Invalid position";
+  }
+  if (!circular && Number(vals.from) > Number(vals.to)) {
+    return "Wrong from/to order";
+  }
+};
+// const selector = formValueSelector("selectDialog");
+export default compose(
+  wrapDialog({
+    isDraggable: true,
+    width: 400,
+    title: "Select Range",
+    height: 270,
+    onCloseHook: tryToRefocusEditor
+  }),
+  reduxForm({
+    form: "selectDialog"
+  }),
+  tgFormValues("from", "to")
+)(
+  class SelectDialog extends React.Component {
+    updateTempHighlight =
+      ({ isStart, isEnd } = {}) =>
+      (val) => {
+        const { selectionLayerUpdate, from, to, invalid } = this.props;
+        if (invalid) return;
+        selectionLayerUpdate(
+          convertRangeTo0Based({
+            start: isStart ? Math.round(val) : from,
+            end: isEnd ? Math.round(val) : to
+          })
+        );
+      };
+    componentDidMount() {
+      const { from, to, initialCaretPosition } = this.props;
+      this.initialSelection = { from, to, initialCaretPosition };
+      this.updateTempHighlight()();
+    }
+    render() {
+      const {
+        hideModal,
+        onSubmit,
+        selectionLayerUpdate,
+        from,
+        to,
+        initialCaretPosition,
+        caretPositionUpdate,
+        sequenceLength,
+        extraProps,
+        isProtein,
+        invalid,
+        handleSubmit
+      } = this.props;
+      const selectionLength = getRangeLength(
+        {
+          start: Number(from),
+          end: Number(to)
+        },
+        sequenceLength
+      );
+
+      return (
+        <form
+          onSubmit={handleSubmit((data) => {
+            if (onSubmit) onSubmit(data);
+            hideModal();
+            tryToRefocusEditor();
+          })}
+          className={classNames(
+            Classes.DIALOG_BODY,
+            "tg-min-width-dialog simple-dialog"
+          )}
+        >
+          <NumericInputField
+            autoFocus
+            minorStepSize={1}
+            label="From:"
+            clampValueOnBlur
+            {...extraProps.to}
+            validate={validate}
+            //tnrtodo this normalization will actually work when https://github.com/palantir/blueprint/issues/3553 gets resolved
+            normalize={normalizeToInt}
+            onAnyNumberChange={this.updateTempHighlight({ isStart: true })}
+            name="from"
+          />
+          <NumericInputField
+            label="To:"
+            clampValueOnBlur
+            minorStepSize={1}
+            {...extraProps.from}
+            validate={validate}
+            normalize={normalizeToInt}
+            onAnyNumberChange={this.updateTempHighlight({ isEnd: true })}
+            name="to"
+          />
+          <div className="dialog-buttons">
+            <Button
+              onClick={() => {
+                if (initialCaretPosition > -1) {
+                  caretPositionUpdate(initialCaretPosition);
+                } else {
+                  selectionLayerUpdate({
+                    start: this.initialSelection.from,
+                    end: this.initialSelection.to
+                  });
+                }
+                hideModal();
+                tryToRefocusEditor();
+              }}
+              text="Cancel"
+            />
+            <Button
+              type="submit"
+              intent={Intent.PRIMARY}
+              text={`Select ${invalid ? 0 : selectionLength} ${
+                isProtein ? "AA" : "BP"
+              }${selectionLength === 1 ? "" : "s"}`}
+              disabled={invalid}
+            />
+          </div>
+        </form>
+      );
+    }
+  }
+);
+
+const normalizeToInt = (val) => {
+  const int = Math.round(val);
+  const normalizedVal = `${int >= 0 ? int : 1}`;
+  return normalizedVal;
+};

package/src/helperComponents/UncontrolledSliderWithPlusMinusBtns.css

@@ -0,0 +1,5 @@
+.small-slider .bp3-slider-handle {
+  width: 12px;
+  height: 12px;
+  top: 2px;
+}

package/src/helperComponents/UncontrolledSliderWithPlusMinusBtns.js

@@ -0,0 +1,134 @@
+import React from "react";
+import { Icon, Slider, Intent } from "@blueprintjs/core";
+import { preventDefaultStopPropagation } from "../utils/editorUtils";
+import { clamp, isNumber } from "lodash";
+import "./UncontrolledSliderWithPlusMinusBtns.css";
+
+export default class UncontrolledSliderWithPlusMinusBtns extends React.Component {
+  state = { value: 0 };
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (
+      nextProps.justUpdateInitialValOnce &&
+      prevState.oldInitialValue !== undefined
+    ) {
+      return null;
+    }
+    //potentially coerce the initial value coming in
+    if (prevState.oldInitialValue !== nextProps.initialValue) {
+      const val = nextProps.coerceInitialValue
+        ? nextProps.coerceInitialValue(nextProps)
+        : nextProps.initialValue;
+      return {
+        value: val, //set the state value if a new initial value comes in!
+        oldInitialValue: nextProps.initialValue
+      };
+    } else {
+      return null;
+    }
+  }
+
+  render() {
+    const { value } = this.state;
+    const {
+      noWraparound,
+      title,
+      initialValue,
+      label,
+      passedRef,
+      clickStepSize,
+      style,
+      onClick,
+      smallSlider,
+      bindOutsideChangeHelper,
+      className,
+      ...rest
+    } = this.props;
+    const { min, max } = this.props;
+
+    const stepSize = this.props.stepSize || (max - min) / 10;
+    if (bindOutsideChangeHelper) {
+      bindOutsideChangeHelper.triggerChange = (fn) => {
+        const valToPass =
+          isNumber(value) && !isNaN(value) ? value : initialValue;
+        return fn({
+          value: valToPass,
+          changeValue: (newVal) => {
+            const newnew = clamp(newVal, min, max);
+            this.setState({ value: newnew });
+            this.props.onChange && this.props.onChange(newnew);
+            this.props.onRelease && this.props.onRelease(newnew);
+          }
+        });
+      };
+    }
+    return (
+      <div
+        className={`${className} ${smallSlider ? "small-slider" : ""}`}
+        onClick={(e) => {
+          onClick && onClick(e);
+          preventDefaultStopPropagation(e);
+        }}
+        ref={passedRef}
+        onDrag={preventDefaultStopPropagation}
+        onDragStart={preventDefaultStopPropagation}
+        onDragEnd={preventDefaultStopPropagation}
+        onMouseDown={preventDefaultStopPropagation}
+        // onMouseUp={preventDefaultStopPropagation} //tnr: commenting this out because it was breaking sliders onRelease
+        title={title}
+        style={{ ...style, display: "flex", marginLeft: 15, marginRight: 20 }}
+      >
+        <Icon
+          onClick={() => {
+            let newVal = value - (clickStepSize || stepSize);
+            if (newVal < min) {
+              if (noWraparound) {
+                newVal = min;
+              } else {
+                newVal = max - (clickStepSize || stepSize);
+              }
+            }
+            this.setState({
+              value: newVal
+            });
+            this.props.onChange(newVal);
+            this.props.onRelease && this.props.onRelease(newVal);
+          }}
+          style={{ cursor: "pointer", marginRight: 8 }}
+          intent={Intent.PRIMARY}
+          icon={this.props.leftIcon || "minus"}
+        />
+        <Slider
+          {...{ ...rest, value }}
+          onRelease={(newVal) =>
+            this.props.onRelease && this.props.onRelease(newVal)
+          }
+          onChange={(value) => {
+            this.setState({ value });
+            this.props.onChange && this.props.onChange(value);
+          }}
+        />
+        <Icon
+          onClick={() => {
+            let newVal = value + (clickStepSize || stepSize);
+            if (newVal > max) {
+              if (noWraparound) {
+                newVal = max;
+              } else {
+                newVal = min + (clickStepSize || stepSize);
+              }
+            }
+            this.setState({
+              value: newVal
+            });
+            this.props.onChange(newVal);
+            this.props.onRelease && this.props.onRelease(newVal);
+          }}
+          style={{ cursor: "pointer", marginLeft: 8 }}
+          intent={Intent.PRIMARY}
+          icon={this.props.rightIcon || "plus"}
+        />
+      </div>
+    );
+  }
+}

package/src/helperComponents/VeWarning/index.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { Icon, Tooltip } from "@blueprintjs/core";
+import "./style.css";
+
+function VeWarning(props) {
+  const { message, tooltip, ...rest } = props;
+  return (
+    <div className="veWarningMessage" {...rest}>
+      <Tooltip
+        position="bottom"
+        intent="warning"
+        popoverClassName="bp3-popover-content-sizing"
+        content={tooltip}
+      >
+        <Icon size={20} intent="warning" icon="warning-sign" />
+      </Tooltip>
+      {message}
+    </div>
+  );
+}
+
+export default VeWarning;

package/src/helperComponents/VeWarning/style.css

@@ -0,0 +1,10 @@
+.veWarningMessage {
+  /* color: red; */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 13px;
+}
+.veWarningMessage svg {
+  margin-right: 10px;
+}

package/src/helperComponents/createSimpleDialog.js

@@ -0,0 +1,89 @@
+import React from "react";
+
+import { reduxForm } from "redux-form";
+import { startCase } from "lodash";
+import { withProps } from "recompose";
+import { InputField, wrapDialog } from "@teselagen/ui";
+import { compose } from "redux";
+import { Button, Intent, Classes } from "@blueprintjs/core";
+import classNames from "classnames";
+import "./simpleDialog.css";
+import { tryToRefocusEditor } from "../utils/editorUtils";
+
+// TODO: move to TRC
+class SimpleGenericDialogForm extends React.Component {
+  render() {
+    const {
+      hideModal,
+      handleSubmit,
+      fields,
+      buttonText = "OK",
+      showCancel = true,
+      onSubmit,
+      invalid,
+      extraProps = {}
+    } = this.props;
+    return (
+      <form
+        onSubmit={handleSubmit((data) => {
+          if (onSubmit) onSubmit(data);
+          hideModal();
+          tryToRefocusEditor();
+        })}
+        className={classNames(
+          Classes.DIALOG_BODY,
+          "tg-min-width-dialog simple-dialog"
+        )}
+      >
+        {fields.map((field, i) => {
+          const { component, isRequired, ...props } = field;
+          const FieldComp = component || InputField;
+          const fieldProps = {
+            autoFocus: i === 0,
+            ...props,
+            ...extraProps[props.name]
+          };
+          fieldProps.label =
+            fieldProps.label || startCase(fieldProps.name) + ":";
+          if (isRequired) fieldProps.validate = required;
+          return <FieldComp key={field.name} {...fieldProps} />;
+        })}
+        <div className="dialog-buttons">
+          {showCancel && (
+            <Button
+              onClick={() => {
+                hideModal();
+                tryToRefocusEditor();
+              }}
+              text="Cancel"
+            />
+          )}
+          <Button
+            type="submit"
+            intent={Intent.PRIMARY}
+            text={buttonText}
+            disabled={invalid}
+          />
+        </div>
+      </form>
+    );
+  }
+}
+
+function required(val) {
+  if (!val) return "Required";
+}
+
+export default function createSimpleDialog(props) {
+  return compose(
+    wrapDialog({
+      isDraggable: true,
+      width: 400,
+      ...props.withDialogProps
+    }),
+    reduxForm({
+      form: props.formName
+    }),
+    withProps(props)
+  )(SimpleGenericDialogForm);
+}

package/src/helperComponents/partTagSearch.js

@@ -0,0 +1,72 @@
+import React from "react";
+import withEditorProps from "../withEditorProps";
+import {
+  TgSelect,
+  getKeyedTagsAndTagOptions
+} from "@teselagen/ui";
+import { flatMap } from "lodash";
+import { uniqBy } from "lodash";
+
+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/src/helperComponents/simpleDialog.css

@@ -0,0 +1,13 @@
+.simple-dialog .dialog-buttons {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
+.simple-dialog .dialog-buttons > * {
+  margin-left: 10px;
+}
+
+.simple-dialog .bp3-form-content {
+  height: 40px;
+}