Skip to content

Commit 225ebb2

Browse files
xanthopoulakisxanthopoulakis
committed
added a reset filters on top of filtered events table
1 parent b64b83a commit 225ebb2

File tree

3 files changed

+74
-34
lines changed

3 files changed

+74
-34
lines changed

‎src/components/filteredEventsListPanel/index.js‎

Lines changed: 64 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ import {
1414
Tooltip,
1515
Avatar,
1616
Typography,
17-
// message,
1817
} from "antd";
18+
import { slugify } from "../../helpers/report";
1919
import { FileTextOutlined } from "@ant-design/icons";
2020
import { BsDashLg } from "react-icons/bs";
2121
import * as d3 from "d3";
@@ -29,14 +29,6 @@ import filteredEventsActions from "../../redux/filteredEvents/actions";
2929
import ErrorPanel from "../errorPanel";
3030
import ReportModal from "../reportModal";
3131

32-
/* helper to build the report anchor */
33-
function slugify(s) {
34-
const str = String(s || "").trim().toLowerCase();
35-
const ascii = str.normalize("NFKD").replace(/[\u0300-\u036f]/g, "");
36-
const cleaned = ascii.replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
37-
return cleaned || "section";
38-
}
39-
4032
const { Text } = Typography;
4133

4234
const { selectFilteredEvent, applyTierOverride } = filteredEventsActions;
@@ -49,6 +41,16 @@ const eventColumns = {
4941
};
5042

5143
class FilteredEventsListPanel extends Component {
44+
handleResetFilters = () => {
45+
this.setState({
46+
geneFilters: [],
47+
tierFilters: [],
48+
typeFilters: [],
49+
roleFilters: [],
50+
effectFilters: [],
51+
variantFilters: [],
52+
});
53+
};
5254
state = {
5355
eventType: "all",
5456
tierFilters: [1, 2], // start with tiers 1 & 2 checked
@@ -116,7 +118,8 @@ class FilteredEventsListPanel extends Component {
116118
try {
117119
if (!window.indexedDB || !tierKey) return null;
118120

119-
const dbInfos = (indexedDB.databases && (await indexedDB.databases())) || [];
121+
const dbInfos =
122+
(indexedDB.databases && (await indexedDB.databases())) || [];
120123
const dbNames = (dbInfos || []).map((d) => d?.name).filter(Boolean);
121124

122125
for (const dbName of dbNames) {
@@ -151,7 +154,11 @@ class FilteredEventsListPanel extends Component {
151154
const val = getReq.result;
152155
if (val != null) {
153156
db.close();
154-
resolve(typeof val === "object" && val !== null ? (val.v ?? null) : val);
157+
resolve(
158+
typeof val === "object" && val !== null
159+
? val.v ?? null
160+
: val
161+
);
155162
return;
156163
}
157164
if (!store.getAll) {
@@ -171,7 +178,11 @@ class FilteredEventsListPanel extends Component {
171178
);
172179
if (match) {
173180
db.close();
174-
resolve(typeof match === "object" && match !== null ? (match.v ?? null) : match);
181+
resolve(
182+
typeof match === "object" && match !== null
183+
? match.v ?? null
184+
: match
185+
);
175186
} else {
176187
tryStore(i + 1);
177188
}
@@ -195,7 +206,7 @@ class FilteredEventsListPanel extends Component {
195206
};
196207

197208
applyTierOverrideIfAny = async () => {
198-
console.log('Applying tier override if any...');
209+
console.log("Applying tier override if any...");
199210
const { id, selectedFilteredEvent, viewMode } = this.props;
200211
if (!selectedFilteredEvent || viewMode !== "detail") return;
201212

@@ -204,7 +215,7 @@ class FilteredEventsListPanel extends Component {
204215
if (override != null && `${selectedFilteredEvent.tier}` !== `${override}`) {
205216
this.props.applyTierOverride(selectedFilteredEvent.uid, `${override}`);
206217
} else {
207-
console.log('No tier override found or no change needed.');
218+
console.log("No tier override found or no change needed.");
208219
}
209220
};
210221

@@ -223,10 +234,6 @@ class FilteredEventsListPanel extends Component {
223234
);
224235
};
225236

226-
227-
228-
229-
230237
render() {
231238
const {
232239
t,
@@ -689,17 +696,23 @@ class FilteredEventsListPanel extends Component {
689696
</Row>
690697
) : (
691698
<>
692-
<Row className="ant-panel-container ant-home-plot-container">
693-
<Button
694-
type="primary"
695-
icon={<FileTextOutlined />}
696-
onClick={this.handleExportNotes}
697-
disabled={!reportSrc}
698-
style={{ marginBottom: 16 }}
699-
>
700-
{t("components.filtered-events-panel.export.notes")}
701-
</Button>
702-
<Col className="gutter-row table-container" span={24}>
699+
<Row
700+
className="ant-panel-container ant-home-plot-container"
701+
align="middle"
702+
justify="space-between"
703+
>
704+
<Col span={24}>
705+
<Button
706+
type="primary"
707+
icon={<FileTextOutlined />}
708+
onClick={this.handleExportNotes}
709+
disabled={!reportSrc}
710+
style={{ marginBottom: 16 }}
711+
>
712+
{t("components.filtered-events-panel.export.notes")}
713+
</Button>
714+
</Col>
715+
<Col flex="auto">
703716
<Segmented
704717
size="small"
705718
options={Object.keys(eventColumns).map((d) => {
@@ -734,6 +747,15 @@ class FilteredEventsListPanel extends Component {
734747
value={eventType}
735748
/>
736749
</Col>
750+
<Col style={{ textAlign: "right" }} flex="none">
751+
<Button
752+
type="link"
753+
onClick={this.handleResetFilters}
754+
style={{ float: "right", marginBottom: 16 }}
755+
>
756+
{t("components.filtered-events-panel.reset-filters")}
757+
</Button>
758+
</Col>
737759
</Row>
738760
<Row className="ant-panel-container ant-home-plot-container">
739761
<Col className="gutter-row table-container" span={24}>
@@ -825,7 +847,7 @@ class FilteredEventsListPanel extends Component {
825847
"components.tracks-modal.hetsnp-copy-number"
826848
),
827849
hetsnpPlotYAxis2Title: t(
828-
"components.tracks-modal.hetsnp-count"
850+
"components.tracks-modal.hetsnps-count"
829851
),
830852
mutationsPlotTitle: t(
831853
"components.tracks-modal.mutations-plot"
@@ -851,7 +873,9 @@ class FilteredEventsListPanel extends Component {
851873
onClose={this.handleCloseDetailReport}
852874
src={
853875
reportSrc
854-
? `${reportSrc}#${slugify(`${selectedFilteredEvent?.gene} ${selectedFilteredEvent?.variant}`)}`
876+
? `${reportSrc}#${slugify(
877+
`${selectedFilteredEvent?.gene} ${selectedFilteredEvent?.variant}`
878+
)}`
855879
: undefined
856880
}
857881
title={
@@ -878,7 +902,9 @@ class FilteredEventsListPanel extends Component {
878902
mutations={mutations}
879903
genomeCoverage={genomeCoverage}
880904
methylationBetaCoverage={methylationBetaCoverage}
881-
methylationIntensityCoverage={methylationIntensityCoverage}
905+
methylationIntensityCoverage={
906+
methylationIntensityCoverage
907+
}
882908
hetsnps={hetsnps}
883909
genes={genes}
884910
igv={igv}
@@ -894,13 +920,17 @@ class FilteredEventsListPanel extends Component {
894920
open={showReportModal}
895921
onClose={this.handleCloseReportModal}
896922
src={reportSrc}
897-
title={t("components.filtered-events-panel.export.notes")}
923+
title={t(
924+
"components.filtered-events-panel.export.notes"
925+
)}
898926
loading={loading}
899927
genome={genome}
900928
mutations={mutations}
901929
genomeCoverage={genomeCoverage}
902930
methylationBetaCoverage={methylationBetaCoverage}
903-
methylationIntensityCoverage={methylationIntensityCoverage}
931+
methylationIntensityCoverage={
932+
methylationIntensityCoverage
933+
}
904934
hetsnps={hetsnps}
905935
genes={genes}
906936
igv={igv}

‎src/helpers/report.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// Slugify helper for anchors/IDs
2+
export function slugify(s) {
3+
const str = String(s || "")
4+
.trim()
5+
.toLowerCase();
6+
const ascii = str.normalize("NFKD").replace(/[\u0300-\u036f]/g, "");
7+
const cleaned = ascii.replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
8+
return cleaned || "section";
9+
}

‎src/translations/en/common.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -482,6 +482,7 @@
482482
"title": "Violin Chart"
483483
},
484484
"filtered-events-panel": {
485+
"reset-filters": "Reset Filters",
485486
"export": {
486487
"notes": "Report",
487488
"error": "Error exporting notes",

0 commit comments

Comments
 (0)