rename Chest to DockLayout, introduce experimental new implementation (…

…#682) * rename Chest to DockLAyout, introduce experimental new implementation * add rangeNewItems * add example that now used DockLayout
finos · May 7, 2023 · 8f9e71e · 8f9e71e
1 parent 4cce3b6
commit 8f9e71e
Show file tree

Hide file tree

Showing 24 changed files with 614 additions and 122 deletions.
diff --git a/vuu-ui/packages/vuu-data/src/array-data-source.ts b/vuu-ui/packages/vuu-data/src/array-data-source.ts
@@ -15,6 +15,7 @@ import {
   isSelected,
   KeySet,
   metadataKeys,
+  rangeNewItems,
   uuid,
 } from "@finos/vuu-utils";
 import {
@@ -80,6 +81,7 @@ export class ArrayDataSource
   private suspended = false;
   private clientCallback: SubscribeCallback | undefined;
   private tableMeta: VuuTableMeta;
+  private lastRangeServed: VuuRange = { from: 0, to: 0 };
 
   #aggregations: VuuAggregation[] = [];
   #columns: string[] = [];
@@ -99,7 +101,6 @@ export class ArrayDataSource
   constructor({
     aggregations,
     columnDescriptors,
-    columns,
     data,
     filter,
     groupBy,
@@ -110,20 +111,20 @@ export class ArrayDataSource
     super();
 
     if (!data || !columnDescriptors) {
-      throw Error("ArrayDataSource constructor called without data");
+      throw Error(
+        "ArrayDataSource constructor called without data or without columnDescriptors"
+      );
     }
 
     this.columnDescriptors = columnDescriptors;
+    this.#columns = columnDescriptors.map((column) => column.name);
     this.tableMeta = buildTableMeta(columnDescriptors);
 
     this.#data = data.map<DataSourceRow>(toDataSourceRow);
     this.viewport = viewport || uuid();
     if (aggregations) {
       this.#aggregations = aggregations;
     }
-    if (columns) {
-      this.#columns = columns;
-    }
     if (filter) {
       this.#filter = filter;
     }
@@ -150,8 +151,6 @@ export class ArrayDataSource
   ) {
     this.clientCallback = callback;
 
-    console.log(`subscribe range ${range?.from} ${range?.to}`);
-
     if (aggregations) {
       this.#aggregations = aggregations;
     }
@@ -275,14 +274,16 @@ export class ArrayDataSource
     this.#range = range;
     this.keys.reset(range);
     requestAnimationFrame(() => {
+      const rangeDelta = rangeNewItems(this.lastRangeServed, this.#range);
       this.clientCallback?.({
         clientViewportId: this.viewport,
         rows: this.#data
-          .slice(range.from, range.to)
+          .slice(rangeDelta.from, rangeDelta.to)
           .map((row) => toClientRow(row, this.keys)),
         size: this.#data.length,
         type: "viewport-update",
       });
+      this.lastRangeServed = this.#range;
     });
   }
 

diff --git a/vuu-ui/packages/vuu-layout/src/chest-of-drawers/index.ts b/vuu-ui/packages/vuu-layout/src/chest-of-drawers/index.ts
diff --git a/...vuu-layout/src/chest-of-drawers/Chest.css → ...vuu-layout/src/dock-layout/DockLayout.css b/...vuu-layout/src/chest-of-drawers/Chest.css → ...vuu-layout/src/dock-layout/DockLayout.css
@@ -1,4 +1,4 @@
-.hwChest {
+.vuuDockLayout {
   --chest-bg: var(--hw-chest-bg, inherit);
   --drawer-bg: var(--hw-drawer-bg, inherit);
   --drawer-size: var(--hw-drawer-size, 200px);
@@ -8,15 +8,15 @@
   display: flex;
 }
 
-.hwChest-horizontal {
+.vuuDockLayout-horizontal {
   flex-direction: row;
 }
 
-.hwChest-vertical {
+.vuuDockLayout-vertical {
   flex-direction: column;
 }
 
-.hwChest-content {
+.vuuDockLayout-content {
   background-color: var(--chest-bg);
   flex-grow: 1;
   flex-shrink: 1;
@@ -27,10 +27,10 @@
   justify-content: center;
 }
 
-.hwChest-horizontal .hwChest-content {
+.vuuDockLayout-horizontal .vuuDockLayout-content {
   flex-basis: 100%;
 }
 
-.hwChest-vertical .hwChest-content {
+.vuuDockLayout-vertical .vuuDockLayout-content {
   flex-basis: 100%;
 }
diff --git a/...vuu-layout/src/chest-of-drawers/Chest.tsx → ...vuu-layout/src/dock-layout/DockLayout.tsx b/...vuu-layout/src/chest-of-drawers/Chest.tsx → ...vuu-layout/src/dock-layout/DockLayout.tsx
@@ -1,22 +1,22 @@
-import React, { HTMLAttributes, ReactElement } from "react";
-import cx from "classnames";
-import Drawer from "./Drawer";
 import { partition } from "@finos/vuu-utils";
+import cx from "classnames";
+import { HTMLAttributes, ReactElement } from "react";
 import { registerComponent } from "../registry/ComponentRegistry";
+import Drawer from "./Drawer";
 
-import "./Chest.css";
+import "./DockLayout.css";
 
 const isDrawer = (component: ReactElement) => component.type === Drawer;
 const isVertical = ({ props: { position = "left" } }: ReactElement) =>
   position.match(/top|bottom/);
 
-export interface ChestProps extends HTMLAttributes<HTMLDivElement> {
+export interface DockLayoutProps extends HTMLAttributes<HTMLDivElement> {
   children: ReactElement[];
 }
 
-const Chest = (props: ChestProps) => {
+const DockLayout = (props: DockLayoutProps) => {
   const { children, className: classNameProp, id, style } = props;
-  const classBase = "hwChest";
+  const classBase = "vuuDockLayout";
   const [drawers, content] = partition(children, isDrawer);
   const [verticalDrawers, horizontalDrawers] = partition(drawers, isVertical);
   const orientation =
@@ -35,8 +35,8 @@ const Chest = (props: ChestProps) => {
     </div>
   );
 };
-Chest.displayName = "Chest";
+DockLayout.displayName = "DockLayout";
 
-export default Chest;
+export default DockLayout;
 
-registerComponent("Chest", Chest, "container");
+registerComponent("DockLayout", DockLayout, "container");
diff --git a/...uu-layout/src/chest-of-drawers/Drawer.css → ...ges/vuu-layout/src/dock-layout/Drawer.css b/...uu-layout/src/chest-of-drawers/Drawer.css → ...ges/vuu-layout/src/dock-layout/Drawer.css
diff --git a/...uu-layout/src/chest-of-drawers/Drawer.tsx → ...ges/vuu-layout/src/dock-layout/Drawer.tsx b/...uu-layout/src/chest-of-drawers/Drawer.tsx → ...ges/vuu-layout/src/dock-layout/Drawer.tsx
@@ -75,7 +75,6 @@ const Drawer = ({
   });
 
   const toggleDrawer = useCallback(() => {
-    console.log("toggleDrawer");
     setOpen(!open);
   }, [open, setOpen]);
 

diff --git a/vuu-ui/packages/vuu-layout/src/dock-layout/index.ts b/vuu-ui/packages/vuu-layout/src/dock-layout/index.ts
@@ -0,0 +1,2 @@
+export { default as DockLayout } from "./DockLayout";
+export { default as Drawer } from "./Drawer";
diff --git a/vuu-ui/packages/vuu-layout/src/index.ts b/vuu-ui/packages/vuu-layout/src/index.ts
@@ -1,4 +1,4 @@
-export * from "./chest-of-drawers";
+export * from "./dock-layout";
 export * from "./common-types";
 export { default as Component } from "./Component";
 export * from "./drag-drop";

diff --git a/vuu-ui/packages/vuu-layout/src/layout-view/viewTypes.ts b/vuu-ui/packages/vuu-layout/src/layout-view/viewTypes.ts
@@ -1,11 +1,14 @@
-import { HTMLAttributes } from "react";
+import { FunctionComponent, HTMLAttributes } from "react";
 import { HeaderProps } from "../layout-header";
 import {
-  AddToolbarContributionViewAction, MaximizeAction,
+  AddToolbarContributionViewAction,
+  MaximizeAction,
   MinimizeAction,
   MousedownViewAction,
-  RemoveAction, RemoveToolbarContributionViewAction, RestoreAction,
-  TearoutAction
+  RemoveAction,
+  RemoveToolbarContributionViewAction,
+  RestoreAction,
+  TearoutAction,
 } from "../layout-reducer";
 
 export type ViewAction =
@@ -18,18 +21,20 @@ export type ViewAction =
   | AddToolbarContributionViewAction
   | RemoveToolbarContributionViewAction;
 
+export type ResizeStrategy = "defer" | "responsive";
+
 export interface ViewProps extends HTMLAttributes<HTMLDivElement> {
+  Header?: FunctionComponent<HeaderProps>;
   closeable?: boolean;
   collapsed?: boolean;
   "data-resizeable"?: boolean;
   dropTargets?: string[];
   expanded?: boolean;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  flexFill?: any;
+  flexFill?: boolean;
   header?: boolean | Partial<HeaderProps>;
   orientation?: "vertical" | "horizontal";
   path?: string;
-  resize?: "defer" | "responsive";
+  resize?: ResizeStrategy;
   resizeable?: boolean;
   tearOut?: boolean;
 }
diff --git a/vuu-ui/packages/vuu-shell/src/shell.tsx b/vuu-ui/packages/vuu-shell/src/shell.tsx
@@ -13,7 +13,7 @@ import {
 import { ShellContextProvider } from "./ShellContextProvider";
 import useLayoutConfig from "./use-layout-config";
 import {
-  Chest,
+  DockLayout,
   DraggableLayout,
   Drawer,
   Flexbox,
@@ -168,15 +168,15 @@ export const Shell = ({
               onNavigate={handleNavigate}
               onSwitchTheme={handleSwitchTheme}
             />
-            <Chest style={{ flex: 1 }}>
+            <DockLayout style={{ flex: 1 }}>
               {getDrawers().concat(
                 <DraggableLayout
                   dropTarget
                   key="main-content"
                   style={{ width: "100%", height: "100%" }}
                 />
               )}
-            </Chest>
+            </DockLayout>
           </Flexbox>
         </DraggableLayout>
       </LayoutProvider>

diff --git a/vuu-ui/packages/vuu-shell/src/theme-provider/ThemeProvider.tsx b/vuu-ui/packages/vuu-shell/src/theme-provider/ThemeProvider.tsx
@@ -9,9 +9,9 @@ import React, {
 } from "react";
 import cx from "classnames";
 
-export const DEFAULT_DENSITY:Density = "medium";
+export const DEFAULT_DENSITY: Density = "medium";
 export const DEFAULT_THEME = "salt-theme";
-export const DEFAULT_THEME_MODE:ThemeMode = "light";
+export const DEFAULT_THEME_MODE: ThemeMode = "light";
 
 export type Density = "high" | "medium" | "low" | "touch";
 export type ThemeMode = "light" | "dark";
@@ -33,19 +33,19 @@ const createThemedChildren = (
   children: ReactNode,
   theme: string,
   themeMode: ThemeMode,
-  density: Density,
+  density: Density
 ) => {
   if (isValidElement<HTMLAttributes<HTMLElement>>(children)) {
     return cloneElement(children, {
       className: cx(
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
         children.props?.className,
         theme,
-        `salt-density-${density}`,
+        `salt-density-${density}`
       ),
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-expect-error
-      "data-mode": themeMode
+      "data-mode": themeMode,
     });
   } else {
     console.warn(
@@ -68,24 +68,29 @@ export const ThemeProvider = ({
   children,
   theme: themeProp,
   themeMode: themeModeProp,
-  density: densityProp
+  density: densityProp,
 }: ThemeProviderProps) => {
   const {
     density: inheritedDensity,
     themeMode: inheritedThemeMode,
-    theme: inheritedTheme
+    theme: inheritedTheme,
   } = useContext(ThemeContext);
 
   const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;
   const themeMode = themeModeProp ?? inheritedThemeMode ?? DEFAULT_THEME_MODE;
   const theme = themeProp ?? inheritedTheme ?? DEFAULT_THEME;
-  const themedChildren = createThemedChildren(children, theme, themeMode, density);
+  const themedChildren = createThemedChildren(
+    children,
+    theme,
+    themeMode,
+    density
+  );
 
   return (
-    <ThemeContext.Provider
-      value={{ themeMode, density, theme }}
-    >
+    <ThemeContext.Provider value={{ themeMode, density, theme }}>
       {themedChildren}
     </ThemeContext.Provider>
   );
 };
+
+ThemeProvider.displayName = "ThemeProvider";
diff --git a/vuu-ui/packages/vuu-utils/src/range-utils.ts b/vuu-ui/packages/vuu-utils/src/range-utils.ts
@@ -56,6 +56,29 @@ export function resetRange({ from, to, bufferSize = 0 }: VuuRange): VuuRange {
 export const withinRange = (value: number, { from, to }: VuuRange) =>
   value >= from && value < to;
 
+// export const rangeOverlap = (
+//   { from: from1, to: to1 }: VuuRange,
+//   { from: from2, to: to2 }: VuuRange
+// ): VuuRange => {
+//   return from2 >= to1 || to2 < from1
+//     ? { from: 0, to: 0 }
+//     : { from: Math.max(from2, from1), to: Math.min(to2, to1) };
+// };
+
+export const rangeNewItems = (
+  { from: from1, to: to1 }: VuuRange,
+  newRange: VuuRange
+): VuuRange => {
+  const { from: from2, to: to2 } = newRange;
+  const noOverlap = from2 >= to1 || to2 <= from1;
+  const newFullySubsumesOld = from2 < from1 && to2 > to1;
+  return noOverlap || newFullySubsumesOld
+    ? newRange
+    : to2 > to1
+    ? { from: to1, to: to2 }
+    : { from: from2, to: from1 };
+};
+
 export class WindowRange {
   public from: number;
   public to: number;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { default as DockLayout } from "./DockLayout";
		export { default as Drawer } from "./Drawer";