fix: final passes at Snowflake and preview mode fixes (#9196)

* snowflake reverts

* Update snowflake.go

* revert go to olap true, add front end override

add scaffolding for snowflake toggle

* too eager; reverting to simpler;

* prettier

* forgot to revert this

* show breadcrumbs on viz routes regardless of mode

The previous commit removed the (viz) route override for mode, but
that also removed breadcrumbs from explore/canvas routes in developer
mode. Now breadcrumbs show whenever on a viz route, while the mode
tag and CTAs correctly reflect developer vs preview state.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* prettier

* fix color selector svelte upgrade

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: royendo

web-common/src/components/color-picker/ColorInput.svelte

@@ -18,7 +18,18 @@
 
   let open = false;
 
-  $: ({ h: hue, s: saturation, l: lightness } = stringColorToHsl(stringColor));
+  // Use a reactive block (not destructuring assignment) so that hue/saturation/lightness
+  // are plain state variables, not derived. Derived values are read-only in Svelte 5 compat
+  // and can't be updated via bind:value on the sliders.
+  let hue = 0;
+  let saturation = 100;
+  let lightness = 50;
+  $: {
+    const parsed = stringColorToHsl(stringColor);
+    hue = parsed.h;
+    saturation = parsed.s;
+    lightness = parsed.l;
+  }
 
   $: hsl = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
 

web-common/src/components/color-picker/ColorSlider.svelte

@@ -37,7 +37,7 @@
     min="0"
     max={mode === "hue" ? 360 : 100}
     bind:value
-    onchange={onChange}
+    oninput={onChange}
   />
 
   <input

web-common/src/features/add-data/form/ImportTableForm.svelte

@@ -10,6 +10,7 @@
     getAnalyzedConnectorByName,
     getAnalyzedConnectors,
   } from "@rilldata/web-common/features/connectors/selectors.ts";
+
   import { Button } from "@rilldata/web-common/components/button";
   import {
     type AddDataConfig,

web-common/src/features/add-data/manager/steps/utils.ts

@@ -79,7 +79,9 @@ export function isExplorerType(connectorDriver: V1ConnectorDriver) {
 }
 
 export function isLiveConnectorType(connectorDriver: V1ConnectorDriver) {
-  return !!connectorDriver?.implementsOlap;
+  return (
+    !!connectorDriver?.implementsOlap && !connectorDriver?.implementsWarehouse
+  );
 }
 
 const NonModelSteps = [
@@ -92,8 +94,6 @@ export function getImportStepsForConnector(
   config: AddDataConfig,
   driver: V1ConnectorDriver,
 ) {
-  // Live connectors cannot create models as of now.
-  // They will create metrics views directly.
   const steps = isLiveConnectorType(driver) ? NonModelSteps : FullListOfSteps;
   return config.importOnly ? [steps[0]] : steps;
 }

web-common/src/features/sources/modal/constants.ts

@@ -91,6 +91,7 @@ export const SOURCES = [
   "postgres",
   "redshift",
   "s3",
+  "snowflake",
   "sqlite",
   "supabase",
   "https",
@@ -99,7 +100,6 @@ export const SOURCES = [
 
 export const OLAP_ENGINES = [
   "clickhouse",
-  "snowflake",
   "motherduck",
   "duckdb",
   "druid",

web-common/src/features/templates/schemas/snowflake.ts

@@ -1,10 +1,13 @@
 import type { MultiStepFormSchema } from "./types";
 
+// TODO: Add a "Use as OLAP engine" toggle to the Snowflake form.
+// When enabled, set olap_connector: snowflake in rill.yaml so
+// isLiveConnectorType resolves true and skips DuckDB ingestion.
 export const snowflakeSchema: MultiStepFormSchema = {
   $schema: "http://json-schema.org/draft-07/schema#",
   type: "object",
   title: "Snowflake",
-  "x-category": "olap",
+  "x-category": "warehouse",
   "x-form-height": "tall",
   properties: {
     auth_method: {

web-common/src/layout/ApplicationHeader.svelte

@@ -37,6 +37,8 @@
     route,
   } = $page);
 
+  $: onVizRoute = route.id?.includes("explore") || route.id?.includes("canvas");
+
   $: ({ unsavedFiles } = fileArtifacts);
   $: ({ size: unsavedFileCount } = $unsavedFiles);
   $: onDeployPage = isDeployPage($page);
@@ -102,7 +104,7 @@
 
     <Tag text={mode} color="gray"></Tag>
 
-    {#if mode === "Preview"}
+    {#if mode === "Preview" || onVizRoute}
       {#if $exploresQuery?.data}
         <Breadcrumbs {pathParts} {currentPath} />
       {/if}
@@ -120,12 +122,10 @@
   {/if}
 
   <div class="flex gap-x-2 items-center ml-auto">
-    {#if mode === "Preview"}
-      {#if route.id?.includes("explore")}
-        <ExplorePreviewCTAs exploreName={dashboardName} />
-      {:else if route.id?.includes("canvas")}
-        <CanvasPreviewCTAs canvasName={dashboardName} />
-      {/if}
+    {#if route.id?.includes("explore")}
+      <ExplorePreviewCTAs exploreName={dashboardName} />
+    {:else if route.id?.includes("canvas")}
+      <CanvasPreviewCTAs canvasName={dashboardName} />
     {:else if showDeveloperChat}
       <ChatToggle />
     {/if}

web-local/src/routes/+layout.svelte

@@ -97,9 +97,7 @@
   $: onDeployPage = isDeployPage($page);
   $: isPreviewMode = $previewModeStore;
 
-  // Preview mode from store OR (viz) route group
-  $: mode =
-    isPreviewMode || route.id?.includes("(viz)") ? "Preview" : "Developer";
+  $: mode = isPreviewMode ? "Preview" : "Developer";
 
   $: shouldShowPreviewNav =
     isPreviewMode && showPreviewNav($page.url.pathname) && !onDeployPage;