0.52 uxqa fixes (#6167)

* uxqa fixes * change resource fetching approach * dont filter out time pills when syncing * change label to display_name * remove class * type fix
rilldata · Nov 26, 2024 · c97d6d1 · c97d6d1 · github-actions · Nov 26, 2024
1 parent a3de19c
commit c97d6d1
Show file tree

Hide file tree

Showing 13 changed files with 78 additions and 54 deletions.
diff --git a/web-common/src/app.css b/web-common/src/app.css
@@ -250,3 +250,4 @@ a {
 .left-shift {
   @apply pl-8;
 }
+
diff --git a/web-common/src/features/dashboards/state-managers/selectors/pivot.ts b/web-common/src/features/dashboards/state-managers/selectors/pivot.ts
@@ -1,6 +1,7 @@
 import { filteredSimpleMeasures } from "@rilldata/web-common/features/dashboards/state-managers/selectors/measures";
 import type { DashboardDataSources } from "./types";
 import { PivotChipType } from "../../pivot/types";
+import { allDimensions } from "./dimensions";
 
 export const pivotSelectors = {
   showPivot: ({ dashboard }: DashboardDataSources) => dashboard.pivot.active,
@@ -19,9 +20,13 @@ export const pivotSelectors = {
         description: measure.description,
       }));
   },
-  dimensions: ({ validMetricsView, dashboard }: DashboardDataSources) => {
+  dimensions: ({
+    validMetricsView,
+    dashboard,
+    validExplore,
+  }: DashboardDataSources) => {
     {
-      const dimensions = validMetricsView?.dimensions ?? [];
+      const dimensions = allDimensions({ validMetricsView, validExplore });
 
       const columns = dashboard.pivot.columns;
       const rows = dashboard.pivot.rows;

diff --git a/web-common/src/features/dashboards/stores/dashboard-stores.ts b/web-common/src/features/dashboards/stores/dashboard-stores.ts
@@ -142,13 +142,17 @@ function syncDimensions(
   }
 
   metricsExplorer.pivot.rows.dimension =
-    metricsExplorer.pivot.rows.dimension.filter((dimension) =>
-      dimensionsSet.has(dimension.id),
+    metricsExplorer.pivot.rows.dimension.filter(
+      (dimension) =>
+        dimensionsSet.has(dimension.id) ||
+        dimension.type === PivotChipType.Time,
     );
 
   metricsExplorer.pivot.columns.dimension =
-    metricsExplorer.pivot.columns.dimension.filter((dimension) =>
-      dimensionsSet.has(dimension.id),
+    metricsExplorer.pivot.columns.dimension.filter(
+      (dimension) =>
+        dimensionsSet.has(dimension.id) ||
+        dimension.type === PivotChipType.Time,
     );
 
   if (metricsExplorer.allDimensionsVisible) {

diff --git a/web-common/src/features/dashboards/workspace/DashboardWithProviders.svelte b/web-common/src/features/dashboards/workspace/DashboardWithProviders.svelte
@@ -11,7 +11,7 @@
 </script>
 
 {#if metricsViewName}
-  {#key exploreName}
+  {#key exploreName + metricsViewName}
     <StateManagersProvider {metricsViewName} {exploreName} visualEditing>
       <DashboardStateProvider {exploreName}>
         <DashboardUrlStateProvider {metricsViewName}>

diff --git a/web-common/src/features/explores/ExplorePreviewCTAs.svelte b/web-common/src/features/explores/ExplorePreviewCTAs.svelte
@@ -50,20 +50,20 @@
         </Button>
       </DropdownMenu.Trigger>
       <DropdownMenu.Content align="end">
-        <DropdownMenu.Item href={`/files${metricsViewFilePath}`}>
-          <MetricsViewIcon
-            color={resourceColorMapping[ResourceKind.MetricsView]}
-            size="16px"
-          />
-          Metrics View
-        </DropdownMenu.Item>
         <DropdownMenu.Item href={`/files${exploreFilePath}`}>
           <ExploreIcon
             color={resourceColorMapping[ResourceKind.Explore]}
             size="16px"
           />
           Explore dashboard
         </DropdownMenu.Item>
+        <DropdownMenu.Item href={`/files${metricsViewFilePath}`}>
+          <MetricsViewIcon
+            color={resourceColorMapping[ResourceKind.MetricsView]}
+            size="16px"
+          />
+          Metrics View
+        </DropdownMenu.Item>
       </DropdownMenu.Content>
     </DropdownMenu.Root>
   {/if}

diff --git a/web-common/src/features/visual-editing/MeasureDimensionSelector.svelte b/web-common/src/features/visual-editing/MeasureDimensionSelector.svelte
@@ -49,7 +49,9 @@
         if (selectedProxy.size) {
           setItems(Array.from(selectedProxy), excludeProxy);
         } else {
-          setItems(items.map(({ name }) => name).filter(isString));
+          const newItems = items.map(({ name }) => name).filter(isString);
+          setItems(newItems);
+          selectedProxy = new Set(newItems);
         }
       } else if (field === "expression") {
         onSelectExpression();
@@ -71,6 +73,7 @@
       }}
     />
     <a
+      class="w-fit"
       target="_blank"
       href="https://docs.rilldata.com/reference/project-files/explore-dashboards"
     >
@@ -96,6 +99,9 @@
         selectedProxy = new Set(items);
         setItems(items, exclude);
       }}
-    />
+      let:item
+    >
+      {items.find((m) => m.name === item)?.displayName ?? item}
+    </SelectionDropdown>
   {/if}
 </div>
diff --git a/web-common/src/features/visual-metrics-editing/MetricsTable.svelte b/web-common/src/features/visual-metrics-editing/MetricsTable.svelte
@@ -4,7 +4,13 @@
   import { ROW_HEIGHT } from "./lib";
   import { editingItem, YAMLDimension, YAMLMeasure } from "./lib";
 
-  const headers = ["Name", "Label", "SQL expression", "Format", "Description"];
+  const headers = [
+    "Name",
+    "Display name",
+    "SQL expression",
+    "Format",
+    "Description",
+  ];
   const gutterWidth = 56;
 
   export let type: "measures" | "dimensions";
@@ -106,7 +112,7 @@
   function filter(item: YAMLDimension | YAMLMeasure, searchValue: string) {
     return (
       item?.name?.toLowerCase().includes(searchValue.toLowerCase()) ||
-      item?.label?.toLowerCase().includes(searchValue.toLowerCase()) ||
+      item?.display_name?.toLowerCase().includes(searchValue.toLowerCase()) ||
       item?.expression?.toLowerCase().includes(searchValue.toLowerCase()) ||
       (item instanceof YAMLDimension &&
         item?.column?.toLowerCase().includes(searchValue.toLowerCase()))

diff --git a/web-common/src/features/visual-metrics-editing/MetricsTableRow.svelte b/web-common/src/features/visual-metrics-editing/MetricsTableRow.svelte
@@ -40,9 +40,9 @@
   let row: HTMLTableRowElement;
   let hovered = false;
 
-  $: ({ name, label, expression, description } = item);
+  $: ({ name, display_name, expression, description } = item);
 
-  $: id = name ?? label ?? "";
+  $: id = name ?? display_name ?? "";
 
   $: finalSelected = selected && !sidebarOpen;
 
@@ -93,15 +93,15 @@
       <span>{name || "-"}</span>
     {/if}
   </td>
-  <td on:click={onCellClick} aria-label="Label">
+  <td on:click={onCellClick} aria-label="Display name">
     <div class="text-[12px] pr-4">
       <Chip
         slideDuration={0}
         type={type === "dimensions" ? "dimension" : "measure"}
-        label={label || name}
+        label={display_name || name}
       >
         <div slot="body" class="font-bold">
-          {label || name}
+          {display_name || name}
         </div>
       </Chip>
     </div>

diff --git a/web-common/src/features/visual-metrics-editing/Sidebar.svelte b/web-common/src/features/visual-metrics-editing/Sidebar.svelte
@@ -84,13 +84,13 @@
       },
       {
         optional: true,
-        label: "Label",
+        label: "Display name",
         fields: [
           {
-            key: "label",
+            key: "display_name",
             hint: "Used on dashboards and charts. Inferred from name when not provided",
 
-            label: "Label",
+            label: "Display name",
           },
         ],
         selected: 0,
@@ -171,14 +171,14 @@
         selected: 0,
       },
       {
-        label: "Label",
+        label: "Display name",
         optional: true,
         fields: [
           {
-            key: "label",
+            key: "display_name",
             hint: "Used on dashboards and charts. Inferred from name when not provided",
 
-            label: "Label",
+            label: "Display name",
           },
         ],
         selected: 0,
@@ -268,6 +268,7 @@
   >
     {#each properties[type] as { fields, selected, label, optional, fontFamily } (label)}
       {@const { hint, key, options, placeholder, boolean } = fields[selected]}
+
       {#if boolean}
         <div class="flex gap-x-2 items-center h-full bg-white rounded-full">
           <Switch bind:checked={editingClone[key]} id="auto-save" medium />
@@ -295,6 +296,7 @@
         <Input
           id="vme-{label}"
           textClass="text-sm"
+          capitalizeLabel={false}
           {label}
           {hint}
           {options}

diff --git a/web-common/src/features/visual-metrics-editing/lib.ts b/web-common/src/features/visual-metrics-editing/lib.ts
@@ -31,7 +31,7 @@ export class YAMLDimension {
   column: string;
   expression: string;
   name: string;
-  label: string;
+  display_name: string;
   description: string;
   unnest: boolean | undefined;
   resourceName: string;
@@ -43,7 +43,7 @@ export class YAMLDimension {
     this.column = item?.get("column") ?? "";
     this.expression = item?.get("expression") ?? "";
     this.name = item?.get("name") ?? "";
-    this.label = item?.get("display_name") ?? item?.get("label") ?? "";
+    this.display_name = item?.get("display_name") ?? item?.get("label") ?? "";
     this.description = item?.get("description") ?? "";
     this.unnest =
       item?.get("unnest") === undefined
@@ -56,7 +56,7 @@ export class YAMLDimension {
 export class YAMLMeasure {
   expression: string;
   name: string;
-  label: string;
+  display_name: string;
   description: string;
   valid_percent_of_total: boolean;
   format_d3: string;
@@ -65,7 +65,7 @@ export class YAMLMeasure {
   constructor(item?: YAMLMap<string, string>) {
     this.expression = item?.get("expression") ?? "";
     this.name = item?.get("name") ?? "";
-    this.label = item?.get("display_name") ?? item?.get("label") ?? "";
+    this.display_name = item?.get("display_name") ?? item?.get("label") ?? "";
     this.description = item?.get("description") ?? "";
     this.valid_percent_of_total =
       item?.get("valid_percent_of_total") === undefined

diff --git a/web-common/src/features/workspaces/ExploreWorkspace.svelte b/web-common/src/features/workspaces/ExploreWorkspace.svelte
@@ -17,10 +17,12 @@
   import { workspaces } from "@rilldata/web-common/layout/workspace/workspace-stores";
   import ViewSelector from "@rilldata/web-common/features/visual-editing/ViewSelector.svelte";
   import VisualExploreEditing from "./VisualExploreEditing.svelte";
-  import DashboardWithProviders from "../dashboards/workspace/DashboardWithProviders.svelte";
   import MetricsEditorContainer from "../metrics-views/editor/MetricsEditorContainer.svelte";
   import { mapParseErrorsToLines } from "../metrics-views/errors";
   import ErrorPage from "@rilldata/web-common/components/ErrorPage.svelte";
+  import { createRuntimeServiceGetExplore } from "@rilldata/web-common/runtime-client";
+  import Spinner from "../entity-management/Spinner.svelte";
+  import DashboardWithProviders from "../dashboards/workspace/DashboardWithProviders.svelte";
 
   export let fileArtifact: FileArtifact;
 
@@ -31,33 +33,31 @@
     path: filePath,
     resourceName,
     fileName,
-    getResource,
     getAllErrors,
     remoteContent,
   } = fileArtifact);
 
   $: exploreName = $resourceName?.name ?? getNameFromFile(filePath);
 
-  $: initLocalUserPreferenceStore(exploreName);
+  $: query = createRuntimeServiceGetExplore(instanceId, { name: exploreName });
 
-  $: resourceQuery = getResource(queryClient, instanceId);
+  $: ({ data: resources } = $query);
 
-  $: ({ data: resource } = $resourceQuery);
+  $: initLocalUserPreferenceStore(exploreName);
+
+  $: exploreResource = resources?.explore;
+  $: metricsViewResource = resources?.metricsView;
 
   $: allErrorsQuery = getAllErrors(queryClient, instanceId);
   $: allErrors = $allErrorsQuery;
-  $: resourceIsReconciling = resourceIsLoading(resource);
+  $: resourceIsReconciling = resourceIsLoading(exploreResource);
 
   $: workspace = workspaces.get(filePath);
   $: selectedViewStore = workspace.view;
 
   $: selectedView = $selectedViewStore ?? "code";
 
-  $: exploreResource = resource?.explore;
-
-  $: metricsViewName = resource?.meta?.refs?.find(
-    (ref) => ref.kind === ResourceKind.MetricsView,
-  )?.name;
+  $: metricsViewName = metricsViewResource?.meta?.name?.name;
 
   $: lineBasedRuntimeErrors = mapParseErrorsToLines(
     allErrors,
@@ -79,7 +79,7 @@
 
 <WorkspaceContainer>
   <WorkspaceHeader
-    {resource}
+    resource={exploreResource}
     hasUnsavedChanges={$hasUnsavedChanges}
     onTitleChange={onChangeCallback}
     slot="header"
@@ -118,15 +118,17 @@
           header="Unable to load dashboard preview"
           statusCode={404}
         />
-      {:else if metricsViewName && exploreName}
+      {:else if exploreName && metricsViewName}
         <DashboardWithProviders {exploreName} {metricsViewName} />
+      {:else}
+        <Spinner status={1} size="48px" />
       {/if}
     {/if}
   </MetricsEditorContainer>
 
   <VisualExploreEditing
     slot="inspector"
-    {exploreResource}
+    exploreResource={exploreResource?.explore}
     {metricsViewName}
     {exploreName}
     {fileArtifact}

diff --git a/web-common/src/features/workspaces/VisualMetrics.svelte b/web-common/src/features/workspaces/VisualMetrics.svelte
@@ -223,18 +223,18 @@
   };
 
   $: dimensionNamesAndLabels = itemGroups.dimensions.reduce(
-    (acc, { name, label, resourceName }) => {
+    (acc, { name, display_name, resourceName }) => {
       acc.name = Math.max(acc.name, name.length || resourceName?.length || 0);
-      acc.label = Math.max(acc.label, label.length);
+      acc.label = Math.max(acc.label, display_name.length);
       return acc;
     },
     { name: 0, label: 0 },
   );
 
   $: measureNamesAndLabels = itemGroups.measures.reduce(
-    (acc, { name, label }) => {
+    (acc, { name, display_name }) => {
       acc.name = Math.max(acc.name, name.length);
-      acc.label = Math.max(acc.label, label.length);
+      acc.label = Math.max(acc.label, display_name.length);
       return acc;
     },
     { name: 0, label: 0 },

diff --git a/web-local/src/routes/(viz)/explore/[name]/+page.svelte b/web-local/src/routes/(viz)/explore/[name]/+page.svelte
@@ -10,10 +10,8 @@
   import { useProjectParser } from "@rilldata/web-common/features/entity-management/resource-selectors";
   import { useExploreValidSpec } from "@rilldata/web-common/features/explores/selectors";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
-  import { useQueryClient } from "@tanstack/svelte-query";
   import type { PageData } from "./$types";
-
-  const queryClient = useQueryClient();
+  import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
 
   export let data: PageData;