@finos/legend-query-builder 4.14.8 → 4.14.9

package/src/components/fetch-structure/QueryBuilderTDSPanel.tsx

@@ -144,8 +144,9 @@ const QueryBuilderProjectionColumnContextMenu = observer(
 const QueryBuilderSimpleProjectionColumnEditor = observer(
   (props: {
     projectionColumnState: QueryBuilderSimpleProjectionColumnState;
+    setIsEditingColumnName: (isEditing: boolean) => void;
   }) => {
-    const { projectionColumnState } = props;
+    const { projectionColumnState, setIsEditingColumnName } = props;
     const onPropertyExpressionChange = (
       node: QueryBuilderExplorerTreePropertyNodeData,
     ): void =>
@@ -158,10 +159,12 @@ const QueryBuilderSimpleProjectionColumnEditor = observer(
     return (
       <div className="query-builder__projection__column__value__property">
         <QueryBuilderPropertyExpressionBadge
+          columnName={projectionColumnState.columnName}
           propertyExpressionState={
             projectionColumnState.propertyExpressionState
           }
           onPropertyExpressionChange={onPropertyExpressionChange}
+          setIsEditingColumnName={setIsEditingColumnName}
         />
       </div>
     );
@@ -378,6 +381,13 @@ const QueryBuilderProjectionColumnEditor = observer(
     ) => projectionColumnState.setColumnName(event.target.value);
     const isDuplicatedColumnName =
       projectionColumnState.tdsState.isDuplicateColumn(projectionColumnState);
+    const [isEditingColumnName, setIsEditingColumnName] = useState(false);
+    const columnNameInputRef = useRef<HTMLInputElement>(null);
+    useEffect(() => {
+      if (isEditingColumnName) {
+        columnNameInputRef.current?.focus();
+      }
+    }, [isEditingColumnName, columnNameInputRef]);
 
     // aggregation
     const aggregateColumnState = tdsState.aggregationState.columns.find(
@@ -742,29 +752,60 @@ const QueryBuilderProjectionColumnEditor = observer(
               dragSourceConnector={dragHandleRef}
               className="query-builder__projection__column__drag-handle__container"
             />
-            <div className="query-builder__projection__column__name">
-              <InputWithInlineValidation
-                className="query-builder__projection__column__name__input input-group__input"
-                spellCheck={false}
-                value={projectionColumnState.columnName}
-                onChange={changeColumnName}
-                error={isDuplicatedColumnName ? 'Duplicated column' : undefined}
-              />
-            </div>
-            <div className="query-builder__projection__column__value">
-              {projectionColumnState instanceof
-                QueryBuilderSimpleProjectionColumnState && (
-                <QueryBuilderSimpleProjectionColumnEditor
-                  projectionColumnState={projectionColumnState}
-                />
-              )}
-              {projectionColumnState instanceof
-                QueryBuilderDerivationProjectionColumnState && (
-                <QueryBuilderDerivationProjectionColumnEditor
-                  projectionColumnState={projectionColumnState}
-                />
-              )}
-            </div>
+            {projectionColumnState instanceof
+              QueryBuilderSimpleProjectionColumnState &&
+              (isEditingColumnName ? (
+                <div className="query-builder__projection__column__name">
+                  <InputWithInlineValidation
+                    className="query-builder__projection__column__name__input input-group__input"
+                    spellCheck={false}
+                    value={projectionColumnState.columnName}
+                    onChange={changeColumnName}
+                    onKeyDown={(
+                      event: React.KeyboardEvent<HTMLInputElement>,
+                    ) => {
+                      if (event.key === 'Enter') {
+                        setIsEditingColumnName(false);
+                      }
+                    }}
+                    onBlur={() => {
+                      setIsEditingColumnName(false);
+                    }}
+                    error={
+                      isDuplicatedColumnName ? 'Duplicated column' : undefined
+                    }
+                    ref={columnNameInputRef}
+                  />
+                </div>
+              ) : (
+                <div className="query-builder__projection__column__value">
+                  <QueryBuilderSimpleProjectionColumnEditor
+                    projectionColumnState={projectionColumnState}
+                    setIsEditingColumnName={setIsEditingColumnName}
+                  />
+                </div>
+              ))}
+            {projectionColumnState instanceof
+              QueryBuilderDerivationProjectionColumnState && (
+              <>
+                <div className="query-builder__projection__column__name query-builder__projection__column__name__derivation">
+                  <InputWithInlineValidation
+                    className="query-builder__projection__column__name__input input-group__input"
+                    spellCheck={false}
+                    value={projectionColumnState.columnName}
+                    onChange={changeColumnName}
+                    error={
+                      isDuplicatedColumnName ? 'Duplicated column' : undefined
+                    }
+                  />
+                </div>
+                <div className="query-builder__projection__column__value">
+                  <QueryBuilderDerivationProjectionColumnEditor
+                    projectionColumnState={projectionColumnState}
+                  />
+                </div>
+              </>
+            )}
             <div className="query-builder__projection__column__aggregate">
               <div className="query-builder__projection__column__aggregate__operator">
                 {aggregateColumnState && (

package/src/components/shared/QueryBuilderPropertyInfoTooltip.tsx

@@ -14,7 +14,11 @@
  * limitations under the License.
  */
 
-import { type TooltipPlacement, Tooltip } from '@finos/legend-art';
+import {
+  ShareBoxIcon,
+  type TooltipPlacement,
+  Tooltip,
+} from '@finos/legend-art';
 import {
   type AbstractProperty,
   type Type,
@@ -25,6 +29,7 @@ import {
   PURE_DOC_TAG,
 } from '@finos/legend-graph';
 import { useState } from 'react';
+import type { QueryBuilderExplorerState } from '../../stores/explorer/QueryBuilderExplorerState.js';
 
 export const QueryBuilderTaggedValueInfoTooltip: React.FC<{
   taggedValues: TaggedValue[];
@@ -112,14 +117,25 @@ export const QueryBuilderTaggedValueInfoTooltip: React.FC<{
 };
 
 export const QueryBuilderPropertyInfoTooltip: React.FC<{
+  title: string;
   property: AbstractProperty;
   path: string;
   isMapped: boolean;
   children: React.ReactElement;
   placement?: TooltipPlacement | undefined;
   type?: Type | undefined;
+  explorerState?: QueryBuilderExplorerState | undefined;
 }> = (props) => {
-  const { property, path, isMapped, children, placement, type } = props;
+  const {
+    title,
+    property,
+    path,
+    isMapped,
+    children,
+    placement,
+    type,
+    explorerState,
+  } = props;
 
   return (
     <Tooltip
@@ -138,6 +154,7 @@ export const QueryBuilderPropertyInfoTooltip: React.FC<{
       }}
       title={
         <div className="query-builder__tooltip__content">
+          <div className="query-builder__tooltip__header">{title}</div>
           <div className="query-builder__tooltip__item">
             <div className="query-builder__tooltip__item__label">Type</div>
             <div className="query-builder__tooltip__item__value">
@@ -147,6 +164,16 @@ export const QueryBuilderPropertyInfoTooltip: React.FC<{
           <div className="query-builder__tooltip__item">
             <div className="query-builder__tooltip__item__label">Path</div>
             <div className="query-builder__tooltip__item__value">{path}</div>
+            {explorerState && (
+              <div className="query-builder__tooltip__item__action">
+                <button
+                  onClick={() => explorerState.highlightTreeNode(path)}
+                  title="Show in tree"
+                >
+                  <ShareBoxIcon color="white" />
+                </button>
+              </div>
+            )}
           </div>
           <div className="query-builder__tooltip__item">
             <div className="query-builder__tooltip__item__label">

package/src/stores/explorer/QueryBuilderExplorerState.ts

@@ -72,6 +72,7 @@ import { QueryBuilderPropertySearchState } from './QueryBuilderPropertySearchSta
 import { QUERY_BUILDER_SUPPORTED_FUNCTIONS } from '../../graph/QueryBuilderMetaModelConst.js';
 import { propertyExpression_setFunc } from '../shared/ValueSpecificationModifierHelper.js';
 import { QueryBuilderTelemetryHelper } from '../../__lib__/QueryBuilderTelemetryHelper.js';
+import { createRef } from 'react';
 
 export enum QUERY_BUILDER_EXPLORER_TREE_DND_TYPE {
   ROOT = 'ROOT',
@@ -97,6 +98,7 @@ export interface QueryBuilderExplorerTreeDragSource {
 export abstract class QueryBuilderExplorerTreeNodeData implements TreeNodeData {
   isSelected?: boolean | undefined;
   isOpen?: boolean | undefined;
+  isHighlighting?: boolean | undefined;
   id: string;
   label: string;
   dndText: string;
@@ -104,6 +106,7 @@ export abstract class QueryBuilderExplorerTreeNodeData implements TreeNodeData {
   isPartOfDerivedPropertyBranch: boolean;
   type: Type;
   mappingData: QueryBuilderExplorerTreeNodeMappingData;
+  elementRef: React.RefObject<HTMLDivElement>;
 
   constructor(
     id: string,
@@ -114,7 +117,9 @@ export abstract class QueryBuilderExplorerTreeNodeData implements TreeNodeData {
     mappingData: QueryBuilderExplorerTreeNodeMappingData,
   ) {
     makeObservable(this, {
+      isHighlighting: observable,
       isSelected: observable,
+      setIsHighlighting: action,
       setIsSelected: action,
     });
 
@@ -124,11 +129,16 @@ export abstract class QueryBuilderExplorerTreeNodeData implements TreeNodeData {
     this.isPartOfDerivedPropertyBranch = isPartOfDerivedPropertyBranch;
     this.type = type;
     this.mappingData = mappingData;
+    this.elementRef = createRef();
   }
 
   setIsSelected(val: boolean | undefined): void {
     this.isSelected = val;
   }
+
+  setIsHighlighting(val: boolean | undefined): void {
+    this.isHighlighting = val;
+  }
 }
 
 export type QueryBuilderExplorerTreeNodeMappingData = {
@@ -663,6 +673,7 @@ export class QueryBuilderExplorerState {
       setHumanizePropertyName: action,
       setShowUnmappedProperties: action,
       setHighlightUsedProperties: action,
+      highlightTreeNode: action,
       analyzeMappingModelCoverage: flow,
       previewData: flow,
     });
@@ -717,6 +728,30 @@ export class QueryBuilderExplorerState {
     );
   }
 
+  highlightTreeNode(key: string): void {
+    const nodeToHighlight = this.treeData?.nodes.get(key);
+    if (nodeToHighlight instanceof QueryBuilderExplorerTreePropertyNodeData) {
+      let nodeToOpen: QueryBuilderExplorerTreeNodeData | null =
+        this.treeData?.nodes.get(nodeToHighlight.parentId) ?? null;
+      while (nodeToOpen !== null) {
+        if (!nodeToOpen.isOpen) {
+          nodeToOpen.isOpen = true;
+        }
+        nodeToOpen =
+          nodeToOpen instanceof QueryBuilderExplorerTreePropertyNodeData
+            ? this.treeData?.nodes.get(nodeToOpen.parentId) ?? null
+            : null;
+      }
+      this.refreshTree();
+      nodeToHighlight.setIsHighlighting(true);
+      // scrollIntoView must be called in a setTimeout because it must happen after
+      // the tree nodes are recursively opened and the tree is refreshed.
+      setTimeout(() => {
+        nodeToHighlight.elementRef.current?.scrollIntoView();
+      }, 0);
+    }
+  }
+
   *analyzeMappingModelCoverage(): GeneratorFn<void> {
     // We will only refetch if the analysis result's mapping has changed.
     // This makes the assumption that the mapping has not been edited, which is a valid assumption since query is not for editing mappings