Merge pull request #75 from mskilab-org/fix/filtered-events-custom-sort-filter

Fix/filtered events custom sort filter

Author: xanthopoulakis

src/components/filteredEventsListPanel/columnBuilders.js

@@ -168,17 +168,21 @@ export function buildColumnConfig(columnDef, records, rendererProps = {}, filter
     title,
     dataIndex,
     viewType = "string-basic",
-    type = "string",
     width = 120,
     filterable = false,
     sortable = false,
-    filterType = type === "numeric" ? "numeric" : type === "object" ? "object" : "string",
     filterSearch = false,
     ellipsis = false,
     rendererProps: columnRendererProps = {},
     fields,
   } = columnDef;
 
+  // Auto-detect type for class-icon viewType (expects object with {class, score, desc})
+  const type = columnDef.type || (viewType === "class-icon" ? "object" : "string");
+  
+  // Derive filterType from type if not explicitly specified
+  const filterType = columnDef.filterType || (type === "numeric" ? "numeric" : type === "object" ? "object" : "string");
+
   // Extract the t function from rendererProps (if provided by component)
   const { t, ...otherProps } = rendererProps;
 
@@ -237,10 +241,7 @@ export function buildColumnConfig(columnDef, records, rendererProps = {}, filter
         columnConfig.filterSearch = true;
       }
     }
-    // Apply controlled filteredValue if provided (enables programmatic filter reset)
-    if (filteredValue !== null) {
-      columnConfig.filteredValue = filteredValue;
-    }
+    columnConfig.filteredValue = filteredValue;
   }
 
   // Add sorter if enabled

src/components/filteredEventsListPanel/index.js

@@ -14,6 +14,7 @@ import {
   Skeleton,
   Typography,
   Select,
+  Checkbox,
 } from "antd";
 import * as d3 from "d3";
 import { roleColorMap, transitionStyle } from "../../helpers/utility";
@@ -29,7 +30,7 @@ import { buildColumnsFromSettings } from "./columnBuilders";
 
 const { Text } = Typography;
 
-const { selectFilteredEvent } = filteredEventsActions;
+const { selectFilteredEvent, setSelectedEventUids, toggleEventUidSelection, setColumnFilters, resetColumnFilters } = filteredEventsActions;
 
 const EVENT_TYPES = ["all", "snv", "cna", "fusion", "complexsv"];
 
@@ -48,37 +49,90 @@ const getColumnTitle = (title) => {
 
 class FilteredEventsListPanel extends Component {
   handleResetFilters = () => {
-    const { additionalColumns } = this.props;
+    const { additionalColumns, resetColumnFilters } = this.props;
     const defaultColumnKeys = this.getDefaultColumnKeys();
     const additionalKeys = (additionalColumns || []).map((col) => col.key);
     const defaultKeys = [...new Set([...defaultColumnKeys, ...additionalKeys])];
+
+    resetColumnFilters();
     this.setState({
-      geneFilters: [],
-      tierFilters: [],
-      typeFilters: [],
-      roleFilters: [],
-      effectFilters: [],
-      variantFilters: [],
       selectedColumnKeys: defaultKeys,
     });
   };
+
+  handleCheckboxChange = (record, checked) => {
+    const { toggleEventUidSelection } = this.props;
+    toggleEventUidSelection(record.uid, checked);
+  };
+
+  handleHeaderCheckboxChange = (records) => {
+    const { selectedEventUids, setSelectedEventUids } = this.props;
+    
+    // Get all tier 1 and 2 records from current view
+    const tier1And2Records = records.filter(
+      (r) => r.tier && (+r.tier === 1 || +r.tier === 2)
+    );
+    const tier1And2Uids = tier1And2Records.map((r) => r.uid);
+    
+    // Check current state
+    const selectedTier1And2 = tier1And2Uids.filter((uid) =>
+      selectedEventUids.includes(uid)
+    );
+    const allSelected = selectedTier1And2.length === tier1And2Uids.length && tier1And2Uids.length > 0;
+    
+    if (allSelected) {
+      // Deselect all tier 1 and 2
+      const newUids = selectedEventUids.filter(
+        (uid) => !tier1And2Uids.includes(uid)
+      );
+      setSelectedEventUids(newUids);
+    } else {
+      // Select all tier 1 and 2
+      const newSelectedUids = [...new Set([...selectedEventUids, ...tier1And2Uids])];
+      setSelectedEventUids(newSelectedUids);
+    }
+  };
+
+  getHeaderCheckboxState = (records) => {
+    const { selectedEventUids } = this.props;
+    
+    // Get all tier 1 and 2 records from current view
+    const tier1And2Records = records.filter(
+      (r) => r.tier && (+r.tier === 1 || +r.tier === 2)
+    );
+    const tier1And2Uids = tier1And2Records.map((r) => r.uid);
+    
+    if (tier1And2Uids.length === 0) {
+      return { checked: false, indeterminate: false };
+    }
+    
+    const selectedTier1And2 = tier1And2Uids.filter((uid) =>
+      selectedEventUids.includes(uid)
+    );
+    
+    if (selectedTier1And2.length === 0) {
+      return { checked: false, indeterminate: false };
+    } else if (selectedTier1And2.length === tier1And2Uids.length) {
+      return { checked: true, indeterminate: false };
+    } else {
+      return { checked: false, indeterminate: true };
+    }
+  };
+
+  isEventSelected = (record) => {
+    const { selectedEventUids } = this.props;
+    return selectedEventUids.includes(record.uid);
+  };
   state = {
     eventType: "all",
-    tierFilters: [1, 2], // start with tiers 1 & 2 checked
-    typeFilters: [],
-    roleFilters: [],
-    effectFilters: [],
-    variantFilters: [],
-    geneFilters: [],
     tierCountsMap: {},
+    geneVariantsWithTierChanges: null,
     selectedColumnKeys: [],
   };
 
   // Track if a fetch is in progress to prevent concurrent calls
   _isFetchingTierCounts = false;
 
-  // add as a class field
-
   getDefaultColumnKeys = () => {
     const { data: settingsData, dataset } = this.props;
 
@@ -150,16 +204,13 @@ class FilteredEventsListPanel extends Component {
   };
 
   handleTableChange = (pagination, filters) => {
-    // When the user changes filters (e.g. checks tier 3),
-    // update tierFilters in the state:
-    this.setState({
-      geneFilters: filters.gene || [],
-      tierFilters: filters.tier || [],
-      typeFilters: filters.type || [],
-      roleFilters: filters.role || [],
-      effectFilters: filters.effect || [],
-      variantFilters: filters.variant || [],
+    const columnFilters = {};
+    Object.keys(filters).forEach((key) => {
+      if (filters[key] && filters[key].length > 0) {
+        columnFilters[key] = filters[key];
+      }
     });
+    this.props.setColumnFilters(columnFilters);
   };
 
   fetchTierCountsForRecords = async () => {
@@ -201,7 +252,7 @@ class FilteredEventsListPanel extends Component {
 
       // If no gene-variants have tier changes, nothing to fetch
       if (geneVariantsWithTiers.size === 0) {
-        this.setState({ tierCountsMap: {} });
+        this.setState({ tierCountsMap: {}, geneVariantsWithTierChanges: geneVariantsWithTiers });
         return;
       }
 
@@ -221,7 +272,7 @@ class FilteredEventsListPanel extends Component {
 
       // Guard: nothing to fetch after filtering
       if (uniqueRecords.length === 0) {
-        this.setState({ tierCountsMap: {} });
+        this.setState({ tierCountsMap: {}, geneVariantsWithTierChanges: geneVariantsWithTiers });
         return;
       }
 
@@ -248,15 +299,22 @@ class FilteredEventsListPanel extends Component {
         await Promise.all(batchPromises);
       }
 
-      this.setState({ tierCountsMap: map });
+      this.setState({ tierCountsMap: map, geneVariantsWithTierChanges: geneVariantsWithTiers });
     } finally {
       this._isFetchingTierCounts = false;
     }
   };
 
   getTierTooltipContent = (record) => {
     const key = `${record.gene}-${record.type}`;
-    const tierCounts = this.state.tierCountsMap[key];
+    const { tierCountsMap, geneVariantsWithTierChanges } = this.state;
+    
+    // Check if this gene-variant has no tier changes
+    if (geneVariantsWithTierChanges && !geneVariantsWithTierChanges.has(key)) {
+      return "No tier change";
+    }
+    
+    const tierCounts = tierCountsMap[key];
     if (!tierCounts) return "Loading tier distribution...";
     const total =
       (tierCounts[1] || 0) + (tierCounts[2] || 0) + (tierCounts[3] || 0);
@@ -318,15 +376,8 @@ class FilteredEventsListPanel extends Component {
     let records =
       (eventType === "all" ? filteredEvents : recordsHash.get(eventType)) || [];
 
-    // Build filter values object for controlled filter state
-    const filterValues = {
-      gene: this.state.geneFilters,
-      tier: this.state.tierFilters,
-      type: this.state.typeFilters,
-      role: this.state.roleFilters,
-      effect: this.state.effectFilters,
-      variant: this.state.variantFilters,
-    };
+    const { columnFilters } = this.props;
+    const filterValues = { ...columnFilters };
 
     // Build columns from settings.json and dataset configuration
     const columns = buildColumnsFromSettings(
@@ -341,6 +392,28 @@ class FilteredEventsListPanel extends Component {
       filterValues
     );
 
+    // Checkbox column for selecting events
+    const headerCheckboxState = this.getHeaderCheckboxState(records);
+    const checkboxColumn = {
+      title: (
+        <Checkbox
+          checked={headerCheckboxState.checked}
+          indeterminate={headerCheckboxState.indeterminate}
+          onChange={() => this.handleHeaderCheckboxChange(records)}
+        />
+      ),
+      key: "select",
+      width: 50,
+      fixed: "left",
+      align: "center",
+      render: (_, record) => (
+        <Checkbox
+          checked={this.isEventSelected(record)}
+          onChange={(e) => this.handleCheckboxChange(record, e.target.checked)}
+        />
+      ),
+    };
+
     return (
       <Wrapper>
         {error ? (
@@ -459,9 +532,10 @@ class FilteredEventsListPanel extends Component {
                   <Skeleton active loading={loading}>
                     <Table
                       columns={[
+                        checkboxColumn,
                         ...(additionalColumns || []),
                         ...columns,
-                      ].filter((col) => selectedColumnKeys.includes(col.key))}
+                      ].filter((col) => col.key === "select" || selectedColumnKeys.includes(col.key))}
                       dataSource={records}
                       pagination={{ pageSize: 50 }}
                       showSorterTooltip={false}
@@ -621,6 +695,14 @@ FilteredEventsListPanel.defaultProps = {};
 const mapDispatchToProps = (dispatch) => ({
   selectFilteredEvent: (filteredEvent, viewMode) =>
     dispatch(selectFilteredEvent(filteredEvent, viewMode)),
+  setSelectedEventUids: (uids) =>
+    dispatch(setSelectedEventUids(uids)),
+  toggleEventUidSelection: (uid, selected) =>
+    dispatch(toggleEventUidSelection(uid, selected)),
+  setColumnFilters: (columnFilters) =>
+    dispatch(setColumnFilters(columnFilters)),
+  resetColumnFilters: () =>
+    dispatch(resetColumnFilters()),
 });
 const mapStateToProps = (state) => {
   const mergedEvents = selectMergedEvents(state);
@@ -630,6 +712,8 @@ const mapStateToProps = (state) => {
     filteredEvents: mergedEvents.filteredEvents,
     originalFilteredEvents: state.FilteredEvents.originalFilteredEvents,
     selectedFilteredEvent: mergedEvents.selectedFilteredEvent,
+    selectedEventUids: state.FilteredEvents.selectedEventUids || [],
+    columnFilters: state.FilteredEvents.columnFilters || { tier: [1, 2] },
     viewMode: state.FilteredEvents.viewMode,
     error: state.FilteredEvents.error,
     id: state.CaseReport.id,

src/components/reportButtonsPanel/index.js

@@ -31,11 +31,11 @@ class ReportButtonsPanel extends Component {
   };
 
   handleExportNotes = async () => {
-    const { mergedEvents } = this.props;
+    const { mergedEvents, selectedEventUids } = this.props;
     try {
       this.setState({ exporting: true });
       const state = this.props;
-      await exportReport(state, mergedEvents);
+      await exportReport(state, mergedEvents, selectedEventUids);
     } catch (err) {
       console.error("Report export failed:", err);
     } finally {
@@ -44,11 +44,11 @@ class ReportButtonsPanel extends Component {
   };
 
   handlePreviewReport = async () => {
-    const { mergedEvents } = this.props;
+    const { mergedEvents, selectedEventUids } = this.props;
     try {
       this.setState({ previewLoading: true, previewVisible: true });
       const state = this.props;
-      const html = await previewReport(state, mergedEvents);
+      const html = await previewReport(state, mergedEvents, selectedEventUids);
       this.setState({ previewHtml: html });
     } catch (err) {
       console.error("Report preview failed:", err);
@@ -202,6 +202,7 @@ const mapStateToProps = (state) => ({
   CaseReport: state.CaseReport,
   Interpretations: state.Interpretations,
   mergedEvents: require("../../redux/interpretations/selectors").selectMergedEvents(state),
+  selectedEventUids: state.FilteredEvents.selectedEventUids || [],
 });
 
 export default connect(