diff --git a/app/components/chart-panel.tsx b/app/components/chart-panel.tsx index 1464e37df..81d74e0da 100644 --- a/app/components/chart-panel.tsx +++ b/app/components/chart-panel.tsx @@ -11,6 +11,7 @@ import { ChartPanelLayoutTall } from "@/components/chart-panel-layout-tall"; import { ChartPanelLayoutVertical } from "@/components/chart-panel-layout-vertical"; import { ChartSelectionTabs } from "@/components/chart-selection-tabs"; import { DashboardInteractiveFilters } from "@/components/dashboard-interactive-filters"; +import { DragHandle } from "@/components/drag-handle"; import { Markdown } from "@/components/markdown"; import { ChartConfig, Layout, LayoutDashboard } from "@/config-types"; import { @@ -49,6 +50,7 @@ const useStyles = makeStyles((theme) => ({ height: "100%", }, textBlockWrapper: { + display: "flex", padding: "0.75rem", cursor: ({ editable }) => (editable ? "pointer" : "default"), "&:hover": { @@ -142,13 +144,28 @@ export const ChartPanelLayout = ({ // Important, otherwise ReactGrid breaks. key={block.key} className={classes.textBlockWrapper} - onClick={() => handleTextBlockClick(block)} + onClick={(e) => { + if (e.isPropagationStopped()) { + return; + } + + handleTextBlockClick(block); + }} > - {block.text[locale]} +
+ {block.text[locale]} +
+ {layouting ? ( + { + e.stopPropagation(); + }} + /> + ) : null} ); }, - [classes.textBlockWrapper, handleTextBlockClick, locale] + [classes.textBlockWrapper, handleTextBlockClick, layouting, locale] ); const renderBlock = useCallback(