@spectric/ui 0.0.4

package/src/components/query_bar/QueryBar.ts

@@ -0,0 +1,378 @@
+import { html, LitElement, PropertyValues } from "lit";
+import * as kuery from "./querylanguage/kuery"
+import { customElement, property, query, queryAsync, state } from "lit/decorators.js";
+import { SpectricInput } from "../input";
+import { JsonObject } from "./types";
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from "../types";
+import "./QueryBar.css"
+import { DialogElement } from "../dialog";
+import { createRef, ref } from "lit/directives/ref.js";
+import { SpectricButton } from "../Button";
+export type FieldTypes = {
+  name: string;
+  type: "string" | "number" | "boolean"
+  format?: "date-time"
+}
+type SuggestionType = 'conjunction' | "field" | 'operator' | 'value'
+type Suggestion = {
+  fieldName: string
+  end: number
+  prefix: string
+  start: number
+  suffix: string
+  suggestionTypes: (SuggestionType)[]
+  text: string
+  type: "cursor"
+}
+export enum SupportedLanguages {
+  MONGO = "toMongo",
+  CQL = "toCql",
+  DSL = "toDSL",
+  AST = "AST"
+}
+type SupportedLanguagesTypes = `${SupportedLanguages}`
+interface QueryEventMap {
+  "change": (event: CustomEvent<string | kuery.KueryNode | JsonObject>) => void;
+}
+
+export interface IQueryProps {
+  /**
+   * The output of the query in a specific format
+   */
+  outputLanguage: SupportedLanguagesTypes;
+  /**
+   * The output of the query
+   */
+  value: string;
+  /**
+   * Fields that are used for the auto complete
+   */
+  fields: FieldTypes[];
+  /**
+   * Callback that will provide values for specific fields
+   */
+  getValuesForField: (field: string, text: string) => Promise<string[]>;
+}
+type LabelValue = {
+  label?: string;
+  value: string;
+}
+type Completion = LabelValue & {
+  start: number;
+  end: number;
+  type: SuggestionType
+  onSelect?: () => Promise<string | undefined | number>
+}
+const NumberOperators: Record<string, LabelValue> = {
+  "eq": { value: " : ", label: " equals some value" },
+  "gt": { value: " > ", label: " is greater than some value" },
+  "lt": { value: " < ", label: " is less than some value" },
+  "gte": { value: " >= ", label: " is greater than or equal to some value" },
+  "lte": { value: " <= ", label: " is less than or equal to some value" }
+}
+const StringOperators: Record<string, LabelValue> = {
+  "eq": { value: ": ", label: " equals some value" },
+  "exists": { value: ": *", label: " exists in any form" }
+}
+const BoolOperators: LabelValue[] = [{ value: ": true", label: " value is true" },
+{ value: ": false", label: "value is false" }
+]
+//Date operators are the same as number but we want a string value
+const DateOperators: Record<string, LabelValue> = Object.fromEntries(Object.entries(NumberOperators).map(([key, labelValue]) => [key, { value: labelValue.value, label: (labelValue.label || "").replace("value", "date-time") }]))
+/**
+ * The Query component will take Opensearch Dashboard Query language and transform it into various outputs
+ */
+@customElement('spectric-query')
+export class SpectricQuery extends LitElement implements IQueryProps {
+  private uuid: string;
+  constructor() {
+    super()
+    this.uuid = crypto.randomUUID()
+  }
+  protected createRenderRoot(): HTMLElement | DocumentFragment {
+    return this
+  }
+
+  /**
+  * The internal value.
+  */
+  protected _value: string = '';
+  private suggestion?: Suggestion;
+  /**
+   * The value of the input.
+   */
+  @property({ type: String, reflect: true })
+  get value() {
+    //pull directly from the input
+    if (this._input) {
+      return String(this._input.value)
+    }
+    // but before then _value will work fine
+    return this._value;
+  }
+
+  set value(value) {
+    const oldValue = this._value;
+    this._value = value;
+    this.requestUpdate('value', oldValue);
+    // we set the value directly on the input (when available)
+    // so that programatic manipulation updates the UI correctly
+    if (this._input) {
+      this._input.value = String(value);
+    }
+  }
+  @property({ type: String, reflect: true })
+  outputLanguage: SupportedLanguagesTypes = "AST";
+  @state()
+  private completions: Completion[] = [];
+  @state()
+  private completionIndex = 0;
+  @property({ type: Array, reflect: true })
+  fields: FieldTypes[] = [];
+
+  @query(".autocomplete")
+  _autocomplete?: HTMLDivElement
+
+  @queryAsync(".autocomplete")
+  //@ts-expect-error
+  _asyncAutocomplete: Promise<HTMLDivElement>
+
+  /**
+  * The underlying input element
+  */
+  @query('spectric-input')
+  protected _input!: SpectricInput;
+  _parseQuery = (e: InputEvent | undefined = undefined) => {
+    let ast;
+    if (this.value == "") {
+      return
+    }
+    try {
+      if (e && e.data == "(") {
+        //Auto close parentheses or parsing and suggestions fail
+        this.value = this.value + " )"
+        this._input.setSelectionRange(this.value.length - 2, this.value.length - 2)
+      }
+      let value = this.value;
+      if (this._input.selectionStart !== null) {
+        value = value.substring(0, this._input.selectionStart) + "@kuery-cursor@" + value.substring(this._input.selectionStart)
+      }
+      //FIXME: make auto complete work well.
+      let suggestions = kuery.parse(value, { parseCursor: true, cursorSymbol: "@kuery-cursor@", allowLeadingWildcards: false }) as unknown as Suggestion;
+      this.autoComplete(suggestions)
+
+      ast = kuery.parse(this.value, { allowLeadingWildcards: false });
+    } catch (e: any) {
+      // this.completions = []
+      // this._input.invalid = true;
+      // let [expect, _, arrow] = e.message.split("\n")
+      // this._input.invalidText = html`&#160;&#160;${arrow} ${expect}`;
+      return
+    }
+    let output
+    if (this.outputLanguage == "AST") {
+      output = ast
+    } else {
+      output = kuery[this.outputLanguage](ast, this.fields)
+    }
+    let event = new CustomEvent("change", { detail: output })
+    this.dispatchEvent(event)
+  }
+
+  getValuesForField = async (field: string, text: string): Promise<string[]> => {
+    console.log("getValuesForField isn't set no values returned", field, text)
+    return []
+  }
+  async autoComplete(suggestion: Suggestion) {
+    this.completions = []
+    if (suggestion.type !== "cursor") {
+      return
+    }
+    let completions = []
+    this.suggestion = suggestion
+    let { start, end } = suggestion
+    for (let type of suggestion.suggestionTypes) {
+      if (type == "conjunction" && suggestion.text.endsWith(' ')) {
+        completions.push(...["and ", "or "].map(value => ({ type, value, start: end, end: end })))
+      }
+      if (type === "field") {
+        let fieldCompletions = this.fields.filter(field => field.name.includes(suggestion.fieldName) || field.name.includes(suggestion.prefix)).map(f => {
+          return [{ type, value: f.name, start, end }]
+        }).flat()
+        completions.push(...fieldCompletions)
+      }
+      if (type === "operator") {
+        let fieldType = this.fields.find(field => field.name === suggestion.fieldName);
+        if (fieldType) {
+          if (fieldType.type === "number") {
+            completions.push(...Object.values(NumberOperators).map(value => ({ type, ...value, start: end, end: end })))
+          } else if (fieldType.type === "string") {
+            if (fieldType.format === "date-time") {
+              completions.push(...Object.values(DateOperators).map(value => ({
+                type, ...value, start: end, end: end, onSelect: async () => {
+                  let values = await this.getValuesForField(suggestion.fieldName, suggestion.prefix);
+                  if (values.length === 0) {
+                    values = ["now-1m", "now-1d", "now-1M",]
+                  }
+                  let value: string | undefined;
+                  let buttonRef = createRef<SpectricButton>()
+                  await new Promise((resolve) => {
+                    let dialog = DialogElement.display({}, html`
+                    <div class="query-bar-date-quick-select">
+                    ${values.map(v => html`<a href="#" @click=${(e: MouseEvent) => {
+                      e.preventDefault()
+                      value = `"${v}"`;
+                      resolve(value); dialog.open = false
+                    }}>${v}</a>`)}
+                    </div>
+                  <spectric-input variant="datetime-local" @change=${(e: any) => {
+                        if (!e.target) {
+                          return
+                        }
+                        let date = (new Date(e.target.value + ":00.000Z")).toISOString()
+                        value = `"${date}"`
+                        buttonRef.value!.disabled = value === undefined
+                      }}></spectric-input>
+              <spectric-button ${ref(buttonRef)} .disabled=${true} @click=${() => { resolve(value); dialog.open = false }}>Submit</spectric-button>
+              `)
+                  })
+                  return value
+                }
+              })))
+            } else {
+              completions.push(...Object.values(StringOperators).map(value => ({ type, ...value, start: end, end: end })))
+            }
+          } else if (fieldType.type === "boolean") {
+            completions.push(...BoolOperators.map(value => ({ type, ...value, start: end, end: end })))
+          }
+        }
+      }
+      if (type === "value") {
+        let fieldType = this.fields.find(field => field.name === suggestion.fieldName);
+        if (fieldType && fieldType.type == "boolean") {
+          completions.push({ type, value: "true", start, end }, { type, value: "false", start, end })
+        } else {
+          console.log(`invoke callback to get values for ${suggestion.fieldName}`)
+          let values = await this.getValuesForField(suggestion.fieldName, suggestion.prefix);
+          if (fieldType?.type === "string") {
+            //quote the values
+            values = values.map(v => `"${v}"`)
+          }
+          completions.push(...values.map(value => ({ type, value, start, end })))
+        }
+
+      }
+    }
+    this.completions = completions
+    if (this.completions.length && this._autocomplete) {
+      let { width } = this._input.getBoundingClientRect();
+      this._autocomplete.showPopover();
+      this._autocomplete.style.width = `${width - 15}px`;
+    }
+  }
+  protected updated(changed: PropertyValues): void {
+    if (changed.has("outputLanguage")) {
+      this._parseQuery()
+    }
+  }
+  _selectCompletion = async () => {
+    if (!this.suggestion) {
+      return
+    }
+    let completion = this.completions[this.completionIndex]
+
+    let prefix = this.value.substring(0, completion.start) +
+      completion.value
+    let insertIndex = prefix.length
+    let afterStart = this.value.substring(completion.end)
+    if (completion.value.includes(afterStart)) {
+      this.value = prefix
+    } else {
+      this.value = prefix + this.value.substring(completion.end)
+    }
+    this._input.setSelectionRange(insertIndex, insertIndex)
+    if (completion.onSelect) {
+      let value = await completion.onSelect()
+      if (value !== undefined) {
+        this.value += value
+      }
+    }
+    this.completionIndex = 0;
+    this.completions = []
+    this._parseQuery()
+  }
+  _handleArrows = (e: KeyboardEvent) => {
+    if (e.key === "Escape") {
+      this.completions = []; //Escape closes the popover toplayer lets ensure the completions aren't selectable
+    }
+    if (e.key == "ArrowLeft" || e.key === "ArrowRight") {
+      setTimeout(this._parseQuery, 100)
+    }
+    if (!this.completions.length) {
+      return
+    }
+    if (["ArrowUp", "ArrowDown", 'Enter', "Tab"].includes(e.key) && this.suggestion) {
+      e.preventDefault();
+      if (e.key === "ArrowDown" || e.key === "Tab") {
+        this.completionIndex += 1;
+        if (this.completionIndex > this.completions.length - 1) {
+          this.completionIndex = 0
+        }
+      }
+      if (e.key === "ArrowUp") {
+        this.completionIndex -= 1;
+        if (this.completionIndex < 0) {
+          this.completionIndex = this.completions.length - 1
+        }
+      }
+
+      this._asyncAutocomplete?.then(element => {
+        let active = element.querySelector(".option.active");
+        if (active) {
+          active.scrollIntoView({ block: "nearest" })
+        }
+      })
+
+      if (e.key === "Enter") {
+        this._selectCompletion()
+      }
+    }
+  }
+  protected render() {
+    return html`
+      <spectric-input style=${`anchor-name:--${this.uuid};`} autocomplete="off" @input=${this._parseQuery} @keydown=${this._handleArrows}></spectric-input>
+      <div class="autocomplete" popover style=${`position-anchor: --${this.uuid};`}>
+      ${this.completions.map((option: Completion, index) =>
+      html`<div @click=${() => {
+        this.completionIndex = index;
+        this._selectCompletion()
+      }} class=${this.completionIndex == index ? "option active" : "option"}><span class="optiontype ${option.type}">${option.type}</span> <span class="value">${option.value}</span> <span class="label">${option.label}</span></span> </div></div>`
+    )}
+      </div>`
+  }
+}
+
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "spectric-query": HTMLElementTagWithEvents<SpectricQuery, QueryEventMap>
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      /**
+       * {@link SpectricQuery}
+       */
+      "spectric-query": ReactElementWithPropsAndEvents<SpectricQuery, IQueryProps, QueryEventMap>
+    }
+  }
+  namespace React {
+    namespace JSX {
+      interface IntrinsicElements {
+        /**
+         * {@link SpectricQuery}
+         */
+        "spectric-query": ReactElementWithPropsAndEvents<SpectricQuery, IQueryProps, QueryEventMap>;
+      }
+    }
+  }
+}

package/src/components/query_bar/index.ts

@@ -0,0 +1,2 @@
+export * from "./QueryBar"
+export * from "./types"