Skip to content

Commit

Permalink
Don't render grid layout without gridWrapperWidth
Browse files Browse the repository at this point in the history
  • Loading branch information
@Twixes
Twixes committed Mar 15, 2024
1 parent f1cee9a commit 9ef2471
Showing 1 changed file with 110 additions and 106 deletions.
216 changes: 110 additions & 106 deletions frontend/src/scenes/dashboard/DashboardItems.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,114 +54,118 @@ export function DashboardItems(): JSX.Element {

return (
<div className="dashboard-items-wrapper" ref={gridWrapperRef}>
<ReactGridLayout
width={gridWrapperWidth || 0}
className={className}
isDraggable={dashboardMode === DashboardMode.Edit}
isResizable={dashboardMode === DashboardMode.Edit}
layouts={layouts}
rowHeight={80}
margin={[16, 16]}
containerPadding={[0, 0]}
onLayoutChange={(_, newLayouts) => {
if (dashboardMode === DashboardMode.Edit) {
updateLayouts(newLayouts)
}
}}
onWidthChange={(containerWidth, _, newCols) => {
updateContainerWidth(containerWidth, newCols)
}}
breakpoints={BREAKPOINTS}
resizeHandles={canResizeWidth ? ['s', 'e', 'se'] : ['s']}
cols={BREAKPOINT_COLUMN_COUNTS}
onResize={(_layout: any, _oldItem: any, newItem: any) => {
if (!resizingItem || resizingItem.w !== newItem.w || resizingItem.h !== newItem.h) {
setResizingItem(newItem)
}
}}
onResizeStop={() => {
setResizingItem(null)
}}
onDrag={() => {
isDragging.current = true
if (dragEndTimeout.current) {
window.clearTimeout(dragEndTimeout.current)
}
}}
onDragStop={() => {
if (dragEndTimeout.current) {
window.clearTimeout(dragEndTimeout.current)
}
dragEndTimeout.current = window.setTimeout(() => {
isDragging.current = false
}, 250)
}}
draggableCancel=".anticon,.ant-dropdown,table,button,.Popover"
>
{tiles?.map((tile: DashboardTile) => {
const { insight, text } = tile
const smLayout = layouts['sm']?.find((l) => {
return l.i == tile.id.toString()
})
{gridWrapperWidth && (
<ReactGridLayout
width={gridWrapperWidth}
className={className}
isDraggable={dashboardMode === DashboardMode.Edit}
isResizable={dashboardMode === DashboardMode.Edit}
layouts={layouts}
rowHeight={80}
margin={[16, 16]}
containerPadding={[0, 0]}
onLayoutChange={(_, newLayouts) => {
if (dashboardMode === DashboardMode.Edit) {
updateLayouts(newLayouts)
}
}}
onWidthChange={(containerWidth, _, newCols) => {
updateContainerWidth(containerWidth, newCols)
}}
breakpoints={BREAKPOINTS}
resizeHandles={canResizeWidth ? ['s', 'e', 'se'] : ['s']}
cols={BREAKPOINT_COLUMN_COUNTS}
onResize={(_layout: any, _oldItem: any, newItem: any) => {
if (!resizingItem || resizingItem.w !== newItem.w || resizingItem.h !== newItem.h) {
setResizingItem(newItem)
}
}}
onResizeStop={() => {
setResizingItem(null)
}}
onDrag={() => {
isDragging.current = true
if (dragEndTimeout.current) {
window.clearTimeout(dragEndTimeout.current)
}
}}
onDragStop={() => {
if (dragEndTimeout.current) {
window.clearTimeout(dragEndTimeout.current)
}
dragEndTimeout.current = window.setTimeout(() => {
isDragging.current = false
}, 250)
}}
draggableCancel=".anticon,.ant-dropdown,table,button,.Popover"
>
{tiles?.map((tile: DashboardTile) => {
const { insight, text } = tile
const smLayout = layouts['sm']?.find((l) => {
return l.i == tile.id.toString()
})

const commonTileProps = {
dashboardId: dashboard?.id,
showResizeHandles: dashboardMode === DashboardMode.Edit,
canResizeWidth: canResizeWidth,
showEditingControls: [
DashboardPlacement.Dashboard,
DashboardPlacement.ProjectHomepage,
].includes(placement),
moreButtons: canEditDashboard ? (
<LemonButton
onClick={() => setDashboardMode(DashboardMode.Edit, DashboardEventSource.MoreDropdown)}
fullWidth
>
Edit layout (E)
</LemonButton>
) : null,
moveToDashboard: ({ id, name }: Pick<DashboardType, 'id' | 'name'>) => {
if (!dashboard) {
throw new Error('must be on a dashboard to move this tile')
}
moveToDashboard(tile, dashboard.id, id, name)
},
removeFromDashboard: () => removeTile(tile),
}
const commonTileProps = {
dashboardId: dashboard?.id,
showResizeHandles: dashboardMode === DashboardMode.Edit,
canResizeWidth: canResizeWidth,
showEditingControls: [
DashboardPlacement.Dashboard,
DashboardPlacement.ProjectHomepage,
].includes(placement),
moreButtons: canEditDashboard ? (
<LemonButton
onClick={() =>
setDashboardMode(DashboardMode.Edit, DashboardEventSource.MoreDropdown)
}
fullWidth
>
Edit layout (E)
</LemonButton>
) : null,
moveToDashboard: ({ id, name }: Pick<DashboardType, 'id' | 'name'>) => {
if (!dashboard) {
throw new Error('must be on a dashboard to move this tile')
}
moveToDashboard(tile, dashboard.id, id, name)
},
removeFromDashboard: () => removeTile(tile),
}

if (insight) {
return (
<InsightCard
key={tile.id}
insight={insight}
loadingQueued={isRefreshingQueued(insight.short_id)}
loading={isRefreshing(insight.short_id)}
apiErrored={refreshStatus[insight.short_id]?.error || false}
highlighted={highlightedInsightId && insight.short_id === highlightedInsightId}
updateColor={(color) => updateTileColor(tile.id, color)}
ribbonColor={tile.color}
refresh={() => refreshAllDashboardItems({ tiles: [tile], action: 'refresh' })}
rename={() => renameInsight(insight)}
duplicate={() => duplicateInsight(insight)}
showDetailsControls={placement != DashboardPlacement.Export}
placement={placement}
loadPriority={smLayout ? smLayout.y * 1000 + smLayout.x : undefined}
{...commonTileProps}
/>
)
}
if (text) {
return (
<TextCard
key={tile.id}
textTile={tile}
duplicate={() => duplicateTile(tile)}
{...commonTileProps}
/>
)
}
})}
</ReactGridLayout>
if (insight) {
return (
<InsightCard
key={tile.id}
insight={insight}
loadingQueued={isRefreshingQueued(insight.short_id)}
loading={isRefreshing(insight.short_id)}
apiErrored={refreshStatus[insight.short_id]?.error || false}
highlighted={highlightedInsightId && insight.short_id === highlightedInsightId}
updateColor={(color) => updateTileColor(tile.id, color)}
ribbonColor={tile.color}
refresh={() => refreshAllDashboardItems({ tiles: [tile], action: 'refresh' })}
rename={() => renameInsight(insight)}
duplicate={() => duplicateInsight(insight)}
showDetailsControls={placement != DashboardPlacement.Export}
placement={placement}
loadPriority={smLayout ? smLayout.y * 1000 + smLayout.x : undefined}
{...commonTileProps}
/>
)
}
if (text) {
return (
<TextCard
key={tile.id}
textTile={tile}
duplicate={() => duplicateTile(tile)}
{...commonTileProps}
/>
)
}
})}
</ReactGridLayout>
)}
</div>
)
}

0 comments on commit 9ef2471

Please sign in to comment.