-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* use Escher maps interactively with CNApy * adaptive waiting period for Escher to become operational * bump format version, improve Map menu, basic FVA support for Escher, explicitly ingore drag on Escher map * phase one of initial setup now on Javascript side Co-authored-by: Paulocracy <[email protected]>
- Loading branch information
1 parent
fabb676
commit 7606a01
Showing
9 changed files
with
664 additions
and
88 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <script src="escher.min.js" charset="utf-8"></script> | ||
| <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script> | ||
| <script type="text/javascript"> | ||
| var cnapy_bridge = null; | ||
| window.onload = function() | ||
| { | ||
| new QWebChannel(qt.webChannelTransport, function(channel) { | ||
| cnapy_bridge = channel.objects.cnapy_bridge; | ||
| var wait_count = 0; | ||
| function wait_for_map() { | ||
| if (builder.map != null) { // take this as proxy that Escher is now operational | ||
| try { | ||
| cnapy_bridge.get_map_and_geometry(map_and_geometry => { | ||
| if (map_and_geometry[0].length > 0) { | ||
| console.warn("Loading map"); | ||
| builder.load_map(JSON.parse(map_and_geometry[0])); | ||
| builder.map.zoomContainer.goTo(JSON.parse(map_and_geometry[1]), JSON.parse(map_and_geometry[2])); | ||
| } | ||
| builder.passPropsSearchBar({display:true}); | ||
| setTimeout(() => {cnapy_bridge.finish_setup();}, 50) | ||
| }) | ||
| } | ||
| catch (error) { | ||
| alert(error); | ||
| } | ||
| } | ||
| else | ||
| if (wait_count < 50) { | ||
| wait_count += 1 | ||
| console.warn(wait_count) | ||
| setTimeout(wait_for_map, 100) | ||
| } | ||
| else | ||
| alert("Escher appears inoperational, cannot display map.") | ||
| } | ||
| setTimeout(wait_for_map, 100) | ||
| }); | ||
| } | ||
|
|
||
| const preact = escher.libs.preact; | ||
| const h = preact.createElement; | ||
|
|
||
| var tooltipStyle = { | ||
| 'min-width': '40px', | ||
| 'min-height': '10px', | ||
| 'border-radius': '2px', | ||
| 'border': '1px solid #b58787', | ||
| 'padding': '7px', | ||
| 'background-color': '#fff', | ||
| 'text-align': 'left', | ||
| 'font-size': '16px', | ||
| 'font-family': 'sans-serif', | ||
| 'color': '#111', | ||
| 'box-shadow': '4px 6px 20px 0px rgba(0, 0, 0, 0.4)' | ||
| }; | ||
|
|
||
| class CnapyTooltip extends preact.Component { | ||
| constructor() { | ||
| super() | ||
| } | ||
|
|
||
| componentShouldUpdate() { | ||
| // important according to Escher documentation | ||
| return false; | ||
| } | ||
|
|
||
| handleKeyUp(event) { | ||
| cnapy_bridge.value_changed(this.props.biggId, event.target.value, event.keyCode === 13) | ||
| } | ||
|
|
||
| handleOnFocusOut(event) { | ||
| cnapy_bridge.value_changed(this.props.biggId, event.target.value, true) | ||
| } | ||
|
|
||
| handleClickOnID(event) { | ||
| cnapy_bridge.clicked_on_id(this.props.type, this.props.biggId) | ||
| } | ||
|
|
||
| render () { | ||
| var tip = h('div', {className: 'cnapy-tooltip', style: tooltipStyle}, | ||
| h('div', {className: 'id', onClick: (event) => this.handleClickOnID(event), style: "font-weight: bold;"}, this.props.biggId), | ||
| h('div', {className: 'name'}, this.props.name)) | ||
|
|
||
| if (this.props.type === 'reaction') { | ||
| tip.children.push(h('input', {type: 'text', | ||
| id: 'reaction-box-input', | ||
| style: 'color: black', | ||
| onFocus: (event) => event.target.select(), | ||
| onKeyUp: (event) => this.handleKeyUp(event), | ||
| onFocusOut: (event) => this.handleOnFocusOut(event) | ||
| })) | ||
| if (cnapy_bridge) // to keep page operational outside CNApy | ||
| cnapy_bridge.set_reaction_box_scenario_value(this.props.biggId) | ||
| } | ||
|
|
||
| return tip | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <meta charset="utf-8"/> | ||
| <body> | ||
| <div id="map_container"></div> | ||
|
|
||
| <script type="text/javascript"> | ||
| builder = escher.Builder(null, null, null, escher.libs.d3_select('#map_container'), | ||
| {menu: 'all', fill_screen: true, never_ask_before_quit: true, tooltip_component: CnapyTooltip, scroll_behavior: 'zoom'}) | ||
|
|
||
| function reactionOnMap(reacId) { | ||
| var records = builder.map.search_index.find(reacId); | ||
| for (i=0; i<records.length; i++) { | ||
| var record = records[i]; | ||
| if (record.type == "reaction" && builder.map.reactions[record.reaction_id].bigg_id == reacId) | ||
| return true; | ||
| } | ||
| return false; | ||
| } | ||
|
|
||
| function highlightAndFocusReaction(reacId) { | ||
| var records = builder.map.search_index.find(reacId); | ||
| for (i=0; i<records.length; i++) { | ||
| var record = records[i]; | ||
| if (record.type == "reaction" && builder.map.reactions[record.reaction_id].bigg_id == reacId) { | ||
| builder.map.highlight_reaction(record.reaction_id); | ||
| builder.map.zoom_to_reaction(record.reaction_id); | ||
| return | ||
| } | ||
| } | ||
| } | ||
|
|
||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.