Skip to content

Commit 52cf93e

Browse files
carlosribascarlosribas
committed
#18 - Add option to display legend side by side with secondary structure
1 parent 9483dc3 commit 52cf93e

File tree

5 files changed

+68
-53
lines changed

5 files changed

+68
-53
lines changed

‎README.md

+10-9
Original file line numberDiff line numberDiff line change
@@ -91,15 +91,16 @@ This component accepts a number of attributes. You pass them as html attributes
9191

9292
Parameters that you can use to customise some elements of this embeddable component
9393

94-
| parameter | description |
95-
|-------------------|-----------------------------------------------------------------------|
96-
| fixCss | fix the CSS. Use *"fixCss": "true"* if the button sizes are different |
97-
| linkColor | change the color of the links |
98-
| searchButtonColor | change the color of the `Search` button |
99-
| clearButtonColor | change the color of the `Clear` button |
100-
| titleColor | change the color of the `Secondary structure` text |
101-
| titleSize | change the size of the `Secondary structure` text |
102-
| hideTitle | hide the title. Use *"hideTitle": "true"* to not show the title |
94+
| parameter | description |
95+
|-------------------|------------------------------------------------------------------------------------------|
96+
| fixCss | fix the CSS. Use *"fixCss": "true"* if the button sizes are different |
97+
| linkColor | change the color of the links |
98+
| searchButtonColor | change the color of the `Search` button |
99+
| clearButtonColor | change the color of the `Clear` button |
100+
| titleColor | change the color of the `Secondary structure` text |
101+
| titleSize | change the size of the `Secondary structure` text |
102+
| hideTitle | Use *"hideTitle": "true"* to hide the title |
103+
| legendLocation | Use *"legendLocation": "right"* to show the legend side by side with secondary structure |
103104

104105
## Developer details
105106

‎dist/r2dt-web.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/r2dt-web.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/containers/R2DT/components/Results/index.jsx

+56-38
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,8 @@ import { RiImage2Line, RiFileCodeLine, RiFileCopy2Line } from "react-icons/ri";
1010
import { BsToggles } from "react-icons/bs";
1111
import { FaEdit, FaRegEdit } from "react-icons/fa";
1212

13-
const miniatureProps = { position: TOOL_NONE }
14-
const toolbarProps = { position: POSITION_LEFT, SVGAlignY: ALIGN_CENTER, SVGAlignX: ALIGN_CENTER }
15-
13+
const miniatureProps = { position: TOOL_NONE };
14+
const toolbarProps = { position: POSITION_LEFT, SVGAlignY: ALIGN_CENTER, SVGAlignX: ALIGN_CENTER };
1615

1716
class Results extends React.Component {
1817
constructor(props) {
@@ -27,8 +26,8 @@ class Results extends React.Component {
2726
window.addEventListener("resize", () => this.handleResize());
2827
}
2928

30-
componentWillUnMount() {
31-
window.addEventListener("resize", () => this.handleResize());
29+
componentWillUnmount() {
30+
window.removeEventListener("resize", () => this.handleResize());
3231
}
3332

3433
componentDidUpdate() {
@@ -91,9 +90,41 @@ class Results extends React.Component {
9190
};
9291
const fixCss = this.props.customStyle && this.props.customStyle.fixCss && this.props.customStyle.fixCss === "true" ? "1.5rem" : "";
9392
const linkColor = this.props.customStyle && this.props.customStyle.linkColor ? this.props.customStyle.linkColor : "#337ab7";
93+
const legendLocation = this.props.customStyle && this.props.customStyle.legendLocation && this.props.customStyle.legendLocation === "right" ? "right" : "";
9494
const width = document.getElementsByTagName('r2dt-web')[0] && document.getElementsByTagName('r2dt-web')[0].offsetWidth ? document.getElementsByTagName('r2dt-web')[0].offsetWidth - 40 : 1100; // using - 40 to display the right side border
9595
const height = parseFloat(this.props.height) > 600 ? parseFloat(this.props.height) : 600;
9696

97+
const renderLegend = () => (
98+
<div className="mt-3" style={{ fontSize: fixCss }}>
99+
<strong>Colour legend</strong>
100+
<ul className="list-unstyled">
101+
<li className="mt-1"><span className="traveler-black traveler-key"></span> Same as the template</li>
102+
<li className="mt-1"><span className="traveler-green traveler-key"></span> Modified compared to the template</li>
103+
<li className="mt-1"><span className="traveler-magenta traveler-key"></span> Inserted nucleotides</li>
104+
<li className="mt-1"><span className="traveler-blue traveler-key"></span> Repositioned compared to the template</li>
105+
<li className="mt-2"><strong>Tip:</strong> Hover over nucleotides for more details</li>
106+
</ul>
107+
</div>
108+
);
109+
110+
const renderSVGComponent = () => (
111+
<UncontrolledReactSVGPanZoom
112+
width={legendLocation === "right" ? width * 0.7 : width} // 70% of the total width if legend is on the right
113+
height={height}
114+
ref={this.viewerRef}
115+
toolbarProps={toolbarProps}
116+
miniatureProps={miniatureProps}
117+
detectAutoPan={false}
118+
background={"#fff"}
119+
scaleFactorMin={0.5}
120+
scaleFactorMax={5}
121+
>
122+
<svg width={parseFloat(this.props.width)} height={parseFloat(this.props.height)}>
123+
<SvgLoader svgXML={this.props.svg} />
124+
</svg>
125+
</UncontrolledReactSVGPanZoom>
126+
);
127+
97128
return (
98129
<div className="rna" ref={this.divRef}>
99130
{
@@ -145,49 +176,36 @@ class Results extends React.Component {
145176
</>
146177
}
147178
</div>
148-
<div className="border border-secondary">
149-
<UncontrolledReactSVGPanZoom
150-
width={width}
151-
height={height}
152-
ref={this.viewerRef}
153-
toolbarProps={toolbarProps}
154-
miniatureProps={miniatureProps}
155-
detectAutoPan={false}
156-
background={"#fff"}
157-
scaleFactorMin={0.5}
158-
scaleFactorMax={5}
159-
>
160-
<svg width={parseFloat(this.props.width)} height={parseFloat(this.props.height)}>
161-
<SvgLoader svgXML={this.props.svg} />
162-
</svg>
163-
</UncontrolledReactSVGPanZoom>
164-
</div>
165-
<div className="mt-3" style={{fontSize: fixCss}}>
166-
<strong>Colour legend</strong>
167-
<ul className="list-unstyled">
168-
<li className="mt-1"><span className="traveler-black traveler-key"></span> Same as the template</li>
169-
<li className="mt-1">
170-
<span className="traveler-green traveler-key"></span> Modified compared to the template.
171-
<strong> Tip:</strong> Hover over green nucleotides for more details
172-
</li>
173-
<li className="mt-1"><span className="traveler-magenta traveler-key"></span> Inserted nucleotides</li>
174-
<li className="mt-1"><span className="traveler-blue traveler-key"></span> Repositioned compared to the template</li>
175-
<li className="mt-1"><strong>Tip:</strong> Hover over the nucleotides to see nucleotide numbers</li>
176-
</ul>
177-
</div>
179+
{
180+
legendLocation === "right" ? (
181+
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
182+
<div style={{ flex: '1 1 70%' }} className="border border-secondary">
183+
{ renderSVGComponent() }
184+
</div>
185+
<div style={{ flex: '1 1 30%', marginLeft: '1rem' }}>
186+
{ renderLegend() }
187+
</div>
188+
</div>
189+
) : (
190+
<div className="border border-secondary">
191+
{ renderSVGComponent() }
192+
</div>
193+
)
194+
}
195+
{ legendLocation !== "right" && renderLegend() }
178196
</div>
179197
</div>
180198
]
181199
}
182200
{
183201
this.props.jobId && this.props.svg !== "SVG not available" && this.props.status === "FINISHED" && this.props.notation && [
184202
<div className="row" key={`notation-div`}>
185-
<div className="col-12">
186-
<p className="notation-title">Dot-bracket notation</p>
203+
<div className={`col-12 ${legendLocation === "right" ? 'mt-3' : ''}`}>
204+
<span><strong>Dot-bracket notation</strong></span>
187205
{
188206
this.props.notation === "error" ? <div className="alert alert-danger">
189207
There was an error loading the dot-bracket notation. Let us know if the problem persists by raising an issue on <a href="https://github.com/RNAcentral/r2dt-web/issues" target="_blank">GitHub</a>.
190-
</div> : <pre className="notation">
208+
</div> : <pre className="mt-1 notation">
191209
<span className="notation-font">{this.props.notation}</span>
192210
</pre>
193211
}

‎src/styles/index.scss

-4
Original file line numberDiff line numberDiff line change
@@ -66,10 +66,6 @@ body {
6666
max-height: 150px;
6767
}
6868

69-
.notation-title {
70-
font-size: 18px;
71-
}
72-
7369
.notation-font {
7470
font-family: monospace;
7571
}

0 commit comments

Comments
 (0)