Improve tabs updates (#6956)

Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>

plugins/workbench-resources/src/components/Workbench.svelte

@@ -221,6 +221,7 @@
           selectTab(tabToReplace._id)
           prevTabIdStore.set(tabToReplace._id)
         } else {
+          console.log('Creating new tab on init')
           const _id = await client.createDoc(workbench.class.WorkbenchTab, core.space.Workspace, {
             attachedTo: account._id,
             location: url,

plugins/workbench-resources/src/components/WorkbenchTabPresenter.svelte

@@ -23,7 +23,7 @@
     languageStore,
     locationToUrl
   } from '@hcengineering/ui'
-  import { ComponentExtensions, getClient } from '@hcengineering/presentation'
+  import { ComponentExtensions, getClient, reduceCalls } from '@hcengineering/presentation'
   import { Asset, getResource, translate } from '@hcengineering/platform'
   import { WorkbenchTab } from '@hcengineering/workbench'
   import view from '@hcengineering/view'
@@ -40,8 +40,18 @@
   let icon: Asset | AnySvelteComponent | undefined
   let iconProps: Record<string, any> | undefined
 
+  let lastLocUrl: string | undefined = undefined
+  let lastLang: string | undefined = undefined
+
   async function updateTabData (tab: WorkbenchTab, lang: string): Promise<void> {
     const tabLoc = $tabIdStore === tab._id ? getCurrentLocation() : getTabLocation(tab)
+    const url = locationToUrl(tabLoc)
+
+    if (lastLocUrl === url && lastLang === lang) return
+
+    lastLocUrl = url
+    lastLang = lang
+
     const data = await getTabDataByLocation(tabLoc)
 
     name = data.name ?? (await translate(data.label, {}, lang))
@@ -53,11 +63,15 @@
     iconProps = data.iconProps
 
     if (tab.name !== name && tab.location === locationToUrl(tabLoc)) {
-      await client.update(tab, { name })
+      await client.diffUpdate(tab, { name })
     }
   }
 
-  $: void updateTabData(tab, $languageStore)
+  const update = reduceCalls(async function (tab: WorkbenchTab, lang: string): Promise<void> {
+    await updateTabData(tab, lang)
+  })
+
+  $: void update(tab, $languageStore)
 
   function handleClickTab (): void {
     selectTab(tab._id)

plugins/workbench-resources/src/workbench.ts

@@ -19,8 +19,8 @@ import core, {
   type Doc,
   getCurrentAccount,
   type Ref,
-  RateLimiter,
+  generateId,
-  generateId
+  reduceCalls
 } from '@hcengineering/core'
 import { type Application, workbenchId, type WorkbenchTab } from '@hcengineering/workbench'
 import {
@@ -56,20 +56,13 @@ tabIdStore.subscribe((value) => {
   prevTabId = value
 })
 
-// Use rate limiter to control tab creation, preventing multiple tabs during fast location changing
-const limiter = new RateLimiter(1)
-
 workspaceStore.subscribe((workspace) => {
   tabIdStore.set(getTabFromLocalStorage(workspace ?? ''))
 })
 
-locationStore.subscribe((l: Location) => {
-  void limiter.add(syncTabLoc)
-})
-
 tabIdStore.subscribe(saveTabToLocalStorage)
 
-async function syncTabLoc (): Promise<void> {
+const syncTabLoc = reduceCalls(async (): Promise<void> => {
   const loc = getCurrentLocation()
   const workspace = get(workspaceStore)
   if (workspace == null || workspace === '') return
@@ -102,7 +95,7 @@ async function syncTabLoc (): Promise<void> {
     }
 
     const me = getCurrentAccount()
-    const tab: WorkbenchTab = {
+    const newTab: WorkbenchTab = {
       _id: generateId(),
       _class: workbench.class.WorkbenchTab,
       space: core.space.Workspace,
@@ -113,9 +106,10 @@ async function syncTabLoc (): Promise<void> {
       modifiedOn: Date.now(),
       modifiedBy: me._id
     }
-    await getClient().createDoc(workbench.class.WorkbenchTab, core.space.Workspace, tab, tab._id)
+    console.log('Creating new tab when pinned location changed', { newLocation: url, pinnedLocation: tab.location })
-    tabsStore.update((tabs) => [...tabs, tab])
+    await getClient().createDoc(workbench.class.WorkbenchTab, core.space.Workspace, newTab, newTab._id)
-    selectTab(tab._id)
+    tabsStore.update((tabs) => [...tabs, newTab])
+    selectTab(newTab._id)
   } else {
     // TODO: Fix this
     // if (
@@ -127,9 +121,14 @@ async function syncTabLoc (): Promise<void> {
     //   return
     // }
 
-    await getClient().update(tab, { location: url, name })
+    await getClient().diffUpdate(tab, { location: url, name })
   }
-}
+})
+
+locationStore.subscribe((l: Location) => {
+  void syncTabLoc()
+})
+
 export function syncWorkbenchTab (): void {
   const workspace = get(workspaceStore)
   tabIdStore.set(getTabFromLocalStorage(workspace ?? ''))