Output UI components for the ComplexHeatmap module
Source:R/ComplexHeatmap_Heatmap_module_ui.R
ComplexHeatmap_HeatmapOutputUI.RdThis should be placed in the UI where the heatmap should be shown. Unlike the
plotly modules, the interactive output is provided by
InteractiveComplexHeatmap::InteractiveComplexHeatmapOutput(), which supplies
its own resize and export controls.
Arguments
- id
The ID for the Shiny module.
- resizable
Logical; accepted for signature parity with the other module output functions but ignored, since the InteractiveComplexHeatmap widget manages its own sizing.
- fit.width
Logical; when
TRUE(the default) the widget's panels are scaled once on load so the whole thing fits the width of its container, instead of sitting at the fixed pixel widths baked in by InteractiveComplexHeatmap.width1/width2(and their defaults) then act as the relative widths that get scaled, rather than absolute sizes. Heights are left alone, and the widget's own resize handle and size tab still override the fitted width afterwards. PassFALSEfor fixed pixel widths.- ...
Additional arguments passed to
InteractiveComplexHeatmap::InteractiveComplexHeatmapOutput(), e.g.layout,compact,width1/height1,title1/title2/title3.
Details
This renders the original heatmap, the selected sub-heatmap, and the
click/brush info panel together as one widget, arranged per layout (see
InteractiveComplexHeatmap::InteractiveComplexHeatmapOutput() for the
available layout strings, e.g. "(1-2)|3", "1|(2-3)", "1-2-3").
Pass compact = TRUE for a smaller footprint (see the
"Compact
mode" article section): the sub-heatmap panel is dropped entirely and the
click/brush info floats near the cursor instead of occupying its own static
area — equivalent to response = c(action, "brush-output"), output_ui_float = TRUE, per InteractiveComplexHeatmap::InteractiveComplexHeatmapOutput()'s
own docs. layout has nothing left to arrange in compact mode, since only
one static panel remains. No server-side change is needed to turn compact
mode on or off.
A floating info panel is moved onto <body> by InteractiveComplexHeatmap
and parked off-screen when idle. It is parked to the left here rather than
to the right as the package does, since a box parked past the right edge
extends the host page's scrollable width by 10,000px.
To place the three components independently anywhere in a custom UI
(separate tabs, cards, columns, etc.), use ComplexHeatmap_HeatmapMainOutputUI(),
ComplexHeatmap_HeatmapSubOutputUI(), and ComplexHeatmap_HeatmapInfoOutputUI()
instead of this function. Use one approach or the other, not both, for the
same module id. Compact mode is specific to this combined widget: the
separated pieces (originalHeatmapOutput(), subHeatmapOutput(),
HeatmapInfoOutput(), which back the three functions above) don't accept a
compact argument at all.
Examples
library(VizModules)
if (requireNamespace("InteractiveComplexHeatmap", quietly = TRUE)) {
# Default combined widget:
ComplexHeatmap_HeatmapOutputUI("heatmap")
# Same widget, main heatmap on its own row above sub-heatmap + info:
ComplexHeatmap_HeatmapOutputUI("heatmap", layout = "1|(2-3)")
# Compact: no sub-heatmap panel, click/brush info floats near the cursor
ComplexHeatmap_HeatmapOutputUI("heatmap", compact = TRUE)
# Fixed pixel widths, ignoring the container:
ComplexHeatmap_HeatmapOutputUI("heatmap", fit.width = FALSE)
}
#> <div class="container-fluid heatmap_Heatmap_widget">
#> <div id="heatmap_Heatmap_heatmap_group">
#> <h5>Original heatmap</h5>
#> <div id="heatmap_Heatmap_heatmap_resize">
#> <div class="shiny-plot-output html-fill-item" data-brush-clip="TRUE" data-brush-delay="300" data-brush-delay-type="debounce" data-brush-direction="xy" data-brush-fill="#9cf" data-brush-id="heatmap_Heatmap_heatmap_brush" data-brush-opacity="0.6" data-brush-reset-on-new="FALSE" data-brush-stroke="#f00" data-click-clip="TRUE" data-click-id="heatmap_Heatmap_heatmap_click" id="heatmap_Heatmap_heatmap" style="width:450px;height:350px;"></div>
#> <script>
#> $('#heatmap_Heatmap_heatmap').html('<p style="position:relative;top:50%;">Making heatmap, please wait...</p>');
#> </script>
#> </div>
#> <script>
#> $("#heatmap_Heatmap_heatmap_resize").css("width", $("#heatmap_Heatmap_heatmap").width() + 4);
#> $("#heatmap_Heatmap_heatmap_resize").css("height", $("#heatmap_Heatmap_heatmap").height() + 4);
#> </script>
#> <div id="heatmap_Heatmap_heatmap_control" style="display:none;">
#> <div class="tabbable">
#> <ul class="nav nav-tabs" data-tabsetid="8397">
#> <li class="active">
#> <a href="#tab-8397-1" data-toggle="tab" data-bs-toggle="tab" data-value="<i class='fa fa-search'></i>"><i class='fa fa-search'></i></a>
#> </li>
#> <li>
#> <a href="#tab-8397-2" data-toggle="tab" data-bs-toggle="tab" data-value="<i class='fa fa-brush'></i>"><i class='fa fa-brush'></i></a>
#> </li>
#> <li>
#> <a href="#tab-8397-3" data-toggle="tab" data-bs-toggle="tab" data-value="<i class='fa fa-images'></i>"><i class='fa fa-images'></i></a>
#> </li>
#> <li>
#> <a href="#tab-8397-4" data-toggle="tab" data-bs-toggle="tab" data-value="<i class='fa fa-expand-arrows-alt'></i>"><i class='fa fa-expand-arrows-alt'></i></a>
#> </li>
#> </ul>
#> <div class="tab-content" data-tabsetid="8397">
#> <div class="tab-pane active" data-value="<i class='fa fa-search'></i>" id="tab-8397-1">
#> <div id="heatmap_Heatmap_tabs-search">
#> <div style="width:250px;float:left;">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="heatmap_Heatmap_keyword-label" for="heatmap_Heatmap_keyword">Keywords</label>
#> <input id="heatmap_Heatmap_keyword" type="text" class="shiny-input-text form-control" value="" placeholder="Multiple keywords separated by ','" data-update-on="change"/>
#> </div>
#> </div>
#> <div style="width:150px;float:left;padding-top:20px;padding-left:4px;">
#> <div class="form-group shiny-input-container">
#> <div class="checkbox">
#> <label>
#> <input id="heatmap_Heatmap_search_regexpr" type="checkbox" class="shiny-input-checkbox"/>
#> <span>Regular expression</span>
#> </label>
#> </div>
#> </div>
#> </div>
#> <div style="clear: both;"></div>
#> <div id="heatmap_Heatmap_search_where" class="form-group shiny-input-radiogroup shiny-input-container shiny-input-container-inline" role="radiogroup" aria-labelledby="heatmap_Heatmap_search_where-label">
#> <label class="control-label" id="heatmap_Heatmap_search_where-label" for="heatmap_Heatmap_search_where">Which dimension to search?</label>
#> <div class="shiny-options-group">
#> <label class="radio-inline">
#> <input type="radio" name="heatmap_Heatmap_search_where" value="1" checked="checked"/>
#> <span>on rows</span>
#> </label>
#> <label class="radio-inline">
#> <input type="radio" name="heatmap_Heatmap_search_where" value="2"/>
#> <span>on columns</span>
#> </label>
#> </div>
#> </div>
#> <div id="heatmap_Heatmap_search_heatmaps" class="form-group shiny-input-checkboxgroup shiny-input-container" role="group" aria-labelledby="heatmap_Heatmap_search_heatmaps-label">
#> <label class="control-label" id="heatmap_Heatmap_search_heatmaps-label" for="heatmap_Heatmap_search_heatmaps">Which heatmaps to search?</label>
#> <div class="shiny-options-group">
#> <div class="checkbox">
#> <label>
#> <input type="checkbox" name="heatmap_Heatmap_search_heatmaps" value="" checked="checked"/>
#> <span>loading</span>
#> </label>
#> </div>
#> </div>
#> </div>
#> <div id="heatmap_Heatmap_search_extend" class="form-group shiny-input-checkboxgroup shiny-input-container" role="group" aria-labelledby="heatmap_Heatmap_search_extend-label">
#> <label class="control-label" id="heatmap_Heatmap_search_extend-label" for="heatmap_Heatmap_search_extend">Extend sub-heatmap to all heatmaps and annotations?</label>
#> <div class="shiny-options-group">
#> <div class="checkbox">
#> <label>
#> <input type="checkbox" name="heatmap_Heatmap_search_extend" value="1"/>
#> <span>yes</span>
#> </label>
#> </div>
#> </div>
#> </div>
#> <button id="heatmap_Heatmap_search_action" type="button" class="btn btn-default action-button"><span class="action-label">Search</span></button>
#> </div>
#> <p style="display:none;">Search Heatmap</p>
#> </div>
#> <div class="tab-pane" data-value="<i class='fa fa-brush'></i>" id="tab-8397-2">
#> <div id="heatmap_Heatmap_tabs-brush">
#>
#> <div class="form-group shiny-input-container" style="float:left; width:120px;">
#> <label>Brush border</label>
#> <div id="heatmap_Heatmap_color_pickers_border"></div>
#> </div>
#> <div class="form-group shiny-input-container" style="float:left; width:120px;">
#> <label>Brush fill</label>
#> <div id="heatmap_Heatmap_color_pickers_fill"></div>
#> </div>
#> <div style="clear:both;"></div>
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="heatmap_Heatmap_color_pickers_border_width-label" for="heatmap_Heatmap_color_pickers_border_width">Border width</label>
#> <div>
#> <select class="shiny-input-select form-control" id="heatmap_Heatmap_color_pickers_border_width"><option value="1" selected>1px</option>
#> <option value="2">2px</option>
#> <option value="3">3px</option></select>
#> <script type="application/json" data-for="heatmap_Heatmap_color_pickers_border_width" data-eval="["render"]">{"render":"{\n\t\t\t\t\t\t\t\t\t\toption: function(item, escape) {\n\t\t\t\t\t\t\t\t\t\t\treturn '<div><hr style=\"border-top:' + item.value + 'px solid black;\"><\/div>'\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}","plugins":["selectize-plugin-a11y"]}</script>
#> </div>
#> </div>
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="heatmap_Heatmap_color_pickers_opacity-label" for="heatmap_Heatmap_color_pickers_opacity">Opacity</label>
#> <input class="js-range-slider" id="heatmap_Heatmap_color_pickers_opacity" data-skin="shiny" data-min="0" data-max="1" data-from="0.6" data-step="0.01" data-grid="true" data-grid-num="10" data-grid-snap="false" data-prettify-separator="," data-prettify-enabled="true" data-keyboard="true" data-data-type="number"/>
#> </div>
#> </div>
#> </div>
#> <div class="tab-pane" data-value="<i class='fa fa-images'></i>" id="tab-8397-3">
#> <div id="heatmap_Heatmap_tabs-save-image">
#> <div id="heatmap_Heatmap_heatmap_download_format" class="form-group shiny-input-radiogroup shiny-input-container shiny-input-container-inline" role="radiogroup" aria-labelledby="heatmap_Heatmap_heatmap_download_format-label">
#> <label class="control-label" id="heatmap_Heatmap_heatmap_download_format-label" for="heatmap_Heatmap_heatmap_download_format">Which format?</label>
#> <div class="shiny-options-group">
#> <label class="radio-inline">
#> <input type="radio" name="heatmap_Heatmap_heatmap_download_format" value="1" checked="checked"/>
#> <span>png</span>
#> </label>
#> <label class="radio-inline">
#> <input type="radio" name="heatmap_Heatmap_heatmap_download_format" value="2"/>
#> <span>pdf</span>
#> </label>
#> <label class="radio-inline">
#> <input type="radio" name="heatmap_Heatmap_heatmap_download_format" value="3"/>
#> <span>svg</span>
#> </label>
#> </div>
#> </div>
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="heatmap_Heatmap_heatmap_download_image_width-label" for="heatmap_Heatmap_heatmap_download_image_width">Image width (in px)</label>
#> <input id="heatmap_Heatmap_heatmap_download_image_width" type="number" class="shiny-input-number form-control" value="0" data-update-on="change"/>
#> </div>
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="heatmap_Heatmap_heatmap_download_image_height-label" for="heatmap_Heatmap_heatmap_download_image_height">Image height (in px)</label>
#> <input id="heatmap_Heatmap_heatmap_download_image_height" type="number" class="shiny-input-number form-control" value="0" data-update-on="change"/>
#> </div>
#> <a aria-disabled="true" class="btn btn-default shiny-download-link disabled" download href="" id="heatmap_Heatmap_heatmap_download_button" tabindex="-1" target="_blank">
#> <i class="fas fa-download" role="presentation" aria-label="download icon"></i>
#> Save image
#> </a>
#> </div>
#> </div>
#> <div class="tab-pane" data-value="<i class='fa fa-expand-arrows-alt'></i>" id="tab-8397-4">
#> <div id="heatmap_Heatmap_tabs-resize">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="heatmap_Heatmap_heatmap_input_width-label" for="heatmap_Heatmap_heatmap_input_width">Box width</label>
#> <input id="heatmap_Heatmap_heatmap_input_width" type="number" class="shiny-input-number form-control" value="0" data-update-on="change"/>
#> </div>
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="heatmap_Heatmap_heatmap_input_height-label" for="heatmap_Heatmap_heatmap_input_height">Box height</label>
#> <input id="heatmap_Heatmap_heatmap_input_height" type="number" class="shiny-input-number form-control" value="0" data-update-on="change"/>
#> </div>
#> <button id="heatmap_Heatmap_heatmap_input_size_button" type="button" class="btn btn-default action-button"><span class="action-label">Change image size</span></button>
#> </div>
#> </div>
#> </div>
#> </div>
#> <script>
#> $('#heatmap_Heatmap_heatmap_download_image_width').val($('#heatmap_Heatmap_heatmap').width());
#> $('#heatmap_Heatmap_heatmap_download_image_height').val($('#heatmap_Heatmap_heatmap').height());
#> $('#heatmap_Heatmap_heatmap_input_width').val($('#heatmap_Heatmap_heatmap').width());
#> $('#heatmap_Heatmap_heatmap_input_height').val($('#heatmap_Heatmap_heatmap').height());
#> </script>
#> </div>
#> </div>
#> <div id="heatmap_Heatmap_sub_heatmap_group" style="width:400; height:350;">
#> <h5>Selected sub-heatmap</h5>
#> <div id="heatmap_Heatmap_sub_heatmap_resize">
#> <div class="shiny-plot-output html-fill-item" id="heatmap_Heatmap_sub_heatmap" style="width:400px;height:350px;"></div>
#> </div>
#> <script>
#> $("#heatmap_Heatmap_sub_heatmap_resize").css("width", $("#heatmap_Heatmap_sub_heatmap").width() + 4);
#> $("#heatmap_Heatmap_sub_heatmap_resize").css("height", $("#heatmap_Heatmap_sub_heatmap").height() + 4);
#> </script>
#> <div id="heatmap_Heatmap_sub_heatmap_control" style="display:none;">
#> <div class="tabbable">
#> <ul class="nav nav-tabs" data-tabsetid="8066">
#> <li class="active">
#> <a href="#tab-8066-1" data-toggle="tab" data-bs-toggle="tab" data-value="<i class='fa fa-tasks'></i>"><i class='fa fa-tasks'></i></a>
#> </li>
#> <li>
#> <a href="#tab-8066-2" data-toggle="tab" data-bs-toggle="tab" data-value="<i class='fa fa-table'></i>"><i class='fa fa-table'></i></a>
#> </li>
#> <li>
#> <a href="#tab-8066-3" data-toggle="tab" data-bs-toggle="tab" data-value="<i class='fa fa-images'></i>"><i class='fa fa-images'></i></a>
#> </li>
#> <li>
#> <a href="#tab-8066-4" data-toggle="tab" data-bs-toggle="tab" data-value="<i class='fa fa-expand-arrows-alt'></i>"><i class='fa fa-expand-arrows-alt'></i></a>
#> </li>
#> </ul>
#> <div class="tab-content" data-tabsetid="8066">
#> <div class="tab-pane active" data-value="<i class='fa fa-tasks'></i>" id="tab-8066-1">
#> <div id="heatmap_Heatmap_sub_tabs-setting">
#> <div>
#> <div style="float:left;width:150px">
#> <div class="form-group shiny-input-container">
#> <div class="checkbox">
#> <label>
#> <input id="heatmap_Heatmap_show_row_names_checkbox" type="checkbox" class="shiny-input-checkbox" checked="checked"/>
#> <span>Show row names</span>
#> </label>
#> </div>
#> </div>
#> </div>
#> <div style="float:left;width:160px">
#> <div class="form-group shiny-input-container">
#> <div class="checkbox">
#> <label>
#> <input id="heatmap_Heatmap_show_column_names_checkbox" type="checkbox" class="shiny-input-checkbox" checked="checked"/>
#> <span>Show column names</span>
#> </label>
#> </div>
#> </div>
#> </div>
#> <div style="clear: both;"></div>
#> </div>
#> <div>
#> <div class="form-group shiny-input-container">
#> <div class="checkbox">
#> <label>
#> <input id="heatmap_Heatmap_show_annotation_checkbox" type="checkbox" class="shiny-input-checkbox" checked="checked"/>
#> <span>Show heatmap annotations</span>
#> </label>
#> </div>
#> </div>
#> <div class="form-group shiny-input-container">
#> <div class="checkbox">
#> <label>
#> <input id="heatmap_Heatmap_show_cell_fun_checkbox" type="checkbox" class="shiny-input-checkbox" checked="checked"/>
#> <span>Show cell decorations</span>
#> </label>
#> </div>
#> </div>
#> <div class="form-group shiny-input-container">
#> <div class="checkbox">
#> <label>
#> <input id="heatmap_Heatmap_fill_figure_checkbox" type="checkbox" class="shiny-input-checkbox"/>
#> <span>Fill figure region</span>
#> </label>
#> </div>
#> </div>
#> </div>
#> <hr/>
#> <div>
#> <div class="form-group shiny-input-container">
#> <div class="checkbox">
#> <label>
#> <input id="heatmap_Heatmap_remove_empty_checkbox" type="checkbox" class="shiny-input-checkbox"/>
#> <span>Remove empty rows and columns</span>
#> </label>
#> </div>
#> </div>
#>
#> <p style="padding-top:4px;">
#> Remove <input id="heatmap_Heatmap_post_remove" type="number" class="form-control" min="1" value="1" style="width:60px;display:inline;"/>
#> <span id="heatmap_Heatmap_post_remove_which">rows</span> from
#> <select id="heatmap_Heatmap_post_remove_dimension" class="form-control" style="width:auto;display:inline;">
#> <option value="top" selected>top</option>
#> <option value="bottom">bottom</option>
#> <option value="left">left</option>
#> <option value="right">right</option></select>
#> </p>
#>
#> <button id="heatmap_Heatmap_post_remove_submit" type="button" class="btn btn-default action-button"><span class="action-label">Remove</span></button>
#> <button id="heatmap_Heatmap_post_remove_reset" type="button" class="btn btn-default action-button"><span class="action-label">Reset</span></button>
#> <script>
#> $('#heatmap_Heatmap_post_remove_dimension').change(function() {
#> if($(this).val() == 1 || $(this).val() == 2) {
#> $('#heatmap_Heatmap_post_remove_which').text('rows');
#> } else {
#> $('#heatmap_Heatmap_post_remove_which').text('columns');
#> }
#> });
#> </script>
#> </div>
#> <hr/>
#> <p style="max-width:300px;">Click the button below to turn the sub-heatmap into an interactive app.</p>
#> <button id="heatmap_Heatmap_open_modal" type="button" class="btn btn-default action-button"><span class="action-label">Interactivate sub-heatmap</span></button>
#> </div>
#> </div>
#> <div class="tab-pane" data-value="<i class='fa fa-table'></i>" id="tab-8066-2">
#> <div id="heatmap_Heatmap_sub_tabs-table">
#> <p>Export values in sub-heatmaps as a text table.</p>
#> <button id="heatmap_Heatmap_open_table" type="button" class="btn btn-default action-button"><span class="action-label">Open table</span></button>
#> </div>
#> </div>
#> <div class="tab-pane" data-value="<i class='fa fa-images'></i>" id="tab-8066-3">
#> <div id="heatmap_Heatmap_sub_tabs-save-image">
#> <div id="heatmap_Heatmap_sub_heatmap_download_format" class="form-group shiny-input-radiogroup shiny-input-container shiny-input-container-inline" role="radiogroup" aria-labelledby="heatmap_Heatmap_sub_heatmap_download_format-label">
#> <label class="control-label" id="heatmap_Heatmap_sub_heatmap_download_format-label" for="heatmap_Heatmap_sub_heatmap_download_format">Which format?</label>
#> <div class="shiny-options-group">
#> <label class="radio-inline">
#> <input type="radio" name="heatmap_Heatmap_sub_heatmap_download_format" value="1" checked="checked"/>
#> <span>png</span>
#> </label>
#> <label class="radio-inline">
#> <input type="radio" name="heatmap_Heatmap_sub_heatmap_download_format" value="2"/>
#> <span>pdf</span>
#> </label>
#> <label class="radio-inline">
#> <input type="radio" name="heatmap_Heatmap_sub_heatmap_download_format" value="3"/>
#> <span>svg</span>
#> </label>
#> </div>
#> </div>
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="heatmap_Heatmap_sub_heatmap_download_image_width-label" for="heatmap_Heatmap_sub_heatmap_download_image_width">Image width (in px)</label>
#> <input id="heatmap_Heatmap_sub_heatmap_download_image_width" type="number" class="shiny-input-number form-control" value="0" data-update-on="change"/>
#> </div>
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="heatmap_Heatmap_sub_heatmap_download_image_height-label" for="heatmap_Heatmap_sub_heatmap_download_image_height">Image height (in px)</label>
#> <input id="heatmap_Heatmap_sub_heatmap_download_image_height" type="number" class="shiny-input-number form-control" value="0" data-update-on="change"/>
#> </div>
#> <a aria-disabled="true" class="btn btn-default shiny-download-link disabled" download href="" id="heatmap_Heatmap_sub_heatmap_download_button" tabindex="-1" target="_blank">
#> <i class="fas fa-download" role="presentation" aria-label="download icon"></i>
#> Save image
#> </a>
#> </div>
#> </div>
#> <div class="tab-pane" data-value="<i class='fa fa-expand-arrows-alt'></i>" id="tab-8066-4">
#> <div id="heatmap_Heatmap_sub_tabs-resize">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="heatmap_Heatmap_sub_heatmap_input_width-label" for="heatmap_Heatmap_sub_heatmap_input_width">Box width</label>
#> <input id="heatmap_Heatmap_sub_heatmap_input_width" type="number" class="shiny-input-number form-control" value="0" data-update-on="change"/>
#> </div>
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="heatmap_Heatmap_sub_heatmap_input_height-label" for="heatmap_Heatmap_sub_heatmap_input_height">Box height</label>
#> <input id="heatmap_Heatmap_sub_heatmap_input_height" type="number" class="shiny-input-number form-control" value="0" data-update-on="change"/>
#> </div>
#> <button id="heatmap_Heatmap_sub_heatmap_input_size_button" type="button" class="btn btn-default action-button"><span class="action-label">Change image size</span></button>
#> </div>
#> </div>
#> </div>
#> </div>
#> <script>
#> $('#heatmap_Heatmap_sub_heatmap_download_image_width').val($('#heatmap_Heatmap_sub_heatmap').width());
#> $('#heatmap_Heatmap_sub_heatmap_download_image_height').val($('#heatmap_Heatmap_sub_heatmap').height());
#> $('#heatmap_Heatmap_sub_heatmap_input_width').val($('#heatmap_Heatmap_sub_heatmap').width());
#> $('#heatmap_Heatmap_sub_heatmap_input_height').val($('#heatmap_Heatmap_sub_heatmap').height());
#> </script>
#> </div>
#> </div>
#> <div id="heatmap_Heatmap_output_wrapper" style="width: 850px">
#> <h5>Output</h5>
#> <div id="heatmap_Heatmap_info" class="shiny-html-output"></div>
#> </div>
#> <style>
#> .heatmap_Heatmap_widget #heatmap_Heatmap_heatmap_group {
#> display:table-cell;
#> }
#> .heatmap_Heatmap_widget #heatmap_Heatmap_sub_heatmap_group {
#> display:table-cell;
#> }
#> </style>
#> </div>