Add ribbon display as option on gene pages #515
Comments
|
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) |
|
More explicitly, I'd likely need the following to move forward:
|
|
I'll put it in a new tab to begin with once I have the above. |
|
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. |
|
Give me docs (as above) and I'll try it out. |
|
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 ***@***.***> 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 <#515 (comment)>, 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 |
|
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. |
|
@kltm Are you using NPM at all? |
|
@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 Are you running es6, es5? |
|
@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
Doing it this way, you'll need to add react, react-dom, and 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 |
|
@kltm So it works as part of #518 for react injection. The important pieces will be:
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
and within the agr_ui: |
|
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. |
Will help if needed. Package is here: https://www.npmjs.com/package/@geneontology/ribbon and code is right next door.
The text was updated successfully, but these errors were encountered: