Skip to content

Commit b6787e9

Browse files
xanthopoulakisxanthopoulakis
committed
refactored the mechanism for the hovered line into a separate component
1 parent 9525766 commit b6787e9

File tree

11 files changed

+314
-386
lines changed

11 files changed

+314
-386
lines changed

‎src/components/cytobandsPlot/index.js‎

Lines changed: 0 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import { measureText } from "../../helpers/utility";
88
import { createChromosomePaths } from "../../helpers/cytobandsUtil";
99
import Wrapper from "./index.style";
1010
import settingsActions from "../../redux/settings/actions";
11-
import { store } from "../../redux/store";
1211

1312
const { updateDomains, updateHoveredLocation } = settingsActions;
1413

@@ -80,12 +79,6 @@ class CytobandsPlot extends Component {
8079
);
8180
});
8281

83-
// Subscribe to Redux store for hover updates (bypassing React)
84-
this.unsubscribeHover = store.subscribe(() => {
85-
const state = store.getState();
86-
const { hoveredLocation, hoveredLocationPanelIndex } = state.Settings;
87-
this.updateHoverLine(hoveredLocation, hoveredLocationPanelIndex);
88-
});
8982
}
9083

9184
componentDidUpdate(prevProps, prevState) {
@@ -122,49 +115,7 @@ class CytobandsPlot extends Component {
122115
}
123116
}
124117

125-
updateHoverLine(hoveredLocation, hoveredLocationPanelIndex) {
126-
const { chromoBins } = this.props;
127-
128-
if (this.panels[hoveredLocationPanelIndex]) {
129-
d3.select(this.plotContainer)
130-
.select(`#hovered-location-line-${hoveredLocationPanelIndex}`)
131-
.classed("hidden", !hoveredLocation)
132-
.attr(
133-
"transform",
134-
`translate(${[
135-
this.panels[hoveredLocationPanelIndex].xScale(hoveredLocation) ||
136-
-10000,
137-
0,
138-
]})`
139-
);
140-
d3.select(this.plotContainer)
141-
.select(`#hovered-location-text-${hoveredLocationPanelIndex}`)
142-
.attr(
143-
"x",
144-
this.panels[hoveredLocationPanelIndex].xScale(hoveredLocation) ||
145-
-10000
146-
)
147-
.text(
148-
Object.values(chromoBins)
149-
.filter(
150-
(chromo) =>
151-
hoveredLocation < chromo.endPlace &&
152-
hoveredLocation >= chromo.startPlace
153-
)
154-
.map((chromo) =>
155-
d3.format(",")(
156-
Math.floor(chromo.scaleToGenome.invert(hoveredLocation))
157-
)
158-
)
159-
);
160-
}
161-
}
162-
163118
componentWillUnmount() {
164-
// Unsubscribe from hover updates
165-
if (this.unsubscribeHover) {
166-
this.unsubscribeHover();
167-
}
168119
}
169120

170121
zooming(event, index) {
@@ -500,19 +451,6 @@ class CytobandsPlot extends Component {
500451
)}
501452
</g>
502453
))}
503-
<line
504-
className="hovered-location-line hidden"
505-
id={`hovered-location-line-${panel.index}`}
506-
y1={0}
507-
y2={panel.panelHeight}
508-
/>
509-
<text
510-
className="hovered-location-text"
511-
id={`hovered-location-text-${panel.index}`}
512-
x={-1000}
513-
dx={5}
514-
dy={10}
515-
></text>
516454
</g>
517455
))}
518456
</g>

‎src/components/genesPlotHiglass/index.js‎

Lines changed: 0 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { throttle } from "lodash";
77
import { filterGenesByOverlap, measureText } from "../../helpers/utility";
88
import Wrapper from "./index.style";
99
import settingsActions from "../../redux/settings/actions";
10-
import { store } from "../../redux/store";
1110

1211
const { updateDomains, updateHoveredLocation } = settingsActions;
1312

@@ -74,12 +73,6 @@ class GenesPlot extends Component {
7473
);
7574
});
7675

77-
// Subscribe to Redux store for hover updates (bypassing React)
78-
this.unsubscribeHover = store.subscribe(() => {
79-
const state = store.getState();
80-
const { hoveredLocation, hoveredLocationPanelIndex } = state.Settings;
81-
this.updateHoverLine(hoveredLocation, hoveredLocationPanelIndex);
82-
});
8376
}
8477

8578
componentDidUpdate(prevProps, prevState) {
@@ -116,49 +109,7 @@ class GenesPlot extends Component {
116109
}
117110
}
118111

119-
updateHoverLine(hoveredLocation, hoveredLocationPanelIndex) {
120-
const { chromoBins } = this.props;
121-
122-
if (this.panels[hoveredLocationPanelIndex]) {
123-
d3.select(this.plotContainer)
124-
.select(`#hovered-location-line-${hoveredLocationPanelIndex}`)
125-
.classed("hidden", !hoveredLocation)
126-
.attr(
127-
"transform",
128-
`translate(${[
129-
this.panels[hoveredLocationPanelIndex].xScale(hoveredLocation) ||
130-
-10000,
131-
0,
132-
]})`
133-
);
134-
d3.select(this.plotContainer)
135-
.select(`#hovered-location-text-${hoveredLocationPanelIndex}`)
136-
.attr(
137-
"x",
138-
this.panels[hoveredLocationPanelIndex].xScale(hoveredLocation) ||
139-
-10000
140-
)
141-
.text(
142-
Object.values(chromoBins)
143-
.filter(
144-
(chromo) =>
145-
hoveredLocation < chromo.endPlace &&
146-
hoveredLocation >= chromo.startPlace
147-
)
148-
.map((chromo) =>
149-
d3.format(",")(
150-
Math.floor(chromo.scaleToGenome.invert(hoveredLocation))
151-
)
152-
)
153-
);
154-
}
155-
}
156-
157112
componentWillUnmount() {
158-
// Unsubscribe from hover updates
159-
if (this.unsubscribeHover) {
160-
this.unsubscribeHover();
161-
}
162113
}
163114

164115
zooming(event, index) {
@@ -522,19 +473,6 @@ class GenesPlot extends Component {
522473
</g>
523474
))}
524475
</g>
525-
<line
526-
className="hovered-location-line hidden"
527-
id={`hovered-location-line-${panel.index}`}
528-
y1={0}
529-
y2={panel.panelHeight}
530-
/>
531-
<text
532-
className="hovered-location-text"
533-
id={`hovered-location-text-${panel.index}`}
534-
x={-1000}
535-
dx={5}
536-
dy={10}
537-
></text>
538476
</g>
539477
))}
540478
</g>

‎src/components/genomePanel/index.js‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import * as htmlToImage from "html-to-image";
2626
import ErrorPanel from "../errorPanel";
2727
import Wrapper from "./index.style";
2828
import GenomePlot from "../genomePlot";
29+
import HoverLine from "../hoverLine";
2930

3031
const { Text } = Typography;
3132

@@ -240,15 +241,21 @@ class GenomePanel extends Component {
240241
}}
241242
>
242243
{inViewport && (
243-
<GenomePlot
244-
{...{
245-
width: w - gap - 2 * margins.padding,
246-
height,
247-
genome,
248-
yAxisTitle,
249-
commonRangeY,
250-
}}
251-
/>
244+
<>
245+
<GenomePlot
246+
{...{
247+
width: w - gap - 2 * margins.padding,
248+
height,
249+
genome,
250+
yAxisTitle,
251+
commonRangeY,
252+
}}
253+
/>
254+
<HoverLine
255+
width={w - gap - 2 * margins.padding}
256+
height={height}
257+
/>
258+
</>
252259
)}
253260
</div>
254261
</Resizable>

‎src/components/genomePlot/index.js‎

Lines changed: 0 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import {
1414
} from "../../helpers/utility";
1515
import Grid from "../grid/index";
1616
import settingsActions from "../../redux/settings/actions";
17-
import { store } from "../../redux/store";
1817

1918
const { updateDomains, updateHoveredLocation } = settingsActions;
2019

@@ -288,11 +287,6 @@ class GenomePlot extends Component {
288287
);
289288
});
290289

291-
this.unsubscribeHover = store.subscribe(() => {
292-
const state = store.getState();
293-
const { hoveredLocation, hoveredLocationPanelIndex } = state.Settings;
294-
this.updateHoverLine(hoveredLocation, hoveredLocationPanelIndex);
295-
});
296290
}
297291

298292
componentDidUpdate(prevProps) {
@@ -329,48 +323,7 @@ class GenomePlot extends Component {
329323
}
330324
}
331325

332-
updateHoverLine(hoveredLocation, hoveredLocationPanelIndex) {
333-
const { chromoBins } = this.props;
334-
335-
if (this.panels[hoveredLocationPanelIndex]) {
336-
d3.select(this.container)
337-
.select(`#hovered-location-line-${hoveredLocationPanelIndex}`)
338-
.classed("hidden", !hoveredLocation)
339-
.attr(
340-
"transform",
341-
`translate(${[
342-
this.panels[hoveredLocationPanelIndex].xScale(hoveredLocation) ||
343-
-10000,
344-
0,
345-
]})`
346-
);
347-
d3.select(this.container)
348-
.select(`#hovered-location-text-${hoveredLocationPanelIndex}`)
349-
.attr(
350-
"x",
351-
this.panels[hoveredLocationPanelIndex].xScale(hoveredLocation) ||
352-
-10000
353-
)
354-
.text(
355-
Object.values(chromoBins)
356-
.filter(
357-
(chromo) =>
358-
hoveredLocation < chromo.endPlace &&
359-
hoveredLocation >= chromo.startPlace
360-
)
361-
.map((chromo) =>
362-
d3.format(",")(
363-
Math.floor(chromo.scaleToGenome.invert(hoveredLocation))
364-
)
365-
)
366-
);
367-
}
368-
}
369-
370326
componentWillUnmount() {
371-
if (this.unsubscribeHover) {
372-
this.unsubscribeHover();
373-
}
374327
if (this.rafId) {
375328
cancelAnimationFrame(this.rafId);
376329
}
@@ -622,19 +575,6 @@ class GenomePlot extends Component {
622575
axisHeight={panel.panelHeight}
623576
chromoBins={chromoBins}
624577
/>
625-
<line
626-
className="hovered-location-line hidden"
627-
id={`hovered-location-line-${panel.index}`}
628-
y1={0}
629-
y2={panel.panelHeight}
630-
/>
631-
<text
632-
className="hovered-location-text"
633-
id={`hovered-location-text-${panel.index}`}
634-
x={-1000}
635-
dx={5}
636-
dy={10}
637-
></text>
638578
</g>
639579
<rect
640580
className="zoom-background"

0 commit comments

Comments
 (0)