@prismiq/react 0.1.0 → 0.1.1

package/dist/{chunk-UPYINBZU.js → chunk-ET7GCREP.js}

@@ -1,5 +1,5 @@
 import { useTheme } from './chunk-T6STUE7E.js';
-import { useFocusTrap, parseColumnRef } from './chunk-EX74SI67.js';
+import { useFocusTrap, parseColumnRef } from './chunk-LBE6GIBC.js';
 import { forwardRef, useState, useRef, useCallback, useEffect, isValidElement, cloneElement, createContext, useContext, useLayoutEffect, Component, useMemo } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
@@ -2325,6 +2325,9 @@ var PrismiqClient = class {
   }
   /**
    * Make an authenticated request to the API.
+   *
+   * @param path - API path (starting with /)
+   * @param options - Fetch options including signal for cancellation
    */
   async request(path, options = {}) {
     const url = `${this.endpoint}${path}`;
@@ -2470,6 +2473,17 @@ var PrismiqClient = class {
     const result = await this.request(path);
     return result.values;
   }
+  /**
+   * Get data source metadata including display names and descriptions.
+   *
+   * Returns metadata for all exposed tables/views that can be used
+   * to show user-friendly names in the UI instead of raw table names.
+   *
+   * @returns Array of data source metadata.
+   */
+  async getDataSources() {
+    return this.request("/data-sources");
+  }
   // ============================================================================
   // Query Methods
   // ============================================================================
@@ -2503,12 +2517,14 @@ var PrismiqClient = class {
    *
    * @param query - The query definition to execute.
    * @param bypassCache - If true, bypass cache and re-execute query.
+   * @param signal - Optional AbortSignal for cancellation.
    * @returns The query result with all rows and cache metadata.
    */
-  async executeQuery(query, bypassCache = false) {
+  async executeQuery(query, bypassCache = false, signal) {
     return this.request("/query/execute", {
       method: "POST",
-      body: JSON.stringify({ query, bypass_cache: bypassCache })
+      body: JSON.stringify({ query, bypass_cache: bypassCache }),
+      signal
     });
   }
   /**
@@ -2861,6 +2877,7 @@ function AnalyticsProvider({
   }
   const client = clientRef.current;
   const [schema, setSchema] = useState(null);
+  const [dataSources, setDataSources] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
   const hasFetchedSchemaRef = useRef(false);
@@ -2878,8 +2895,13 @@ function AnalyticsProvider({
     setIsLoading(true);
     setError(null);
     try {
-      const fetchedSchema = await client.getSchema();
+      const [fetchedSchema, fetchedDataSources] = await Promise.all([
+        client.getSchema(),
+        client.getDataSources().catch(() => [])
+        // Non-critical, fallback to empty
+      ]);
       setSchema(fetchedSchema);
+      setDataSources(fetchedDataSources);
       onSchemaLoadRef.current?.(fetchedSchema);
     } catch (err) {
       const schemaError = err instanceof Error ? err : new Error(String(err));
@@ -2901,6 +2923,7 @@ function AnalyticsProvider({
     () => ({
       client,
       schema,
+      dataSources,
       isLoading,
       error,
       refetchSchema,
@@ -2908,7 +2931,7 @@ function AnalyticsProvider({
       userId,
       schemaName
     }),
-    [client, schema, isLoading, error, refetchSchema, tenantId, userId, schemaName]
+    [client, schema, dataSources, isLoading, error, refetchSchema, tenantId, userId, schemaName]
   );
   const callbacks = useMemo(
     () => ({
@@ -2929,22 +2952,44 @@ function useAnalytics() {
   return context;
 }
 function useSchema() {
-  const { schema, isLoading, error } = useAnalytics();
+  const { schema, dataSources, isLoading, error } = useAnalytics();
   const tables = useMemo(() => schema?.tables ?? [], [schema]);
   const relationships = useMemo(() => schema?.relationships ?? [], [schema]);
+  const dataSourceMap = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const ds of dataSources) {
+      map.set(ds.table, ds);
+    }
+    return map;
+  }, [dataSources]);
   const getTable = useCallback(
     (name) => {
       return tables.find((table) => table.name === name);
     },
     [tables]
   );
+  const getDisplayName = useCallback(
+    (tableName) => {
+      return dataSourceMap.get(tableName)?.title ?? tableName;
+    },
+    [dataSourceMap]
+  );
+  const getDescription = useCallback(
+    (tableName) => {
+      return dataSourceMap.get(tableName)?.subtitle ?? "";
+    },
+    [dataSourceMap]
+  );
   return {
     schema,
     tables,
     relationships,
+    dataSources,
     isLoading,
     error,
-    getTable
+    getTable,
+    getDisplayName,
+    getDescription
   };
 }
 function queryEquals(a, b) {
@@ -4833,6 +4878,29 @@ var containerStyles7 = {
   gap: "var(--prismiq-spacing-xs)",
   flex: 1
 };
+var comboboxContainerStyles = {
+  position: "relative",
+  flex: 1
+};
+var dropdownStyles2 = {
+  position: "fixed",
+  backgroundColor: "var(--prismiq-color-background)",
+  border: "1px solid var(--prismiq-color-border)",
+  borderRadius: "var(--prismiq-radius-md)",
+  boxShadow: "var(--prismiq-shadow-md)",
+  zIndex: 1e3,
+  maxHeight: "200px",
+  overflow: "auto"
+};
+var optionStyles2 = {
+  padding: "var(--prismiq-spacing-sm) var(--prismiq-spacing-md)",
+  cursor: "pointer",
+  fontSize: "var(--prismiq-font-size-sm)",
+  transition: "background-color 0.1s"
+};
+var optionHoverStyles2 = {
+  backgroundColor: "var(--prismiq-color-surface-hover)"
+};
 function parseValue(value, dataType) {
   if (!value) return void 0;
   const type = dataType?.toLowerCase() ?? "";
@@ -4863,15 +4931,270 @@ function getInputType(dataType) {
   }
   return "text";
 }
+function isMultiValueOperator(op) {
+  return op === "in_" || op === "not_in" || op === "in_or_null";
+}
+var tagContainerStyles = {
+  display: "flex",
+  flexWrap: "wrap",
+  alignItems: "center",
+  gap: "4px",
+  padding: "4px 8px",
+  border: "1px solid var(--prismiq-color-border)",
+  borderRadius: "var(--prismiq-radius-sm)",
+  backgroundColor: "var(--prismiq-color-background)",
+  minHeight: "32px",
+  cursor: "text",
+  flex: 1
+};
+var tagStyles = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "4px",
+  padding: "1px 6px",
+  backgroundColor: "var(--prismiq-color-surface)",
+  border: "1px solid var(--prismiq-color-border)",
+  borderRadius: "var(--prismiq-radius-sm)",
+  fontSize: "var(--prismiq-font-size-sm)",
+  lineHeight: "20px",
+  whiteSpace: "nowrap"
+};
+var tagRemoveStyles = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "14px",
+  height: "14px",
+  border: "none",
+  background: "none",
+  cursor: "pointer",
+  padding: 0,
+  fontSize: "12px",
+  lineHeight: 1,
+  color: "var(--prismiq-color-text-muted)",
+  borderRadius: "50%"
+};
+var tagInputStyles = {
+  border: "none",
+  outline: "none",
+  background: "none",
+  flex: 1,
+  minWidth: "80px",
+  fontSize: "var(--prismiq-font-size-sm)",
+  padding: "2px 0",
+  color: "var(--prismiq-color-text)"
+};
+var multiOptionCheckStyles = {
+  marginRight: "6px",
+  color: "var(--prismiq-color-primary)",
+  fontWeight: 700,
+  fontSize: "12px"
+};
 function FilterValueInput({
   operator,
   value,
   onChange,
   dataType,
   disabled = false,
-  className
+  className,
+  tableName,
+  columnName
 }) {
+  const { client } = useAnalytics();
   const inputType = getInputType(dataType);
+  const isMulti = isMultiValueOperator(operator);
+  const [sampleValues, setSampleValues] = useState([]);
+  const [isLoadingValues, setIsLoadingValues] = useState(false);
+  const fetchedRef = useRef(null);
+  const fetchSeqRef = useRef(0);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 });
+  const inputRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const containerRef = useRef(null);
+  const [multiInputText, setMultiInputText] = useState("");
+  useEffect(() => {
+    setMultiInputText("");
+  }, [operator]);
+  useEffect(() => {
+    if (!tableName || !columnName || !client) {
+      setSampleValues([]);
+      setIsLoadingValues(false);
+      fetchedRef.current = null;
+      return;
+    }
+    const fetchKey = `${tableName}.${columnName}`;
+    if (fetchedRef.current === fetchKey) return;
+    const fetchSeq = ++fetchSeqRef.current;
+    const fetchSamples = async () => {
+      setIsLoadingValues(true);
+      try {
+        const values = await client.getColumnSample(tableName, columnName, 100);
+        const stringValues = values.filter((v) => v !== null && v !== void 0).map((v) => String(v));
+        if (fetchSeqRef.current !== fetchSeq) return;
+        setSampleValues(stringValues);
+        fetchedRef.current = fetchKey;
+      } catch (err) {
+        if (fetchSeqRef.current !== fetchSeq) return;
+        console.error("Failed to fetch sample values:", err);
+        setSampleValues([]);
+        fetchedRef.current = null;
+      } finally {
+        if (fetchSeqRef.current === fetchSeq) {
+          setIsLoadingValues(false);
+        }
+      }
+    };
+    fetchSamples();
+  }, [client, tableName, columnName]);
+  const selectedValues = isMulti && Array.isArray(value) ? value.filter((v) => v !== null && v !== void 0).map((v) => String(v)) : [];
+  const currentValueStr = isMulti ? multiInputText : formatValue(value);
+  const filteredOptions = isMulti ? sampleValues.filter(
+    (v) => v.toLowerCase().includes(multiInputText.toLowerCase()) && !selectedValues.includes(v)
+  ) : sampleValues.filter(
+    (v) => v.toLowerCase().includes(currentValueStr.toLowerCase())
+  );
+  const updateDropdownPosition = useCallback(() => {
+    const el = isMulti ? containerRef.current : inputRef.current;
+    if (el) {
+      const rect = el.getBoundingClientRect();
+      setDropdownPosition({
+        top: rect.bottom + 4,
+        left: rect.left,
+        width: rect.width
+      });
+    }
+  }, [isMulti]);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      const target = event.target;
+      const isInsideContainer = containerRef.current?.contains(target);
+      const isInsideDropdown = dropdownRef.current?.contains(target);
+      if (!isInsideContainer && !isInsideDropdown) {
+        setIsDropdownOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const handleInputFocus = useCallback(() => {
+    if (sampleValues.length > 0) {
+      updateDropdownPosition();
+      setIsDropdownOpen(true);
+      setHighlightedIndex(-1);
+    }
+  }, [sampleValues.length, updateDropdownPosition]);
+  const handleOptionSelect = useCallback(
+    (optionValue) => {
+      onChange(parseValue(optionValue, dataType));
+      setIsDropdownOpen(false);
+      inputRef.current?.blur();
+    },
+    [onChange, dataType]
+  );
+  const addMultiValue = useCallback(
+    (val) => {
+      const trimmed = val.trim();
+      if (!trimmed) return;
+      if (selectedValues.includes(trimmed)) return;
+      const newValues = [...selectedValues, trimmed].map((v) => parseValue(v, dataType));
+      onChange(newValues);
+      setMultiInputText("");
+    },
+    [selectedValues, onChange, dataType]
+  );
+  const removeMultiValue = useCallback(
+    (val) => {
+      const newValues = selectedValues.filter((v) => v !== val).map((v) => parseValue(v, dataType));
+      onChange(newValues.length > 0 ? newValues : []);
+    },
+    [selectedValues, onChange, dataType]
+  );
+  const handleMultiOptionSelect = useCallback(
+    (optionValue) => {
+      if (selectedValues.includes(optionValue)) {
+        removeMultiValue(optionValue);
+      } else {
+        addMultiValue(optionValue);
+      }
+      setMultiInputText("");
+      updateDropdownPosition();
+      inputRef.current?.focus();
+    },
+    [selectedValues, addMultiValue, removeMultiValue, updateDropdownPosition]
+  );
+  const handleMultiInputKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Backspace" && multiInputText === "" && selectedValues.length > 0) {
+        const lastVal = selectedValues[selectedValues.length - 1];
+        if (lastVal !== void 0) removeMultiValue(lastVal);
+        return;
+      }
+      if (isDropdownOpen && filteredOptions.length > 0) {
+        switch (e.key) {
+          case "ArrowDown":
+            e.preventDefault();
+            setHighlightedIndex((prev) => Math.min(prev + 1, filteredOptions.length - 1));
+            return;
+          case "ArrowUp":
+            e.preventDefault();
+            setHighlightedIndex((prev) => Math.max(prev - 1, 0));
+            return;
+          case "Enter":
+            e.preventDefault();
+            if (highlightedIndex >= 0 && filteredOptions[highlightedIndex]) {
+              handleMultiOptionSelect(filteredOptions[highlightedIndex]);
+            } else if (multiInputText.trim()) {
+              addMultiValue(multiInputText);
+            }
+            return;
+          case "Escape":
+            setIsDropdownOpen(false);
+            return;
+        }
+      }
+      if (e.key === "," || e.key === "Enter") {
+        e.preventDefault();
+        addMultiValue(multiInputText);
+      }
+    },
+    [
+      multiInputText,
+      selectedValues,
+      isDropdownOpen,
+      filteredOptions,
+      highlightedIndex,
+      addMultiValue,
+      removeMultiValue,
+      handleMultiOptionSelect
+    ]
+  );
+  const handleSingleKeyDown = useCallback(
+    (e) => {
+      if (!isDropdownOpen || filteredOptions.length === 0) return;
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setHighlightedIndex((prev) => Math.min(prev + 1, filteredOptions.length - 1));
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setHighlightedIndex((prev) => Math.max(prev - 1, 0));
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (highlightedIndex >= 0 && filteredOptions[highlightedIndex]) {
+            handleOptionSelect(filteredOptions[highlightedIndex]);
+          }
+          break;
+        case "Escape":
+          setIsDropdownOpen(false);
+          break;
+      }
+    },
+    [isDropdownOpen, filteredOptions, highlightedIndex, handleOptionSelect]
+  );
   if (operator === "is_null" || operator === "is_not_null") {
     return /* @__PURE__ */ jsx(Fragment, {});
   }
@@ -4911,36 +5234,163 @@ function FilterValueInput({
       )
     ] });
   }
-  if (operator === "in_" || operator === "not_in" || operator === "in_or_null") {
-    const handleMultiChange = (e) => {
-      const values = e.target.value.split(",").map((v) => v.trim()).filter(Boolean).map((v) => parseValue(v, dataType));
-      onChange(values);
-    };
-    return /* @__PURE__ */ jsx("div", { className, style: containerStyles7, children: /* @__PURE__ */ jsx(
+  if (isMulti) {
+    return /* @__PURE__ */ jsx("div", { className, style: containerStyles7, children: /* @__PURE__ */ jsxs("div", { ref: containerRef, style: comboboxContainerStyles, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "data-testid": "filter-tag-container",
+          style: tagContainerStyles,
+          onClick: () => inputRef.current?.focus(),
+          children: [
+            selectedValues.map((val) => /* @__PURE__ */ jsxs("span", { "data-testid": `filter-tag-${val}`, style: tagStyles, children: [
+              val,
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "data-testid": `filter-tag-remove-${val}`,
+                  style: tagRemoveStyles,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    removeMultiValue(val);
+                  },
+                  tabIndex: -1,
+                  children: "\xD7"
+                }
+              )
+            ] }, val)),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                "data-testid": "filter-multi-input",
+                type: "text",
+                placeholder: selectedValues.length === 0 ? isLoadingValues ? "Loading..." : "Type or select values" : "",
+                value: multiInputText,
+                disabled: disabled || isLoadingValues,
+                onChange: (e) => {
+                  setMultiInputText(e.target.value);
+                  if (sampleValues.length > 0) {
+                    updateDropdownPosition();
+                    setIsDropdownOpen(true);
+                    setHighlightedIndex(-1);
+                  }
+                },
+                onFocus: handleInputFocus,
+                onKeyDown: handleMultiInputKeyDown,
+                style: tagInputStyles
+              }
+            )
+          ]
+        }
+      ),
+      selectedValues.length === 0 && !multiInputText && /* @__PURE__ */ jsxs("div", { "data-testid": "filter-multi-hint", style: {
+        fontSize: "11px",
+        color: "var(--prismiq-color-text-muted)",
+        marginTop: "2px",
+        paddingLeft: "2px"
+      }, children: [
+        "Press ",
+        /* @__PURE__ */ jsx("kbd", { style: { padding: "0 3px", border: "1px solid var(--prismiq-color-border)", borderRadius: "3px", fontSize: "10px" }, children: "," }),
+        " or ",
+        /* @__PURE__ */ jsx("kbd", { style: { padding: "0 3px", border: "1px solid var(--prismiq-color-border)", borderRadius: "3px", fontSize: "10px" }, children: "Enter" }),
+        " to add values"
+      ] }),
+      isDropdownOpen && filteredOptions.length > 0 && typeof document !== "undefined" && createPortal(
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: dropdownRef,
+            "data-testid": "filter-dropdown",
+            style: {
+              ...dropdownStyles2,
+              top: dropdownPosition.top,
+              left: dropdownPosition.left,
+              width: dropdownPosition.width
+            },
+            children: filteredOptions.map((optionValue, index) => {
+              const isSelected = selectedValues.includes(optionValue);
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-testid": `filter-option-${index}`,
+                  onClick: () => handleMultiOptionSelect(optionValue),
+                  onMouseEnter: () => setHighlightedIndex(index),
+                  style: {
+                    ...optionStyles2,
+                    ...index === highlightedIndex ? optionHoverStyles2 : {},
+                    ...isSelected ? { backgroundColor: "var(--prismiq-color-surface)", fontWeight: 500 } : {}
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { style: multiOptionCheckStyles, children: isSelected ? "\u2713" : "\u2003" }),
+                    optionValue
+                  ]
+                },
+                `${optionValue}-${index}`
+              );
+            })
+          }
+        ),
+        document.body
+      )
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className, style: containerStyles7, children: /* @__PURE__ */ jsxs("div", { ref: containerRef, style: comboboxContainerStyles, children: [
+    /* @__PURE__ */ jsx(
       Input,
       {
+        ref: inputRef,
+        "data-testid": "filter-single-input",
         inputSize: "sm",
-        type: "text",
-        placeholder: "value1, value2, ...",
-        value: formatValue(value),
-        disabled,
-        onChange: handleMultiChange,
-        style: { flex: 1 }
+        type: inputType,
+        placeholder: isLoadingValues ? "Loading..." : "Type or select value",
+        value: currentValueStr,
+        disabled: disabled || isLoadingValues,
+        onChange: (e) => {
+          onChange(parseValue(e.target.value, dataType));
+          if (sampleValues.length > 0) {
+            updateDropdownPosition();
+            setIsDropdownOpen(true);
+          }
+        },
+        onFocus: handleInputFocus,
+        onKeyDown: handleSingleKeyDown,
+        style: { width: "100%" }
       }
-    ) });
-  }
-  return /* @__PURE__ */ jsx("div", { className, style: containerStyles7, children: /* @__PURE__ */ jsx(
-    Input,
-    {
-      inputSize: "sm",
-      type: inputType,
-      placeholder: "Value",
-      value: formatValue(value),
-      disabled,
-      onChange: (e) => onChange(parseValue(e.target.value, dataType)),
-      style: { flex: 1 }
-    }
-  ) });
+    ),
+    isDropdownOpen && filteredOptions.length > 0 && typeof document !== "undefined" && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: dropdownRef,
+          "data-testid": "filter-dropdown",
+          style: {
+            ...dropdownStyles2,
+            top: dropdownPosition.top,
+            left: dropdownPosition.left,
+            width: dropdownPosition.width
+          },
+          children: filteredOptions.map((optionValue, index) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-testid": `filter-option-${index}`,
+              onClick: () => handleOptionSelect(optionValue),
+              onMouseEnter: () => setHighlightedIndex(index),
+              style: {
+                ...optionStyles2,
+                ...index === highlightedIndex ? optionHoverStyles2 : {},
+                ...optionValue === currentValueStr ? { backgroundColor: "var(--prismiq-color-surface)", fontWeight: 500 } : {}
+              },
+              children: optionValue
+            },
+            `${optionValue}-${index}`
+          ))
+        }
+      ),
+      document.body
+    )
+  ] }) });
 }
 var rowStyles = {
   display: "flex",
@@ -5033,13 +5483,16 @@ function FilterRow({
     });
     return options;
   }, [tables, schema]);
+  const currentTable = useMemo(
+    () => tables.find((t) => t.id === filter.table_id),
+    [tables, filter.table_id]
+  );
   const currentColumnSchema = useMemo(() => {
-    const table = tables.find((t) => t.id === filter.table_id);
-    if (!table) return void 0;
-    const tableSchema = schema.tables.find((t) => t.name === table.name);
+    if (!currentTable) return void 0;
+    const tableSchema = schema.tables.find((t) => t.name === currentTable.name);
     if (!tableSchema) return void 0;
     return tableSchema.columns.find((c) => c.name === filter.column);
-  }, [tables, schema, filter.table_id, filter.column]);
+  }, [currentTable, schema, filter.column]);
   const operatorOptions = useMemo(
     () => getOperatorsForType(currentColumnSchema?.data_type),
     [currentColumnSchema]
@@ -5100,7 +5553,9 @@ function FilterRow({
         operator: filter.operator,
         value: filter.value,
         onChange: handleValueChange,
-        dataType: currentColumnSchema?.data_type
+        dataType: currentColumnSchema?.data_type,
+        tableName: currentTable?.name,
+        columnName: filter.column
       }
     ) }),
     /* @__PURE__ */ jsx(
@@ -8541,13 +8996,14 @@ function TableSelector({
   className
 }) {
   const { theme } = useTheme();
+  const { getDisplayName } = useSchema();
   const availableTableOptions = useMemo(() => {
     const selectedNames = new Set(tables.map((t) => t.name));
     return schema.tables.filter((t) => !selectedNames.has(t.name)).map((t) => ({
       value: t.name,
-      label: `${t.name} (${t.columns.length} cols)`
+      label: getDisplayName(t.name)
     }));
-  }, [schema.tables, tables]);
+  }, [schema.tables, tables, getDisplayName]);
   const suggestedTables = useMemo(() => {
     if (!showRelationships || tables.length === 0) return [];
     const selectedNames = new Set(tables.map((t) => t.name));
@@ -8649,7 +9105,7 @@ function TableSelector({
   return /* @__PURE__ */ jsxs("div", { className, style: containerStyle, children: [
     tables.length > 0 && /* @__PURE__ */ jsx("div", { style: selectedTablesStyle, children: tables.map((table, index) => /* @__PURE__ */ jsxs("div", { style: tableChipStyle, children: [
       /* @__PURE__ */ jsx(Icon, { name: "table", size: 14 }),
-      /* @__PURE__ */ jsx("span", { children: table.name }),
+      /* @__PURE__ */ jsx("span", { children: getDisplayName(table.name) }),
       index === 0 && /* @__PURE__ */ jsx(Badge, { size: "sm", variant: "default", children: "primary" }),
       tables.length > 1 && /* @__PURE__ */ jsx(
         "button",
@@ -8657,7 +9113,7 @@ function TableSelector({
           type: "button",
           style: removeButtonStyle,
           onClick: () => handleRemoveTable(table.id),
-          "aria-label": `Remove ${table.name}`,
+          "aria-label": `Remove ${getDisplayName(table.name)}`,
           children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 12 })
         }
       )
@@ -8691,7 +9147,7 @@ function TableSelector({
             title: suggestion.relationship,
             children: [
               /* @__PURE__ */ jsx(Icon, { name: "plus", size: 10 }),
-              suggestion.table
+              getDisplayName(suggestion.table)
             ]
           },
           suggestion.table
@@ -8702,5 +9158,5 @@ function TableSelector({
 }
 
 export { AggregationPicker, AnalyticsProvider, AutoSaveIndicator, Badge, Button, CalculatedFieldBuilder, Checkbox, CollapsibleSection, ColorPaletteSelector, ColumnNode, ColumnSelector, CrossFilterProvider, CustomSQLEditor, Dialog, DialogFooter, DialogHeader, Dropdown, DropdownItem, DropdownSeparator, EmptyDashboard, EmptyState, ErrorBoundary, ErrorFallback, ExpressionEditor, FilterBuilder, FilterRow, FilterValueInput, Icon, Input, JoinBuilder, JoinRow, NoData, NoResults, Pagination, PrismiqClient, PrismiqError, QueryBuilder, QueryBuilderToolbar, QueryPreview, ResultsTable, SavedQueryPicker, SchemaExplorer, Select, SelectedColumn, Skeleton, SkeletonChart, SkeletonMetricCard, SkeletonTable, SkeletonText, SortBuilder, SortRow, TableCell, TableHeader, TableNode, TableRow, TableSelector, TimeSeriesConfig, Tooltip, WidgetErrorBoundary, useAnalytics, useAnalyticsCallbacks, useChartData, useCrossFilterOptional, useCustomSQL, useDashboard, useDashboardMutations, useDashboardPinStatus, useDashboards, useDebouncedLayoutSave, usePinMutations, usePinnedDashboards, useQuery, useSavedQueries, useSchema };
-//# sourceMappingURL=chunk-UPYINBZU.js.map
-//# sourceMappingURL=chunk-UPYINBZU.js.map
+//# sourceMappingURL=chunk-ET7GCREP.js.map
+//# sourceMappingURL=chunk-ET7GCREP.js.map