hiding tooltips under histograms

paddymul · Oct 31, 2024 · 19e4ddd · 19e4ddd
1 parent 1b758a9
commit 19e4ddd
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 9 deletions.
diff --git a/docs/examples/ex/DFViewerEx_large.tsx b/docs/examples/ex/DFViewerEx_large.tsx
@@ -188,13 +188,15 @@ export default function DFViewerExString() {
                     primary_key_val: 'dtype',
                     displayer_args: {
                         displayer: 'obj'
-                    }
+                    },
+
+
                 },
                 {
                     primary_key_val: 'histogram',
                     displayer_args: {
                         displayer: 'histogram'
-                    }
+                    },
                 }
             ],
             component_config: {height_fraction: 1.15},
@@ -216,7 +218,10 @@ export default function DFViewerExString() {
                     col_name: 'b',
                     displayer_args: {
                         displayer: 'obj'
-                    }
+                    },
+		    "tooltip_config": {
+			"tooltip_type": "simple",
+			"val_column": "b"}
                 },
                 {
                     col_name: 'c',

diff --git a/js/components/DFViewerParts/OtherRenderers.tsx b/js/components/DFViewerParts/OtherRenderers.tsx
@@ -0,0 +1,29 @@
+import _ from 'lodash';
+import React from 'react';
+import {ValueFormatterFunc} from 'ag-grid-community';
+
+export const getTextCellRenderer = (formatter: ValueFormatterFunc<any>) => {
+    const TextCellRenderer = (props: any) => {
+        return <span>{formatter(props)}</span>;
+    };
+    return TextCellRenderer;
+};
+
+export const LinkCellRenderer = (props: any) => {
+    return <a href={props.value}>{props.value}</a>;
+};
+
+export const Base64PNGDisplayer = (props: any) => {
+    const imgString = 'data:image/png;base64,' + props.value;
+    return <img src={imgString}></img>;
+};
+
+export const SVGDisplayer = (props: any) => {
+    const markup = {__html: props.value};
+
+    return (
+        <div //style={{border:'1px solid red', borderBottom:'1px solid green'}}
+            dangerouslySetInnerHTML={markup}
+        ></div>
+    );
+};
diff --git a/js/components/DFViewerParts/SeriesSummaryTooltip.tsx b/js/components/DFViewerParts/SeriesSummaryTooltip.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import {DFViewer} from './DFViewer';
-import {DFWhole} from './DFWhole';
-import {ITooltipParams} from 'ag-grid-community';
+import { DFViewer } from './DFViewer';
+import { DFWhole } from './DFWhole';
+import { ITooltipParams } from 'ag-grid-community';
 
 export function getBakedDFViewer(seriesDf: DFWhole) {
     const retFunc = (props: ITooltipParams) => {
@@ -18,3 +18,17 @@ export function getBakedDFViewer(seriesDf: DFWhole) {
     };
     return retFunc;
 }
+export const simpleTooltip = (props: ITooltipParams) => {
+    // displaying the tooltip for histograms is distracting.  
+    // This should be possible with the tooltipValueGetter, but that 
+    // wasn't working for some reason
+
+    // console.log("simpleTooltip props", props);
+    // console.log("props.colId", props.column.colId, "pinned",
+    // 		props.column.pinned, "node.id", props.node.id, "rowIndex", props.rowIndex)
+    if (props.data.index == "histogram") {
+        return;
+    }
+    return (
+        <div className="ag-tooltip">{props.valueFormatted}</div>);
+};
diff --git a/js/components/DFViewerParts/gridUtils.ts b/js/components/DFViewerParts/gridUtils.ts
@@ -23,7 +23,7 @@ import {getTextCellRenderer} from './OtherRenderers';
 import {DFData, SDFMeasure, SDFT} from './DFWhole';
 
 import {CellRendererArgs, FormatterArgs, PinnedRowConfig} from './DFWhole';
-import {getBakedDFViewer} from './SeriesSummaryTooltip';
+import {getBakedDFViewer, simpleTooltip} from './SeriesSummaryTooltip';
 import {getFormatterFromArgs, getCellRenderer, objFormatter, getFormatter} from './Displayer';
 
 // for now colDef stuff with less than 3 implementantions should stay in this file
@@ -142,7 +142,9 @@ export function extractPinnedRows(sdf: DFData, prc: PinnedRowConfig[]) {
 export function getTooltip(ttc: TooltipConfig, single_series_summary_df: DFWhole): Partial<ColDef> {
     switch (ttc.tooltip_type) {
         case 'simple':
-            return {tooltipField: ttc.val_column};
+            return {tooltipField: ttc.val_column,
+		    tooltipComponent: simpleTooltip,
+        };
 
         case 'summary_series':
             return {
@@ -205,6 +207,7 @@ export function dfToAgrid(
         };
         return colDef;
     });
+    console.log("retColumns", retColumns);
     return [retColumns, tdf];
 }
 
@@ -226,7 +229,6 @@ export function getCellRendererSelector(pinned_rows: PinnedRowConfig[]) {
                 return anyRenderer;
             }
             const prc: PinnedRowConfig = maybePrc;
-            console.log('params', params);
             const currentCol = params.column?.getColId();
             if (
                 (prc.default_renderer_columns === undefined && currentCol === 'index') ||