Remove date under home page search bar (#1549)

SrushtiGangireddy · web-flow · commit c0fa4022abfb · 2025-10-10T13:22:49.000-05:00
diff --git a/public-ui/src/app/data-browser/cdr-version/cdr-version-info.tsx b/public-ui/src/app/data-browser/cdr-version/cdr-version-info.tsx
@@ -52,8 +52,7 @@ export class CdrVersionReactComponent extends React.Component<{}, State> {
           <style>{style}</style>
           <span className="result-body-item cdr-info">
             Data includes {Number(numParticipants).toLocaleString()}{" "}
-            participants as of {creationTime.getMonth() + 1}/
-            {creationTime.getDate()}/{creationTime.getFullYear()}.
+            participants
           </span>
         </React.Fragment>
       )
diff --git a/public-ui/src/app/data-browser/components/heat-map/heat-map.component.tsx b/public-ui/src/app/data-browser/components/heat-map/heat-map.component.tsx
@@ -97,12 +97,15 @@ export const HeatMapReactComponent =
                 formatter: function () {
                     const value = this.point.value <= 20 ? '≤ 20' : this.point.value.toLocaleString();
                     const total = this.series.chart.userOptions.totalValue || 1;
-                    const percentage = ((this.point.value / total) * 100).toFixed(1);
+                    const percentage = (this.point.value / total) * 100;
+
+                    // In the map tooltip, let’s display < 0.1% instead of 0.0 when a value is less than 0.05 (looks like standard rounding)
+                    const percentageDisplay = percentage < 0.05 ? '< 0.1%' : `${percentage.toFixed(1)}%`;
 
                     const tooltipText = `
                         <div style="text-align: center;">
                             <div style="font-weight: bold; margin-bottom: 4px;">${this.point.name}</div>
-                            <div>${value} participants | ${percentage}%</div>
+                            <div>${value} participants | ${percentageDisplay}</div>
                         </div>
                     `;
                     return tooltipText;
@@ -220,9 +223,13 @@ export const HeatMapReactComponent =
                     const total = this.calculateTotal(chartObj.series[0].data);
                     (chartObj.userOptions as any).totalValue = total;
 
-                    // Reapply territory colors
+                    // Clear old event listeners by resetting the domPathsByGroup
+                    this.clearEventListeners();
+
+                    // Reapply territory colors and setup event listeners
                     setTimeout(() => {
                         this.applyTerritoryColors();
+                        this.setupEventListeners();
                     }, 100);
                 }
             }
@@ -292,6 +299,7 @@ export const HeatMapReactComponent =
                     pathEl.replaceWith(pathEl.cloneNode(true));
                 });
             });
+            this.clearEventListeners();
         }
 
         handleMouseEnterGroup(groupName) {
@@ -401,6 +409,20 @@ export const HeatMapReactComponent =
             series.chart.redraw();
         }
 
+        clearEventListeners() {
+            // Remove old event listeners and clear the domPathsByGroup
+            Object.keys(this.domPathsByGroup).forEach(groupName => {
+                const paths = this.domPathsByGroup[groupName];
+                paths.forEach(pathEl => {
+                    // Clone node to remove all event listeners
+                    const newPath = pathEl.cloneNode(true);
+                    pathEl.parentNode?.replaceChild(newPath, pathEl);
+                });
+                // Clear the array
+                this.domPathsByGroup[groupName] = [];
+            });
+        }
+
         render() {
             return (<>
                 <style>{style}</style>
diff --git a/public-ui/src/app/data-browser/views/sv-genomic-view/components/consequence-gene-display-component.tsx b/public-ui/src/app/data-browser/views/sv-genomic-view/components/consequence-gene-display-component.tsx
@@ -91,7 +91,7 @@ render() {
       <div style={{ whiteSpace: "pre-line", marginTop: "4px" }}>
         {firstEntry && (
           <div className="consequence-item">
-            <i>{firstEntry[0]}:</i>{" "}
+            <i>{firstEntry[0].toLowerCase()}:</i>{" "}
             <span style={{ display: "inline" }}>
               {showAll ? firstEntry[1].join(", ") : truncatedGeneStr}
               {!showAll && (shouldTruncate || consequenceEntries.length > 1) && (
@@ -110,7 +110,7 @@ render() {
         {showAll &&
           restEntries.map(([label, genes], idx) => (
             <div key={idx} className="consequence-item">
-              <i>{label}:</i> {genes.join(", ")}
+              <i>{label.toLowerCase()}:</i> {genes.join(", ")}
             </div>
           ))}
 
diff --git a/public-ui/src/app/data-browser/views/sv-genomic-view/components/sv-variant-expanded.component.tsx b/public-ui/src/app/data-browser/views/sv-genomic-view/components/sv-variant-expanded.component.tsx
@@ -263,7 +263,9 @@ export class SVVariantExpandedComponent extends React.Component<Props, State> {
                     <span style={styles.catHeading}>Size:</span>
                     <br />
                     <span style={styles.catInfo}>
-                      {variantDetails.size ? variantDetails.size : "-"}
+                    {(variantDetails.variantType?.includes('CTX') || variantDetails.variantType?.includes('BND'))
+                      ? 'N/A'
+                      : (variantDetails.size != null && variantDetails.size >= 0 ? variantDetails.size : '-')}
                     </span>
                   </div>
                   <div>
diff --git a/public-ui/src/app/data-browser/views/sv-genomic-view/components/sv-variant-filter-chips.component.tsx b/public-ui/src/app/data-browser/views/sv-genomic-view/components/sv-variant-filter-chips.component.tsx
@@ -60,6 +60,7 @@ export class SVVariantFilterChips extends React.Component<Props, State> {
   }
 
   formatChips(filteredMetadata): Array<any> {
+    console.log('formatChips - filteredMetadata:', filteredMetadata);
     const displayArr = [];
     for (const key in filteredMetadata) {
       if (
@@ -79,10 +80,12 @@ export class SVVariantFilterChips extends React.Component<Props, State> {
               el.max = +el.max.toFixed(2);
             }
           }
+          console.log(`formatChips - Adding chip for ${key}:`, el);
           displayArr.push({ cat: key, data: el });
         }
       }
     }
+    console.log('formatChips - displayArr:', displayArr);
     return displayArr;
   }
 
@@ -92,12 +95,20 @@ export class SVVariantFilterChips extends React.Component<Props, State> {
     snapshot?: any
   ): void {
     if (prevProps !== this.props) {
-      this.setState({ chips: this.formatChips(this.props.filteredMetadata) });
+      console.log('componentDidUpdate - prevProps.filteredMetadata:', prevProps.filteredMetadata);
+      console.log('componentDidUpdate - this.props.filteredMetadata:', this.props.filteredMetadata);
+      const formattedChips = this.formatChips(this.props.filteredMetadata);
+      console.log('componentDidUpdate - formattedChips:', formattedChips);
+      this.setState({ chips: formattedChips });
     }
   }
 
   removeChip(item, cat) {
+    console.log('removeChip - item:', item);
+    console.log('removeChip - cat:', cat);
     const { filteredMetadata } = this.props;
+    console.log('removeChip - filteredMetadata before:', JSON.parse(JSON.stringify(filteredMetadata)));
+
     if (filteredMetadata[cat.toString()].hasOwnProperty("filterActive")) {
       filteredMetadata[cat.toString()].items = filteredMetadata[
         cat.toString()
@@ -113,12 +124,13 @@ export class SVVariantFilterChips extends React.Component<Props, State> {
         const originalFilterMetadata = JSON.parse(
           localStorage.getItem("svOriginalFilterMetadata") || "{}"
         );
+        console.log('removeChip - originalFilterMetadata:', originalFilterMetadata);
         filteredMetadata[cat.toString()].min =
           originalFilterMetadata[cat.toString()].min;
         filteredMetadata[cat.toString()].max =
           originalFilterMetadata[cat.toString()].max;
       } catch (e) {
-        console.log("Error");
+        console.log("Error loading original filter metadata:", e);
       }
     }
     const allFalse =
@@ -131,15 +143,18 @@ export class SVVariantFilterChips extends React.Component<Props, State> {
     ) {
       filteredMetadata[cat.toString()].filterActive = false;
     }
+    console.log('removeChip - filteredMetadata after:', JSON.parse(JSON.stringify(filteredMetadata)));
     this.props.onChipChange(filteredMetadata);
   }
 
   render() {
     const { chips } = this.state;
+    console.log('render - chips:', chips);
     return (
       <div style={styles.chipFormat}>
         {chips.length > 0 &&
           chips.map((el, count) => {
+            console.log(`render - chip ${count}:`, el);
             if (el.data.hasOwnProperty("filterActive")) {
               return (
                 <div key={count}>
@@ -148,9 +163,19 @@ export class SVVariantFilterChips extends React.Component<Props, State> {
                     <div style={styles.chipCat}>
                       {lables[el.cat.toString()]}
                       {el.data.items.map((item, i) => {
-                        const chipLabel = item.option
+                        let chipLabel = item.option
                           ? item.option
                           : "(undefined)";
+
+                        // Remove < and > brackets for variant type display only
+                        if (el.cat === 'variantType') {
+                          chipLabel = chipLabel.replace(/[<>]/g, '');
+                        }
+                        if (el.cat === 'consequence') {
+                          chipLabel = chipLabel.trim().toLowerCase();
+                        }
+
+                        console.log(`render - chip item ${count}-${i}:`, item, 'label:', chipLabel);
                         return (
                           <div style={styles.chipLayout} key={i}>
                             {item.checked && (
@@ -214,4 +239,4 @@ export class SVVariantFilterChips extends React.Component<Props, State> {
       </div>
     );
   }
-}
+}
diff --git a/public-ui/src/app/data-browser/views/sv-genomic-view/components/sv-variant-filter-item.component.tsx b/public-ui/src/app/data-browser/views/sv-genomic-view/components/sv-variant-filter-item.component.tsx
@@ -198,7 +198,17 @@ export class SVVariantFilterItemComponent extends React.Component<
                 </div> */}
             {filterItemState.items.map((item: any, index: number) => {
               const key = "option" + index;
-              const itemLabel = item.option ? item.option : "(undefined)";
+              let itemLabel = item.option ? item.option : "(undefined)";
+
+              // Remove < and > brackets for variant type display only
+              if (category.field === 'variantType') {
+                itemLabel = itemLabel.replace(/[<>]/g, '');
+              }
+
+              if (category.field === 'consequence') {
+                itemLabel = itemLabel.trim().toLowerCase();
+              }
+
               return (
                 <span
                   title={item.option}
@@ -237,4 +247,4 @@ export class SVVariantFilterItemComponent extends React.Component<
       </React.Fragment>
     );
   }
-}
+}
diff --git a/public-ui/src/app/data-browser/views/sv-genomic-view/components/sv-variant-row.component.tsx b/public-ui/src/app/data-browser/views/sv-genomic-view/components/sv-variant-row.component.tsx
@@ -179,12 +179,15 @@ export class SVVariantRowComponent extends React.Component<Props, State> {
               </div>
             </div>
             <div style={styles.rowItem}>{this.replaceTag(variant.variantType)}</div>
-            <div style={styles.rowItem}>{variant.consequence}</div>
+            <div style={styles.rowItem}>
+              {variant.consequence ? variant.consequence.toLowerCase() : variant.consequence}
+            </div>
             <div style={styles.rowItem}>
             {variant.position ? `chr${variant.position.replace(/-chr/, ', chr')}` : "-"}
             </div>
             <div style={styles.rowItem}>
-              {variant.size && variant.size >= 0 ? variant.size : ""}
+            {(variant.variantType?.includes('CTX') || variant.variantType?.includes('BND'))
+            ? 'N/A' : (variant.size != null && variant.size >= 0 ? variant.size : '-')}
             </div>
             <div style={styles.rowItem}>{variant.alleleCount}</div>
             <div style={styles.rowItem}>{variant.alleleNumber}</div>
