@finos/legend-query-builder 0.0.2 → 0.1.1

package/src/components/explorer/QueryBuilderPropertySearchPanel.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useRef, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import {
   clsx,
   CheckSquareIcon,
@@ -27,9 +27,10 @@ import {
   InfoCircleIcon,
   TimesIcon,
   SearchIcon,
-  ChevronDownIcon,
-  ChevronRightIcon,
   useDragPreviewLayer,
+  PanelLoadingIndicator,
+  BlankPanelContent,
+  CogIcon,
 } from '@finos/legend-art';
 import {
   Class,
@@ -37,7 +38,7 @@ import {
   getAllClassProperties,
   getAllOwnClassProperties,
 } from '@finos/legend-graph';
-import { guaranteeNonNullable } from '@finos/legend-shared';
+import { debounce, guaranteeNonNullable } from '@finos/legend-shared';
 import { observer } from 'mobx-react-lite';
 import { useDrag } from 'react-dnd';
 import { QUERY_BUILDER_PROPERTY_SEARCH_TYPE } from '../../stores/QueryBuilderConfig.js';
@@ -57,6 +58,7 @@ import {
 } from './QueryBuilderExplorerPanel.js';
 import { QueryBuilderPropertyInfoTooltip } from '../shared/QueryBuilderPropertyInfoTooltip.js';
 import { QUERY_BUILDER_TEST_ID } from '../QueryBuilder_TestID.js';
+import { TextSearchAdvancedConfigMenu } from '@finos/legend-application';
 
 const prettyPropertyNameFromNodeId = (name: string): string => {
   let propNameArray = name.split('.');
@@ -115,7 +117,7 @@ const QueryBuilderTreeNodeViewer = observer(
     const { node, queryBuilderState, explorerState, level, stepPaddingInRem } =
       props;
     const [isExpandable, setIsExpandable] = useState(false);
-    const propertySearchPanelState = explorerState.propertySearchState;
+    const propertySearchState = explorerState.propertySearchState;
     const [, dragConnector, dragPreviewConnector] = useDrag<{
       node?: QueryBuilderExplorerTreePropertyNodeData;
     }>(
@@ -139,18 +141,7 @@ const QueryBuilderTreeNodeViewer = observer(
       [node],
     );
     useDragPreviewLayer(dragPreviewConnector);
-    const isMultiple =
-      (node instanceof QueryBuilderExplorerTreePropertyNodeData &&
-        (node.property.multiplicity.upperBound === undefined ||
-          node.property.multiplicity.upperBound > 1)) ||
-      (node instanceof QueryBuilderExplorerTreeSubTypeNodeData &&
-        (node.multiplicity.upperBound === undefined ||
-          node.multiplicity.upperBound > 1));
-    const nodeExpandIcon = isExpandable ? (
-      <ChevronDownIcon />
-    ) : (
-      <ChevronRightIcon />
-    );
+
     const getChildrenNodes = (): QueryBuilderExplorerTreeNodeData[] => {
       const childNodes: QueryBuilderExplorerTreeNodeData[] = [];
       if (node.childrenIds.length) {
@@ -183,7 +174,7 @@ const QueryBuilderTreeNodeViewer = observer(
       }
       return childNodes;
     };
-    const parentNode = propertySearchPanelState.allMappedPropertyNodes.find(
+    const parentNode = propertySearchState.indexedExplorerTreeNodes.find(
       (pn) =>
         node instanceof QueryBuilderExplorerTreePropertyNodeData &&
         node.parentId === pn.id,
@@ -200,19 +191,12 @@ const QueryBuilderTreeNodeViewer = observer(
           }}
           onClick={(): void => setIsExpandable(!isExpandable)}
           // Temporarily hide away the panel when we drag-and-drop the properties
-          onDrag={(): void =>
-            propertySearchPanelState.setIsSearchPanelHidden(true)
-          }
+          onDrag={(): void => propertySearchState.setIsSearchPanelHidden(true)}
           onDragEnd={(): void =>
-            propertySearchPanelState.setIsSearchPanelHidden(false)
+            propertySearchState.setIsSearchPanelHidden(false)
           }
         >
           <div className="tree-view__node__icon query-builder-property-search-panel__node__icon">
-            {node.type instanceof Class && (
-              <div className="query-builder-property-search-panel__expand-icon">
-                {nodeExpandIcon}
-              </div>
-            )}
             <div className="query-builder-property-search-panel__type-icon">
               {renderPropertyTypeIcon(node.type)}
             </div>
@@ -223,14 +207,6 @@ const QueryBuilderTreeNodeViewer = observer(
               : node instanceof QueryBuilderExplorerTreeSubTypeNodeData
               ? prettyPropertyNameForSubTypeClass(node.id)
               : prettyPropertyNameFromNodeId(node.id)}
-            {isMultiple && (
-              <div
-                className="query-builder-property-search-panel__node__label__multiple"
-                title="Multiple values of this property can cause row explosion"
-              >
-                *
-              </div>
-            )}
           </div>
           <div className="query-builder-property-search-panel__node__actions">
             {node instanceof QueryBuilderExplorerTreePropertyNodeData && (
@@ -281,37 +257,43 @@ export const QueryBuilderPropertySearchPanel = observer(
   }) => {
     const { queryBuilderState, triggerElement } = props;
     const explorerState = queryBuilderState.explorerState;
-    const propertySearchPanelState = explorerState.propertySearchState;
+    const propertySearchState = explorerState.propertySearchState;
     const searchInputRef = useRef<HTMLInputElement>(null);
-    const changePropertyName: React.ChangeEventHandler<HTMLInputElement> = (
-      event,
-    ) => {
-      propertySearchPanelState.setSearchText(event.target.value);
-      propertySearchPanelState.refreshPropertyState();
-      if (propertySearchPanelState.searchText.length >= 3) {
-        propertySearchPanelState.fetchMappedPropertyNodes(
-          propertySearchPanelState.searchText,
-        );
-      }
-    };
-    const clearPropertyName = (): void => {
-      propertySearchPanelState.setSearchText('');
-      propertySearchPanelState.refreshPropertyState();
+    const searchConfigTriggerRef = useRef<HTMLButtonElement>(null);
+
+    // search text
+    const debouncedSearchProperty = useMemo(
+      () => debounce(() => propertySearchState.search(), 100),
+      [propertySearchState],
+    );
+    const onSearchPropertyTextChange: React.ChangeEventHandler<
+      HTMLInputElement
+    > = (event) => {
+      propertySearchState.setSearchText(event.target.value);
+      debouncedSearchProperty();
     };
-    const handleClose = (): void => {
-      clearPropertyName();
-      propertySearchPanelState.setIsSearchPanelOpen(false);
+
+    // search actions
+    const clearSearch = (): void => {
+      propertySearchState.resetSearch();
     };
-    const toggleIsMultiple = (): void => {
-      propertySearchPanelState.setFilterByMultiple(
-        !propertySearchPanelState.filterByMultiple,
+    const toggleSearchConfigMenu = (): void =>
+      propertySearchState.setShowSearchConfigurationMenu(
+        !propertySearchState.showSearchConfigurationMenu,
       );
-    };
+    const closeSearchConfigMenu = (): void =>
+      propertySearchState.setShowSearchConfigurationMenu(false);
+
+    // life-cycle
     const handleEnter = (): void => searchInputRef.current?.focus();
+    const handleClose = (): void => {
+      clearSearch();
+      propertySearchState.setIsSearchPanelOpen(false);
+    };
 
     return (
       <BasePopover
-        open={propertySearchPanelState.isSearchPanelOpen}
+        open={propertySearchState.isSearchPanelOpen}
         // we need to get rid of the backdrop and the click-away trap
         // to make this popover behave like a popper
         // NOTE: we will cancel the effect of click-away trap using CSS
@@ -323,7 +305,7 @@ export const QueryBuilderPropertySearchPanel = observer(
         }}
         className={clsx('query-builder-property-search-panel__container', {
           'query-builder-property-search-panel__container--hidden':
-            propertySearchPanelState.isSearchPanelHidden,
+            propertySearchState.isSearchPanelHidden,
         })}
         anchorEl={triggerElement}
         onClose={handleClose}
@@ -351,31 +333,76 @@ export const QueryBuilderPropertySearchPanel = observer(
                   'query-builder-property-search-panel__input input--dark',
                   {
                     'query-builder-property-search-panel__input--searching':
-                      propertySearchPanelState.searchText,
+                      propertySearchState.searchText,
                   },
                 )}
-                onChange={changePropertyName}
-                value={propertySearchPanelState.searchText}
-                placeholder="Search for a property"
+                spellCheck={false}
+                onChange={onSearchPropertyTextChange}
+                value={propertySearchState.searchText}
+                placeholder="Search for a property by name or documentation"
               />
-              {!propertySearchPanelState.searchText ? (
-                <div className="query-builder-property-search-panel__input__search__icon">
-                  <SearchIcon />
+              {propertySearchState.searchText && (
+                <div className="query-builder-property-search-panel__input__search__count">
+                  {propertySearchState.filteredSearchResults.length +
+                    (propertySearchState.isOverSearchLimit &&
+                    propertySearchState.filteredSearchResults.length !== 0
+                      ? '+'
+                      : '')}
                 </div>
-              ) : (
+              )}
+              <button
+                ref={searchConfigTriggerRef}
+                className={clsx(
+                  'query-builder-property-search-panel__input__search__config__trigger',
+                  {
+                    'query-builder-property-search-panel__input__search__config__trigger--toggled':
+                      propertySearchState.showSearchConfigurationMenu,
+                    'query-builder-property-search-panel__input__search__config__trigger--active':
+                      propertySearchState.searchConfigurationState
+                        .isAdvancedSearchActive,
+                  },
+                )}
+                tabIndex={-1}
+                onClick={toggleSearchConfigMenu}
+                title="Click to toggle search config menu"
+              >
+                <CogIcon />
+              </button>
+              <BasePopover
+                open={Boolean(propertySearchState.showSearchConfigurationMenu)}
+                TransitionProps={{
+                  onEnter: handleEnter,
+                }}
+                anchorEl={searchConfigTriggerRef.current}
+                onClose={closeSearchConfigMenu}
+                anchorOrigin={{
+                  vertical: 'bottom',
+                  horizontal: 'center',
+                }}
+                transformOrigin={{
+                  vertical: 'top',
+                  horizontal: 'center',
+                }}
+              >
+                <TextSearchAdvancedConfigMenu
+                  configState={propertySearchState.searchConfigurationState}
+                />
+              </BasePopover>
+              {!propertySearchState.searchText ? (
                 <>
-                  <div className="query-builder-property-search-panel__input__search__count">
-                    {propertySearchPanelState.filteredPropertyNodes.length}
+                  <div className="query-builder-property-search-panel__input__search__icon">
+                    <SearchIcon />
                   </div>
-                  <button
-                    className="query-builder-property-search-panel__input__clear-btn"
-                    tabIndex={-1}
-                    onClick={clearPropertyName}
-                    title="Clear"
-                  >
-                    <TimesIcon />
-                  </button>
                 </>
+              ) : (
+                <button
+                  className="query-builder-property-search-panel__input__clear-btn"
+                  tabIndex={-1}
+                  onClick={clearSearch}
+                  title="Clear"
+                >
+                  <TimesIcon />
+                </button>
               )}
             </div>
             <button
@@ -393,48 +420,7 @@ export const QueryBuilderPropertySearchPanel = observer(
                 <div className="query-builder-property-search-panel__config">
                   <div className="query-builder-property-search-panel__form__section">
                     <div className="query-builder-property-search-panel__form__section__header__label">
-                      Multiple
-                      <div
-                        className="query-builder-property-search-panel__info__label"
-                        title="Includes properties with multiplicity greater than one"
-                      >
-                        <InfoCircleIcon />
-                      </div>
-                    </div>
-                    <div
-                      className={clsx(
-                        'query-builder-property-search-panel__form__section__toggler',
-                        {
-                          'query-builder-property-search-panel__form__section__toggler--disabled':
-                            false,
-                        },
-                      )}
-                    >
-                      <button
-                        className={clsx(
-                          'query-builder-property-search-panel__form__section__toggler__btn',
-                          {
-                            'query-builder-property-search-panel__form__section__toggler__btn--toggled':
-                              propertySearchPanelState.filterByMultiple,
-                          },
-                        )}
-                        onClick={toggleIsMultiple}
-                        tabIndex={-1}
-                      >
-                        {propertySearchPanelState.filterByMultiple ? (
-                          <CheckSquareIcon />
-                        ) : (
-                          <SquareIcon />
-                        )}
-                      </button>
-                      <div className="query-builder-property-search-panel__form__section__toggler__prompt">
-                        Included
-                      </div>
-                    </div>
-                  </div>
-                  <div className="query-builder-property-search-panel__form__section">
-                    <div className="query-builder-property-search-panel__form__section__header__label">
-                      Element types
+                      By type
                     </div>
                     <div className="query-builder-property-search-panel__filter__element">
                       <button
@@ -442,19 +428,19 @@ export const QueryBuilderPropertySearchPanel = observer(
                           'query-builder-property-search-panel__form__section__toggler__btn',
                           {
                             'query-builder-property-search-panel__form__section__toggler__btn--toggled':
-                              propertySearchPanelState.typeFilters.includes(
+                              propertySearchState.typeFilters.includes(
                                 QUERY_BUILDER_PROPERTY_SEARCH_TYPE.CLASS,
                               ),
                           },
                         )}
                         onClick={(): void => {
-                          propertySearchPanelState.toggleTypeFilter(
+                          propertySearchState.toggleFilterForType(
                             QUERY_BUILDER_PROPERTY_SEARCH_TYPE.CLASS,
                           );
                         }}
                         tabIndex={-1}
                       >
-                        {propertySearchPanelState.typeFilters.includes(
+                        {propertySearchState.typeFilters.includes(
                           QUERY_BUILDER_PROPERTY_SEARCH_TYPE.CLASS,
                         ) ? (
                           <CheckSquareIcon />
@@ -472,19 +458,19 @@ export const QueryBuilderPropertySearchPanel = observer(
                           'query-builder-property-search-panel__form__section__toggler__btn',
                           {
                             'query-builder-property-search-panel__form__section__toggler__btn--toggled':
-                              propertySearchPanelState.typeFilters.includes(
+                              propertySearchState.typeFilters.includes(
                                 QUERY_BUILDER_PROPERTY_SEARCH_TYPE.STRING,
                               ),
                           },
                         )}
                         onClick={(): void => {
-                          propertySearchPanelState.toggleTypeFilter(
+                          propertySearchState.toggleFilterForType(
                             QUERY_BUILDER_PROPERTY_SEARCH_TYPE.STRING,
                           );
                         }}
                         tabIndex={-1}
                       >
-                        {propertySearchPanelState.typeFilters.includes(
+                        {propertySearchState.typeFilters.includes(
                           QUERY_BUILDER_PROPERTY_SEARCH_TYPE.STRING,
                         ) ? (
                           <CheckSquareIcon />
@@ -502,19 +488,19 @@ export const QueryBuilderPropertySearchPanel = observer(
                           'query-builder-property-search-panel__form__section__toggler__btn',
                           {
                             'query-builder-property-search-panel__form__section__toggler__btn--toggled':
-                              propertySearchPanelState.typeFilters.includes(
+                              propertySearchState.typeFilters.includes(
                                 QUERY_BUILDER_PROPERTY_SEARCH_TYPE.BOOLEAN,
                               ),
                           },
                         )}
                         onClick={(): void => {
-                          propertySearchPanelState.toggleTypeFilter(
+                          propertySearchState.toggleFilterForType(
                             QUERY_BUILDER_PROPERTY_SEARCH_TYPE.BOOLEAN,
                           );
                         }}
                         tabIndex={-1}
                       >
-                        {propertySearchPanelState.typeFilters.includes(
+                        {propertySearchState.typeFilters.includes(
                           QUERY_BUILDER_PROPERTY_SEARCH_TYPE.BOOLEAN,
                         ) ? (
                           <CheckSquareIcon />
@@ -532,19 +518,19 @@ export const QueryBuilderPropertySearchPanel = observer(
                           'query-builder-property-search-panel__form__section__toggler__btn',
                           {
                             'query-builder-property-search-panel__form__section__toggler__btn--toggled':
-                              propertySearchPanelState.typeFilters.includes(
+                              propertySearchState.typeFilters.includes(
                                 QUERY_BUILDER_PROPERTY_SEARCH_TYPE.NUMBER,
                               ),
                           },
                         )}
                         onClick={(): void => {
-                          propertySearchPanelState.toggleTypeFilter(
+                          propertySearchState.toggleFilterForType(
                             QUERY_BUILDER_PROPERTY_SEARCH_TYPE.NUMBER,
                           );
                         }}
                         tabIndex={-1}
                       >
-                        {propertySearchPanelState.typeFilters.includes(
+                        {propertySearchState.typeFilters.includes(
                           QUERY_BUILDER_PROPERTY_SEARCH_TYPE.NUMBER,
                         ) ? (
                           <CheckSquareIcon />
@@ -562,19 +548,19 @@ export const QueryBuilderPropertySearchPanel = observer(
                           'query-builder-property-search-panel__form__section__toggler__btn',
                           {
                             'query-builder-property-search-panel__form__section__toggler__btn--toggled':
-                              propertySearchPanelState.typeFilters.includes(
+                              propertySearchState.typeFilters.includes(
                                 QUERY_BUILDER_PROPERTY_SEARCH_TYPE.DATE,
                               ),
                           },
                         )}
                         onClick={(): void => {
-                          propertySearchPanelState.toggleTypeFilter(
+                          propertySearchState.toggleFilterForType(
                             QUERY_BUILDER_PROPERTY_SEARCH_TYPE.DATE,
                           );
                         }}
                         tabIndex={-1}
                       >
-                        {propertySearchPanelState.typeFilters.includes(
+                        {propertySearchState.typeFilters.includes(
                           QUERY_BUILDER_PROPERTY_SEARCH_TYPE.DATE,
                         ) ? (
                           <CheckSquareIcon />
@@ -593,18 +579,43 @@ export const QueryBuilderPropertySearchPanel = observer(
                 <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
               </ResizablePanelSplitter>
               <ResizablePanel>
+                {propertySearchState.searchState.isInProgress && (
+                  <PanelLoadingIndicator isLoading={true} />
+                )}
                 <div className="query-builder-property-search-panel__results">
-                  {propertySearchPanelState.filteredPropertyNodes.map(
-                    (node) => (
-                      <QueryBuilderTreeNodeViewer
-                        key={node.id}
-                        node={node}
-                        queryBuilderState={queryBuilderState}
-                        level={1}
-                        stepPaddingInRem={0}
-                        explorerState={queryBuilderState.explorerState}
-                      />
-                    ),
+                  {!propertySearchState.searchState.isInProgress && (
+                    <>
+                      {Boolean(
+                        propertySearchState.filteredSearchResults.length,
+                      ) &&
+                        propertySearchState.filteredSearchResults.map(
+                          (node) => (
+                            <QueryBuilderTreeNodeViewer
+                              key={node.id}
+                              node={node}
+                              queryBuilderState={queryBuilderState}
+                              level={1}
+                              stepPaddingInRem={0}
+                              explorerState={queryBuilderState.explorerState}
+                            />
+                          ),
+                        )}
+                      {!propertySearchState.filteredSearchResults.length &&
+                        propertySearchState.searchText && (
+                          <BlankPanelContent>
+                            <div className="query-builder-property-search-panel__result-placeholder__text">
+                              No result
+                            </div>
+                            <div className="query-builder-property-search-panel__result-placeholder__tips">
+                              Tips: Navigate deeper into the explorer tree to
+                              improve the scope and accuracy of the search
+                            </div>
+                          </BlankPanelContent>
+                        )}
+                    </>
+                  )}
+                  {propertySearchState.searchState.isInProgress && (
+                    <BlankPanelContent>Searching...</BlankPanelContent>
                   )}
                 </div>
               </ResizablePanel>

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

@@ -15,7 +15,12 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import { clsx, BlankPanelContent } from '@finos/legend-art';
+import {
+  clsx,
+  BlankPanelContent,
+  Panel,
+  PanelContent,
+} from '@finos/legend-art';
 import type { QueryBuilderState } from '../../stores/QueryBuilderState.js';
 import { prettyCONSTName } from '@finos/legend-shared';
 import { QueryBuilderProjectionPanel } from './QueryBuilderProjectionPanel.js';
@@ -47,7 +52,7 @@ const QueryBuilderFetchStructureEditor = observer(
       );
     }
     return (
-      <div className="panel__content">
+      <PanelContent>
         <BlankPanelContent>
           <div className="query-builder__unsupported-view__main">
             <div className="query-builder__unsupported-view__summary">
@@ -55,7 +60,7 @@ const QueryBuilderFetchStructureEditor = observer(
             </div>
           </div>
         </BlankPanelContent>
-      </div>
+      </PanelContent>
     );
   },
 );
@@ -78,7 +83,7 @@ export const QueryBuilderFetchStructurePanel = observer(
       };
 
     return (
-      <div className="panel">
+      <Panel>
         <div className="panel__header">
           <div className="panel__header__title">
             <div className="panel__header__title__label">fetch structure</div>
@@ -106,7 +111,7 @@ export const QueryBuilderFetchStructurePanel = observer(
         <QueryBuilderFetchStructureEditor
           queryBuilderState={queryBuilderState}
         />
-      </div>
+      </Panel>
     );
   },
 );

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

@@ -52,6 +52,7 @@ import {
   PanelEntryDropZonePlaceholder,
   useDragPreviewLayer,
   BlankPanelContent,
+  PanelContent,
 } from '@finos/legend-art';
 import {
   type Type,
@@ -1035,7 +1036,7 @@ const QueryBuilderPostFilterPanelContent = observer(
             </button>
           </div>
         </div>
-        <div className="panel__content">
+        <PanelContent>
           <PanelDropZone
             isDragOver={isDragOver}
             dropTargetConnector={dropTargetConnector}
@@ -1058,7 +1059,7 @@ const QueryBuilderPostFilterPanelContent = observer(
               </>
             )}
           </PanelDropZone>
-        </div>
+        </PanelContent>
       </div>
     );
   },
@@ -1090,11 +1091,11 @@ export const QueryBuilderPostFilterPanel = observer(
                 <div className="panel__header__title__label">post-filter</div>
               </div>
             </div>
-            <div className="panel__content">
+            <PanelContent>
               <BlankPanelContent>
                 Post-filter is not supported for the current fetch-structure
               </BlankPanelContent>
-            </div>
+            </PanelContent>
           </>
         )}
       </div>

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

@@ -34,6 +34,7 @@ import {
   useDragPreviewLayer,
   OptionsIcon,
   PlusIcon,
+  PanelContent,
 } from '@finos/legend-art';
 import {
   type QueryBuilderExplorerTreeDragSource,
@@ -538,12 +539,8 @@ export const QueryBuilderProjectionPanel = observer(
               new QueryBuilderSimpleProjectionColumnState(
                 projectionState,
                 buildPropertyExpressionFromExplorerTreeNodeData(
-                  projectionState.queryBuilderState.explorerState
-                    .nonNullableTreeData,
                   (item as QueryBuilderExplorerTreeDragSource).node,
-                  projectionState.queryBuilderState.graphManagerState.graph,
-                  projectionState.queryBuilderState.explorerState
-                    .propertySearchState.allMappedPropertyNodes,
+                  projectionState.queryBuilderState.explorerState,
                 ),
                 projectionState.queryBuilderState.explorerState.humanizePropertyName,
               ),
@@ -587,7 +584,7 @@ export const QueryBuilderProjectionPanel = observer(
     }, [applicationStore, projectionState]);
 
     return (
-      <div className="panel__content">
+      <PanelContent>
         <div className="query-builder__projection__toolbar">
           <button
             className="panel__header__action"
@@ -643,7 +640,7 @@ export const QueryBuilderProjectionPanel = observer(
             <QueryResultModifierModal projectionState={projectionState} />
           </PanelDropZone>
         </div>
-      </div>
+      </PanelContent>
     );
   },
 );