more svelte check --ignore cleanup (#3571)

* remove notification from ignore

* clear "virtualized-table"

* remove "menu" from --ignore

* remove "inspector" from --ignore

* remove NavigationEntry from --ignore

* change menu lang to ts

* ignore specific files rather than alll of "src/**/workspace"

.github/workflows/web-test.yml

@@ -75,7 +75,7 @@ jobs:
         run: |-
           npx prettier --check "web-common/**/*"
           npx eslint web-common --quiet
-          npx svelte-check --threshold error --workspace web-common --no-tsconfig --ignore "src/components/(data-graphic|notifications|column-profile|virtualized-table|menu),src/features/models/workspace/inspector,src/**/workspace,src/features/dashboards/(time-series|time-controls),src/layout/navigation/NavigationEntry.svelte"
+          npx svelte-check --threshold error --workspace web-common --no-tsconfig --ignore "src/components/(data-graphic|column-profile),src/features/dashboards/(time-series|time-controls),src/features/sources/workspace/SourceWorkspaceHeader.svelte,src/features/models/workspace/ModelWorkspaceHeader.svelte,src/features/dashboards/workspace/Dashboard.svelte"
 
       - name: Prettier checks and lint for web local
         if: steps.filter.outputs.local == 'true'

web-common/app.d.ts

@@ -2,5 +2,6 @@ declare namespace svelteHTML {
   interface HTMLAttributes {
     // Used for copy action `shift-click-actions.ts`
     "on:shift-click"?: (event: CustomEvent) => void;
+    "on:command-click"?: (event: CustomEvent) => void;
   }
 }

web-common/src/components/BarAndLabel.svelte

@@ -7,7 +7,7 @@
   export let showBackground = true;
   export let compact = false;
   export let showHover = false;
-  export let customBackgroundColor = undefined;
+  export let customBackgroundColor = "";
   export let justify: string | boolean = "end"; // or left
   export let tweenParameters = {
     duration: 500,
@@ -31,7 +31,7 @@
     {justify ? `justify-${justify}` : ''} 
     {justify ? `justify-items-${justify}` : ''} relative w-full
     {showHover ? 'hover:bg-gray-100 hover:dark:bg-gray-600' : undefined}
-    {customBackgroundColor
+    {customBackgroundColor !== ''
     ? customBackgroundColor
     : showBackground
     ? 'bg-gray-100 dark:bg-gray-700'

web-common/src/components/menu/core/Menu.svelte

@@ -1,6 +1,6 @@
-<script context="module">
+<script lang="ts" context="module">
   // only one at a time
-  const globalActiveMenu = writable(undefined);
+  const globalActiveMenu = writable<string | undefined>(undefined);
 </script>
 
 <script lang="ts">
@@ -15,11 +15,11 @@
   import { clickOutside } from "../../../lib/actions/click-outside";
   import { guidGenerator } from "../../../lib/guid";
 
-  export let dark: boolean = undefined;
-  export let maxWidth: string = undefined;
+  export let dark: boolean | undefined = undefined;
+  export let maxWidth: string | undefined = undefined;
   export let minWidth = "300px";
-  export let minHeight: string = undefined;
-  export let maxHeight: string = undefined;
+  export let minHeight: string | undefined = undefined;
+  export let maxHeight: string | undefined = undefined;
   export let paddingTop = 2;
   export let paddingBottom = 2;
   export let rounded = true;
@@ -87,8 +87,8 @@
     dispatch("item-select");
   }
 
-  const menuItems = writable([]);
-  const currentItem = writable(undefined);
+  const menuItems = writable<{ id: number; disabled: boolean }[]>([]);
+  const currentItem = writable<number | undefined>(undefined);
 
   setContext("rill:menu:onSelect", onSelect);
   setContext("rill:menu:menuItems", menuItems);

web-common/src/components/menu/core/MenuItem.svelte

@@ -19,7 +19,9 @@
 
   const dark = getContext("rill:menu:dark");
   const onSelect: () => void = getContext("rill:menu:onSelect");
-  const menuItems: Writable<any> = getContext("rill:menu:menuItems");
+  const menuItems: Writable<{ id: number; disabled: boolean }[]> = getContext(
+    "rill:menu:menuItems"
+  );
   const currentItem: Writable<any> = getContext("rill:menu:currentItem");
 
   let itemID;

web-common/src/components/menu/triggers/SelectButton.svelte

@@ -4,6 +4,8 @@
   import CaretDownIcon from "../../icons/CaretDownIcon.svelte";
 
   export let block = false;
+  // FIXME: 99% sure that `disabled` is only ever
+  // false and can be simplified out of the codebase
   export let disabled = false;
   export let tailwindClasses = "";
   export let activeTailwindClasses = "";
@@ -46,7 +48,7 @@
   class="
 {block ? 'flex w-full h-full px-2' : 'inline-flex w-max rounded px-1'} 
   items-center gap-x-1 justify-between
-  {classes[level]}
+  {level ? classes[level] : ''}
   {tailwindClasses}
   {active && !disabled ? activeTailwindClasses : ''}
 

web-common/src/components/menu/wrappers/SimpleActionMenu.svelte

@@ -10,7 +10,7 @@ and the menu closes.
   import type { Alignment, Location } from "../../floating-element/types";
 
   export let options = [];
-  export let dark: boolean = undefined;
+  export let dark: boolean | undefined = undefined;
   export let location: Location = "bottom";
   export let alignment: Alignment = "start";
   export let distance = 16;

web-common/src/components/menu/wrappers/WithSelectMenu.svelte

@@ -10,18 +10,20 @@ and the menu closes.
   import Check from "../../icons/Check.svelte";
   import Spacer from "../../icons/Spacer.svelte";
   import { Divider, Menu, MenuItem } from "../index";
+  import type { SelectMenuItem } from "../types";
 
   export let options;
-  export let selection = undefined;
+  export let selection: (SelectMenuItem & { index?: number }) | undefined =
+    undefined;
 
-  export let dark: boolean = undefined;
-  export let multiSelect: boolean = undefined;
+  export let dark: boolean | undefined = undefined;
+  export let multiSelect: boolean | undefined = undefined;
   export let location: Location = "bottom";
   export let alignment: Alignment = "start";
   export let distance = 16;
-  export let paddingTop: number = undefined;
-  export let paddingBottom: number = undefined;
-  export let minWidth: string = undefined;
+  export let paddingTop: number | undefined = undefined;
+  export let paddingBottom: number | undefined = undefined;
+  export let minWidth: string | undefined = undefined;
   export let overflowFlipY = false;
 
   export let active = false;

web-common/src/components/notifications/NotificationCenter.svelte

@@ -7,12 +7,12 @@
 
 {#key $notificationStore.id}
   {#if $notificationStore.id}
-    {#if $notificationStore.options.persisted}
+    {#if $notificationStore?.options?.persisted}
       <PersistedNotification on:clear={() => notificationStore.clear()}>
         <div slot="title">{$notificationStore.message}</div>
         <div slot="body">{$notificationStore.detail}</div>
       </PersistedNotification>
-    {:else if $notificationStore.options.persistedLink}
+    {:else if $notificationStore?.options?.persistedLink && $notificationStore.link}
       <PersistedLinkNotification
         message={$notificationStore.message}
         link={$notificationStore.link}

web-common/src/components/notifications/notificationStore.ts

@@ -3,7 +3,7 @@ import { derived, writable } from "svelte/store";
 
 const NOTIFICATION_TIMEOUT = 2000;
 
-interface NotificationStore extends Readable<object> {
+interface NotificationStore extends Readable<NotificationMessage> {
   timeoutID: ReturnType<typeof setTimeout>;
   send: (args: NotificationMessageArguments) => void;
   clear: () => void;

web-common/src/components/virtualized-table/core/Cell.svelte

@@ -18,7 +18,7 @@
   export let row;
   export let column;
   export let value;
-  export let formattedValue;
+  export let formattedValue = null;
   export let type;
   export let barValue = 0;
   export let rowActive = false;

web-common/src/components/virtualized-table/core/ColumnHeader.svelte

@@ -29,7 +29,7 @@
   export let enableResize = true;
   export let isSelected = false;
   export let highlight = false;
-  export let sorted: SortDirection = undefined;
+  export let sorted: SortDirection | undefined = undefined;
 
   const config: VirtualizedTableConfig = getContext("config");
   const dispatch = createEventDispatcher();

web-common/src/components/virtualized-table/sections/PinnedColumns.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import type { VirtualizedTableColumns } from "../../../types";
   import { createEventDispatcher } from "svelte";
   import Cell from "../core/Cell.svelte";
   import ColumnHeader from "../core/ColumnHeader.svelte";
   import Row from "../core/Row.svelte";
   import type { PinnedColumnSide } from "../types";
+  import type { VirtualizedTableColumns } from "@rilldata/web-local/lib/types";
 
   const dispatch = createEventDispatcher();
 

web-common/src/components/virtualized-table/sections/TableCells.svelte

@@ -18,8 +18,6 @@
 
   const getCellProps = (virtRow: VirtualItem, virtCol: VirtualItem) => {
     const column = columns[virtCol.index];
-    if (!column) return;
-
     const columnName = column.name;
     const value = rows[virtRow.index][columnName];
     return {

web-common/src/features/metrics-views/workspace/MetricsWorkspaceHeader.svelte

@@ -24,7 +24,9 @@
       e.target.value = metricsDefName; // resets the input
       return;
     }
-    if (isDuplicateName(e.target.value, metricsDefName, $allNamesQuery.data)) {
+    if (
+      isDuplicateName(e.target.value, metricsDefName, $allNamesQuery.data ?? [])
+    ) {
       notifications.send({
         message: `Name ${e.target.value} is already in use`,
       });

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

@@ -10,7 +10,7 @@ It will show an error message if passed in.
   import type { V1ReconcileError } from "@rilldata/web-common/runtime-client";
   import { slide } from "svelte/transition";
 
-  export let error: LineStatus | V1ReconcileError = undefined;
+  export let error: LineStatus | V1ReconcileError | undefined = undefined;
   export let height = "calc(100vh - var(--header-height))";
 </script>
 

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

@@ -27,7 +27,7 @@
   import { useQueryClient } from "@tanstack/svelte-query";
 
   export let metricsName: string;
-  export let view: EditorView = undefined;
+  export let view: EditorView | undefined = undefined;
 
   $: models = useModelFileNames($runtime.instanceId);
 
@@ -53,21 +53,20 @@
     const schemaResp = await queryClient.fetchQuery({
       queryKey: getConnectorServiceOLAPGetTableQueryKey({
         instanceId,
-        table: model.resource.model.state.table,
-        connector: model.resource.model.state.connector,
+        table: model?.resource?.model?.state?.table,
+        connector: model?.resource?.model?.state?.connector,
       }),
       queryFn: () =>
         connectorServiceOLAPGetTable({
           instanceId,
-          table: model.resource.model.state.table,
-          connector: model.resource.model.state.connector,
+          table: model?.resource?.model?.state?.table,
+          connector: model?.resource?.model?.state?.connector,
         }),
     });
 
-    const dashboardYAML = generateDashboardYAMLForModel(
-      modelName,
-      schemaResp.schema
-    );
+    const dashboardYAML = schemaResp?.schema
+      ? generateDashboardYAMLForModel(modelName, schemaResp?.schema)
+      : "";
 
     await runtimeServicePutFile(
       $runtime.instanceId,
@@ -86,7 +85,7 @@
     /**
      * go ahead and optimistically update the editor view.
      */
-    view.dispatch({
+    view?.dispatch({
       changes: {
         from: 0,
         to: view.state.doc.length,
@@ -117,7 +116,7 @@
      * a debounce annotation here to tell the MetricsWorkspace
      * not to debounce this update.
      */
-    view.dispatch({
+    view?.dispatch({
       changes: {
         from: 0,
         to: view.state.doc.length,
@@ -146,7 +145,7 @@
       on:escape={toggleFloatingElement}
       slot="floating-element"
     >
-      {#each $models?.data as model}
+      {#each $models?.data ?? [] as model}
         <MenuItem
           on:select={() => {
             onAutogenerateConfigFromModel(model);

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

@@ -40,7 +40,7 @@
   let isValidModel = false;
   $: if ($allModels?.data?.entries) {
     isValidModel = $allModels?.data.some(
-      (model) => model.meta.name.name === modelName
+      (model) => model?.meta?.name?.name === modelName
     );
   }
 
@@ -87,7 +87,7 @@
           </CollapsibleSectionTitle>
         </div>
 
-        {#if showColumns}
+        {#if showColumns && entry?.meta?.name?.name}
           <div transition:slide|local={{ duration: LIST_SLIDE_DURATION }}>
             <ColumnProfile
               objectName={entry?.meta?.name?.name}

web-common/src/features/models/workspace/inspector/References.svelte

@@ -14,19 +14,22 @@
   } from "@rilldata/web-common/runtime-client";
   import * as classes from "@rilldata/web-local/lib/util/component-classes";
   import { getContext } from "svelte";
-  import { derived, writable } from "svelte/store";
+  import { Writable, derived, writable } from "svelte/store";
   import { slide } from "svelte/transition";
   import { runtime } from "../../../../runtime-client/runtime-store";
   import { getTableReferences } from "../../utils/get-table-references";
   import { getMatchingReferencesAndEntries } from "./utils";
   import WithModelResultTooltip from "./WithModelResultTooltip.svelte";
+  import type { QueryHighlightState } from "../../query-highlight-store";
 
   export let modelName: string;
 
   let showSourceTables = true;
   let modelHasError = false;
 
-  const queryHighlight = getContext("rill:app:query-highlight");
+  const queryHighlight: Writable<QueryHighlightState> = getContext(
+    "rill:app:query-highlight"
+  );
 
   $: getModelFile = createRuntimeServiceGetFile(
     $runtime?.instanceId,

web-common/src/layout/navigation/NavigationEntry.svelte

@@ -17,8 +17,8 @@
   export let href: string;
   export let open = false;
   export let expandable = true;
-  export let tooltipMaxWidth: string = undefined;
-  export let maxMenuWidth: string = undefined;
+  export let tooltipMaxWidth: string | undefined = undefined;
+  export let maxMenuWidth: string | undefined = undefined;
   export let showContextMenu = true;
   // We set `immediatelyNavigate` to false for Sources because we want to confirm with the user before navigating away from an Unsaved Source.
   export let immediatelyNavigate = true;
@@ -64,6 +64,7 @@
   distance={16}
   suppress={contextMenuHovered || contextMenuOpen || seeMoreHovered}
 >
+  <!-- @ts-ignore -->
   <a
     {href}
     on:click={() => {

web-common/src/layout/workspace/WorkspaceHeader.svelte

@@ -19,7 +19,7 @@
   export let appRunning = true;
   export let editable = true;
   export let showInspectorToggle = true;
-  export let width: number = undefined;
+  export let width: number | undefined = undefined;
 
   let titleInputElement;
   let editingTitle = false;
@@ -47,6 +47,17 @@
   $: applicationStatus = appRunning ? EntityStatus.Running : EntityStatus.Idle;
 
   $: width = $observedNode?.getBoundingClientRect()?.width;
+
+  function onInput(
+    event: Event & {
+      currentTarget: EventTarget & HTMLInputElement;
+    } & { target: EventTarget & HTMLInputElement }
+  ) {
+    if (editable) {
+      titleInputValue = event?.target?.value;
+      editingTitle = true;
+    }
+  }
 </script>
 
 <svelte:window on:keydown={onKeydown} />
@@ -77,12 +88,7 @@
               editingTitle = true;
               titleInputValue = titleInput;
             }}
-            on:input={(evt) => {
-              if (editable) {
-                titleInputValue = evt.target.value;
-                editingTitle = true;
-              }
-            }}
+            on:input={onInput}
             class="bg-transparent border border-transparent border-2 {editable
               ? 'hover:border-gray-400 cursor-pointer'
               : ''} rounded pl-2 pr-2"