Open sehilyi opened 6 months ago
@crfmc Here are some pointers!
(1) You can conditionally set VIS_PADDING
to 0
to make the padding around visualization zero
const VIS_PADDING = 60;
For example,
const urlParams = new URLSearchParams(props.location.search);
const isMinimalMode = urlParams.get('minimal_mode');
const VIS_PADDING = isMinimalMode == 'true' ? 0 : 60;
For the reference, this is how it looks with zero padding.
(2) You could conditionally hide the hamburger button.
for example, from
<svg
className="config-button"
viewBox="0 0 16 16"
visibility={showSmallMultiples ? 'visible' : 'collapse'}
onClick={() => {
setShowSamples(true);
}}
>
<title>Menu</title>
<path
fillRule="evenodd"
d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
/>
</svg>
to
{!isMinimalMode && <svg
className="config-button"
viewBox="0 0 16 16"
visibility={showSmallMultiples ? 'visible' : 'collapse'}
onClick={() => {
setShowSamples(true);
}}
>
<title>Menu</title>
<path
fillRule="evenodd"
d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
/>
</svg>}
(3) You can hide other buttons in the header as needed.
There are some use cases for using Chromoscope with
iframe
, and I think we need to simplify the application for such use cases (cBioPortal integration and the Chromoscope Python package). For example, we need to hide the hamburger buttons in cBioPortal. We may also want to remove "Chromoscope" label and instead only show visualizations with minimal padding.Use a URL parameter something like
minimal_mode=true
?