@vuu-ui/vuu-data-react 0.8.5 → 0.8.6-debug

package/esm/index.js

@@ -1,2 +1,481 @@
-import{getFullRange as g,metadataKeys as P,WindowRange as A}from"@vuu-ui/vuu-utils";import{useCallback as V,useEffect as h,useMemo as w,useRef as f,useState as E}from"react";var{SELECTED:C}=P;function me({dataSource:e,renderBufferSize:t=10}){let[,n]=E(null),r=f(!0),o=f(!1),c=f(null),s=f([]),a=f({from:0,to:10}),i=w(()=>new R(g(a.current,t)),[t]),m=V(u=>{for(let l of u)i.add(l);s.current=i.data.slice(),o.current=!0},[i]),M=V(u=>{u.type==="viewport-update"&&(u.size!==void 0&&i.setRowCount(u.size),u.rows?(m(u.rows),n({})):u.size!==void 0&&(s.current=i.data.slice(),o.current=!0))},[i,m]);h(()=>()=>{c.current&&(cancelAnimationFrame(c.current),c.current=null),r.current=!1},[]);let d=V(u=>{a.current=u;let l=g(a.current,t);e.range=l,i.setRange(l.from,l.to)},[e,i,t]);return w(()=>{let{from:u,to:l}=a.current,p=g({from:u,to:l},t);e.range=p,i.setRange(p.from,p.to)},[e,i,t]),h(()=>{let{from:u,to:l}=g(a.current,t);e.subscribe({range:{from:u,to:l}},M)},[e,M,t]),h(()=>()=>{e.unsubscribe()},[e]),[s.current,i.rowCount,g(a.current,t),d]}var R=class{constructor({from:t,to:n}){this.rowCount=0;this.setRowCount=t=>{t<this.data.length&&(this.data.length=t),this.rowCount=t};this.range=new A(t,n),this.data=new Array(n-t)}add(t){let[n]=t;if(this.isWithinRange(n)){let r=n-this.range.from;this.data[r]=t,this.data[r-1]&&this.data[r-1][C]===1&&t[C]===0&&(t[C]=2),n===this.rowCount-1&&(this.data.length=r+1)}}getAtIndex(t){return this.range.isWithin(t)&&this.data[t-this.range.from]!=null?this.data[t-this.range.from]:void 0}isWithinRange(t){return this.range.isWithin(t)}setRange(t,n){if(t!==this.range.from||n!==this.range.to){let[r,o]=this.range.overlap(t,n),c=new Array(n-t);for(let s=r;s<o;s++){let a=this.getAtIndex(s);if(a){let i=s-t;c[i]=a}}this.data=c,this.range.from=t,this.range.to=n}}};import{useCallback as O,useEffect as _,useState as F}from"react";import{ConnectionManager as v}from"@vuu-ui/vuu-data";var fe=()=>{let[e,t]=F("disconnected"),n=O(({status:r})=>{t(r)},[]);return _(()=>(v.on("connection-status",n),()=>{v.removeListener("connection-status",n)}),[n]),e};import{useCallback as W,useEffect as U,useState as N}from"react";import{ConnectionManager as S}from"@vuu-ui/vuu-data";var Re=()=>{let[e,t]=N(0),n=W(({messages:r})=>{t(r.messagesLength)},[]);return U(()=>(S.on("connection-metrics",n),()=>{S.removeListener("connection-metrics",n)}),[n]),e};import{useCallback as G}from"react";import{makeRpcCall as K}from"@vuu-ui/vuu-data";var b={type:"RPC_CALL",service:"TypeAheadRpcHandler"},be=(e,t,n="",r=[])=>n!==""&&!r.includes(n.toLowerCase())?[e,t,n]:[e,t],Te=()=>G(async t=>{let n=t.length===2?{method:"getUniqueFieldValues",params:t,...b}:{method:"getUniqueFieldValuesStartingWith",params:t,...b};return await K(n)},[]);import{getFilterPredicate as T}from"@vuu-ui/vuu-filter-parser";import{getRowRecord as H,isGroupMenuItemDescriptor as q,metadataKeys as j}from"@vuu-ui/vuu-utils";import{useCallback as I}from"react";var Le="addRowsFromInstruments",{KEY:k}=j,Y={},$=e=>e.type==="vuu-links",Pe=e=>e.type==="vuu-link-created",Ae=e=>e.type==="vuu-link-removed",Q=e=>e.type==="vuu-menu",Ee=e=>Q(e)||$(e),Oe=e=>e.type==="vuu-link-created"||e.type==="vuu-link-removed",J=e=>"rpcName"in e,X=e=>"menus"in e,Z=e=>e.name==="ROOT",x=e=>e.context==="cell",B=e=>e.context==="row",z=e=>e.context==="selected-rows",ee=(e,t,n=0)=>{switch(e){case"grid":return t==="selected-rows"?n>0:!0;case"header":return t==="grid";default:return!1}},te=(e,t,n,r,o)=>{if(e==="cell"||e==="row")return T(o,r)(t);if(e==="selected-rows"){if(n.length===0)return!1;{let c=T(o,r);return n.every(c)}}return!0},ne=e=>{let{rpcName:t}=e;return x(e)?{field:e.field,rowKey:e.rowKey,rpcName:t,value:e.value,type:"VIEW_PORT_MENU_CELL_RPC"}:B(e)?{rowKey:e.rowKey,row:e.row,rpcName:t,type:"VIEW_PORT_MENU_ROW_RPC"}:z(e)?{rpcName:t,type:"VIEW_PORT_MENUS_SELECT_RPC"}:{rpcName:t,type:"VIEW_PORT_MENU_TABLE_RPC"}},re=({filter:e})=>typeof e=="string"&&e.length>0,ue=(e,t)=>{switch(e.context){case"cell":return{...e,field:t.columnName,rowKey:t.row[k],value:t.row[t.columnMap[t.columnName]]};case"row":return{...e,row:H(t.row,t.columnMap),rowKey:t.row[k]};default:return e}},y=(e,t,n)=>{var r;return X(e)?e.menus.some(o=>y(o,t,n)):ee(t,e.context,(r=n.selectedRows)==null?void 0:r.length)?t==="grid"&&re(e)?te(e.context,n.row,n.selectedRows,e.filter,n.columnMap):x(e)&&e.field!=="*"?e.field===n.columnName:!0:!1},D=(e,t,n)=>{if(y(e,t,n)){if(J(e))return{label:e.name,action:"MENU_RPC_CALL",options:ue(e,n)};{let r=e.menus.map(o=>D(o,t,n)).filter(o=>o!==void 0);if(r.length>0)return{label:e.name,children:r}}}},_e=({clientSideMenuActionHandler:e,dataSource:t,menuActionConfig:n=Y,onRpcResponse:r})=>{let o=I((s,a)=>{let{visualLink:i,visualLinks:m,vuuMenu:M}=n,d=[];if(s==="grid"&&m&&!i&&m.forEach(u=>{let{link:l,label:p}=u,L=p||l.toTable;d.push({label:`Link to ${L}`,action:"link-table",options:u})}),M){let u=D(M,s,a);Z(M)&&q(u)?d.push(...u.children):u&&d.push(u)}return d},[n]),c=I((s,a)=>{if(e!=null&&e(s,a))return!0;if(s==="MENU_RPC_CALL"){let i=ne(a);return t.menuRpcCall(i).then(m=>{r&&m&&r&&r(m)}),!0}else{if(s==="link-table")return t.visualLink=a,!0;console.log(`useViewServer handleMenuAction,  can't handle action type ${s}`)}return!1},[e,t,r]);return{buildViewserverMenuOptions:o,handleMenuAction:c}};import{useCallback as oe,useEffect as se,useState as ae}from"react";import{getServerAPI as ie}from"@vuu-ui/vuu-data";var Ge=()=>{let[e,t]=ae(),n=oe(r=>{let o=new Map;return r.forEach(c=>{o.set(c.table.table,c)}),o},[]);return se(()=>{async function r(){let o=await ie(),{tables:c}=await o.getTableList(),s=n(await Promise.all(c.map(a=>o.getTableSchema(a))));t(s)}r()},[n]),e};export{R as MovingWindow,Le as addRowsFromInstruments,be as getTypeaheadParams,Q as isViewportMenusAction,Pe as isVisualLinkCreatedAction,Ae as isVisualLinkRemovedAction,$ as isVisualLinksAction,Ee as isVuuFeatureAction,Oe as isVuuFeatureInvocation,me as useDataSource,Re as useServerConnectionQuality,fe as useServerConnectionStatus,Te as useTypeaheadSuggestions,_e as useVuuMenuActions,Ge as useVuuTables};
+// src/hooks/useDataSource.ts
+import { getFullRange, metadataKeys, WindowRange } from "@vuu-ui/vuu-utils";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+var { SELECTED } = metadataKeys;
+function useDataSource({
+  dataSource,
+  renderBufferSize = 10
+}) {
+  const [, forceUpdate] = useState(null);
+  const isMounted = useRef(true);
+  const hasUpdated = useRef(false);
+  const rafHandle = useRef(null);
+  const data = useRef([]);
+  const rangeRef = useRef({ from: 0, to: 10 });
+  const dataWindow = useMemo(
+    () => new MovingWindow(getFullRange(rangeRef.current, renderBufferSize)),
+    [renderBufferSize]
+  );
+  const setData = useCallback(
+    (updates) => {
+      for (const row of updates) {
+        dataWindow.add(row);
+      }
+      data.current = dataWindow.data.slice();
+      hasUpdated.current = true;
+    },
+    [dataWindow]
+  );
+  const datasourceMessageHandler = useCallback(
+    (message) => {
+      if (message.type === "viewport-update") {
+        if (message.size !== void 0) {
+          dataWindow.setRowCount(message.size);
+        }
+        if (message.rows) {
+          setData(message.rows);
+          forceUpdate({});
+        } else if (message.size !== void 0) {
+          data.current = dataWindow.data.slice();
+          hasUpdated.current = true;
+        }
+      }
+    },
+    [dataWindow, setData]
+  );
+  useEffect(
+    () => () => {
+      if (rafHandle.current) {
+        cancelAnimationFrame(rafHandle.current);
+        rafHandle.current = null;
+      }
+      isMounted.current = false;
+    },
+    []
+  );
+  const setRange = useCallback(
+    (range) => {
+      rangeRef.current = range;
+      const fullRange = getFullRange(rangeRef.current, renderBufferSize);
+      dataSource.range = fullRange;
+      dataWindow.setRange(fullRange.from, fullRange.to);
+    },
+    [dataSource, dataWindow, renderBufferSize]
+  );
+  useMemo(() => {
+    const { from, to } = rangeRef.current;
+    const fullRange = getFullRange({ from, to }, renderBufferSize);
+    dataSource.range = fullRange;
+    dataWindow.setRange(fullRange.from, fullRange.to);
+  }, [dataSource, dataWindow, renderBufferSize]);
+  useEffect(() => {
+    const { from, to } = getFullRange(rangeRef.current, renderBufferSize);
+    dataSource.subscribe(
+      {
+        range: { from, to }
+      },
+      datasourceMessageHandler
+    );
+  }, [dataSource, datasourceMessageHandler, renderBufferSize]);
+  useEffect(
+    () => () => {
+      dataSource.unsubscribe();
+    },
+    [dataSource]
+  );
+  return [
+    data.current,
+    dataWindow.rowCount,
+    getFullRange(rangeRef.current, renderBufferSize),
+    setRange
+  ];
+}
+var MovingWindow = class {
+  constructor({ from, to }) {
+    this.rowCount = 0;
+    this.setRowCount = (rowCount) => {
+      if (rowCount < this.data.length) {
+        this.data.length = rowCount;
+      }
+      this.rowCount = rowCount;
+    };
+    this.range = new WindowRange(from, to);
+    this.data = new Array(to - from);
+  }
+  add(data) {
+    const [index] = data;
+    if (this.isWithinRange(index)) {
+      const internalIndex = index - this.range.from;
+      this.data[internalIndex] = data;
+      if (this.data[internalIndex - 1]) {
+        if (this.data[internalIndex - 1][SELECTED] === 1 && data[SELECTED] === 0) {
+          data[SELECTED] = 2;
+        }
+      }
+      if (index === this.rowCount - 1) {
+        this.data.length = internalIndex + 1;
+      }
+    }
+  }
+  getAtIndex(index) {
+    return this.range.isWithin(index) && this.data[index - this.range.from] != null ? this.data[index - this.range.from] : void 0;
+  }
+  isWithinRange(index) {
+    return this.range.isWithin(index);
+  }
+  setRange(from, to) {
+    if (from !== this.range.from || to !== this.range.to) {
+      const [overlapFrom, overlapTo] = this.range.overlap(from, to);
+      const newData = new Array(to - from);
+      for (let i = overlapFrom; i < overlapTo; i++) {
+        const data = this.getAtIndex(i);
+        if (data) {
+          const index = i - from;
+          newData[index] = data;
+        }
+      }
+      this.data = newData;
+      this.range.from = from;
+      this.range.to = to;
+    }
+  }
+};
+
+// src/hooks/useServerConnectionStatus.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
+import { ConnectionManager } from "@vuu-ui/vuu-data";
+var useServerConnectionStatus = () => {
+  const [connectionStatus, setConnectionStatus] = useState2("disconnected");
+  const handleStatusChange = useCallback2(
+    ({ status }) => {
+      setConnectionStatus(status);
+    },
+    []
+  );
+  useEffect2(() => {
+    ConnectionManager.on("connection-status", handleStatusChange);
+    return () => {
+      ConnectionManager.removeListener("connection-status", handleStatusChange);
+    };
+  }, [handleStatusChange]);
+  return connectionStatus;
+};
+
+// src/hooks/useServerConnectionQuality.ts
+import { useCallback as useCallback3, useEffect as useEffect3, useState as useState3 } from "react";
+import { ConnectionManager as ConnectionManager2 } from "@vuu-ui/vuu-data";
+var useServerConnectionQuality = () => {
+  const [messagesPerSecond, setMessagesPerSecond] = useState3(0);
+  const handleConnectivityMessage = useCallback3(({ messages }) => {
+    setMessagesPerSecond(messages.messagesLength);
+  }, []);
+  useEffect3(() => {
+    ConnectionManager2.on("connection-metrics", handleConnectivityMessage);
+    return () => {
+      ConnectionManager2.removeListener(
+        "connection-metrics",
+        handleConnectivityMessage
+      );
+    };
+  }, [handleConnectivityMessage]);
+  return messagesPerSecond;
+};
+
+// src/hooks/useTypeaheadSuggestions.ts
+import { useCallback as useCallback4 } from "react";
+import { makeRpcCall } from "@vuu-ui/vuu-data";
+var TYPEAHEAD_MESSAGE_CONSTANTS = {
+  type: "RPC_CALL",
+  service: "TypeAheadRpcHandler"
+};
+var getTypeaheadParams = (table, column, text = "", selectedValues = []) => {
+  if (text !== "" && !selectedValues.includes(text.toLowerCase())) {
+    return [table, column, text];
+  }
+  return [table, column];
+};
+var useTypeaheadSuggestions = () => {
+  const getTypeaheadSuggestions = useCallback4(
+    async (params) => {
+      const rpcMessage = params.length === 2 ? {
+        method: "getUniqueFieldValues",
+        params,
+        ...TYPEAHEAD_MESSAGE_CONSTANTS
+      } : {
+        method: "getUniqueFieldValuesStartingWith",
+        params,
+        ...TYPEAHEAD_MESSAGE_CONSTANTS
+      };
+      const suggestions = await makeRpcCall(rpcMessage);
+      return suggestions;
+    },
+    []
+  );
+  return getTypeaheadSuggestions;
+};
+
+// src/hooks/useVuuMenuActions.ts
+import { getFilterPredicate } from "@vuu-ui/vuu-filter-parser";
+import {
+  getRowRecord,
+  isGroupMenuItemDescriptor,
+  metadataKeys as metadataKeys2
+} from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback5 } from "react";
+var addRowsFromInstruments = "addRowsFromInstruments";
+var { KEY } = metadataKeys2;
+var NO_CONFIG = {};
+var isVisualLinksAction = (action) => action.type === "vuu-links";
+var isVisualLinkCreatedAction = (action) => action.type === "vuu-link-created";
+var isVisualLinkRemovedAction = (action) => action.type === "vuu-link-removed";
+var isViewportMenusAction = (action) => action.type === "vuu-menu";
+var isVuuFeatureAction = (action) => isViewportMenusAction(action) || isVisualLinksAction(action);
+var isVuuFeatureInvocation = (action) => action.type === "vuu-link-created" || action.type === "vuu-link-removed";
+var isMenuItem = (menu) => "rpcName" in menu;
+var isGroupMenuItem = (menu) => "menus" in menu;
+var isRoot = (menu) => menu.name === "ROOT";
+var isCellMenu = (options) => options.context === "cell";
+var isRowMenu = (options) => options.context === "row";
+var isSelectionMenu = (options) => options.context === "selected-rows";
+var vuuContextCompatibleWithTableLocation = (uiLocation, vuuContext, selectedRowCount = 0) => {
+  switch (uiLocation) {
+    case "grid":
+      if (vuuContext === "selected-rows") {
+        return selectedRowCount > 0;
+      } else {
+        return true;
+      }
+    case "header":
+      return vuuContext === "grid";
+    default:
+      return false;
+  }
+};
+var gridRowMeetsFilterCriteria = (context, row, selectedRows, filter, columnMap) => {
+  if (context === "cell" || context === "row") {
+    const filterPredicate = getFilterPredicate(columnMap, filter);
+    return filterPredicate(row);
+  } else if (context === "selected-rows") {
+    if (selectedRows.length === 0) {
+      return false;
+    } else {
+      const filterPredicate = getFilterPredicate(columnMap, filter);
+      return selectedRows.every(filterPredicate);
+    }
+  }
+  return true;
+};
+var getMenuRpcRequest = (options) => {
+  const { rpcName } = options;
+  if (isCellMenu(options)) {
+    return {
+      field: options.field,
+      rowKey: options.rowKey,
+      rpcName,
+      value: options.value,
+      type: "VIEW_PORT_MENU_CELL_RPC"
+    };
+  } else if (isRowMenu(options)) {
+    return {
+      rowKey: options.rowKey,
+      row: options.row,
+      rpcName,
+      type: "VIEW_PORT_MENU_ROW_RPC"
+    };
+  } else if (isSelectionMenu(options)) {
+    return {
+      rpcName,
+      type: "VIEW_PORT_MENUS_SELECT_RPC"
+    };
+  } else {
+    return {
+      rpcName,
+      type: "VIEW_PORT_MENU_TABLE_RPC"
+    };
+  }
+};
+var isTableLocation = (location) => ["grid", "header", "filter"].includes(location);
+var hasFilter = ({ filter }) => typeof filter === "string" && filter.length > 0;
+var getMenuItemOptions = (menu, options) => {
+  switch (menu.context) {
+    case "cell":
+      return {
+        ...menu,
+        field: options.columnName,
+        rowKey: options.row[KEY],
+        value: options.row[options.columnMap[options.columnName]]
+      };
+    case "row":
+      return {
+        ...menu,
+        row: getRowRecord(options.row, options.columnMap),
+        rowKey: options.row[KEY]
+      };
+    default:
+      return menu;
+  }
+};
+var menuShouldBeRenderedInThisContext = (menuItem, tableLocation, options) => {
+  var _a;
+  if (isGroupMenuItem(menuItem)) {
+    return menuItem.menus.some(
+      (childMenu) => menuShouldBeRenderedInThisContext(childMenu, tableLocation, options)
+    );
+  }
+  if (!vuuContextCompatibleWithTableLocation(
+    tableLocation,
+    menuItem.context,
+    (_a = options.selectedRows) == null ? void 0 : _a.length
+  )) {
+    return false;
+  }
+  if (tableLocation === "grid" && hasFilter(menuItem)) {
+    return gridRowMeetsFilterCriteria(
+      menuItem.context,
+      options.row,
+      options.selectedRows,
+      menuItem.filter,
+      options.columnMap
+    );
+  }
+  if (isCellMenu(menuItem) && menuItem.field !== "*") {
+    return menuItem.field === options.columnName;
+  }
+  return true;
+};
+var buildMenuDescriptor = (menu, tableLocation, options) => {
+  if (menuShouldBeRenderedInThisContext(menu, tableLocation, options)) {
+    if (isMenuItem(menu)) {
+      return {
+        label: menu.name,
+        action: "MENU_RPC_CALL",
+        options: getMenuItemOptions(menu, options)
+      };
+    } else {
+      const children = menu.menus.map(
+        (childMenu) => buildMenuDescriptor(childMenu, tableLocation, options)
+      ).filter(
+        (childMenu) => childMenu !== void 0
+      );
+      if (children.length > 0) {
+        return {
+          label: menu.name,
+          children
+        };
+      }
+    }
+  }
+};
+var useVuuMenuActions = ({
+  clientSideMenuActionHandler,
+  dataSource,
+  menuActionConfig = NO_CONFIG,
+  onRpcResponse
+}) => {
+  const buildViewserverMenuOptions = useCallback5(
+    (location, options) => {
+      const { visualLink, visualLinks, vuuMenu } = menuActionConfig;
+      const descriptors = [];
+      if (location === "grid" && visualLinks && !visualLink) {
+        visualLinks.forEach((linkDescriptor) => {
+          const { link, label: linkLabel } = linkDescriptor;
+          const label = linkLabel ? linkLabel : link.toTable;
+          descriptors.push({
+            label: `Link to ${label}`,
+            action: "link-table",
+            options: linkDescriptor
+          });
+        });
+      }
+      if (vuuMenu && isTableLocation(location)) {
+        const menuDescriptor = buildMenuDescriptor(
+          vuuMenu,
+          location,
+          options
+        );
+        if (isRoot(vuuMenu) && isGroupMenuItemDescriptor(menuDescriptor)) {
+          descriptors.push(...menuDescriptor.children);
+        } else if (menuDescriptor) {
+          descriptors.push(menuDescriptor);
+        }
+      }
+      return descriptors;
+    },
+    [menuActionConfig]
+  );
+  const handleMenuAction = useCallback5(
+    ({ menuId, options }) => {
+      if (clientSideMenuActionHandler == null ? void 0 : clientSideMenuActionHandler(menuId, options)) {
+        return true;
+      } else if (menuId === "MENU_RPC_CALL") {
+        const rpcRequest = getMenuRpcRequest(options);
+        dataSource.menuRpcCall(rpcRequest).then((rpcResponse) => {
+          if (onRpcResponse && rpcResponse) {
+            onRpcResponse && onRpcResponse(rpcResponse);
+          }
+        });
+        return true;
+      } else if (menuId === "link-table") {
+        return dataSource.visualLink = options, true;
+      } else {
+        console.log(
+          `useViewServer handleMenuAction,  can't handle action type ${menuId}`
+        );
+      }
+      return false;
+    },
+    [clientSideMenuActionHandler, dataSource, onRpcResponse]
+  );
+  return {
+    buildViewserverMenuOptions,
+    handleMenuAction
+  };
+};
+
+// src/hooks/useVuuTables.ts
+import { useCallback as useCallback6, useEffect as useEffect4, useState as useState4 } from "react";
+import { getServerAPI } from "@vuu-ui/vuu-data";
+var useVuuTables = () => {
+  const [tables, setTables] = useState4();
+  const buildTables = useCallback6((schemas) => {
+    const vuuTables = /* @__PURE__ */ new Map();
+    schemas.forEach((schema) => {
+      vuuTables.set(schema.table.table, schema);
+    });
+    return vuuTables;
+  }, []);
+  useEffect4(() => {
+    async function fetchTableMetadata() {
+      const server = await getServerAPI();
+      const { tables: tables2 } = await server.getTableList();
+      const tableSchemas = buildTables(
+        await Promise.all(
+          tables2.map(
+            (tableDescriptor) => server.getTableSchema(tableDescriptor)
+          )
+        )
+      );
+      setTables(tableSchemas);
+    }
+    fetchTableMetadata();
+  }, [buildTables]);
+  return tables;
+};
+export {
+  MovingWindow,
+  addRowsFromInstruments,
+  getTypeaheadParams,
+  isViewportMenusAction,
+  isVisualLinkCreatedAction,
+  isVisualLinkRemovedAction,
+  isVisualLinksAction,
+  isVuuFeatureAction,
+  isVuuFeatureInvocation,
+  useDataSource,
+  useServerConnectionQuality,
+  useServerConnectionStatus,
+  useTypeaheadSuggestions,
+  useVuuMenuActions,
+  useVuuTables
+};
 //# sourceMappingURL=index.js.map