Skip to content

Commit

Permalink
fix rowcount glitch on table startup (finos#1498)
Browse files Browse the repository at this point in the history
  • Loading branch information
@heswell
heswell authored Sep 17, 2024
1 parent c27fe36 commit 99fe139
Show file tree
Hide file tree
Showing 8 changed files with 56 additions and 63 deletions.
2 changes: 0 additions & 2 deletions vuu-ui/packages/vuu-data-local/src/array-data-source/array-data-source.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,6 @@ export class ArrayDataSource
viewport,
}: ArrayDataSourceConstructorProps) {
super();
console.log(`ArrayDataSource #${viewport}`);
if (!data || !columnDescriptors) {
throw Error(
"ArrayDataSource constructor called without data or without columnDescriptors",
Expand Down Expand Up @@ -490,7 +489,6 @@ export class ArrayDataSource
};

private validateDataValue(columnName: string, value: VuuRowDataItemType) {
console.log(`validate data value ${columnName} ${value}`);
const columnDescriptor = this.columnDescriptors.find(
(col) => col.name === columnName,
);
Expand Down
22 changes: 10 additions & 12 deletions vuu-ui/packages/vuu-shell/src/feature-and-layout-provider/FeatureAndLayoutProvider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ export interface FeatureContextProps {
staticFeatures?: StaticFeatureDescriptor[];
}

export interface LayoutContextProps{
systemLayouts?: SystemLayoutMetadata[]
export interface LayoutContextProps {
systemLayouts?: SystemLayoutMetadata[];
}

const NO_FEATURES: DynamicFeatureDescriptor[] = [];
Expand All @@ -41,10 +41,11 @@ const FeatureContext = createContext<FeatureContextProps>({
});

const LayoutContext = createContext<LayoutContextProps>({
systemLayouts: NO_SYSTEMLAYOUTS
})
systemLayouts: NO_SYSTEMLAYOUTS,
});

export interface FeatureAndLayoutProviderProps extends Partial<FeatureContextProps> {
export interface FeatureAndLayoutProviderProps
extends Partial<FeatureContextProps> {
children: ReactNode;
dynamicFeatures?: DynamicFeatureDescriptor[];
staticFeatures?: StaticFeatureDescriptor[];
Expand All @@ -55,7 +56,7 @@ export const FeatureAndLayoutProvider = ({
children,
dynamicFeatures: dynamicFeaturesProp = [],
staticFeatures,
systemLayouts
systemLayouts,
}: FeatureAndLayoutProviderProps): ReactElement => {
const vuuTables = useVuuTables();
const { dynamicFeatures, tableFeatures } = useMemo<{
Expand All @@ -69,9 +70,6 @@ export const FeatureAndLayoutProvider = ({
[dynamicFeaturesProp, vuuTables],
);

console.log({ tableFeatures });
console.log(systemLayouts)

return (
<FeatureContext.Provider
value={{
Expand All @@ -82,11 +80,11 @@ export const FeatureAndLayoutProvider = ({
>
<LayoutContext.Provider
value={{
systemLayouts
systemLayouts,
}}
>
>
{children}
</LayoutContext.Provider>
</LayoutContext.Provider>
</FeatureContext.Provider>
);
};
Expand Down
14 changes: 8 additions & 6 deletions vuu-ui/packages/vuu-table/src/useTable.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,14 +145,20 @@ export const useTable = ({
useMemo(() => {
tableConfigRef.current = config;
}, [config]);
const [headerHeight, setHeaderHeight] = useState(0);

const [headerHeight, setHeaderHeight] = useState(-1);
const [rowCount, setRowCount] = useState<number>(dataSource.size);
if (dataSource === undefined) {
throw Error("no data source provided to Vuu Table");
}

const onDataRowcountChange = useCallback((size: number) => {
setRowCount(size);
}, []);

const virtualContentHeight = rowHeight * rowCount;
const viewportBodyHeight = size.height - headerHeight;
const viewportBodyHeight =
size.height - (headerHeight === -1 ? 0 : headerHeight);
const verticalScrollbarWidth =
virtualContentHeight > viewportBodyHeight ? 10 : 0;
const availableWidth = size.width - (verticalScrollbarWidth + 8);
Expand All @@ -166,10 +172,6 @@ export const useTable = ({
[dataSource],
);

const onDataRowcountChange = useCallback((size: number) => {
setRowCount(size);
}, []);

const {
columns,
dispatchTableModelAction,
Expand Down
59 changes: 28 additions & 31 deletions vuu-ui/packages/vuu-table/src/useTableScroll.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ const getMaxScroll = (container: HTMLElement) => {

const getScrollDirection = (
prevScrollPositions: ScrollPos | undefined,
scrollPos: number
scrollPos: number,
) => {
if (prevScrollPositions === undefined) {
return undefined;
Expand Down Expand Up @@ -141,7 +141,7 @@ const useCallbackRef = <T = HTMLElement>({
onDetach?.(originalRef);
}
},
[onAttach, onDetach]
[onAttach, onDetach],
);
return callbackRef;
};
Expand Down Expand Up @@ -200,6 +200,7 @@ export const useTableScroll = ({
isVirtualScroll,
rowCount: viewportRowCount,
totalHeaderHeight,
usesMeasuredHeaderHeight,
viewportWidth,
} = viewportMeasurements;

Expand All @@ -214,7 +215,7 @@ export const useTableScroll = ({
contentContainerPosRef.current.scrollLeft,
contentContainerPosRef.current.scrollLeft +
viewportWidth +
HORIZONTAL_SCROLL_BUFFER
HORIZONTAL_SCROLL_BUFFER,
);
preSpanRef.current = offset;
columnsWithinViewportRef.current = visibleColumns;
Expand All @@ -234,7 +235,7 @@ export const useTableScroll = ({
const [visibleColumns, pre] = getColumnsInViewport(
columns,
scrollLeft,
scrollLeft + viewportWidth + HORIZONTAL_SCROLL_BUFFER
scrollLeft + viewportWidth + HORIZONTAL_SCROLL_BUFFER,
);

if (itemsChanged(columnsWithinViewportRef.current, visibleColumns)) {
Expand All @@ -244,7 +245,7 @@ export const useTableScroll = ({
}
}
},
[columns, onHorizontalScroll, viewportWidth]
[columns, onHorizontalScroll, viewportWidth],
);
const handleVerticalScroll = useCallback(
(scrollTop: number, pctScrollTop: number) => {
Expand All @@ -264,7 +265,7 @@ export const useTableScroll = ({
onVerticalScrollInSitu,
setRange,
viewportRowCount,
]
],
);

const handleScrollbarContainerScroll = useCallback(() => {
Expand Down Expand Up @@ -319,7 +320,7 @@ export const useTableScroll = ({
scrollbarContainerScrolledRef.current = false;
} else {
scrollbarContainer.scrollLeft = Math.round(
pctScrollLeft * maxScrollLeft
pctScrollLeft * maxScrollLeft,
);
scrollbarContainer.scrollTop = pctScrollTop * maxScrollTop;
}
Expand All @@ -340,15 +341,15 @@ export const useTableScroll = ({
passive: true,
});
},
[handleScrollbarContainerScroll]
[handleScrollbarContainerScroll],
);

const handleDetachScrollbarContainer = useCallback(
(el: HTMLDivElement) => {
scrollbarContainerRef.current = null;
el.removeEventListener("scroll", handleScrollbarContainerScroll);
},
[handleScrollbarContainerScroll]
[handleScrollbarContainerScroll],
);

const handleAttachContentContainer = useCallback(
Expand All @@ -358,15 +359,15 @@ export const useTableScroll = ({
passive: true,
});
},
[handleContentContainerScroll]
[handleContentContainerScroll],
);

const handleDetachContentContainer = useCallback(
(el: HTMLDivElement) => {
contentContainerRef.current = null;
el.removeEventListener("scroll", handleContentContainerScroll);
},
[handleContentContainerScroll]
[handleContentContainerScroll],
);

const contentContainerCallbackRef = useCallbackRef({
Expand All @@ -389,13 +390,13 @@ export const useTableScroll = ({
if (scrollRequest.type === "scroll-row") {
const activeRow = getRowElementAtIndex(
contentContainer,
scrollRequest.rowIndex
scrollRequest.rowIndex,
);

if (activeRow !== null) {
const [direction, distance] = howFarIsRowOutsideViewport(
activeRow,
totalHeaderHeight
totalHeaderHeight,
);
if (direction && distance) {
if (isVirtualScroll) {
Expand All @@ -413,12 +414,12 @@ export const useTableScroll = ({
if (direction === "up" || direction === "down") {
newScrollTop = Math.min(
Math.max(0, scrollTop + distance),
maxScrollTop
maxScrollTop,
);
} else {
newScrollLeft = Math.min(
Math.max(0, scrollLeft + distance),
maxScrollLeft
maxScrollLeft,
);
}
contentContainer.scrollTo({
Expand All @@ -443,7 +444,7 @@ export const useTableScroll = ({
direction === "down" ? appliedPageSize : -appliedPageSize;
const newScrollTop = Math.min(
Math.max(0, scrollTop + scrollBy),
maxScrollTop
maxScrollTop,
);
contentContainer.scrollTo({
top: newScrollTop,
Expand All @@ -469,7 +470,7 @@ export const useTableScroll = ({
setRange,
totalHeaderHeight,
viewportRowCount,
]
],
);

const scrollHandles: ScrollingAPI = useMemo(
Expand All @@ -486,20 +487,16 @@ export const useTableScroll = ({
console.log(`scrollToKey ${rowKey}`);
},
}),
[]
[],
);

useImperativeHandle(
scrollingApiRef,
() => {
if (scrollbarContainerRef.current) {
return scrollHandles;
} else {
return noScrolling;
}
},
[scrollHandles]
);
useImperativeHandle(scrollingApiRef, () => {
if (scrollbarContainerRef.current) {
return scrollHandles;
} else {
return noScrolling;
}
}, [scrollHandles]);

useEffect(() => {
if (rowHeight !== rowHeightRef.current) {
Expand All @@ -509,12 +506,12 @@ export const useTableScroll = ({
contentContainerRef.current.scrollTop = 0;
}
}
} else {
} else if (usesMeasuredHeaderHeight) {
const { current: from } = firstRowRef;
const rowRange = { from, to: from + viewportRowCount };
setRange(rowRange);
}
}, [rowHeight, setRange, viewportRowCount]);
}, [rowHeight, setRange, usesMeasuredHeaderHeight, viewportRowCount]);

return {
columnsWithinViewport: columnsWithinViewportRef.current,
Expand Down
12 changes: 8 additions & 4 deletions vuu-ui/packages/vuu-table/src/useTableViewport.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export interface ViewportMeasurements {
rowCount: number;
contentWidth: number;
totalHeaderHeight: number;
usesMeasuredHeaderHeight: boolean;
verticalScrollbarWidth: number;
viewportBodyHeight: number;
viewportWidth: number;
Expand Down Expand Up @@ -66,6 +67,7 @@ const UNMEASURED_VIEWPORT: TableViewportHookResult = {
setInSituRowOffset: () => undefined,
setScrollTop: () => undefined,
totalHeaderHeight: 0,
usesMeasuredHeaderHeight: false,
verticalScrollbarWidth: 0,
viewportBodyHeight: 0,
viewportWidth: 0,
Expand All @@ -88,7 +90,7 @@ export const useTableViewport = ({

const { pinnedWidthLeft, pinnedWidthRight, unpinnedWidth } = useMemo(
() => measurePinnedColumns(columns, selectionEndSize),
[columns, selectionEndSize]
[columns, selectionEndSize],
);

const [getRowOffset, getRowAtPosition, isVirtualScroll] =
Expand Down Expand Up @@ -121,7 +123,7 @@ export const useTableViewport = ({
} else {
inSituRowOffsetRef.current = Math.max(
0,
inSituRowOffsetRef.current + rowIndexOffset
inSituRowOffsetRef.current + rowIndexOffset,
);
}
}, []);
Expand All @@ -133,11 +135,12 @@ export const useTableViewport = ({
const contentWidth = pinnedWidthLeft + unpinnedWidth + pinnedWidthRight;
const horizontalScrollbarHeight =
contentWidth > size.width ? scrollbarSize : 0;
const visibleRows = (size.height - headerHeight) / rowHeight;
const measuredHeaderHeight = headerHeight === -1 ? 0 : headerHeight;
const visibleRows = (size.height - measuredHeaderHeight) / rowHeight;
const count = Number.isInteger(visibleRows)
? visibleRows
: Math.ceil(visibleRows);
const viewportBodyHeight = size.height - headerHeight;
const viewportBodyHeight = size.height - measuredHeaderHeight;
const verticalScrollbarWidth =
pixelContentHeight > viewportBodyHeight ? scrollbarSize : 0;

Expand All @@ -147,6 +150,7 @@ export const useTableViewport = ({
const viewportWidth = size.width;

return {
usesMeasuredHeaderHeight: headerHeight !== -1,
appliedPageSize,
contentHeight: pixelContentHeight,
contentWidth,
Expand Down
3 changes: 0 additions & 3 deletions vuu-ui/packages/vuu-utils/src/feature-utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,9 +186,6 @@ export const getCustomAndTableFeatures = (
dynamicFeatures: DynamicFeatureProps[];
tableFeatures: DynamicFeatureProps<FilterTableFeatureProps>[];
} => {
console.log(`getCustomAndTableFeatures`, {
vuuTables,
});
const [customFeatureConfig, tableFeaturesConfig] = partition(
dynamicFeatures,
isCustomFeature,
Expand Down
2 changes: 0 additions & 2 deletions vuu-ui/sample-apps/feature-filter-table/src/useSessionDataSource.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,6 @@ export const useSessionDataSource = ({
const { id, load, save, loadSession, saveSession, title } = useViewContext();
const { VuuDataSource } = useDataSource();

console.log(`useSessionDataSource #${id}`);

const { "datasource-config": dataSourceConfigFromState } =
useMemo<SessionDataSourceConfig>(() => load?.() ?? NO_CONFIG, [load]);

Expand Down
Loading

0 comments on commit 99fe139

Please sign in to comment.