Skip to content
This repository has been archived by the owner on Jan 22, 2024. It is now read-only.

Commit

Permalink
updating modals; updating cutsite info dialog (these changes were acc…
Browse files Browse the repository at this point in the history 
…identally stashed
  • Loading branch information
@tnrich
tnrich committed Mar 10, 2021
1 parent a02a7b3 commit e0eb8ab
Show file tree
Hide file tree
Showing 18 changed files with 249 additions and 265 deletions.
30 changes: 15 additions & 15 deletions nwb.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,18 @@ module.exports = {
// esModules: console.log("commentMeBackOut") || false,
// cjs: console.log("commentMeBackOut") || false
},
...(process.env.NODE_ENV !== "production" && {
babel: {
runtime: false,
env: {
targets: "defaults, not IE 11"
},
...(process.env.WITH_COVERAGE && {
plugins: ["istanbul"]
})
}
}),

babel: {
runtime: false,
env: {
targets: {
chrome: "78",
electron: "59"
}
},
...(process.env.WITH_COVERAGE && {
plugins: ["istanbul"]
})
},
webpack: {
aliases: {
// **** You can comment one or more of these in to override an npm module with a local module. *****
Expand All @@ -35,9 +35,9 @@ module.exports = {
// console.log("comment me back out!") ||
// path.join("../ve-sequence-parsers/src/parsers/"),
//downgrade to nwb @ 0.24.5 to get this to work for now
// "teselagen-react-components":
// console.log("comment me back out!") ||
// path.join(__dirname, "../teselagen-react-components/src/"),
"teselagen-react-components":
console.log("comment me back out!") ||
path.join(__dirname, "../teselagen-react-components/src/"),

//don't comment this out!
react: path.join(__dirname, "node_modules/react"),
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@
"@types/lodash": "npm:@types/lodash-es",
"auto-changelog": "^2.2.1",
"babel-plugin-istanbul": "^6.0.0",
"copy-to-clipboard": "^3.3.1",
"cypress": "^6.4.0",
"drag-mock": "^1.4.0",
"eslint": "^6.8.0",
Expand Down
5 changes: 5 additions & 0 deletions src/CircularView/Cutsites.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ function Cutsites({
editorName,
showCutsiteLabels,
cutsiteClicked,
cutsiteDoubleClicked,
cutsiteRightClicked,
cutsites,
cutsiteWidth = 1,
Expand Down Expand Up @@ -46,6 +47,10 @@ function Cutsites({
cutsiteClicked({ event, annotation });
event.stopPropagation();
},
onDoubleClick: (event) => {
cutsiteDoubleClicked({ event, annotation });
event.stopPropagation();
},
onContextMenu: (event) => {
cutsiteRightClicked({ event, annotation });
event.stopPropagation();
Expand Down
104 changes: 35 additions & 69 deletions src/CutsiteFilter/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,19 @@ import withEditorProps from "../withEditorProps";
import specialCutsiteFilterOptions from "../constants/specialCutsiteFilterOptions";

import React from "react";
import EnzymesDialog from "../helperComponents/EnzymesDialog";

import "./style.css";
import { TgSelect } from "teselagen-react-components";

import map from "lodash/map";
import { flatMap } from "lodash";
import { omit } from "lodash";
import { showDialog } from "../GlobalDialog";
import { showDialog } from "../GlobalDialogUtils";
import {
addCutsiteGroupClickHandler,
getCutsiteWithNumCuts,
getUserGroupLabel
} from "./AdditionalCutsiteInfoDialog";

export class CutsiteFilter extends React.Component {
static defaultProps = {
Expand Down Expand Up @@ -93,15 +97,7 @@ export class CutsiteFilter extends React.Component {
...map(specialCutsiteFilterOptions, (opt) => opt),
...map(userEnzymeGroups, (nameArray, name) => {
return {
label: (
<span
title={`User created enzyme group ${name} -- ${nameArray.join(
" "
)}`}
>
<Icon size={10} icon="user"></Icon>&nbsp;{name}
</span>
),
label: getUserGroupLabel({ nameArray, name }),
value: "__userCreatedGroup" + name,
nameArray
};
Expand All @@ -110,15 +106,19 @@ export class CutsiteFilter extends React.Component {
...Object.keys(cutsitesByName)
.sort()
.map(function (key) {
const label = getLabel(cutsitesByName[key], key);
const numCuts = (cutsitesByName[key] || []).length;
const label = getCutsiteWithNumCuts({
numCuts,
name: numCuts ? cutsitesByName[key][0].name : key
});
return {
canBeHidden: true,
label,
// hiddenEnzyme: false,
value: key
};
})
].map(addClickableLabel);
].map((n) => addClickableLabel(n, { closeDropDown }));
// function openManageEnzymes() {
// dispatch({
// type: "CREATE_YOUR_OWN_ENZYME_RESET"
Expand Down Expand Up @@ -179,16 +179,19 @@ export class CutsiteFilter extends React.Component {
} else if (filteredOpt.value.includes("__userCreatedGroup")) {
toRet = filteredOpt;
} else {
const label = getLabel(
cutsitesByName[filteredOpt.value],
filteredOpt.value
);
const numCuts = (cutsitesByName[filteredOpt.value] || []).length;
const label = getCutsiteWithNumCuts({
numCuts,
name: numCuts
? cutsitesByName[filteredOpt.value][0].name
: filteredOpt.value
});
toRet = {
...filteredOpt,
label
};
}
return addClickableLabel(toRet);
return addClickableLabel(toRet, { closeDropDown });
})}
/>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
Expand All @@ -197,7 +200,7 @@ export class CutsiteFilter extends React.Component {
enzymeManageOverride
? enzymeManageOverride(this.props)
: showDialog({
Component: EnzymesDialog
dialogType: "EnzymesDialog"
// inputSequenceToTestAgainst: sequenceData ? sequenceData.sequence : ""
});
closeDropDown();
Expand All @@ -213,54 +216,17 @@ export class CutsiteFilter extends React.Component {

export default compose(withEditorProps, connect())(CutsiteFilter);

const getLabel = (maybeCutsites = [], val) => {
const cutNumber = maybeCutsites.length;

return (
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between"
}}
>
{" "}
<div>{val}</div>{" "}
<div style={{ fontSize: 12 }}>
&nbsp;({cutNumber} cut{cutNumber === 1 ? "" : "s"})
</div>
</div>
);
};

function addClickableLabel(toRet) {
return toRet;
// return {
// ...toRet,
// ...(toRet.label
// ? {
// label: (
// <div
// className="tg-clickable-cutsite-label"
// style={{ cursor: "pointer" }}
// onClick={() => {
// showDialog({
// Component: wrapDialog()(() => {
// return <div className={Classes.DIALOG_BODY}>yaa</div>;
// }),
// props: {
// dialogProps: {
// title: "hahah"
// },
// yaa: "baby"
// }
// });
// }}
// >
// {toRet.label}
// </div>
// )
// }
// : {})
// };
function addClickableLabel(toRet, { closeDropDown }) {
return {
...toRet,
...(toRet.label
? {
label: addCutsiteGroupClickHandler({
closeDropDown,
cutsiteOrGroupKey: toRet.value,
el: toRet.label
})
}
: {})
};
}
18 changes: 17 additions & 1 deletion src/EnzymeViewer/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
import { Icon } from "@blueprintjs/core";
import React from "react";
import copyToClipboard from "copy-to-clipboard";

import RowItem from "../RowItem";
import "./style.css";

export default ({
extraClasses = "",
Expand All @@ -12,7 +16,19 @@ export default ({
const seqPlusPadding = paddingStart + sequence + paddingEnd;

return (
<div className={"enzyme-rowitem " + extraClasses}>
<div
style={{ cursor: "pointer", position: "relative" }}
onClick={() => {
copyToClipboard(sequence);
window.toastr.success("Recognition Site Copied");
}}
className={"enzyme-rowitem " + extraClasses}
>
<Icon
className="tg-icon-duplicate-inner"
style={{ display: "none", position: "absolute", top: 3, left: 3 }}
icon="duplicate"
></Icon>
<RowItem
{...{
tickSpacing: 1,
Expand Down
55 changes: 38 additions & 17 deletions src/GlobalDialog.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,47 @@
import React, { useState } from "react";
import shortid from "shortid";

const dialogHolder = {};
import { dialogHolder, hideDialog } from "./GlobalDialogUtils";

import RenameSequenceDialog from "./helperComponents/RenameSequenceDialog";
import PrintDialog from "./helperComponents/PrintDialog";
import RemoveDuplicates from "./helperComponents/RemoveDuplicates";
import GoToDialog from "./helperComponents/GoToDialog";
import SelectDialog from "./helperComponents/SelectDialog";
import EnzymesDialog from "./helperComponents/EnzymesDialog";
import CreateCustomEnzyme from "./CreateCustomEnzyme";
import {
AdditionalCutsiteInfoDialog,
CompareEnzymeGroupsDialog
} from "./CutsiteFilter/AdditionalCutsiteInfoDialog";
import { AlignmentToolDialog } from "./ToolBar/alignmentTool";
import MergeFeaturesDialog from "./helperComponents/MergeFeaturesDialog";
import AddOrEditPartDialog from "./helperComponents/AddOrEditPartDialog";
import AddOrEditFeatureDialog from "./helperComponents/AddOrEditFeatureDialog";
import AddOrEditPrimerDialog from "./helperComponents/AddOrEditPrimerDialog";

const Dialogs = {
RenameSequenceDialog,
PrintDialog,
RemoveDuplicates,
GoToDialog,
SelectDialog,
EnzymesDialog,
CreateCustomEnzyme,
AdditionalCutsiteInfoDialog,
CompareEnzymeGroupsDialog,
AlignmentToolDialog,
MergeFeaturesDialog,
AddOrEditPartDialog,
AddOrEditFeatureDialog,
AddOrEditPrimerDialog
};

export function GlobalDialog(props) {
const [uniqKey, setUniqKey] = useState();
dialogHolder.setUniqKey = setUniqKey;
const Comp =
props.dialogOverrides[dialogHolder.overrideName] || dialogHolder.Dialog;
props.dialogOverrides[dialogHolder.overrideName] ||
Dialogs[dialogHolder.dialogType];
if (!Comp) return null;
return (
<Comp
Expand All @@ -18,17 +53,3 @@ export function GlobalDialog(props) {
></Comp>
);
}

//if an overrideName is passed, then that dialog can be overridden if an overriding dialog is passed as a prop to the <Editor/>
export function showDialog({ Component, props, overrideName }) {
dialogHolder.Dialog = Component;
dialogHolder.props = props;
dialogHolder.overrideName = overrideName;
dialogHolder.setUniqKey(shortid());
}
export function hideDialog() {
delete dialogHolder.Dialog;
delete dialogHolder.props;
delete dialogHolder.overrideName;
dialogHolder.setUniqKey(shortid());
}
4 changes: 2 additions & 2 deletions src/ToolBar/alignmentTool.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import classNames from "classnames";
import ToolbarItem from "./ToolbarItem";
import { connectToEditor } from "../withEditorProps";
import withEditorProps from "../withEditorProps";
import { showDialog } from "../GlobalDialog";
import { showDialog } from "../GlobalDialogUtils";
import { compose } from "recompose";

export default connectToEditor(({ readOnly, toolBar = {} }) => {
Expand Down Expand Up @@ -59,7 +59,7 @@ class AlignmentToolDropdown extends React.Component {
onClick={() => {
toggleDropdown();
showDialog({
Component: AlignmentToolDialog,
dialogType: "AlignmentToolDialog",
props: {
createNewAlignment: this.props.createNewAlignment,
upsertAlignmentRun: this.props.upsertAlignmentRun,
Expand Down
Loading

0 comments on commit e0eb8ab

Please sign in to comment.