Data Explorer UI

web-common/src/features/connectors/explorer/ConnectorExplorer.svelte

@@ -5,41 +5,62 @@
   import { runtime } from "../../../runtime-client/runtime-store";
   import ConnectorEntry from "./ConnectorEntry.svelte";
   import type { ConnectorExplorerStore } from "./connector-explorer-store";
+  import type { V1ConnectorDriver } from "../../../runtime-client";
 
   export let store: ConnectorExplorerStore;
   export let olapOnly: boolean = false;
+  export let limitToConnector: string | undefined = undefined;
+  export let limitedConnectorDriver: V1ConnectorDriver | undefined = undefined;
 
   $: ({ instanceId } = $runtime);
 
   $: connectors = createRuntimeServiceAnalyzeConnectors(instanceId, {
     query: {
+      enabled: !!instanceId && !limitedConnectorDriver,
       // sort alphabetically
       select: (data) => {
         if (!data?.connectors) return;
 
-        const filtered = (
+        let filtered = (
           olapOnly
             ? data.connectors.filter((c) => c?.driver?.implementsOlap)
             : data.connectors
         ).sort((a, b) => (a?.name as string).localeCompare(b?.name as string));
+        if (limitToConnector) {
+          filtered = filtered.filter((c) => c?.name === limitToConnector);
+        }
+
         return { connectors: filtered };
       },
     },
   });
   $: ({ data, error } = $connectors);
+  $: connectorsData = limitedConnectorDriver
+    ? {
+        connectors: [
+          {
+            name:
+              (limitToConnector as string) ??
+              (limitedConnectorDriver.name as string) ??
+              "",
+            driver: limitedConnectorDriver,
+          },
+        ],
+      }
+    : data;
 </script>
 
 <div class="wrapper">
   {#if error}
     <span class="message">
       {error.message}
     </span>
-  {:else if data?.connectors}
-    {#if data.connectors.length === 0}
+  {:else if connectorsData?.connectors}
+    {#if connectorsData.connectors.length === 0}
       <span class="message"> No data found. Add data to get started! </span>
     {:else}
       <ol transition:slide={{ duration }}>
-        {#each data.connectors as connector (connector.name)}
+        {#each connectorsData.connectors as connector (connector.name)}
           <ConnectorEntry {connector} {store} />
         {/each}
       </ol>

web-common/src/features/connectors/explorer/TableEntry.svelte

@@ -29,6 +29,13 @@
 
   $: expandedStore = store.getItem(connector, database, databaseSchema, table);
   $: showSchema = $expandedStore;
+  $: selectedStore = store.isSelected(
+    connector,
+    database,
+    databaseSchema,
+    table,
+  );
+  $: isSelected = $selectedStore;
 
   const { allowContextMenu, allowNavigateToTable, allowShowSchema } = store;
 
@@ -62,6 +69,7 @@
   <div
     class:pl-[58px]={database || !allowShowSchema}
     class="table-entry-header pl-10"
+    class:selected={isSelected}
   >
     {#if allowShowSchema}
       <button
@@ -152,6 +160,10 @@
     @apply bg-slate-100;
   }
 
+  .selected {
+    @apply bg-indigo-50;
+  }
+
   .clickable-text {
     @apply flex grow items-center gap-x-1;
     @apply text-gray-900 truncate;

web-common/src/features/connectors/explorer/connector-explorer-store.ts

@@ -4,6 +4,7 @@ import { derived, get, writable, type Writable } from "svelte/store";
 type ConnectorExplorerState = {
   showConnectors: boolean;
   expandedItems: Record<string, boolean>;
+  selectedKey: string | null;
 };
 
 export class ConnectorExplorerStore {
@@ -30,6 +31,7 @@ export class ConnectorExplorerStore {
 
       showConnectors = true,
       expandedItems = {},
+      selectedKey = null,
       localStorage = true,
     } = {},
     onToggleItem?: (
@@ -50,8 +52,9 @@ export class ConnectorExplorerStore {
       ? localStorageStore<ConnectorExplorerState>("connector-explorer-state", {
           showConnectors,
           expandedItems,
+          selectedKey,
         })
-      : writable({ showConnectors, expandedItems });
+      : writable({ showConnectors, expandedItems, selectedKey });
   }
 
   createItemIfNotExists(
@@ -119,6 +122,30 @@ export class ConnectorExplorerStore {
     });
   };
 
+  // Selection helpers
+  setSelected = (
+    connector: string,
+    database?: string,
+    schema?: string,
+    table?: string,
+  ) => {
+    const key = getItemKey(connector, database, schema, table);
+    this.store.update((state) => ({
+      ...state,
+      selectedKey: key,
+    }));
+  };
+
+  isSelected = (
+    connector: string,
+    database?: string,
+    schema?: string,
+    table?: string,
+  ) => {
+    const key = getItemKey(connector, database, schema, table);
+    return derived(this.store, ($state) => $state.selectedKey === key);
+  };
+
   toggleItem = (
     connector: string,
     database?: string,
@@ -128,6 +155,11 @@ export class ConnectorExplorerStore {
     if (this.onToggleItem)
       this.onToggleItem(connector, database, schema, table);
 
+    // When selection is enabled for this store, selecting a table should mark it
+    if (table && this.allowSelectTable) {
+      this.setSelected(connector, database, schema, table);
+    }
+
     if (table && !this.allowShowSchema) return;
 
     this.store.update((state) => {

web-common/src/features/sources/modal/AddDataExplorerStep.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import { Button } from "@rilldata/web-common/components/button";
+  import DataExplorerDialog from "./DataExplorerDialog.svelte";
+  import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
+  import { cn } from "@rilldata/web-common/lib/shadcn";
+  import type { V1ConnectorDriver } from "@rilldata/web-common/runtime-client";
+  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
+  import { createModelFromExplorerSelection } from "./model-creation-utils";
+  import { useIsModelingSupportedForConnectorOLAP as useIsModelingSupportedForConnector } from "../../connectors/selectors";
+
+  export let connector: V1ConnectorDriver;
+  export let onModelCreated: (path: string) => void | Promise<void>;
+  export let onBack: () => void;
+  export let formHeight: string = "";
+
+  let selectedConnector = "";
+  let selectedDatabase = "";
+  let selectedSchema = "";
+  let selectedTable = "";
+  let creatingModel = false;
+  let instanceId: string;
+
+  $: ({ instanceId } = $runtime);
+  $: modelingSupportQuery = useIsModelingSupportedForConnector(
+    instanceId,
+    selectedConnector || "",
+  );
+  $: isModelingSupportedForSelected = $modelingSupportQuery.data || false;
+
+  async function handleCreateModel() {
+    if (!selectedConnector || !selectedTable) return;
+    try {
+      creatingModel = true;
+      const [newModelPath] = await createModelFromExplorerSelection(
+        queryClient,
+        {
+          connector: selectedConnector,
+          database: selectedDatabase,
+          schema: selectedSchema,
+          table: selectedTable,
+          isModelingSupported: isModelingSupportedForSelected,
+        },
+      );
+      await onModelCreated(newModelPath);
+    } finally {
+      creatingModel = false;
+    }
+  }
+</script>
+
+<div class="flex flex-col flex-grow h-full">
+  <div class={cn("flex flex-col flex-grow overflow-hidden p-0", formHeight)}>
+    <DataExplorerDialog
+      connectorDriver={connector}
+      onSelect={(detail) => {
+        selectedConnector = detail.connector;
+        selectedDatabase = detail.database;
+        selectedSchema = detail.schema;
+        selectedTable = detail.table;
+      }}
+    />
+  </div>
+
+  <div
+    class="w-full bg-surface border-t border-gray-200 p-6 flex justify-between gap-2"
+  >
+    <Button onClick={onBack} type="secondary">Back</Button>
+
+    <Button
+      disabled={!selectedTable || creatingModel}
+      loading={creatingModel}
+      loadingCopy="Creating model..."
+      onClick={handleCreateModel}
+      type="primary"
+    >
+      Create model
+    </Button>
+  </div>
+</div>