From 1cb126bba4c0bfe1f50324fc4003ac9d64b55bc3 Mon Sep 17 00:00:00 2001 From: Speros Kokenes Date: Wed, 13 Nov 2024 12:07:03 -0500 Subject: [PATCH] fix: tooltip styles --- .../bar-chart/get-custom-tooltips-entries.ts | 7 +++++ .../component/chart/default-chart-tooltip.tsx | 5 ---- .../malloy-render/src/component/render.tsx | 1 + .../src/component/table/table.tsx | 16 +++++++--- .../src/component/tooltip/tooltip.tsx | 29 +++++++------------ packages/malloy-render/src/component/types.ts | 1 + 6 files changed, 31 insertions(+), 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 index 7fa31149a..a36d2182b 100644 --- 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 index 8fd3cb587..2e4cd9c0f 100644 --- 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 component? Or can we 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 index 63c74ce5d..1a8fa603a 100644 --- 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 index 8a84d4461..97d4febe9 100644 --- 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 index e92a6c286..9ea78e06d 100644 --- 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 ( - -
-
{props.children}
-
- +
+
{props.children}
+
); } diff --git a/packages/malloy-render/src/component/types.ts b/packages/malloy-render/src/component/types.ts index cfe6a1ea6..4278008d1 100644 --- 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;