Show a warning indicator for Tables with unsupported data types (#4462)

* Show a warning indicator for a Table with unsupported data types * Move tooltip to the right * Fix test: move tooltip so it doesn't hide the context button * Move tooltip * Add list of affected columns
rilldata · Mar 29, 2024 · 8eed9c4 · 8eed9c4 · github-actions · Mar 29, 2024
1 parent 3ccf87a
commit 8eed9c4
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 25 deletions.
diff --git a/web-common/src/features/tables/TableAssets.svelte b/web-common/src/features/tables/TableAssets.svelte
@@ -7,31 +7,35 @@
   import NavigationEntry from "../../layout/navigation/NavigationEntry.svelte";
   import NavigationHeader from "../../layout/navigation/NavigationHeader.svelte";
   import { debounce } from "../../lib/create-debouncer";
-  import { createRuntimeServiceGetInstance } from "../../runtime-client";
+  import {
+    V1TableInfo,
+    createRuntimeServiceGetInstance,
+  } from "../../runtime-client";
   import { runtime } from "../../runtime-client/runtime-store";
   import TableMenuItems from "./TableMenuItems.svelte";
-  import { useTableNames } from "./selectors";
+  import UnsupportedTypesIndicator from "./UnsupportedTypesIndicator.svelte";
+  import { useTables } from "./selectors";
 
   let showTables = true;
 
-  // Debounce table names to prevent flickering
-  const debouncedTableNames = writable<string[]>([]);
-  const setDebouncedTableNames = debounce(
-    (tableNames: string[]) => debouncedTableNames.set(tableNames),
+  // Debounce to prevent flickering
+  const debouncedTables = writable<V1TableInfo[]>([]);
+  const setDebouncedTables = debounce(
+    (tables: V1TableInfo[]) => debouncedTables.set(tables),
     200,
   );
 
-  $: if ($tableNames) {
-    setDebouncedTableNames($tableNames);
+  $: if ($tables) {
+    setDebouncedTables($tables);
   }
 
-  $: hasAssets = $debouncedTableNames.length > 0;
+  $: hasAssets = $debouncedTables.length > 0;
 
   $: instance = createRuntimeServiceGetInstance($runtime.instanceId);
   $: connectorInstanceId = $instance.data?.instance?.instanceId;
   $: olapConnector = $instance.data?.instance?.olapConnector;
 
-  $: tableNames = useTableNames(
+  $: tables = useTables(
     $runtime.instanceId,
     connectorInstanceId,
     olapConnector,
@@ -44,8 +48,9 @@
 
     {#if showTables}
       <ol transition:slide={{ duration }}>
-        {#if $debouncedTableNames.length > 0}
-          {#each $debouncedTableNames as fullyQualifiedTableName (fullyQualifiedTableName)}
+        {#if $debouncedTables.length > 0}
+          {#each $debouncedTables as table (table)}
+            {@const fullyQualifiedTableName = table.database + "." + table.name}
             <li
               animate:flip={{ duration }}
               aria-label={fullyQualifiedTableName}
@@ -56,6 +61,15 @@
                 open={$page.url.pathname ===
                   `/table/${fullyQualifiedTableName}`}
               >
+                <svelte:fragment slot="icon">
+                  {#if connectorInstanceId && olapConnector && table.name && table.hasUnsupportedDataTypes}
+                    <UnsupportedTypesIndicator
+                      instanceId={connectorInstanceId}
+                      connector={olapConnector}
+                      tableName={table.name}
+                    />
+                  {/if}
+                </svelte:fragment>
                 <TableMenuItems slot="menu-items" {fullyQualifiedTableName} />
               </NavigationEntry>
             </li>

diff --git a/web-common/src/features/tables/UnsupportedTypesIndicator.svelte b/web-common/src/features/tables/UnsupportedTypesIndicator.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+  import WarningIcon from "../../components/icons/WarningIcon.svelte";
+  import Tooltip from "../../components/tooltip/Tooltip.svelte";
+  import TooltipContent from "../../components/tooltip/TooltipContent.svelte";
+  import { createQueryServiceTableColumns } from "../../runtime-client";
+
+  export let instanceId: string;
+  export let connector: string;
+  export let tableName: string;
+
+  $: tableColumns = createQueryServiceTableColumns(instanceId, tableName, {
+    connector: connector,
+  });
+
+  $: unsupportedColumnsMap = $tableColumns.data?.unsupportedColumns;
+  $: unsupportedColumns = unsupportedColumnsMap
+    ? Object.entries(unsupportedColumnsMap).map(([column, type]) => ({
+        column,
+        type,
+      }))
+    : [];
+</script>
+
+<Tooltip distance={8} alignment="start">
+  <WarningIcon />
+  <TooltipContent slot="tooltip-content">
+    This table contains columns with unsupported data types:
+
+    <ul class="list-disc pl-4 mt-1">
+      {#each unsupportedColumns as { column, type } (column)}
+        <li>{column}: {type}</li>
+      {/each}
+    </ul>
+  </TooltipContent>
+</Tooltip>
diff --git a/web-common/src/features/tables/selectors.ts b/web-common/src/features/tables/selectors.ts
@@ -1,5 +1,6 @@
 import { Readable, derived } from "svelte/store";
 import {
+  V1TableInfo,
   createConnectorServiceOLAPListTables,
   createRuntimeServiceGetInstance,
 } from "../../runtime-client";
@@ -20,11 +21,11 @@ export function useIsModelingSupportedForCurrentOlapDriver(instanceId: string) {
   });
 }
 
-export function useTableNames(
+export function useTables(
   runtimeInstanceId: string,
   connectorInstanceId: string | undefined,
   olapConnector: string | undefined,
-): Readable<string[]> {
+): Readable<V1TableInfo[]> {
   return derived(
     [
       useFilteredResourceNames(runtimeInstanceId, ResourceKind.Source),
@@ -60,10 +61,7 @@ export function useTableNames(
           !modelNames.includes(table.name as string),
       );
 
-      // Return the fully qualified table names
-      return (
-        filteredTables?.map((table) => table.database + "." + table.name) || []
-      );
+      return filteredTables;
     },
   );
 }
diff --git a/web-common/src/layout/navigation/NavigationEntry.svelte b/web-common/src/layout/navigation/NavigationEntry.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
   import ContextButton from "@rilldata/web-common/components/column-profile/ContextButton.svelte";
   import ExpanderButton from "@rilldata/web-common/components/column-profile/ExpanderButton.svelte";
+  import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu/";
   import MoreHorizontal from "@rilldata/web-common/components/icons/MoreHorizontal.svelte";
+  import { notifications } from "@rilldata/web-common/components/notifications";
   import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
   import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
-  import { notifications } from "@rilldata/web-common/components/notifications";
   import { createCommandClickAction } from "../../lib/actions/command-click-action";
   import { createShiftClickAction } from "../../lib/actions/shift-click-action";
   import { emitNavigationTelemetry } from "./navigation-utils";
-  import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu/";
 
   export let name: string;
   export let href: string;
@@ -68,15 +68,15 @@
     on:shift-click={shiftClickHandler}
     on:click={handleClick}
   >
-    <Tooltip location="right" alignment="start" distance={48} activeDelay={0}>
+    <Tooltip distance={8}>
+      <div class="truncate">
+        {name}
+      </div>
       {#if $$slots["icon"]}
         <span class="text-gray-400" style:width="1em" style:height="1em">
           <slot name="icon" />
         </span>
       {/if}
-      <div class="w-full truncate">
-        {name}
-      </div>
       <svelte:fragment slot="tooltip-content">
         {#if $$slots["tooltip-content"]}
           <TooltipContent><slot name="tooltip-content" /></TooltipContent>
@@ -135,7 +135,7 @@
 
   .clickable-text {
     @apply text-left size-full overflow-hidden pl-6 flex items-center;
-    @apply text-gray-900 gap-x-1;
+    @apply text-gray-900 gap-x-2;
   }
 
   .expandable {