feat: infinite tree

package.json

@@ -35,14 +35,16 @@
   "dependencies": {
     "@ant-design/plots": "^1.0.9",
     "@gisce/fiber-diagram": "2.1.1",
-    "@gisce/ooui": "2.10.2",
+    "@gisce/ooui": "2.11.0",
     "@gisce/react-formiga-components": "1.8.0",
-    "@gisce/react-formiga-table": "1.6.0",
+    "@gisce/react-formiga-table": "1.7.0",
     "@monaco-editor/react": "^4.4.5",
     "@tabler/icons-react": "^2.11.0",
+    "@types/deep-equal": "^1.0.4",
     "antd": "5.13.1",
     "buffer": "^6.0.3",
     "file-type-buffer-browser": "git+ssh://[email protected]/mguellsegarra/file-type-buffer-browser.git",
+    "framer-motion": "^11.5.5",
     "interweave": "^13.0.0",
     "md5": "^2.3.0",
     "nanoid": "^5.0.4",

src/context/ActionViewContext.tsx

@@ -1,27 +1,45 @@
 import { DEFAULT_SEARCH_LIMIT } from "@/models/constants";
 import { View } from "@/types";
-import { createContext, useEffect, useState } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
 
-export type ActionViewContextType = {
+type ActionViewProviderProps = {
   title: string;
-  availableViews: View[];
   currentView: View;
   setCurrentView: (view: View) => void;
+  availableViews: View[];
+  formRef: any;
+  searchTreeRef: any;
+  onNewClicked: () => void;
+  currentId?: number;
+  setCurrentId: (id?: number) => void;
+  setCurrentItemIndex: (value?: number) => void;
+  currentItemIndex?: number;
+  results?: any[];
+  setResults: (value: any[]) => void;
+  currentModel: string;
+  sorter: any;
+  setSorter: (sorter: any) => void;
+  totalItems: number;
+  setTotalItems: (totalItems: number) => void;
+  selectedRowItems?: any[];
+  setSelectedRowItems: (value: any[]) => void;
+  setSearchTreeNameSearch: (searchString?: string) => void;
+  searchTreeNameSearch?: string;
+  goToResourceId: (ids: number[], openInSameTab?: boolean) => Promise<void>;
+  limit?: number;
+  isActive: boolean;
+  children: React.ReactNode;
+};
+
+export type ActionViewContextType = Omit<
+  ActionViewProviderProps,
+  "children"
+> & {
   formIsSaving?: boolean;
   setFormIsSaving?: (value: boolean) => void;
   formHasChanges?: boolean;
   setFormHasChanges?: (value: boolean) => void;
   onFormSave?: () => Promise<{ succeed: boolean; id: number }>;
-  formRef?: any;
-  searchTreeRef?: any;
-  onNewClicked: () => void;
-  currentId?: number;
-  setCurrentId?: (id?: number) => void;
-  currentItemIndex?: number;
-  setCurrentItemIndex?: (value?: number) => void;
-  results?: any[];
-  setResults?: (value: any[]) => void;
-  currentModel?: string;
   removingItem?: boolean;
   setRemovingItem?: (value: boolean) => void;
   formIsLoading?: boolean;
@@ -32,39 +50,26 @@ export type ActionViewContextType = {
   setGraphIsLoading?: (value: boolean) => void;
   attachments?: any;
   setAttachments?: (value: any) => void;
-  selectedRowItems?: any[];
-  setSelectedRowItems?: (value: any[]) => void;
   duplicatingItem?: boolean;
   setDuplicatingItem?: (value: boolean) => void;
   searchParams?: any[];
   setSearchParams?: (value: any[]) => void;
   searchVisible?: boolean;
   setSearchVisible?: (value: boolean) => void;
-  sorter: any;
-  setSorter: (sorter: any) => void;
-  totalItems: number;
-  setTotalItems: (totalItems: number) => void;
-  searchTreeNameSearch?: string;
-  setSearchTreeNameSearch?: (searchString?: string) => void;
   previousView?: View;
   setPreviousView?: (view: View) => void;
-  goToResourceId?: (ids: number[], openInSameTab?: boolean) => Promise<void>;
   searchValues?: any;
   setSearchValues?: (value: any) => void;
-  limit?: number;
   setLimit?: (value: number) => void;
   setTitle?: (value: string) => void;
-  isActive: boolean;
+  treeFirstVisibleRow: number;
+  setTreeFirstVisibleRow: (totalItems: number) => void;
 };
 
 export const ActionViewContext = createContext<ActionViewContextType | null>(
   null,
 );
 
-type ActionViewProviderProps = ActionViewContextType & {
-  children: React.ReactNode;
-};
-
 const ActionViewProvider = (props: ActionViewProviderProps): any => {
   const {
     children,
@@ -107,6 +112,8 @@ const ActionViewProvider = (props: ActionViewProviderProps): any => {
   const [graphIsLoading, setGraphIsLoading] = useState<boolean>(true);
   const [previousView, setPreviousView] = useState<View>();
   const [searchValues, setSearchValues] = useState<any>({});
+  const [treeFirstVisibleRow, setTreeFirstVisibleRow] = useState<number>(0);
+
   const [limit, setLimit] = useState<number>(
     limitProps !== undefined ? limitProps : DEFAULT_SEARCH_LIMIT,
   );
@@ -207,11 +214,30 @@ const ActionViewProvider = (props: ActionViewProviderProps): any => {
         setLimit,
         setTitle,
         isActive,
+        setTreeFirstVisibleRow,
+        treeFirstVisibleRow,
       }}
     >
       {children}
     </ActionViewContext.Provider>
   );
 };
 
+export const useActionViewContext = (
+  isRoot: boolean,
+): ActionViewContextType => {
+  const actionViewContext = useContext(
+    ActionViewContext,
+  ) as ActionViewContextType;
+  if (!isRoot) {
+    return {} as ActionViewContextType;
+  }
+  if (!actionViewContext) {
+    throw new Error(
+      "useActionViewContext must be used within a ActionViewProvider",
+    );
+  }
+  return actionViewContext;
+};
+
 export default ActionViewProvider;

src/helpers/o2m-columnStorageHelper.ts

@@ -0,0 +1,13 @@
+export type One2manyTreeDataForHash = {
+  parentViewId?: number;
+  treeViewId?: number;
+  one2ManyFieldName: string;
+};
+
+export type O2mDataForHashWithModel = One2manyTreeDataForHash & {
+  model: string;
+};
+
+export const getKey = (dataForHash: O2mDataForHashWithModel) => {
+  return `columnState-${dataForHash.parentViewId}-${dataForHash.treeViewId}-${dataForHash.one2ManyFieldName}-${dataForHash.model}`;
+};

src/helpers/tree-columnStorageHelper.ts

@@ -0,0 +1,11 @@
+export type TreeDataForHash = {
+  treeViewId?: number;
+  model: string;
+};
+
+export const getKey = (dataForHash: TreeDataForHash) => {
+  if (!dataForHash.treeViewId || !dataForHash.model) {
+    return undefined;
+  }
+  return `columnState-${dataForHash.treeViewId}-${dataForHash.model}`;
+};

src/helpers/treeHelper.tsx

@@ -6,6 +6,7 @@ import {
   Reference,
 } from "@gisce/ooui";
 import { TreeView, Column } from "@/types";
+import { SortDirection } from "@gisce/react-formiga-table";
 
 const getTree = (treeView: TreeView): TreeOoui => {
   const xml = treeView.arch;
@@ -218,6 +219,32 @@ function hasActualValues(obj: Record<string, any>): boolean {
   return false;
 }
 
+const getOrderFromSortFields = (sortFields?: Record<string, SortDirection>) => {
+  if (!sortFields) {
+    return undefined;
+  }
+  return Object.keys(sortFields)
+    .map((field) => {
+      const direction = sortFields[field];
+      return `${field} ${direction}`;
+    })
+    .join(", ");
+};
+
+function extractTreeXmlAttribute(
+  archString: string,
+  attributeName: string,
+): string | null {
+  const regex = new RegExp(`<tree[^>]*\\s+${attributeName}="([^"]+)"`, "i");
+  const match = archString.match(regex);
+
+  if (match && match[1]) {
+    return match[1];
+  }
+
+  return null;
+}
+
 export {
   getTableColumns,
   getTableItems,
@@ -228,4 +255,6 @@ export {
   getStatusMap,
   sortResults,
   hasActualValues,
+  getOrderFromSortFields,
+  extractTreeXmlAttribute,
 };

src/hooks/useAvailableHeight.ts

@@ -0,0 +1,34 @@
+import React, { useState, useEffect, RefObject, useMemo } from "react";
+
+export const useAvailableHeight = <T extends HTMLElement>({
+  elementRef,
+  offset = 0,
+  dependencies = [],
+}: {
+  elementRef: RefObject<T>;
+  offset?: number;
+  dependencies?: React.DependencyList;
+}): number => {
+  const [availableHeight, setAvailableHeight] = useState<number>(0);
+
+  useEffect(() => {
+    const updateHeight = () => {
+      if (elementRef.current) {
+        const windowHeight = window.innerHeight;
+        const boundingRect = elementRef.current.getBoundingClientRect();
+        const availableHeight = windowHeight - boundingRect.top;
+        setAvailableHeight(availableHeight);
+      }
+    };
+
+    updateHeight();
+    window.addEventListener("resize", updateHeight);
+
+    return () => window.removeEventListener("resize", updateHeight);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [elementRef, ...dependencies]);
+
+  const memoizedHeight = useMemo(() => availableHeight, [availableHeight]);
+
+  return memoizedHeight - offset;
+};

src/hooks/useEffectDebugger.ts

@@ -1,12 +1,5 @@
-import { useRef, useEffect } from "react";
-
-const usePrevious = (value: any, initialValue: any) => {
-  const ref = useRef(initialValue);
-  useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-};
+import { useEffect } from "react";
+import { usePrevious } from "./usePrevious";
 
 const useEffectDebugger = (
   effectHook: any,
@@ -37,6 +30,7 @@ const useEffectDebugger = (
     console.log("[use-effect-debugger] ", changedDeps);
   }
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(effectHook, dependencies);
 };