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 { 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 { t } from '@grafana/i18n';
@@ -500,9 +500,8 @@ export const QueryTransformList = memo(
const showDebugLineAfter = isDebugMode && globalIndex === debugPosition - 1;
return (
<>
<Fragment key={item.id}>
<div
key={item.id}
className={cx(styles.cardContainer, {
[styles.cardDebugDisabled]: isDebugDisabled,
})}
@@ -584,7 +583,7 @@ export const QueryTransformList = memo(
</div>
</div>
)}
</>
</Fragment>
);
})}
{provided.placeholder}
@@ -655,9 +654,8 @@ export const QueryTransformList = memo(
const showDebugLineAfter = isDebugMode && globalIndex === debugPosition - 1;
return (
<>
<Fragment key={item.id}>
<div
key={item.id}
className={cx(styles.cardContainer, {
[styles.cardDebugDisabled]: isDebugDisabled,
})}
@@ -740,7 +738,7 @@ export const QueryTransformList = memo(
</div>
</div>
)}
</>
</Fragment>
);
})}
{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]);
const bottomPaneHeight = containerHeight - vizHeight - 80;
const expandedSidebarHeight = containerHeight - 16;
if (!containerHeight) {
return null;
}
@@ -177,11 +180,20 @@ function VizAndDataPane({
{dataPane && (
<>
<div className={cx(styles.dataPane, isScrollingLayout && styles.fullSizeEditor)}>
<div
className={cx(styles.dataPane, isScrollingLayout && styles.fullSizeEditor)}
style={{ height: bottomPaneHeight }}
>
<dataPane.Component model={dataPane} />
</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} />
<div style={{ position: 'absolute', top: 0, bottom: 0, right: 0, height: '100%' }}>
<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) {
handle.addEventListener('mousedown', onMouseDown);
}
return () => {
handle?.removeEventListener('mousedown', onMouseDown);
};
},
[maxWidth, minWidth, width]
);
@@ -83,10 +79,6 @@ export function useVerticalResize({ initialHeight, minHeight = 0, maxHeight = In
if (handle?.nodeType === Node.ELEMENT_NODE) {
handle.addEventListener('mousedown', onMouseDown);
}
return () => {
handle?.removeEventListener('mousedown', onMouseDown);
};
},
[maxHeight, minHeight, height]
);