Rill Developer: add UI for external tables

web-common/src/features/metrics-views/metrics-internal-store.ts

@@ -44,7 +44,7 @@ export function initBlankDashboardYAML(dashboardTitle: string) {
 # Visit https://docs.rilldata.com/reference/project-files to learn more about Rill project files.
 
 title: ""
-model: ""
+table: ""
 default_time_range: ""
 smallest_time_grain: ""
 timeseries: ""
@@ -66,10 +66,12 @@ available_time_zones:
   return template.toString();
 }
 
-export function generateDashboardYAMLForModel(
-  modelName: string,
+export function generateDashboardYAMLForTable(
+  tableName: string,
+  isModel: boolean,
   schema: V1StructType,
   dashboardTitle = "",
+  defaultTimeRange = "",
 ) {
   const doc = new Document();
 
@@ -78,7 +80,12 @@ export function generateDashboardYAMLForModel(
   if (dashboardTitle) {
     doc.set("title", dashboardTitle);
   }
-  doc.set("model", modelName);
+
+  if (isModel) {
+    doc.set("model", tableName);
+  } else {
+    doc.set("table", tableName);
+  }
 
   const timestampColumns = selectTimestampColumnFromSchema(schema);
   if (timestampColumns?.length) {
@@ -87,6 +94,10 @@ export function generateDashboardYAMLForModel(
     doc.set("timeseries", "");
   }
 
+  if (defaultTimeRange) {
+    doc.set("default_time_range", defaultTimeRange);
+  }
+
   const fields = schema.fields;
   const metricsSeq = fields
     .filter((field) => {

web-common/src/features/metrics-views/utils.ts

@@ -1,4 +1,6 @@
-export function getModelOutOfPossiblyMalformedYAML(yaml: string): string {
+export function getModelOutOfPossiblyMalformedYAML(
+  yaml: string,
+): string | null {
   // Regular expression to match model key followed by its value
   // The regex looks for 'model:' followed by any number of whitespaces and captures any non-whitespace characters after that
   const regex = /model:\s*(\S+)/;
@@ -9,3 +11,17 @@ export function getModelOutOfPossiblyMalformedYAML(yaml: string): string {
   // If matches were found, return the value of the model field, otherwise return null
   return matches && matches[1] ? matches[1] : null;
 }
+
+export function getTableOutOfPossiblyMalformedYAML(
+  yaml: string,
+): string | null {
+  // Regular expression to match table key followed by its value
+  // The regex looks for 'table:' followed by any number of whitespaces and captures any non-whitespace characters after that
+  const regex = /table:\s*(\S+)/;
+
+  // Extract the match groups
+  const matches = regex.exec(yaml);
+
+  // If matches were found, return the value of the table field, otherwise return null
+  return matches && matches[1] ? matches[1] : null;
+}

web-common/src/features/metrics-views/workspace/editor/Placeholder.svelte

@@ -11,7 +11,7 @@
   import { waitForResource } from "@rilldata/web-common/features/entity-management/resource-status-utils";
   import { EntityType } from "@rilldata/web-common/features/entity-management/types";
   import {
-    generateDashboardYAMLForModel,
+    generateDashboardYAMLForTable,
     initBlankDashboardYAML,
   } from "@rilldata/web-common/features/metrics-views/metrics-internal-store";
   import { useModelFileNames } from "@rilldata/web-common/features/models/selectors";
@@ -25,10 +25,13 @@
   } from "@rilldata/web-common/runtime-client";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
   import { useQueryClient } from "@tanstack/svelte-query";
+  import { useIsModelingSupportedForCurrentOlapDriver } from "../../../tables/selectors";
 
   export let metricsName: string;
   export let view: EditorView | undefined = undefined;
 
+  $: isModelingSupportedForCurrentOlapDriver =
+    useIsModelingSupportedForCurrentOlapDriver($runtime.instanceId);
   $: models = useModelFileNames($runtime.instanceId);
 
   const queryClient = useQueryClient();
@@ -64,8 +67,9 @@
         }),
     });
 
+    const isModel = true;
     const dashboardYAML = schemaResp?.schema
-      ? generateDashboardYAMLForModel(modelName, schemaResp?.schema)
+      ? generateDashboardYAMLForTable(modelName, isModel, schemaResp?.schema)
       : "";
 
     await runtimeServicePutFile(
@@ -128,40 +132,44 @@
 </script>
 
 <div class="whitespace-normal">
-  Auto-generate a <WithTogglableFloatingElement
-    distance={8}
-    inline
-    let:toggleFloatingElement
-  >
-    <button
-      class={buttonClasses}
-      disabled={!$models?.data?.length}
-      on:click={toggleFloatingElement}
-      >metrics configuration from an existing model</button
-    >,
-    <Menu
-      dark
-      on:click-outside={toggleFloatingElement}
-      on:escape={toggleFloatingElement}
-      slot="floating-element"
+  {#if $isModelingSupportedForCurrentOlapDriver.data}
+    Auto-generate a <WithTogglableFloatingElement
+      distance={8}
+      inline
       let:toggleFloatingElement
     >
-      {#each $models?.data ?? [] as model}
-        <MenuItem
-          on:select={() => {
-            onAutogenerateConfigFromModel(model);
-            toggleFloatingElement();
-          }}
-        >
-          {model}
-        </MenuItem>
-      {/each}
-    </Menu>
-  </WithTogglableFloatingElement>
+      <button
+        class={buttonClasses}
+        disabled={!$models?.data?.length}
+        on:click={toggleFloatingElement}
+        >metrics configuration from an existing model</button
+      >,
+      <Menu
+        dark
+        on:click-outside={toggleFloatingElement}
+        on:escape={toggleFloatingElement}
+        slot="floating-element"
+        let:toggleFloatingElement
+      >
+        {#each $models?.data ?? [] as model}
+          <MenuItem
+            on:select={() => {
+              onAutogenerateConfigFromModel(model);
+              toggleFloatingElement();
+            }}
+          >
+            {model}
+          </MenuItem>
+        {/each}
+      </Menu>
+    </WithTogglableFloatingElement>
+  {/if}
   <button
     class={buttonClasses}
     on:click={async () => {
       onCreateSkeletonMetricsConfig();
-    }}>start with a skeleton</button
+    }}
+    >{#if $isModelingSupportedForCurrentOlapDriver.data}s{:else}S{/if}tart with
+    a skeleton</button
   >, or just start typing.
 </div>

web-common/src/features/metrics-views/workspace/inspector/MetricsInspector.svelte

@@ -16,7 +16,10 @@
   } from "@rilldata/web-common/runtime-client";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
   import { slide } from "svelte/transition";
-  import { getModelOutOfPossiblyMalformedYAML } from "../../utils";
+  import {
+    getModelOutOfPossiblyMalformedYAML,
+    getTableOutOfPossiblyMalformedYAML,
+  } from "../../utils";
 
   export let metricsDefName: string;
 
@@ -31,9 +34,10 @@
 
   // get file.
   $: modelName = getModelOutOfPossiblyMalformedYAML(yaml)?.replace(/"/g, "");
+  $: tableName = getTableOutOfPossiblyMalformedYAML(yaml)?.replace(/"/g, "");
 
   // check to see if this model name exists.
-  $: modelQuery = useModel($runtime.instanceId, modelName);
+  $: modelQuery = useModel($runtime.instanceId, modelName ?? "");
 
   $: allModels = useModels($runtime.instanceId);
 
@@ -113,6 +117,14 @@
             to a model.
           </p>
         </div>
+      {:else if tableName !== undefined}
+        <div>
+          <p>Table not defined.</p>
+          <p>
+            Set a table with <code>table: TABLE_NAME</code> to connect your metrics
+            to a table.
+          </p>
+        </div>
       {/if}
     </div>
   {/if}

web-common/src/features/models/createDashboardFromModel.ts

@@ -7,13 +7,13 @@ import {
 } from "@rilldata/web-common/features/entity-management/entity-mappers";
 import { getName } from "@rilldata/web-common/features/entity-management/name-utils";
 import {
-  createSchemaForTable,
   ResourceKind,
+  createSchemaForTable,
   useResource,
 } from "@rilldata/web-common/features/entity-management/resource-selectors";
 import { waitForResource } from "@rilldata/web-common/features/entity-management/resource-status-utils";
 import { EntityType } from "@rilldata/web-common/features/entity-management/types";
-import { generateDashboardYAMLForModel } from "@rilldata/web-common/features/metrics-views/metrics-internal-store";
+import { generateDashboardYAMLForTable } from "@rilldata/web-common/features/metrics-views/metrics-internal-store";
 import { appScreen } from "@rilldata/web-common/layout/app-store";
 import { overlay } from "@rilldata/web-common/layout/overlay-store";
 import { behaviourEvent } from "@rilldata/web-common/metrics/initMetrics";
@@ -24,15 +24,15 @@ import {
 } from "@rilldata/web-common/metrics/service/MetricsTypes";
 import {
   RpcStatus,
-  runtimeServicePutFile,
   V1ReconcileStatus,
   V1StructType,
+  runtimeServicePutFile,
 } from "@rilldata/web-common/runtime-client";
 import {
-  createMutation,
   CreateMutationOptions,
   MutationFunction,
   QueryClient,
+  createMutation,
   useQueryClient,
 } from "@tanstack/svelte-query";
 import { derived, get } from "svelte/store";
@@ -65,8 +65,10 @@ export const useCreateDashboardFromModel = <
     const { data } = props ?? {};
 
     // create dashboard from model
-    const dashboardYAML = generateDashboardYAMLForModel(
+    const isModel = true;
+    const dashboardYAML = generateDashboardYAMLForTable(
       data.modelName,
+      isModel,
       data.schema,
       data.newDashboardName,
     );

web-common/src/features/onboarding/OnboardingWorkspace.svelte

@@ -4,14 +4,24 @@
   import Button from "../../components/button/Button.svelte";
   import Add from "../../components/icons/Add.svelte";
   import { WorkspaceContainer } from "../../layout/workspace";
+  import { createRuntimeServiceGetInstance } from "../../runtime-client";
+  import { runtime } from "../../runtime-client/runtime-store";
+
+  let steps: OnboardingStep[];
+  $: instance = createRuntimeServiceGetInstance($runtime.instanceId);
+  $: olapConnector = $instance.data?.instance?.olapConnector;
+  $: if (olapConnector) {
+    steps = olapConnector === "duckdb" ? duckDbSteps : nonDuckDbSteps;
+  }
 
   interface OnboardingStep {
     id: string;
     heading: string;
     description: string;
   }
 
-  const steps: OnboardingStep[] = [
+  // Onboarding steps for DuckDB OLAP driver
+  const duckDbSteps: OnboardingStep[] = [
     {
       id: "source",
       heading: "Import your data source",
@@ -38,6 +48,28 @@
     },
   ];
 
+  // Onboarding steps for non-DuckDB OLAP drivers (Clickhouse, Druid)
+  const nonDuckDbSteps: OnboardingStep[] = [
+    {
+      id: "table",
+      heading: "Explore your tables",
+      description:
+        "Find your database tables in the left-hand-side navigational sidebar.",
+    },
+    {
+      id: "metrics",
+      heading: "Define your metrics and dimensions",
+      description:
+        "Define aggregate metrics and break out dimensions for your tables.",
+    },
+    {
+      id: "dashboard",
+      heading: "Explore your metrics dashboard",
+      description:
+        "Interactively explore line charts and leaderboards to uncover insights.",
+    },
+  ];
+
   let showAddSourceModal = false;
   function openAddSourceModal() {
     showAddSourceModal = true;
@@ -53,23 +85,25 @@
     <ol
       class="max-w-fit flex flex-col gap-y-4 px-9 pt-9 pb-[60px] bg-gray-50 rounded-lg border border-gray-200"
     >
-      {#each steps as step, i (step.heading)}
-        <li class="flex gap-x-0.5">
-          <span class="font-bold">{i + 1}.</span>
-          <div class="flex flex-col items-start gap-y-2">
-            <div class="flex flex-col items-start gap-y-0.5">
-              <h5 class="font-bold">{step.heading}</h5>
-              <p>{step.description}</p>
+      {#if olapConnector}
+        {#each steps as step, i (step.heading)}
+          <li class="flex gap-x-0.5">
+            <span class="font-bold">{i + 1}.</span>
+            <div class="flex flex-col items-start gap-y-2">
+              <div class="flex flex-col items-start gap-y-0.5">
+                <h5 class="font-bold">{step.heading}</h5>
+                <p>{step.description}</p>
+              </div>
+              {#if step.id === "source"}
+                <Button type="secondary" on:click={openAddSourceModal}>
+                  <IconSpaceFixer pullLeft><Add /></IconSpaceFixer>
+                  <span>Add data</span>
+                </Button>
+              {/if}
             </div>
-            {#if step.id === "source"}
-              <Button type="secondary" on:click={openAddSourceModal}>
-                <IconSpaceFixer pullLeft><Add /></IconSpaceFixer>
-                <span>Add data</span>
-              </Button>
-            {/if}
-          </div>
-        </li>
-      {/each}
+          </li>
+        {/each}
+      {/if}
     </ol>
     <AddSourceModal
       open={showAddSourceModal}