public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix scrolling while keeping resize working

Browse Source
This commit is contained in:
Paul Marbach
2025-12-09 14:18:18 -05:00
parent de5d276848
commit ebf77ddd9f
3 changed files with 19 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformList.tsx
+5 -7
View File
@@ -1,6 +1,6 @@
import { css, cx } from '@emotion/css'; import { css, cx } from '@emotion/css';
import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd'; import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd';
import { HTMLAttributes, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { Fragment, HTMLAttributes, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { GrafanaTheme2 } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { t } from '@grafana/i18n'; import { t } from '@grafana/i18n';
@@ -500,9 +500,8 @@ export const QueryTransformList = memo(
const showDebugLineAfter = isDebugMode && globalIndex === debugPosition - 1; const showDebugLineAfter = isDebugMode && globalIndex === debugPosition - 1;
return ( return (
<> <Fragment key={item.id}>
<div <div
key={item.id}
className={cx(styles.cardContainer, { className={cx(styles.cardContainer, {
[styles.cardDebugDisabled]: isDebugDisabled, [styles.cardDebugDisabled]: isDebugDisabled,
})} })}
@@ -584,7 +583,7 @@ export const QueryTransformList = memo(
</div> </div>
</div> </div>
)} )}
</> </Fragment>
); );
})} })}
{provided.placeholder} {provided.placeholder}
@@ -655,9 +654,8 @@ export const QueryTransformList = memo(
const showDebugLineAfter = isDebugMode && globalIndex === debugPosition - 1; const showDebugLineAfter = isDebugMode && globalIndex === debugPosition - 1;
return ( return (
<> <Fragment key={item.id}>
<div <div
key={item.id}
className={cx(styles.cardContainer, { className={cx(styles.cardContainer, {
[styles.cardDebugDisabled]: isDebugDisabled, [styles.cardDebugDisabled]: isDebugDisabled,
})} })}
@@ -740,7 +738,7 @@ export const QueryTransformList = memo(
</div> </div>
</div> </div>
)} )}
</> </Fragment>
); );
})} })}
{provided.placeholder} {provided.placeholder}
public/app/features/dashboard-scene/panel-edit/PanelEditorRenderer.tsx
+14 -2
View File
@@ -148,6 +148,9 @@ function VizAndDataPane({
}; };
}, [controls, dataPane, sidebarState.size, vizHeight, containerHeight]); }, [controls, dataPane, sidebarState.size, vizHeight, containerHeight]);
const bottomPaneHeight = containerHeight - vizHeight - 80;
const expandedSidebarHeight = containerHeight - 16;
if (!containerHeight) { if (!containerHeight) {
return null; return null;
} }
@@ -177,11 +180,20 @@ function VizAndDataPane({
{dataPane && ( {dataPane && (
<> <>
<div className={cx(styles.dataPane, isScrollingLayout && styles.fullSizeEditor)}> <div
className={cx(styles.dataPane, isScrollingLayout && styles.fullSizeEditor)}
style={{ height: bottomPaneHeight }}
>
<dataPane.Component model={dataPane} /> <dataPane.Component model={dataPane} />
</div> </div>
<div className={styles.sidebar} style={{ width: sidebarWidth }}> <div
className={styles.sidebar}
style={{
height: sidebarState.size === SidebarSize.Mini ? bottomPaneHeight : expandedSidebarHeight,
width: sidebarWidth,
}}
>
<PanelDataSidebar model={dataPane} sidebarState={sidebarState} setSidebarState={setSidebarState} /> <PanelDataSidebar model={dataPane} sidebarState={sidebarState} setSidebarState={setSidebarState} />
<div style={{ position: 'absolute', top: 0, bottom: 0, right: 0, height: '100%' }}> <div style={{ position: 'absolute', top: 0, bottom: 0, right: 0, height: '100%' }}>
<div <div
public/app/features/dashboard-scene/panel-edit/hooks.ts
-8
View File
@@ -43,10 +43,6 @@ export function useHorizontalResize({ initialWidth, minWidth = 0, maxWidth = Inf
if (handle?.nodeType === Node.ELEMENT_NODE) { if (handle?.nodeType === Node.ELEMENT_NODE) {
handle.addEventListener('mousedown', onMouseDown); handle.addEventListener('mousedown', onMouseDown);
} }
return () => {
handle?.removeEventListener('mousedown', onMouseDown);
};
}, },
[maxWidth, minWidth, width] [maxWidth, minWidth, width]
); );
@@ -83,10 +79,6 @@ export function useVerticalResize({ initialHeight, minHeight = 0, maxHeight = In
if (handle?.nodeType === Node.ELEMENT_NODE) { if (handle?.nodeType === Node.ELEMENT_NODE) {
handle.addEventListener('mousedown', onMouseDown); handle.addEventListener('mousedown', onMouseDown);
} }
return () => {
handle?.removeEventListener('mousedown', onMouseDown);
};
}, },
[maxHeight, minHeight, height] [maxHeight, minHeight, height]
); );