Replies: 14 comments 6 replies
-
|
Hi, |
Beta Was this translation helpful? Give feedback.
-
|
Hey @kelmazouari yep so as stated in the open vector editor readme you'll need to pass the sequenceData property to an updateState call: https://github.com/TeselaGen/openVectorEditor#editorstate You can get ove sequenceData from a genbank string using the anyToJson (in this package) or the more specific genbankToJson method. Let me know if you have more questions. Check out the demo code or the umd demo code in the ove repo to see an example of the editor being populated with sequenceData |
Beta Was this translation helpful? Give feedback.
-
|
Hi @tnrich |
Beta Was this translation helpful? Give feedback.
-
|
Hey @kelmazouari I've been away from my computer for the past few weeks but I can work up a demo for you when I come back. The idea should be quite simple using umd or react. In either case you'll also need to require this package, bio-parsers (from npm or your dependency management system of choice). You'll use bio-parsers to get the OVE json representation of a genbank file. That json can then be fed to the OVE instance (react or umd) using the updateState or updateEditor method (I forget what it's called in the umd case but it is outlined in the docs). Good luck tinkering and lemme know how it goes. I'll make a little code sandbox for you in a few days when I'm back if you don't get it on your own |
Beta Was this translation helpful? Give feedback.
-
|
Thanks in advance @tnrich , |
Beta Was this translation helpful? Give feedback.
-
|
Hey @kelmazouari Here's the the html file with the parsing: |
Beta Was this translation helpful? Give feedback.
-
|
Many thanks, @tnrich. |
Beta Was this translation helpful? Give feedback.
-
|
Hello @tnrich My app UI has 2 parts: left and right. I would like to render OVE id the right part only. When OVE is launched it 'overlaps' the whole app UI. Any suggestion on how to render OVE inside a specific component (right part) ? |
Beta Was this translation helpful? Give feedback.
-
|
@kelmazouari I'd just make 2 side by side divs (with the widths that you want) and put the editor into one of them. You can target a specific dom node using the UMD build by passing your own dom node as specified in the docs: https://github.com/TeselaGen/openVectorEditor#code-universal
Use a document.querySelector() to grab the dom node of your choosing. |
Beta Was this translation helpful? Give feedback.
-
|
Hey @kelmazouari I'm going to let you work out how to do this. At this point it is just about learning the fundamentals of css and html positioning which is something you can do tutorials for. Good luck! Any other ove specific questions I'd be happy to field for you! |
Beta Was this translation helpful? Give feedback.
-
|
I agree with you. |
Beta Was this translation helpful? Give feedback.
-
|
Hello @tnrich, |
Beta Was this translation helpful? Give feedback.
-
|
@kelmazouari I'm glad it's working for you. Just to be clear, is this the functionality you're wanting to see (1st frame of the entire sequence being translated)? If so, you're in luck! You can indeed set a given frame to be displayed by default like so: Lemme know if that works for you. Cheers! |
Beta Was this translation helpful? Give feedback.
-
|
Yes, it's working. Many thanks. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @tnrich , |
Beta Was this translation helpful? Give feedback.
-
|
Hey @kelmazouari, For Revision History, it should be hidden by default so long as getVersionList and getSequenceAtVersion aren't passed as props. Here is its logical operator: As for customizing the menu, yes this is already possible. You should be able to do literally whatever you want to the menu by passing a menuFilter function as a prop. It is documented in the Editor Demo on the demo page: http://teselagen.github.io/openVectorEditor/#/Editor?menuOverrideExample=true
For the umd version, that would look like: const editor = window.createVectorEditor("createDomNodeForMe", {
withPreviewMode: true,
editorName: "FirstSequence",
showMenuBar: true,
menuFilter:
// Menu customization example
(menuDef) => {
menuDef.push({ text: "Custom", submenu: ["copy"] });
menuDef[0].submenu
.find((i) => i.text && i.text.includes("Export"))
.submenu.push({
text: "Custom export option!",
onClick: () => window.toastr.success("Custom export hit!")
});
menuDef[3].submenu.push({
text: "My Custom Tool",
onClick: () => window.toastr.success("Some custom tool")
});
return menuDef;
}
});That should do it for you. Let me know if you have any more questions about it :) Lemme know how it goes! |
Beta Was this translation helpful? Give feedback.
-
|
Hello @tnrich, I noticed In Standalone mode, the ToolBar contains a 'Save' item. Is it possible to display the 'Save' item in UMDDemo.html toolbar ? Best |
Beta Was this translation helpful? Give feedback.
-
|
Hi @tnrich , I noticed that Ambiguous AA 'X' are not rendered.
I used this fix. But may not work where proteinAlphabet["-"] is used. |
Beta Was this translation helpful? Give feedback.
-
|
Hey @kelmazouari would you mind recreating this one as an issue? I think that would help with tracking all the different requests coming in on this long discussion thread. I'll take a look at it. Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
@kelmazouari I went ahead and made the issue: #153 |
Beta Was this translation helpful? Give feedback.
-
👋 Welcome!
We’re using Discussions as a place to connect with other members of our community. We hope that you:
build together 💪.
To get started, comment below with an introduction of yourself and tell us about what you do with this community.
Beta Was this translation helpful? Give feedback.
All reactions