the lost branch

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@outerbase/astra-ui",
-  "version": "0.8.11",
+  "version": "0.8.13",
   "type": "module",
   "main": "dist/js/index.js",
   "module": "dist/js/index.js",

src/components/charts/chart.ts

@@ -29,6 +29,7 @@ import type {
 import { unsafeHTML } from 'lit/directives/unsafe-html.js'
 import { isDate } from '../../lib/format-date.js'
 import { OUTERBASE_API_DOMAIN } from '../../variables.js'
+import { debounce } from 'lodash-es'
 
 // Register the required components
 echarts.use([
@@ -254,9 +255,7 @@ export default class AstraChart extends ClassifiedElement {
 
   override firstUpdated(_changedProperties: PropertyValueMap<this>) {
     super.firstUpdated(_changedProperties)
-
     this.initializeChart()
-    this.setupResizeObserver()
   }
 
   override updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
@@ -334,6 +333,13 @@ export default class AstraChart extends ClassifiedElement {
 
     this.chartInstance = echarts.init(this.chartDiv, undefined, { renderer: 'canvas' })
     this.chartInstance.setOption(this.getChartOptions())
+
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect()
+      delete this.resizeObserver
+    }
+
+    this.setupResizeObserver()
   }
 
   private labelFormatter(value: unknown): string {
@@ -543,7 +549,7 @@ export default class AstraChart extends ClassifiedElement {
   }
 
   private setupResizeObserver() {
-    this.resizeObserver = new ResizeObserver((entries) => {
+    const onResize = debounce((entries: ResizeObserverEntry[]) => {
       for (const entry of entries) {
         if (entry.target === this.chartDiv) {
           const { width, height } = entry.contentRect
@@ -556,7 +562,9 @@ export default class AstraChart extends ClassifiedElement {
           }
         }
       }
-    })
+    }, 50)
+
+    this.resizeObserver = new ResizeObserver(onResize)
 
     if (this.chartDiv) {
       this.resizeObserver.observe(this.chartDiv)

src/components/charts/composed.ts

@@ -162,9 +162,7 @@ export default class AstraComposedChart extends AstraChart {
     // render chart
     const showNoDataLabel = (layer?.result === undefined || layer?.result?.length === 0) && layer?.type !== 'text'
     const chart = showNoDataLabel ? null : super.render()
-    const chartSection = html`<div
-      class=${`h-full w-full flex-1 ${layer?.type === 'table' ? 'border-t border-[#d4d4d4] dark:border-[#404040] z-0' : ''}`}
-    >
+    const chartSection = html`<div class=${`h-full w-full flex-1 ${layer?.type === 'table' ? 'z-0' : ''}`}>
       ${showNoDataLabel
         ? html`<svg
             width="32"

src/components/table/core/td.ts

@@ -247,7 +247,7 @@ export class TableData extends MutableElement {
       'relative focus:z-[1]': true,
       'h-[34px] flex items-center justify-center': true,
       'border-theme-table-border dark:border-theme-table-border-dark': true,
-      'backdrop-blur-sm': this.blank || this.pinned,
+      // 'backdrop-blur-sm': this.blank || this.pinned,
       // TODO support odd vs even again
       'text-theme-table-content dark:text-theme-table-content-dark': !this.isEditing,
       'text-theme-table-cell-mutating-content dark:text-theme-table-cell-mutating-content': this.isEditing,