Merge pull request #2009 from malloydata/tooltip-updates

fix: tooltip styles
malloydata · Nov 13, 2024 · 3f0cd4b · 3f0cd4b
2 parents 0b3a45e + 1cb126b
commit 3f0cd4b
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 28 deletions.
diff --git a/packages/malloy-render/src/component/bar-chart/get-custom-tooltips-entries.ts b/packages/malloy-render/src/component/bar-chart/get-custom-tooltips-entries.ts
@@ -39,6 +39,13 @@ export function getCustomTooltipEntries({
               dataColumn: rec.__source.__malloyDataRecord.cell(f.name),
               resultMetadata: metadata,
               tag: f.tagParse().tag,
+              customProps: {
+                table: {
+                  shouldFillWidth: true,
+                  disableVirtualization: true,
+                  rowLimit: 20,
+                },
+              },
             }).renderValue,
           highlight: false,
           color: '',

diff --git a/packages/malloy-render/src/component/chart/default-chart-tooltip.tsx b/packages/malloy-render/src/component/chart/default-chart-tooltip.tsx
@@ -7,11 +7,6 @@
 
 import {For, Match, Show, Switch, createEffect, createSignal} from 'solid-js';
 import {ChartTooltipEntry} from '../types';
-// TODO: This is a hacky way to get table CSS applied at global level so it affects tables in tooltips
-// Need a better strategy here for how we render things inside of tooltips. Is it possible to keep
-// tooltips and modals inside of the <malloy-render> component? Or can we render <malloy-render> with
-// subsets of the Result set?
-import '../table/table.css';
 
 export function DefaultChartTooltip(props: {data: ChartTooltipEntry}) {
   const [render, setRender] = createSignal(false);

diff --git a/packages/malloy-render/src/component/render.tsx b/packages/malloy-render/src/component/render.tsx
@@ -107,6 +107,7 @@ export function MalloyRender(
       {
         disableVirtualization: false,
         rowLimit: Infinity,
+        shouldFillWidth: false,
       },
       props.tableConfig
     );

diff --git a/packages/malloy-render/src/component/table/table.tsx b/packages/malloy-render/src/component/table/table.tsx
@@ -224,13 +224,16 @@ const MalloyTableRoot = (_props: {
   rowLimit?: number;
   scrollEl?: HTMLElement;
   disableVirtualization?: boolean;
+  shouldFillWidth?: boolean;
 }) => {
   const props = mergeProps({rowLimit: Infinity}, _props);
   const tableCtx = useTableContext()!;
   const resultMetadata = useResultContext();
   const shouldFillWidth =
-    tableCtx.root &&
-    props.data.field.tagParse().tag.tag('table')?.text('size') === 'fill';
+    typeof props.shouldFillWidth === 'boolean'
+      ? props.shouldFillWidth
+      : tableCtx.root &&
+        props.data.field.tagParse().tag.tag('table')?.text('size') === 'fill';
 
   const pinnedFields = createMemo(() => {
     const fields = Object.entries(tableCtx.layout.fieldHeaderRangeMap)
@@ -618,6 +621,7 @@ const MalloyTable: Component<{
   rowLimit?: number;
   scrollEl?: HTMLElement;
   disableVirtualization?: boolean;
+  shouldFillWidth?: boolean;
 }> = props => {
   const metadata = useResultContext();
   const hasTableCtx = !!useTableContext();
@@ -651,13 +655,17 @@ const MalloyTable: Component<{
   const tableProps = () =>
     mergeProps(props, {
       disableVirtualization:
-        typeof props.disableVirtualization !== 'undefined'
+        typeof props.disableVirtualization === 'boolean'
           ? props.disableVirtualization
           : tableConfig().disableVirtualization,
       rowLimit:
-        typeof props.rowLimit !== 'undefined'
+        typeof props.rowLimit === 'number'
           ? props.rowLimit
           : tableConfig().rowLimit,
+      shouldFillWidth:
+        typeof props.shouldFillWidth === 'boolean'
+          ? props.shouldFillWidth
+          : tableConfig().shouldFillWidth,
     });
 
   return (

diff --git a/packages/malloy-render/src/component/tooltip/tooltip.tsx b/packages/malloy-render/src/component/tooltip/tooltip.tsx
@@ -1,10 +1,7 @@
-import {createSignal, JSXElement, onCleanup, onMount, Show} from 'solid-js';
-import {Portal} from 'solid-js/web';
+import {createSignal, JSXElement, onCleanup, Show} from 'solid-js';
 import tooltipCss from './tooltip.css?raw';
 import {useConfig} from '../render';
 
-const TOOLTIP_STYLE_ID = 'malloy-tooltip-style';
-
 export function Tooltip(props: {show: boolean; children: JSXElement}) {
   const [pos, setPos] = createSignal([0, 0]);
   const handler = evt => {
@@ -18,24 +15,18 @@ export function Tooltip(props: {show: boolean; children: JSXElement}) {
     document.removeEventListener('mousemove', handler);
   });
 
-  // Tooltips are rendered in the body outside of the malloy-render component,
-  // so we need to append the styles to the head of the document, rather than scoped inside malloy-render.
-  onMount(() => {
-    const config = useConfig();
-    config.addCSSToDocument(TOOLTIP_STYLE_ID, tooltipCss);
-  });
+  const config = useConfig();
+  config.addCSSToShadowRoot(tooltipCss);
 
   return (
     <Show when={props.show}>
-      <Portal>
-        <div
-          style={`position: fixed; top: ${pos()[1]}px; left: ${
-            pos()[0]
-          }px; width: 0px; height: 0px; pointer-events: none; z-index: 1000`}
-        >
-          <div class="malloy-tooltip">{props.children}</div>
-        </div>
-      </Portal>
+      <div
+        style={`position: fixed; top: ${pos()[1]}px; left: ${
+          pos()[0]
+        }px; width: 0px; height: 0px; pointer-events: none; z-index: 1000`}
+      >
+        <div class="malloy-tooltip">{props.children}</div>
+      </div>
     </Show>
   );
 }
diff --git a/packages/malloy-render/src/component/types.ts b/packages/malloy-render/src/component/types.ts
@@ -117,6 +117,7 @@ export type Channel = {
 export type TableConfig = {
   disableVirtualization: boolean;
   rowLimit: number;
+  shouldFillWidth: boolean;
 };
 export type DashboardConfig = {
   disableVirtualization: boolean;