amigo
amigo copied to clipboard
geneontology
Add ribbon display as option on gene pages
Will help if needed. Package is here: https://www.npmjs.com/package/@geneontology/ribbon and code is right next door.
The docs on the page do not actually see to demonstrate usage or API options. As well, one thing we'd want to confirm is how to ensure that the links pointing to our own stuff. @selewis can you help with that, or should we rope @nathandunn in?
@kltm - I'd like to help, but for this we'll need @nathandunn because I've no experience with that side of things (be good to know)
@kltm / @selewis Yeah, I can help with that. I have to do something similar with genome features, as well. We may want to think about this for Monarch, as well. Talk on Monday.
More explicitly, I'd likely need the following to move forward:
- [ ] widget insertion/injection documentation
- [ ] CSS documentation (we'd like to align with our bootstrap a bit)
- [ ] API documentation (at least how to use/change the linker)
Okay. Most likely we'll have to tool around with amigo a little bit to see how you do this insertion. My guess is that this is mostly jQuery / bbop libs? In theory here are some examples: http://tech.oyster.com/using-react-and-jquery-together/
Is that even necessary? The parts that will be used by the React component will have no interaction with any jQuery. As long as it can be injected (i.e. used as an external lib via browserify in our case) and does not actively conflict, I'm not sure what the issue would be.
hopefully it can be loaded as a passive react library using this: https://reactarmory.com/answers/how-to-integrate-react-into-existing-app . Doesn't look to bad.
Only one way to know for sure.
Sure. I need to confer with Suzi as there are a few other things that need to happen with it first (if you are waiting for docs). I'll provide docs for both react and vanilla.js (and hopefully working within the demo there). Probably next week unless its more urgent. You can probably test the method by just grabbing a random one, though:
https://www.npmjs.com/package/recharts
and see if that insert method works. It won't be any different.
Great! I'll probably just wait for the official docs from you as we'll also need to make sure that links stay within AmiGO where possible, etc.
Makes sense. Good to do it all at once. Will be exciting to get this in there.
On Jul 10, 2018, at 3:37 PM, kltm [email protected] wrote:
Great! I'll probably just wait for the official docs from you as we'll also need to make sure that links stay within AmiGO where possible, etc.
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/geneontology/amigo/issues/515#issuecomment-403988158, or mute the thread https://github.com/notifications/unsubscribe-auth/AAt2qkoUSJByANBhhM8YbwPANSbT5Pzbks5uFSzBgaJpZM4VGIPx.
@kltm I'm sure there will be a number of things to change yet, but probably good to at least get the ball rolling (and I'll be out Thursday and Friday).
Anyway, I updated the readme, and you can hopefully just follow the bouncing ball to get it work.
https://github.com/geneontology/ribbon/blob/master/README.md
Based on https://reactarmory.com/answers/how-to-integrate-react-into-existing-app . I think it shouldn't be too bad.
I think this is going in the right direction, but I am looking for the following:
Given the following HTML page:
<html>
<head>
<link rel="stylesheet" type="text/css" href="my-css-compiled-my-way.css" />
<script type="text/javascript" src="my-js-compiled-my-way.js"></script>
<script type="text/javascript" src="MyOtherAppCompiledMyWayInNotReact.js"></script>
</head>
<body>
<div id="foo"></div>
</body>
</html>
How do I get your widget into div "foo" with my linker (to make sure that things link internally to my app)?
I see what you are saying. I think its possible thatI may need a further component to make this work. I have a few more Ribbon things to take care of and then I'll give this another shot in pure HTML.
@nathandunn Massively--we don't use anything else currently (except when knitting local package versions as is the case with some AmiGO deployments).
Okay, I'll try to create a simple npm project and wrap it in. I still have to fix coloring and a few other things. Might happen later this week. My intuition is that I will need a wrapper file. Its also likely that the script does the insertion, but only way to find out.
@kltm I think the most eloquent solution looks like this (it is not working, but I want to give you an idea):
https://github.com/nathandunn/ribbon-import-test
You provide a div: https://github.com/nathandunn/ribbon-import-test/blob/master/dist/index.html#L22
and then tell react to render it:
https://github.com/nathandunn/ribbon-import-test/blob/master/src/application.js#L15
Demo isn't parameterized, so its commented out (and we should really not use a component called demo in the first-place). However, we can create a react component that mirrors Demo fairly easily in-line or we can just put something like this into the demo function and it will just work.
Doing it this way, you'll need to add react, react-dom, and @geneontology/ribbon to your npm package.json
I think this is the best strategy for doing this effectively. If you cut out a swath for me as a PR to test that you can do a simple ReactDOM.render() I'm sure I can take care of the rest or we can figure it out later this week.
@nathandunn es5, no transpiler. Although is necessary, that could be added to the setup.
We do not use webpack, rather browserify right now. CommonJS compatibility is important.
I don't think that webpack or babel will be necessary. https://stackoverflow.com/questions/43175140/why-does-react-require-babel-and-webpack-to-work
If you could get that example kind of working in amigo (just the ReactDOM.render(<div>abc</div>), I think the rest should be pretty straight-forward
.
@kltm So it works as part of #518 for react injection. The important pieces will be:
- add the appropriate packages and import them: https://github.com/geneontology/amigo/pull/518/files#diff-b9cfc7f2cdf78a7f4b91a753d10865a2R25
I have it working using a script import in the template file + babel you probably want to remove: https://github.com/geneontology/amigo/pull/518/files#diff-c5524986336c8851ed608187ea3c28e8R6
-
provide a div (maybe in the template): https://github.com/geneontology/amigo/pull/518/files#diff-c5524986336c8851ed608187ea3c28e8R117 . Could be done in code as well.
-
create a react component and render it: https://github.com/geneontology/amigo/pull/518/files#diff-c5524986336c8851ed608187ea3c28e8R158 and call
ReactDom.render()https://github.com/geneontology/amigo/pull/518/files#diff-c5524986336c8851ed608187ea3c28e8R171 -
include the Ribbon Component (this is where I got stuck) and render it as a react component where it gets properly configured. We do this in the Ribbon demo:
- https://github.com/geneontology/ribbon/blob/master/demo/src/Demo.js#L50
and within the agr_ui:
- https://github.com/alliance-genome/agr_ui/blob/develop/src/components/geneOntologyRibbon/index.js .
Talking to @sibyl229 , it seems they have run into similar issues. It might be good to touch bases.
Similar issues as ... ? But yes, we were also discussing yesterday with Patrick and ZFIN (not using any framework), but they still would want to be able to integrate the ribbon. So we'll need some more work & documentation on that. I should have some time to work on that in a ~ month, but the ribbon is still changing and there will be some components refactoring soon.
