Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Visavis integration #6

Open
blokhin opened this issue Dec 2, 2022 · 2 comments
Open

Visavis integration #6

blokhin opened this issue Dec 2, 2022 · 2 comments
Assignees
Labels
bug Something isn't working documentation Improvements or additions to documentation enhancement New feature or request

Comments

@blokhin
Copy link
Member

blokhin commented Dec 2, 2022

Currently, it's done as simple as accessing the iframe contentWindow:

ermac/src_js/markup.js

Lines 748 to 749 in a14cde6

<!-- PLOTS EMBED -->
<div id="visavis"><iframe id="visavis_iframe" frameborder=0 scrolling="no" width="100%" height="100%" src="/visavis/"></iframe></div><!-- NB relative URL -->

with these functions:

ermac/src_js/main_logic.js

Lines 962 to 1081 in 58033d5

function start_visavis(plot_type){
destroy_numericbox();
delete wmgui.search.numeric;
if (plot_type) wmgui.visavis_curtype = plot_type;
$('div.ctxpanel').hide();
var toshow = $('#ctxpanel_' + wmgui.visavis_curtype);
if (toshow.length) toshow.show();
if (['matrix', 'cube', 'discovery'].indexOf(wmgui.visavis_curtype) > -1) $('#cmppanel_plots').show();
if (wmgui.visavis_working)
return manage_visavis();
rebuild_visavis();
// visavis_col preparation
$('#visavis_col').show();
$('#visavis').show();
switch_control_mode(0, 11, 'a', 'e');
$('body').addClass('noscroll');
wmgui.search_type = 0;
wmgui.visavis_working = true;
wmgui.visavis_starting = false;
var cur_obj = {total_count: 1};
$.extend(cur_obj, wmgui.search);
try {
document.getElementById('visavis_iframe').contentWindow.location.replace(get_visavis_url(cur_obj));
} catch (e){
console.error('No iframe access');
}
}
function manage_visavis(callback_fn, param_a, param_b){
if (wmgui.visavis_terminating || !wmgui.visavis_working){
return false;
}
if (wmgui.search.numeric){ // not supported for plotting yet!
wmgui.visavis_terminating = true;
return false;
}
try { wmgui.active_ajax.abort() } catch(e){}
try { wmgui.quick_ajax.abort() } catch(e){}
rebuild_visavis();
var cur_obj = {total_count: 1};
$.extend(cur_obj, wmgui.search);
try {
document.getElementById('visavis_iframe').contentWindow.location.replace(get_visavis_url(cur_obj));
} catch (e){
console.error('No iframe access');
}
if (callback_fn) callback_fn(param_a, param_b);
return true;
}
function rebuild_visavis(){
var extr = window.location.hash.indexOf('search/');
if (extr == -1){
var extr = window.location.hash.indexOf('inquiry/');
if (extr == -1) return;
}
var query = window.location.hash.substr(extr);
$('a.pltcol_links').each(function(){
var that = $(this),
plot_type = that.attr('rev');
that.attr('href', wmgui.gui_host + window.location.pathname + '#plot/' + plot_type + '/' + query);
});
$('#visavis_col > ul > li').removeClass('embodied');
$('#pltchoice_' + wmgui.visavis_curtype).addClass('embodied');
// ctx reset
if (['matrix', 'cube', 'discovery'].indexOf(wmgui.visavis_curtype) > -1)
update_dc();
if (wmgui.visavis_curtype == 'matrix'){
$('#ctxpanel_matrix > ul > li.embodied').removeClass('embodied');
var y_id = $('#ctxpanel_matrix > ul > li.ss_y');
if (y_id.length) y_id.removeClass('ss_y');
$('#vismatrix_nump').addClass('embodied'); // set the default sort order (also in Visavis: TODO)
$('span.sops').remove();
} else if (wmgui.visavis_curtype == 'cube'){
$('#ctxpanel_cube > ul > li.embodied').removeClass('embodied');
var y_id = $('#ctxpanel_cube > ul > li.ss_y'),
z_id = $('#ctxpanel_cube > ul > li.ss_z');
if (y_id.length) y_id.removeClass('ss_y');
if (z_id.length) z_id.removeClass('ss_z');
$('#viscube_nump').addClass('embodied');
$('span.sops').remove();
} else if (wmgui.visavis_curtype == 'graph'){
$('#ctxpanel_graph > ul > li.embodied').removeClass('embodied');
$('#visgraph_props').addClass('embodied');
}
try {
document.getElementById('visavis_iframe').contentWindow.fixel_manage(wmgui.visavis_curtype == 'cube' && wmgui.search.elements);
} catch (e){
console.error('No iframe access');
}
}
function stop_visavis(){
$('#visavis, #visavis_col').hide();
wmgui.visavis_working = false;
wmgui.visavis_terminating = false;
}

This causes problems if Ermac and Visavis are loaded from the different domains.

@nin-jin @PavelZubkov please could you recommend how this should be done via postMessage interface?

@blokhin blokhin self-assigned this Dec 2, 2022
@blokhin blokhin added the bug Something isn't working label Dec 2, 2022
@nin-jin
Copy link

nin-jin commented Dec 3, 2022

App inside iframe should send message first to init bidirectional communication after load.

@blokhin blokhin added enhancement New feature or request documentation Improvements or additions to documentation labels Apr 27, 2023
@blokhin
Copy link
Member Author

blokhin commented May 29, 2023

@nin-jin @PavelZubkov @stan-donarise let's introduce a cool DX to embed Visavis in any iframe, on an example of Ermac

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working documentation Improvements or additions to documentation enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

4 participants