Run query implemented

2025-12-21 01:41:31 +00:00 · 2021-08-04 18:12:41 +05:30
parent 594c4026d5
commit d062c85e94
7 changed files with 488 additions and 169 deletions
--- a/src/Common/EntityValue.tsx
+++ b/src/Common/EntityValue.tsx
@@ -54,7 +54,7 @@ export const EntityValue: FunctionComponent<TableEntityProps> = ({
    <TextField
      label={entityValueLabel && entityValueLabel}
      className="addEntityTextField"
-      id="entityValueId"
+      // id="entityValueId"
      autoFocus
      disabled={isEntityValueDisable}
      type={entityValueType}
--- a/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx
+++ b/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx
@@ -112,6 +112,10 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
    const newEntity: Entities.ITableEntity = await tableDataClient.createDocument(queryTablesTab.collection, entity);
    console.log("🚀 ~ file: AddTableEntityPanel.tsx ~ line 113 ~ submit ~ newEntity", newEntity);
    await tableEntityListViewModel.addEntityToCache(newEntity);
+    console.log(
+      "🚀 ~ file: AddTableEntityPanel.tsx ~ line 116 ~ submit ~ !tryInsertNewHeaders(tableEntityListViewModel, newEntity)",
+      !tryInsertNewHeaders(tableEntityListViewModel, newEntity)
+    );
    if (!tryInsertNewHeaders(tableEntityListViewModel, newEntity)) {
      // tableEntityListViewModel.redrawTableThrottled();
      reloadEntities();
--- a/src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts
+++ b/src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts
@@ -1,6 +1,7 @@
 import * as ko from "knockout";
 import { KeyCodes } from "../../../Common/Constants";
 import { userContext } from "../../../UserContext";
+import { IQueryTableRowsType } from "../../Tabs/QueryTablesTab/QueryTableTabUtils";
 import * as Constants from "../Constants";
 import { getQuotedCqlIdentifier } from "../CqlUtilities";
 import * as DataTableUtilities from "../DataTable/DataTableUtilities";
@@ -141,35 +142,37 @@ export default class QueryBuilderViewModel {
    this.addClauseImpl(example2, 1);
  }

-  public getODataFilterFromClauses = (): string => {
+  public getODataFilterFromClauses = (queryClauses: IQueryTableRowsType[]): string => {
    var filterString: string = "";
-    var treeTraversal = (group: ClauseGroup): void => {
-      for (var i = 0; i < group.children.length; i++) {
-        var currentItem = group.children[i];
+    // var treeTraversal = (queryClauses: IQueryTableRowsType[]): void => {
+    if (queryClauses != undefined) {
+      for (var i = 0; i < queryClauses.length; i++) {
+        var currentItem = queryClauses[i];

-        if (currentItem instanceof QueryClauseViewModel) {
-          var clause = <QueryClauseViewModel>currentItem;
-          this.timestampToValue(clause);
+        // if (currentItem instanceof QueryClauseViewModel) {
+        // var clause = <QueryClauseViewModel>currentItem;
+        this.timestampToValue(currentItem);
        filterString = filterString.concat(
          this.constructODataClause(
-              filterString === "" ? "" : clause.and_or(),
-              this.generateLeftParentheses(clause),
-              clause.field(),
-              clause.type(),
-              clause.operator(),
-              clause.value(),
-              this.generateRightParentheses(clause)
+            filterString === "" ? "" : currentItem.selectedOperation,
+            this.generateLeftParentheses(currentItem),
+            currentItem.selectedField,
+            currentItem.selectedEntityType,
+            currentItem.selectedOperator,
+            currentItem.entityValue,
+            this.generateRightParentheses(currentItem)
          )
        );
-        }
+        // }

-        if (currentItem instanceof ClauseGroup) {
-          treeTraversal(<ClauseGroup>currentItem);
+        // if (currentItem instanceof ClauseGroup) {
+        //   treeTraversal(<ClauseGroup>currentItem);
+        // }
      }
    }
-    };
+    // };

-    treeTraversal(this.queryClauses);
+    // treeTraversal(this.queryClauses);

    return filterString.trim();
  };
@@ -238,7 +241,7 @@ export default class QueryBuilderViewModel {
    return filterString.trim();
  };

-  public getCqlFilterFromClauses = (): string => {
+  public getCqlFilterFromClauses = (queryTableRows: IQueryTableRowsType[]): string => {
    const databaseId = this._queryViewModel.queryTablesTab.collection.databaseId;
    const collectionId = this._queryViewModel.queryTablesTab.collection.id();
    const tableToQuery = `${getQuotedCqlIdentifier(databaseId)}.${getQuotedCqlIdentifier(collectionId)}`;
@@ -300,7 +303,7 @@ export default class QueryBuilderViewModel {
    this.columnOptions(newHeaders.sort(DataTableUtilities.compareTableColumns));
  };

-  private generateLeftParentheses(clause: QueryClauseViewModel): string {
+  private generateLeftParentheses(clause: IQueryTableRowsType): string {
    var result = "";

    if (clause.clauseGroup.isRootGroup || clause.clauseGroup.children.indexOf(clause) !== 0) {
@@ -323,7 +326,7 @@ export default class QueryBuilderViewModel {
    return result;
  }

-  private generateRightParentheses(clause: QueryClauseViewModel): string {
+  private generateRightParentheses(clause: IQueryTableRowsType): string {
    var result = "";

    if (
@@ -495,6 +498,7 @@ export default class QueryBuilderViewModel {
  // adds a new clause to the end of the array
  public addNewClause = (): void => {
    this.addClauseIndex(this.clauseArray().length, null);
+    // this.addClauseIndex(queryTableRows.length, null);
  };

  public onAddClauseKeyDown = (index: number, data: any, event: KeyboardEvent, source: any): boolean => {
@@ -715,18 +719,18 @@ export default class QueryBuilderViewModel {
    //DataTableUtilities.forceRecalculateTableSize();
  }

-  private timestampToValue(clause: QueryClauseViewModel): void {
-    if (clause.isValue()) {
+  private timestampToValue(clause: IQueryTableRowsType): void {
+    if (clause.isValue) {
      return;
-    } else if (clause.isTimestamp()) {
+    } else if (clause.isTimestamp) {
      this.getTimeStampToQuery(clause);
      // } else if (clause.isCustomLastTimestamp()) {
      //     clause.value(`datetime'${CustomTimestampHelper._queryLastTime(clause.customLastTimestamp().lastNumber, clause.customLastTimestamp().lastTimeUnit)}'`);
-    } else if (clause.isCustomRangeTimestamp()) {
-      if (clause.isLocal()) {
-        clause.value(`datetime'${DateTimeUtilities.getUTCDateTime(clause.customTimeValue())}'`);
+    } else if (clause.isCustomRangeTimestamp) {
+      if (clause.isLocal) {
+        clause.entityValue = `datetime'${DateTimeUtilities.getUTCDateTime(clause.customTimeValue)}'`;
      } else {
-        clause.value(`datetime'${clause.customTimeValue()}Z'`);
+        clause.entityValue = `datetime'${clause.customTimeValue}Z'`;
      }
    }
  }
@@ -748,28 +752,28 @@ export default class QueryBuilderViewModel {
    return null;
  }

-  private getTimeStampToQuery(clause: QueryClauseViewModel): void {
-    switch (clause.timeValue()) {
+  private getTimeStampToQuery(clause: IQueryTableRowsType): void {
+    switch (clause.timeValue) {
      case Constants.timeOptions.lastHour:
-        clause.value(`datetime'${CustomTimestampHelper._queryLastDaysHours(0, 1)}'`);
+        clause.entityValue = `datetime'${CustomTimestampHelper._queryLastDaysHours(0, 1)}'`;
        break;
      case Constants.timeOptions.last24Hours:
-        clause.value(`datetime'${CustomTimestampHelper._queryLastDaysHours(0, 24)}'`);
+        clause.entityValue = `datetime'${CustomTimestampHelper._queryLastDaysHours(0, 24)}'`;
        break;
      case Constants.timeOptions.last7Days:
-        clause.value(`datetime'${CustomTimestampHelper._queryLastDaysHours(7, 0)}'`);
+        clause.entityValue = `datetime'${CustomTimestampHelper._queryLastDaysHours(7, 0)}'`;
        break;
      case Constants.timeOptions.last31Days:
-        clause.value(`datetime'${CustomTimestampHelper._queryLastDaysHours(31, 0)}'`);
+        clause.entityValue = `datetime'${CustomTimestampHelper._queryLastDaysHours(31, 0)}'`;
        break;
      case Constants.timeOptions.last365Days:
-        clause.value(`datetime'${CustomTimestampHelper._queryLastDaysHours(365, 0)}'`);
+        clause.entityValue = `datetime'${CustomTimestampHelper._queryLastDaysHours(365, 0)}'`;
        break;
      case Constants.timeOptions.currentMonth:
-        clause.value(`datetime'${CustomTimestampHelper._queryCurrentMonthLocal()}'`);
+        clause.entityValue = `datetime'${CustomTimestampHelper._queryCurrentMonthLocal()}'`;
        break;
      case Constants.timeOptions.currentYear:
-        clause.value(`datetime'${CustomTimestampHelper._queryCurrentYearLocal()}'`);
+        clause.entityValue = `datetime'${CustomTimestampHelper._queryCurrentYearLocal()}'`;
        break;
    }
  }
--- a/src/Explorer/Tables/QueryBuilder/QueryViewModel.tsx
+++ b/src/Explorer/Tables/QueryBuilder/QueryViewModel.tsx
@@ -6,6 +6,7 @@ import { useSidePanel } from "../../../hooks/useSidePanel";
 import { userContext } from "../../../UserContext";
 import { TableQuerySelectPanel } from "../../Panes/Tables/TableQuerySelectPanel/TableQuerySelectPanel";
 import NewQueryTablesTab from "../../Tabs/QueryTablesTab/QueryTablesTab";
+import { IQueryTableRowsType } from "../../Tabs/QueryTablesTab/QueryTableTabUtils";
 import { getQuotedCqlIdentifier } from "../CqlUtilities";
 import * as DataTableUtilities from "../DataTable/DataTableUtilities";
 import TableEntityListViewModel from "../DataTable/TableEntityListViewModel";
@@ -133,12 +134,12 @@ export default class QueryViewModel {
    return this.selectText();
  };

-  private setFilter = (): string => {
+  private setFilter = (queryTableRows: IQueryTableRowsType[]): string => {
    const queryString = this.isEditorActive()
      ? this.queryText()
      : userContext.apiType === "Cassandra"
-      ? this.queryBuilderViewModel().getCqlFilterFromClauses()
-      : this.queryBuilderViewModel().getODataFilterFromClauses();
+      ? this.queryBuilderViewModel().getCqlFilterFromClauses(queryTableRows)
+      : this.queryBuilderViewModel().getODataFilterFromClauses(queryTableRows);
    const filter = queryString;
    this.queryText(filter);
    return this.queryText();
@@ -165,8 +166,12 @@ export default class QueryViewModel {
      notify: "always",
    });

-  public runQuery = (): void => {
-    let filter = this.setFilter();
+  public runQuery = (queryTableRows: IQueryTableRowsType[]): void => {
+    console.log(
+      "🚀 ~ file: QueryViewModel.tsx ~ line 169 ~ QueryViewModel ~ //constructor ~ queryTableRows",
+      queryTableRows
+    );
+    let filter = this.setFilter(queryTableRows);
    if (filter && userContext.apiType !== "Cassandra") {
      filter = filter.replace(/"/g, "'");
    }
--- a/src/Explorer/Tabs/QueryTablesTab/QueryTableEntityClause.tsx
+++ b/src/Explorer/Tabs/QueryTablesTab/QueryTableEntityClause.tsx
@@ -17,6 +17,7 @@ import { IOption } from "./QueryTableTabUtils";
 const dropdownStyles: Partial<IDropdownStyles> = { dropdown: { width: 100 } };

 export interface IQueryTableEntityClauseProps {
+  index: number;
  entityValue: string;
  entityValuePlaceHolder?: string;
  selectedOperator: string;
@@ -39,6 +40,7 @@ export interface IQueryTableEntityClauseProps {
 }

 export const QueryTableEntityClause: FunctionComponent<IQueryTableEntityClauseProps> = ({
+  index,
  entityValue,
  entityValuePlaceHolder,
  selectedOperator,
@@ -88,6 +90,7 @@ export const QueryTableEntityClause: FunctionComponent<IQueryTableEntityClausePr
        </TooltipHost>
        <Checkbox checked={isQueryTableEntityChecked} onChange={onQueryTableEntityCheck} />
        <Dropdown
+          style={{ visibility: index > 0 ? "visible" : "hidden" }}
          selectedKey={selectedOperation}
          onChange={(_event: React.FormEvent<HTMLElement>, selectedOption: IDropdownOption) =>
            onDropdownChange(selectedOption, "selectedOperation")
--- a/src/Explorer/Tabs/QueryTablesTab/QueryTableTabUtils.tsx
+++ b/src/Explorer/Tabs/QueryTablesTab/QueryTableTabUtils.tsx
@@ -1,12 +1,12 @@
-import { IColumn } from "@fluentui/react";
+import { IColumn, Selection } from "@fluentui/react";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import Explorer from "../../Explorer";
 import TableEntityListViewModel from "../../Tables/DataTable/TableEntityListViewModel";
 import * as Entities from "../../Tables/Entities";
+import ClauseGroup from "../../Tables/QueryBuilder/ClauseGroup";
 import QueryViewModel from "../../Tables/QueryBuilder/QueryViewModel";
 import TabsBase from "../TabsBase";
 import NewQueryTablesTab from "./QueryTablesTab";
-
 export interface Button {
  visible: boolean;
  enabled: boolean;
@@ -58,6 +58,9 @@ export interface IQueryTablesTabComponentStates {
  operators: string[];
  selectMessage: string;
  queryTableRows: IQueryTableRowsType[];
+  originalItems: IDocument[];
+  rowSelected: boolean;
+  selection: Selection;
 }

 export interface IQueryTableRowsType {
@@ -75,6 +78,13 @@ export interface IQueryTableRowsType {
  operationOptions: IOption[];
  timestampOptions: IOption[];
  id: string;
+  clauseGroup: ClauseGroup;
+  isLocal: boolean;
+  isTimestamp: boolean;
+  isValue: boolean;
+  isCustomRangeTimestamp: boolean;
+  customTimeValue: string;
+  timeValue: string;
 }

 export const getformattedOptions = (options: Array<string>): IOption[] => {
--- a/src/Explorer/Tabs/QueryTablesTab/QueryTablesTabComponent.tsx
+++ b/src/Explorer/Tabs/QueryTablesTab/QueryTablesTabComponent.tsx
@@ -161,19 +161,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
    this.tableCommands = new TableCommands(this.container);
    this.tableDataClient = this.container.tableDataClient;
    this.tableEntityListViewModel2(new TableEntityListViewModel(this.tableCommands, props.queryTablesTab));
-    // const sampleQuerySubscription = this.tableEntityListViewModel2().items.subscribe(() => {
-    //   if (this.tableEntityListViewModel2().items().length > 0 && userContext.apiType === "Tables") {
-    //     // this.queryViewModel().queryBuilderViewModel().setExample();
-    //     console.log(
-    //       "🚀 ~ file: QueryTablesTab.tsx ~ line 55 ~ QueryTablesTab ~ sampleQuerySubscription ~ this.queryViewModel().queryBuilderViewModel().setExample()"
-    //       // this.queryViewModel().queryBuilderViewModel().setExample()
-    //     );
-    //   }
-    //   sampleQuerySubscription.dispose();
-    // });
-
    const tableEntityListViewModel = new TableEntityListViewModel(this.tableCommands, props.queryTablesTab);
-    // this._queryViewModel = new QueryViewModel(this.props.queryTablesTab);
    const queryBuilderViewModel = new QueryViewModel(this.props.queryTablesTab).queryBuilderViewModel();

    const entityTypeOptions = queryBuilderViewModel.edmTypes();
@@ -219,6 +207,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
      },
      columns: columns,
      items: [],
+      originalItems: [],
      isExpanded: false,
      isEditorActive: false,
      selectedItems: [],
@@ -228,13 +217,15 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
      isCustomRangeTimestamp: false,
      operators: [],
      selectMessage: "",
+      rowSelected: false,
+      selection: this.createSelection(),
      queryTableRows: [
        {
          isQueryTableEntityChecked: false,
          selectedOperator: "=",
-          id: 1,
+          id: "1",
          selectedField: "PartitionKey",
-          selectedOperation: "And",
+          selectedOperation: "",
          entityValue: "",
          selectedEntityType: "String",
          isTimeStampSelected: false,
@@ -244,6 +235,13 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
          entityTypeOptions: getformattedOptions(entityTypeOptions),
          operationOptions: getformattedOptions(operationOptions),
          timestampOptions: getformattedOptions(timestampOptions),
+          clauseGroup: queryBuilderViewModel.queryClauses,
+          isValue: true,
+          isLocal: false,
+          isTimestamp: false,
+          isCustomRangeTimestamp: false,
+          customTimeValue: "",
+          timeValue: "",
        },
      ],
    };
@@ -287,9 +285,9 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
      dropdown: { width: 300 },
    };

-    this.selection = new Selection({
-      onSelectionChanged: this.onItemsSelectionChanged,
-    });
+    // this.selection = new Selection({
+    //   onSelectionChanged: this.onItemsSelectionChanged,
+    // });

    this.buildCommandBarOptions();
  }
@@ -297,82 +295,131 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
  /****************** Constructor Ends */

  componentDidMount(): void {
-    const { tableEntityListViewModel, queryTableRows } = this.state;
-    tableEntityListViewModel.renderNextPageAndupdateCache();
-
+    this.loadEntities();
    setTimeout(() => {
-      // console.log("items > ", this.state.tableEntityListViewModel.cache.data);
-      // console.log("items > ", this.state.tableEntityListViewModel.items());
-      // console.log("items1 > ", this.state.tableEntityListViewModel.headers);
-      this.columns = [];
-      tableEntityListViewModel.headers.map((header) => {
-        this.columns.push({
-          key: header,
-          name: header,
-          minWidth: 100,
-          maxWidth: 200,
-          data: "string",
-          fieldName: header,
-          isResizable: true,
-          isSorted: true,
-          isSortedDescending: false,
-          sortAscendingAriaLabel: "Sorted A to Z",
-          sortDescendingAriaLabel: "Sorted Z to A",
-        });
-      });
-
-      const queryTableRowsClone = [...queryTableRows];
-      queryTableRowsClone[0].fieldOptions = getformattedOptions(tableEntityListViewModel.headers);
-      this.setState({
-        columns: this.columns,
-        operators: this.state.queryViewModel.queryBuilderViewModel().operators(),
-        queryTableRows: queryTableRowsClone,
-        // isValue:
-      });
-
-      setTimeout(() => {
-        // console.log(
-        //   "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 248 ~ QueryTablesTabComponent ~ setTimeout ~ columns",
-        //   this.state.columns
-        // );
-      }, 1000);
-      this.allItems = this.generateDetailsList();
-      this.state.queryViewModel.queryBuilderViewModel().queryClauses.children.map((clause) => {
-        // clause._id
-        this.allQueryTableRows.push({
-          id: clause._id,
-          isQueryTableEntityChecked: false,
-          selectedOperator: clause.operator(),
-          selectedField: clause.field(),
-          selectedEntityType: clause.type(),
-          selectedOperation: clause.and_or(),
-          entityValue: clause.value(),
-          isTimeStampSelected: false,
-          selectedTimestamp: "Last hour",
-          operatorOptions: getformattedOptions(this.state.queryViewModel.queryBuilderViewModel().operators()),
-          fieldOptions: getformattedOptions(tableEntityListViewModel.headers),
-          entityTypeOptions: getformattedOptions(this.state.queryViewModel.queryBuilderViewModel().edmTypes()),
-          operationOptions: getformattedOptions(this.state.queryViewModel.queryBuilderViewModel().clauseRules()),
-          timestampOptions: getformattedOptions(this.state.queryViewModel.queryBuilderViewModel().timeOptions()),
-        });
-        console.log(
-          "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 336 ~ QueryTablesTabComponent ~ this.state.queryViewModel.queryBuilderViewModel ~ clause._id",
-          clause,
-          ", ",
-          clause._id
-        );
-      });
-      console.log(
-        "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 319 ~ QueryTablesTabComponent ~ this.state.queryViewModel.queryBuilderViewModel ~ this.allQueryTableRows",
-        this.allQueryTableRows
-      );
-      this.setState({
-        items: this.allItems,
-        queryTableRows: this.allQueryTableRows,
-      });
+      this.loadFilterExample();
+      // this.setDefaultItemSelection();
    }, 7000);
  }

+  public createSelection = (): Selection => {
+    return new Selection({
+      onSelectionChanged: () => this.onItemsSelectionChanged(),
+      // onSelectionChanged: () => {
+      //   this.setState({ selectedItems: this.onItemsSelectionChanged() });
+      // },
+      getKey: (item: any) => item.key,
+    });
+  };
+
+  public setDefaultItemSelection(): void {
+    const newSelection = this.createSelection();
+    const items: any = this.state.items;
+
+    newSelection.setItems(items);
+    for (let i = 1; i <= 3; i++) {
+      newSelection.setKeySelected(`${i}`, true, false);
+      console.log(" yooo > ", newSelection.setKeySelected(`${i}`, true, false));
+    }
+    this.setState({
+      selection: newSelection,
+      // selectedItems: this.onItemsSelectionChanged(),
+    });
+    console.log(
+      "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 342 ~ QueryTablesTabComponent ~ setDefaultItemSelection ~ selection",
+      this.state.selection,
+      ", ",
+      this.state.selectedItems
+    );
+  }
+
+  //NOT USED. Backup only
+  public originalDidMount(): void {
+    // const { tableEntityListViewModel, queryTableRows } = this.state;
+    // // tableEntityListViewModel.renderNextPageAndupdateCache();
+    // setTimeout(() => {
+    //   //   console.log(
+    //   //     "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 296 ~ QueryTablesTabComponent ~ componentDidMount ~ componentDidMount",
+    //   //     this.state.tableEntityListViewModel.items()
+    //   //   );
+    //   //   // console.log("items > ", this.state.tableEntityListViewModel.cache.data);
+    //   //   // console.log("items > ", this.state.tableEntityListViewModel.items());
+    //   //   // console.log("items1 > ", this.state.tableEntityListViewModel.headers);
+    //   //   this.columns = [];
+    //   //   tableEntityListViewModel.headers.map((header) => {
+    //   //     this.columns.push({
+    //   //       key: header,
+    //   //       name: header,
+    //   //       minWidth: 100,
+    //   //       maxWidth: 200,
+    //   //       data: "string",
+    //   //       fieldName: header,
+    //   //       isResizable: true,
+    //   //       isSorted: true,
+    //   //       isSortedDescending: false,
+    //   //       sortAscendingAriaLabel: "Sorted A to Z",
+    //   //       sortDescendingAriaLabel: "Sorted Z to A",
+    //   //     });
+    //   //   });
+    //   const queryTableRowsClone = [...queryTableRows];
+    //   queryTableRowsClone[0].fieldOptions = getformattedOptions(tableEntityListViewModel.headers);
+    //   this.setState({
+    //     // columns: this.columns,
+    //     operators: this.state.queryViewModel.queryBuilderViewModel().operators(),
+    //     queryTableRows: queryTableRowsClone,
+    //     // isValue:
+    //   });
+    //   //   this.allItems = this.generateDetailsList();
+    //   this.state.queryViewModel
+    //     .queryBuilderViewModel()
+    //     .setExample(
+    //       this.state.tableEntityListViewModel.items()[0].PartitionKey._,
+    //       this.state.tableEntityListViewModel.items()[0].RowKey._
+    //     );
+    //   this.state.queryViewModel.queryBuilderViewModel().queryClauses.children.map((clause) => {
+    //     // clause._id
+    //     this.allQueryTableRows.push({
+    //       id: clause._id,
+    //       isQueryTableEntityChecked: false,
+    //       selectedOperator: clause.operator(),
+    //       selectedField: clause.field(),
+    //       selectedEntityType: clause.type(),
+    //       selectedOperation: clause.and_or(),
+    //       entityValue: clause.value(),
+    //       isTimeStampSelected: false,
+    //       selectedTimestamp: "Last hour",
+    //       operatorOptions: getformattedOptions(this.state.queryViewModel.queryBuilderViewModel().operators()),
+    //       fieldOptions: getformattedOptions(tableEntityListViewModel.headers),
+    //       entityTypeOptions: getformattedOptions(this.state.queryViewModel.queryBuilderViewModel().edmTypes()),
+    //       operationOptions: getformattedOptions(this.state.queryViewModel.queryBuilderViewModel().clauseRules()),
+    //       timestampOptions: getformattedOptions(this.state.queryViewModel.queryBuilderViewModel().timeOptions()),
+    //       clauseGroup: clause.clauseGroup,
+    //       isValue: clause.isValue(),
+    //       isLocal: clause.isLocal(),
+    //       isCustomRangeTimestamp: clause.isCustomRangeTimestamp(),
+    //       isTimestamp: clause.isTimestamp(),
+    //       customTimeValue: clause.customTimeValue(),
+    //       timeValue: clause.timeValue(),
+    //     });
+    //     console.log(
+    //       "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 336 ~ QueryTablesTabComponent ~ this.state.queryViewModel.queryBuilderViewModel ~ clause._id",
+    //       clause,
+    //       ", ",
+    //       clause._id
+    //     );
+    //   });
+    //   console.log(
+    //     "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 319 ~ QueryTablesTabComponent ~ this.state.queryViewModel.queryBuilderViewModel ~ this.allQueryTableRows",
+    //     this.allQueryTableRows
+    //   );
+    //   this.setState({
+    //     // items: this.allItems,
+    //     // originalItems: this.allItems,
+    //     queryTableRows: this.allQueryTableRows,
+    //     // queryText: this.state.queryViewModel.queryText(),
+    //   });
+    // }, 7000);
+  }
  // public async test(): Promise<void> {
  //   await this.state.tableEntityListViewModel.renderNextPageAndupdateCache().then(() => {
  //     console.log("inside > ", this.state.tableEntityListViewModel.items());
@@ -390,32 +437,179 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
    });
  }

-  private onItemsSelectionChanged = () => {
+  private onItemsSelectionChanged = (): Entities.ITableEntity[] => {
    // console.log(
    //   "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 280 ~ QueryTablesTabComponent ~ onItemsSelectionChanged",
    //   Object.values(this.selection.getSelection()[0])[2],
    //   ", ",
    //   this.selection.getSelection()[0]["Timestamp"]
    // );
-    // console.log(
-    //   "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 338 ~ QueryTablesTabComponent ~ this.selection.getSelection().length",
-    //   this.selection.getSelection().length
-    // );
-    if (this.selection.getSelection().length > 0) {
-      const a = this.state.tableEntityListViewModel
+    console.log(
+      "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 338 ~ QueryTablesTabComponent ~ this.selection.getSelection().length",
+      this.state.selection.getSelection().length,
+      ", ",
+      this.state.selection.getSelection()
+    );
+    let selectedItems: Entities.ITableEntity[];
+    if (this.state.selection.getSelection().length > 0) {
+      selectedItems = this.state.tableEntityListViewModel
        .items()
-        .filter((item) => item["Timestamp"]._ === Object.values(this.selection.getSelection()[0])[2]);
-      // console.log("🚀 ~ file: QueryTablesTabComponent.tsx ~ line 293 ~ QueryTablesTabComponent ~ a", a);
+        .filter((item) => item["Timestamp"]._ === Object.values(this.state.selection.getSelection()[0])[2]);
+      // console.log("🚀 ~ file: QueryTablesTabComponent.tsx ~ line 293 ~ QueryTablesTabComponent ~ selectedItems", selectedItems);

      this.setState({
        // selectionCount: this._selection.getSelectedCount(),
-        selectedItems: a,
+        selectedItems: selectedItems,
+        rowSelected: true,
      });
    }
+    return selectedItems;
  };

+  public loadFilterExample(): void {
+    const { tableEntityListViewModel, queryTableRows } = this.state;
+    const queryTableRowsClone = [...queryTableRows];
+    queryTableRowsClone[0].fieldOptions = getformattedOptions(tableEntityListViewModel.headers);
+    this.setState({
+      operators: this.state.queryViewModel.queryBuilderViewModel().operators(),
+      queryTableRows: queryTableRowsClone,
+    });
+
+    this.state.queryViewModel
+      .queryBuilderViewModel()
+      .setExample(tableEntityListViewModel.items()[0].PartitionKey._, tableEntityListViewModel.items()[0].RowKey._);
+    this.state.queryViewModel.queryBuilderViewModel().queryClauses.children.map((clause, index) => {
+      this.allQueryTableRows.push({
+        id: clause._id,
+        isQueryTableEntityChecked: false,
+        selectedOperator: clause.operator(),
+        selectedField: clause.field(),
+        selectedEntityType: clause.type(),
+        selectedOperation: index === 0 ? "" : clause.and_or(),
+        entityValue: clause.value(),
+        isTimeStampSelected: false,
+        selectedTimestamp: "Last hour",
+        operatorOptions: getformattedOptions(this.state.queryViewModel.queryBuilderViewModel().operators()),
+        fieldOptions: getformattedOptions(tableEntityListViewModel.headers),
+        entityTypeOptions: getformattedOptions(this.state.queryViewModel.queryBuilderViewModel().edmTypes()),
+        operationOptions: getformattedOptions(this.state.queryViewModel.queryBuilderViewModel().clauseRules()),
+        timestampOptions: getformattedOptions(this.state.queryViewModel.queryBuilderViewModel().timeOptions()),
+        clauseGroup: clause.clauseGroup,
+        isValue: clause.isValue(),
+        isLocal: clause.isLocal(),
+        isCustomRangeTimestamp: clause.isCustomRangeTimestamp(),
+        isTimestamp: clause.isTimestamp(),
+        customTimeValue: clause.customTimeValue(),
+        timeValue: clause.timeValue(),
+      });
+      console.log(
+        "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 336 ~ QueryTablesTabComponent ~ this.state.queryViewModel.queryBuilderViewModel ~ clause._id",
+        clause,
+        ", ",
+        clause._id
+      );
+    });
+    console.log(
+      "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 319 ~ QueryTablesTabComponent ~ this.state.queryViewModel.queryBuilderViewModel ~ this.allQueryTableRows",
+      this.allQueryTableRows
+    );
+    this.setState({
+      queryTableRows: this.allQueryTableRows,
+    });
+  }
+
+  public loadEntities(): void {
+    const { tableEntityListViewModel } = this.state;
+    tableEntityListViewModel.renderNextPageAndupdateCache();
+
+    setTimeout(() => {
+      console.log(
+        "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 296 ~ QueryTablesTabComponent ~ componentDidMount ~ componentDidMount",
+        this.state.tableEntityListViewModel.items()
+      );
+
+      this.columns = [];
+      tableEntityListViewModel.headers.map((header) => {
+        this.columns.push({
+          key: header,
+          name: header,
+          minWidth: 100,
+          maxWidth: 200,
+          data: "string",
+          fieldName: header,
+          isResizable: true,
+          isSorted: true,
+          isSortedDescending: false,
+          sortAscendingAriaLabel: "Sorted A to Z",
+          sortDescendingAriaLabel: "Sorted Z to A",
+        });
+      });
+
+      this.setState({
+        columns: this.columns,
+      });
+
+      this.allItems = this.generateDetailsList();
+
+      this.setState({
+        items: this.allItems,
+        originalItems: this.allItems,
+        queryText: this.state.queryViewModel.queryText(),
+      });
+    }, 7000);
+  }
+
+  public generateDetailsList(): IDocument[] {
+    // const items: IDocument[] = [];
+    //eslint-disable-next-line
+    const items: any[] = [];
+    //eslint-disable-next-line
+    let obj: any = undefined;
+    // const newColumns = [];
+    // const compare = ["PartitionKey", "RowKey", "Timestamp", "_rid", "_self", "_etag", "_attachments"];
+
+    console.log(
+      "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 582 ~ QueryTablesTabComponent ~ this.state.tableEntityListViewModel.items ~ this.state.tableEntityListViewModel.items()",
+      this.state.tableEntityListViewModel.items()
+    );
+    this.state.tableEntityListViewModel.items().map((item) => {
+      // console.log("generateDetailsList > ", item["PartitionKey"]._);
+      this.columns.map((col) => {
+        // console.log(
+        //   "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 403 ~ QueryTablesTabComponent ~ this.columns.map ~ col.name",
+        //   col.name
+        // );
+        if (item[col.name]) {
+          // console.log("Data > ", item[col.name]._);
+          obj = { ...obj, ...{ [col.name]: item[col.name]._ } };
+        }
+      });
+      items.push(obj);
+    });
+    console.log(
+      "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 814 ~ QueryTablesTabComponent ~ generateDetailsList ~ items",
+      items
+    );
+    // this.state.queryViewModel
+    //   .queryBuilderViewModel()
+    //   .setExample(
+    //     this.state.tableEntityListViewModel.items()[0].PartitionKey._,
+    //     this.state.tableEntityListViewModel.items()[0].RowKey._
+    //   );
+
+    // console.log(
+    //   "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 383 ~ QueryTablesTabComponent ~ this.state.tableEntityListViewModel.items ~ items",
+    //   this.state.queryViewModel.queryBuilderViewModel().queryClauses.children
+    // );
+    return items;
+  }
+
  public reloadEntities(): void {
-    this.componentDidMount();
+    console.log(
+      "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 423 ~ QueryTablesTabComponent ~ reloadEntities ~ reloadEntities"
+    );
+    // this.componentDidMount();
+    this.loadEntities();
    // console.log(
    //   "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 349 ~ QueryTablesTabComponent ~ addEntity ~ addedEntity",
    //   addedEntity,
@@ -498,6 +692,72 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
    }
  };

+  public runQuery(queryTableRows: IQueryTableRowsType[]): void {
+    this.state.queryViewModel.runQuery(queryTableRows);
+    if (queryTableRows.length !== 0) {
+      console.log(
+        "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 507 ~ QueryTablesTabComponent ~ runQuery ~ queryTableRows",
+        queryTableRows
+      );
+      let exp: string;
+      queryTableRows.map((row, index) => {
+        console.log(
+          "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 508 ~ QueryTablesTabComponent ~ runQuery ~ row",
+          row
+        );
+        const operation = row.selectedOperation === "And" ? " && " : " || ";
+        const operator = this.getOperator(row.selectedOperator);
+        if (index === 0) {
+          exp = "row['" + row.selectedField + "'] " + operator + "'" + row.entityValue + "'";
+        } else {
+          exp = exp + operation + "row['" + row.selectedField + "'] " + operator + "'" + row.entityValue + "'";
+        }
+      });
+      console.log(
+        "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 519 ~ QueryTablesTabComponent ~ queryTableRows.map ~ exp",
+        exp
+      );
+      const filteredItems = this.state.originalItems.filter((row) => eval(exp));
+      console.log(
+        "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 526 ~ QueryTablesTabComponent ~ runQuery ~ newRows",
+        filteredItems
+      );
+      this.setState({
+        queryText: this.state.queryViewModel.queryText(),
+        items: filteredItems,
+      });
+    } else {
+      this.setState({
+        queryText: this.state.queryViewModel.queryText(),
+        items: this.state.originalItems,
+      });
+    }
+  }
+
+  public getOperator(operator: string): string {
+    let result = "";
+    switch (operator) {
+      case "=":
+        result = " === ";
+        break;
+      case ">":
+        result = " > ";
+        break;
+      case "<":
+        result = " < ";
+        break;
+      case ">=":
+        result = " >= ";
+        break;
+      case "<=":
+        result = " <= ";
+        break;
+      default:
+        result = " === ";
+    }
+    return result;
+  }
+
  protected getTabsButtons(): CommandButtonComponentProps[] {
    const buttons: CommandButtonComponentProps[] = [];
    if (this.state.queryBuilderButton.visible) {
@@ -533,7 +793,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
      buttons.push({
        iconSrc: ExecuteQueryIcon,
        iconAlt: label,
-        onCommandClick: () => this.state.queryViewModel.runQuery(),
+        onCommandClick: () => this.runQuery(this.state.queryTableRows),
        commandButtonLabel: label,
        ariaLabel: label,
        hasPopup: false,
@@ -586,7 +846,8 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
    this.props.tabsBaseInstance.updateNavbarWithTabsButtons();
  }

-  public generateDetailsList(): IDocument[] {
+  //NOT USED. Backup only
+  public originalGenerateDetailsList(): IDocument[] {
    // const items: IDocument[] = [];
    //eslint-disable-next-line
    const items: any[] = [];
@@ -602,10 +863,10 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
    this.state.tableEntityListViewModel.items().map((item) => {
      // console.log("generateDetailsList > ", item["PartitionKey"]._);
      this.columns.map((col) => {
-        // console.log(
-        //   "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 403 ~ QueryTablesTabComponent ~ this.columns.map ~ col.name",
-        //   col.name
-        // );
+        console.log(
+          "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 403 ~ QueryTablesTabComponent ~ this.columns.map ~ col.name",
+          col.name
+        );
        if (item[col.name]) {
          // console.log("Data > ", item[col.name]._);
          obj = { ...obj, ...{ [col.name]: item[col.name]._ } };
@@ -613,6 +874,10 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
      });
      items.push(obj);
    });
+    console.log(
+      "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 814 ~ QueryTablesTabComponent ~ generateDetailsList ~ items",
+      items
+    );
    this.state.queryViewModel
      .queryBuilderViewModel()
      .setExample(
@@ -620,10 +885,10 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
        this.state.tableEntityListViewModel.items()[0].RowKey._
      );

-    console.log(
-      "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 383 ~ QueryTablesTabComponent ~ this.state.tableEntityListViewModel.items ~ items",
-      this.state.queryViewModel.queryBuilderViewModel().queryClauses.children
-    );
+    // console.log(
+    //   "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 383 ~ QueryTablesTabComponent ~ this.state.tableEntityListViewModel.items ~ items",
+    //   this.state.queryViewModel.queryBuilderViewModel().queryClauses.children
+    // );
    return items;
  }

@@ -648,6 +913,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
      isEditorActive: false,
    });
  }
+
  private onQueryTableEntityCheck = (index: number): void => {
    const { queryTableRows } = this.state;
    const cloneQueryTableRows: IQueryTableRowsType[] = [...queryTableRows];
@@ -682,24 +948,49 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
  };

  onAddNewClause = (): void => {
-    const { queryTableRows } = this.state;
+    const { queryTableRows, queryViewModel, tableEntityListViewModel } = this.state;
+    this.state.queryViewModel.queryBuilderViewModel().addNewClause();
+    console.log(
+      "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 696 ~ QueryTablesTabComponent ~ this.state ~ onAddNewClause",
+      this.state.queryViewModel.queryBuilderViewModel().queryClauses.children[
+        this.state.queryViewModel.queryBuilderViewModel().queryClauses.children.length - 1
+      ],
+      ", ",
+      this.state.queryViewModel.queryBuilderViewModel().queryClauses.children,
+      ", ",
+      this.state.queryViewModel.queryBuilderViewModel().queryClauses.children.length
+    );
+    const newClause = this.state.queryViewModel.queryBuilderViewModel().queryClauses.children[
+      this.state.queryViewModel.queryBuilderViewModel().queryClauses.children.length - 1
+    ];
    const cloneQueryTableRows: IQueryTableRowsType[] = [...queryTableRows];
    cloneQueryTableRows.splice(cloneQueryTableRows.length, 0, {
      isQueryTableEntityChecked: false,
      selectedOperator: "=",
-      operatorOptions: queryTableRows[0].operatorOptions,
+      operatorOptions: getformattedOptions(queryViewModel.queryBuilderViewModel().operators()),
      // id: cloneQueryTableRows.length + 1,
-      id: "newRow",
+      id: newClause._id,
      selectedField: "PartitionKey",
-      fieldOptions: queryTableRows[0].fieldOptions,
-      entityTypeOptions: queryTableRows[0].entityTypeOptions,
+      fieldOptions: getformattedOptions(tableEntityListViewModel.headers),
+
+      entityTypeOptions: getformattedOptions(queryViewModel.queryBuilderViewModel().edmTypes()),
+
      selectedEntityType: "String",
-      operationOptions: queryTableRows[0].operationOptions,
+      operationOptions: getformattedOptions(queryViewModel.queryBuilderViewModel().clauseRules()),
+      // operationOptions: queryTableRows[0].operationOptions,
      selectedOperation: "And",
      entityValue: "",
      isTimeStampSelected: false,
-      timestampOptions: queryTableRows[0].timestampOptions,
+      timestampOptions: getformattedOptions(queryViewModel.queryBuilderViewModel().timeOptions()),
+      // timestampOptions: queryTableRows[0].timestampOptions,
      selectedTimestamp: "Last hour",
+      clauseGroup: newClause.clauseGroup,
+      isValue: newClause.isValue(),
+      isLocal: newClause.isLocal(),
+      isCustomRangeTimestamp: newClause.isCustomRangeTimestamp(),
+      isTimestamp: newClause.isTimestamp(),
+      customTimeValue: newClause.customTimeValue(),
+      timeValue: newClause.timeValue(),
    });
    this.setState({ queryTableRows: cloneQueryTableRows });
  };
@@ -782,6 +1073,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
                <>
                  {queryTableRows.map((queryTableRow, index) => (
                    <QueryTableEntityClause
+                      index={index}
                      key={queryTableRow.id}
                      isQueryTableEntityChecked={queryTableRow.isQueryTableEntityChecked}
                      selectedOperator={queryTableRow.selectedOperator}
@@ -914,7 +1206,8 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
            selectionMode={SelectionMode.single}
            layoutMode={DetailsListLayoutMode.justified}
            compact={true}
-            selection={this.selection}
+            selection={this.state.selection}
+            selectionPreservedOnEmptyClick={true}
          />
        </div>
      </div>