1. fix: js query which has deps not execute on page load

2. fix(table) column overflow ellipsis
3. fix(multiBaseComp): fix node's cache when reduce UPDATE_NODE_V2

Author: ggbond2077

client/packages/openblocks-core/lib/index.js

@@ -3283,13 +3283,15 @@ function containFields(obj, fields) {
  * type unsafe, users should keep safe by self.
  * pros: this function can support private fields.
  */
-function setFieldsNoTypeCheck(obj, fields) {
+function setFieldsNoTypeCheck(obj, fields, params) {
     var res = Object.assign(Object.create(Object.getPrototypeOf(obj)), obj);
-    Object.keys(res).forEach(function (key) {
-        if (key.startsWith(CACHE_PREFIX)) {
-            delete res[key];
-        }
-    });
+    if (!(params === null || params === void 0 ? void 0 : params.keepCache)) {
+        Object.keys(res).forEach(function (key) {
+            if (key.startsWith(CACHE_PREFIX)) {
+                delete res[key];
+            }
+        });
+    }
     return Object.assign(res, fields);
 }
 
@@ -3416,7 +3418,7 @@ var MultiBaseComp = /** @class */ (function (_super) {
                 var cacheKey = CACHE_PREFIX + "REDUCE_UPDATE_NODE";
                 // if constructed by the value, just return
                 if (this[cacheKey] === value_1) {
-                    // FIXME: check why this branch is not passed
+                    // console.info("inside: UPDATE_NODE_V2 cache hit. action: ", action, "\nvalue: ", value, "\nthis: ", this);
                     return this;
                 }
                 var children = _.mapValues(this.children, function (comp, childName) {
@@ -3429,7 +3431,7 @@ var MultiBaseComp = /** @class */ (function (_super) {
                 if (shallowEqual(children, this.children) && containFields(this, extraFields)) {
                     return this;
                 }
-                return setFieldsNoTypeCheck(this, __assign((_b = { children: children }, _b[cacheKey] = value_1, _b), extraFields));
+                return setFieldsNoTypeCheck(this, __assign((_b = { children: children }, _b[cacheKey] = value_1, _b), extraFields), { keepCache: true });
             }
             case CompActionTypes.CHANGE_VALUE: {
                 return this.setChildren(this.parseChildrenFromValue({

client/packages/openblocks-core/src/baseComps/multiBaseComp.tsx

@@ -8,11 +8,11 @@ import {
 } from "actions";
 import { fromRecord, Node } from "eval";
 import _ from "lodash";
+import log from "loglevel";
 import { CACHE_PREFIX } from "util/cacheUtils";
 import { JSONValue } from "util/jsonTypes";
 import { containFields, setFieldsNoTypeCheck, shallowEqual } from "util/objectUtils";
 import { AbstractComp, Comp, CompParams, DispatchType, OptionalNodeType } from "./comp";
-import log from "loglevel";
 
 /**
  * MultiBaseCompConstructor with abstract function implemented
@@ -134,7 +134,7 @@ export abstract class MultiBaseComp<
         const cacheKey = CACHE_PREFIX + "REDUCE_UPDATE_NODE";
         // if constructed by the value, just return
         if ((this as any)[cacheKey] === value) {
-          // FIXME: check why this branch is not passed
+          // console.info("inside: UPDATE_NODE_V2 cache hit. action: ", action, "\nvalue: ", value, "\nthis: ", this);
           return this;
         }
         const children = _.mapValues(this.children, (comp, childName) => {
@@ -147,11 +147,15 @@ export abstract class MultiBaseComp<
         if (shallowEqual(children, this.children) && containFields(this, extraFields)) {
           return this;
         }
-        return setFieldsNoTypeCheck(this, {
-          children: children,
-          [cacheKey]: value,
-          ...extraFields,
-        });
+        return setFieldsNoTypeCheck(
+          this,
+          {
+            children: children,
+            [cacheKey]: value,
+            ...extraFields,
+          },
+          { keepCache: true }
+        );
       }
       case CompActionTypes.CHANGE_VALUE: {
         return this.setChildren(

client/packages/openblocks-core/src/util/objectUtils.ts

@@ -97,13 +97,19 @@ export function setFields<T>(obj: T, fields: Partial<T>) {
  * type unsafe, users should keep safe by self.
  * pros: this function can support private fields.
  */
-export function setFieldsNoTypeCheck<T>(obj: T, fields: Record<string, any>) {
+export function setFieldsNoTypeCheck<T>(
+  obj: T,
+  fields: Record<string, any>,
+  params?: { keepCache?: boolean }
+) {
   const res = Object.assign(Object.create(Object.getPrototypeOf(obj)), obj);
-  Object.keys(res).forEach((key) => {
-    if (key.startsWith(CACHE_PREFIX)) {
-      delete res[key];
-    }
-  });
+  if (!params?.keepCache) {
+    Object.keys(res).forEach((key) => {
+      if (key.startsWith(CACHE_PREFIX)) {
+        delete res[key];
+      }
+    });
+  }
   return Object.assign(res, fields) as T;
 }
 

client/packages/openblocks/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx

@@ -7,6 +7,18 @@ import { manualOptionsControl } from "comps/controls/optionsControl";
 import { MultiCompBuilder } from "comps/generators";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
+import styled from "styled-components";
+
+const LinksWrapper = styled.div`
+  white-space: nowrap;
+  > a {
+    margin-right: 8px;
+  }
+
+  > a:last-child {
+    margin-right: 0;
+  }
+`;
 
 const OptionItem = new MultiCompBuilder(
   {
@@ -57,7 +69,7 @@ export const ColumnLinksComp = (function () {
       );
 
       return (
-        <Space>
+        <LinksWrapper>
           {props.options
             .filter((o) => !o.hidden)
             .slice(0, 3)
@@ -71,7 +83,7 @@ export const ColumnLinksComp = (function () {
               <EllipsisOutlined onClick={(e) => e.preventDefault()} />
             </Dropdown>
           )}
-        </Space>
+        </LinksWrapper>
       );
     },
     () => ""

client/packages/openblocks/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx

@@ -22,9 +22,7 @@ const childrenMap = {
   text: StringControl,
 };
 
-const getBaseValue: ColumnTypeViewFn<typeof childrenMap, string, string> = (
-  props
-) => props.text;
+const getBaseValue: ColumnTypeViewFn<typeof childrenMap, string, string> = (props) => props.text;
 
 export const ColumnMarkdownComp = (function () {
   return new ColumnTypeCompBuilder(

client/packages/openblocks/src/comps/comps/tableComp/column/columnTypeView.tsx

@@ -2,10 +2,12 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import styled from "styled-components";
 
 const ColumnTypeViewWrapper = styled.div`
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  word-break: keep-all;
+  div {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    word-break: keep-all;
+  }
 `;
 
 const ColumnTypeHoverView = styled.div<{
@@ -17,19 +19,15 @@ const ColumnTypeHoverView = styled.div<{
   padding: string;
   visible: boolean;
 }>`
-  > * {
-    max-height: max-content !important;
-  }
-
   position: absolute;
-  height: ${(props) => (props.adjustHeight ? props.adjustHeight + "px" : "max-content")};
-  width: ${(props) => (props.adjustWidth ? props.adjustWidth + "px" : "max-content")};
+  height: ${(props) => (props.adjustHeight ? `${props.adjustHeight}px` : "max-content")};
+  width: ${(props) => (props.adjustWidth ? `${props.adjustWidth}px` : "max-content")};
   visibility: ${(props) => (props.visible ? "visible" : "hidden")};
-  min-width: ${(props) => props.minWidth && props.minWidth + 2}px;
+  min-width: ${(props) => (props.minWidth ? `${props.minWidth}px` : "unset")};
   max-height: 150px;
   max-width: 300px;
   overflow: auto;
-  background-color: #fafafa;
+  background: inherit;
   z-index: 3;
   padding: ${(props) => props.padding};
   top: ${(props) => `${props.adjustTop || 0}px`};
@@ -52,6 +50,18 @@ const ColumnTypeHoverView = styled.div<{
   }
 `;
 
+function childIsOverflow(nodes: HTMLCollection): boolean {
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    const overflow = node.clientHeight < node.scrollHeight || node.clientWidth < node.scrollWidth;
+    if (overflow) {
+      return true;
+    }
+    return childIsOverflow(node.children);
+  }
+  return false;
+}
+
 export default function ColumnTypeView(props: { children: React.ReactNode }) {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const hoverViewRef = useRef<HTMLDivElement>(null);
@@ -80,9 +90,11 @@ export default function ColumnTypeView(props: { children: React.ReactNode }) {
       return;
     }
     const overflow =
-      wrapperEle.offsetHeight < wrapperEle.scrollHeight ||
-      wrapperEle.offsetWidth < wrapperEle.scrollWidth;
-    setHasOverflow(overflow);
+      wrapperEle.clientHeight < wrapperEle.scrollHeight ||
+      wrapperEle.clientWidth < wrapperEle.scrollWidth;
+    if (overflow || childIsOverflow(wrapperEle.children)) {
+      setHasOverflow(true);
+    }
   }, [isHover]);
 
   useEffect(() => {
@@ -106,8 +118,14 @@ export default function ColumnTypeView(props: { children: React.ReactNode }) {
     }
 
     // actual width and height of the element
-    const width = Math.min(hoverEle.offsetWidth, tableEle.offsetWidth);
-    const height = Math.min(hoverEle.offsetHeight, tableEle.offsetHeight);
+    const width = Math.min(
+      hoverEle.getBoundingClientRect().width,
+      tableEle.getBoundingClientRect().width
+    );
+    const height = Math.min(
+      hoverEle.getBoundingClientRect().height,
+      tableEle.getBoundingClientRect().height
+    );
 
     let left;
     const leftOverflow = tableEle.getBoundingClientRect().x - hoverEle.getBoundingClientRect().x;
@@ -119,7 +137,7 @@ export default function ColumnTypeView(props: { children: React.ReactNode }) {
       left = leftOverflow;
     } else if (rightOverflow < 0) {
       // minus one, to avoid flashing scrollbars
-      left = rightOverflow - 1;
+      left = rightOverflow;
     }
 
     const bottomOverflow =

client/packages/openblocks/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx

@@ -1,11 +1,7 @@
 import { Badge, Button } from "antd";
 import { ColumnTypeCompBuilder } from "comps/comps/tableComp/column/columnTypeCompBuilder";
 import { ActionSelectorControlInContext } from "comps/controls/actionSelector/actionSelectorControl";
-import {
-  BoolCodeControl,
-  StringControl,
-  stringUnionControl,
-} from "comps/controls/codeControl";
+import { BoolCodeControl, StringControl, stringUnionControl } from "comps/controls/codeControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { disabledPropertyView, loadingPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
@@ -15,6 +11,14 @@ export const ColumnValueTooltip = trans("table.columnValueTooltip");
 
 const Button100 = styled(Button)`
   width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 `;
 
 const ButtonTypeOptions = [

client/packages/openblocks/src/comps/queries/queryComp.tsx

@@ -19,7 +19,6 @@ import {
 } from "openblocks-core";
 import { SimpleNameComp } from "comps/comps/simpleNameComp";
 import { StringControl } from "comps/controls/codeControl";
-import { dropdownControl } from "comps/controls/dropdownControl";
 import { eventHandlerControl } from "comps/controls/eventHandlerControl";
 import { stateComp, valueComp, withTypeAndChildren, withViewFn } from "comps/generators";
 import { list } from "comps/generators/list";
@@ -176,7 +175,9 @@ QueryCompTmp = class extends QueryCompTmp {
     if (
       action.type === CompActionTypes.UPDATE_NODES_V2 &&
       getTriggerType(this) === "automatic" &&
-      this.children.compType.getView() !== "js"
+      (this.children.compType.getView() !== "js" ||
+        (this.children.compType.getView() === "js" &&
+          this.children.lastQueryStartTime.getView() === -1)) // query which has deps can be executed on page load(first time)
     ) {
       const dependValues = this.children.comp.node()?.dependValues();
       const target = this as any;

client/packages/openblocks/src/i18n/locales/en.ts

@@ -594,7 +594,7 @@ export const en = {
   uiComp: {
     inputCompName: "Input",
     inputCompDesc: "Input component",
-    inputCompKeywords: "",
+    inputCompKeywords: "text",
     textAreaCompName: "Text Area",
     textAreaCompDesc: "Text Area component",
     textAreaCompKeywords: "",