@holoviz/panel 1.6.2 → 1.6.3-a.2

package/dist/panel.js

@@ -54,9 +54,9 @@
     __esModule();
     exports.VizzuChart = exports.VideoStream = exports.Video = exports.VegaPlot = exports.TrendIndicator = exports.TooltipIcon = exports.ToggleIcon = void 0;
     const tslib_1 = require("tslib");
-    var ace_1 = require("4ccbc5a371") /* ./ace */;
+    var ace_1 = require("04c3c73615") /* ./ace */;
     __esExport("AcePlot", ace_1.AcePlot);
-    var anywidget_component_1 = require("3df8113309") /* ./anywidget_component */;
+    var anywidget_component_1 = require("1f663ffe94") /* ./anywidget_component */;
     __esExport("AnyWidgetComponent", anywidget_component_1.AnyWidgetComponent);
     var audio_1 = require("fd59c985b3") /* ./audio */;
     __esExport("Audio", audio_1.Audio);
@@ -74,7 +74,7 @@
     __esExport("CheckboxButtonGroup", checkbox_button_group_1.CheckboxButtonGroup);
     var chatarea_input_1 = require("27a077673d") /* ./chatarea_input */;
     __esExport("ChatAreaInput", chatarea_input_1.ChatAreaInput);
-    var column_1 = require("42f54ab82e") /* ./column */;
+    var column_1 = require("975c86e1d3") /* ./column */;
     __esExport("Column", column_1.Column);
     var comm_manager_1 = require("3ec0e8eb36") /* ./comm_manager */;
     __esExport("CommManager", comm_manager_1.CommManager);
@@ -114,7 +114,7 @@
     __esExport("Location", location_1.Location);
     var mathjax_1 = require("d889a68424") /* ./mathjax */;
     __esExport("MathJax", mathjax_1.MathJax);
-    var modal_1 = require("c7aa6cc7c5") /* ./modal */;
+    var modal_1 = require("90f76e3d2e") /* ./modal */;
     __esExport("Modal", modal_1.Modal);
     var pdf_1 = require("f87ad1873c") /* ./pdf */;
     __esExport("PDF", pdf_1.PDF);
@@ -130,11 +130,11 @@
     __esExport("QuillInput", quill_1.QuillInput);
     var radio_button_group_1 = require("25e2d7c208") /* ./radio_button_group */;
     __esExport("RadioButtonGroup", radio_button_group_1.RadioButtonGroup);
-    var react_component_1 = require("134ad3d91a") /* ./react_component */;
+    var react_component_1 = require("6ad133a76d") /* ./react_component */;
     __esExport("ReactComponent", react_component_1.ReactComponent);
     var reactive_html_1 = require("d5752cda5a") /* ./reactive_html */;
     __esExport("ReactiveHTML", reactive_html_1.ReactiveHTML);
-    var reactive_esm_1 = require("7ce3127e65") /* ./reactive_esm */;
+    var reactive_esm_1 = require("0b75212524") /* ./reactive_esm */;
     __esExport("ReactiveESM", reactive_esm_1.ReactiveESM);
     var singleselect_1 = require("4155401209") /* ./singleselect */;
     __esExport("SingleSelect", singleselect_1.SingleSelect);
@@ -170,7 +170,7 @@
     __esExport("VizzuChart", vizzu_1.VizzuChart);
     tslib_1.__exportStar(require("c51f25e2a7") /* ./vtk */, exports);
 },
-"4ccbc5a371": /* models/ace.js */ function _(require, module, exports, __esModule, __esExport) {
+"04c3c73615": /* models/ace.js */ function _(require, module, exports, __esModule, __esExport) {
     var _a;
     __esModule();
     const dom_1 = require("@bokehjs/core/dom");
@@ -179,13 +179,15 @@
     class AcePlotView extends layout_1.HTMLBoxView {
         connect_signals() {
             super.connect_signals();
-            const { code, theme, language, filename, print_margin, annotations, readonly } = this.model.properties;
+            const { code, theme, language, filename, print_margin, annotations, soft_tabs, indent, readonly } = this.model.properties;
             this.on_change(code, () => this._update_code_from_model());
             this.on_change(theme, () => this._update_theme());
             this.on_change(language, () => this._update_language());
             this.on_change(filename, () => this._update_filename());
             this.on_change(print_margin, () => this._update_print_margin());
             this.on_change(annotations, () => this._add_annotations());
+            this.on_change(indent, () => this._editor.setOptions({ tabSize: this.model.indent }));
+            this.on_change(soft_tabs, () => this._editor.setOptions({ useSoftTabs: this.model.indent }));
             this.on_change(readonly, () => {
                 this._editor.setReadOnly(this.model.readonly);
             });
@@ -208,6 +210,8 @@
             this._modelist = ace.require("ace/ext/modelist");
             this._editor.setOptions({
                 enableBasicAutocompletion: true,
+                tabSize: this.model.indent,
+                useSoftTabs: this.model.soft_tabs,
                 enableSnippets: true,
                 fontFamily: "monospace", //hack for cursor position
             });
@@ -287,16 +291,18 @@
     AcePlot.__module__ = "panel.models.ace";
     (() => {
         _a.prototype.default_view = AcePlotView;
-        _a.define(({ Any, List, Bool, Str, Nullable }) => ({
+        _a.define(({ Any, Bool, Int, List, Str, Nullable }) => ({
+            annotations: [List(Any), []],
             code: [Str, ""],
             code_input: [Str, ""],
-            on_keyup: [Bool, true],
             filename: [Nullable(Str), null],
+            indent: [Int, 4],
             language: [Str, ""],
+            on_keyup: [Bool, true],
+            print_margin: [Bool, false],
             theme: [Str, "chrome"],
-            annotations: [List(Any), []],
             readonly: [Bool, false],
-            print_margin: [Bool, false],
+            soft_tabs: [Bool, false],
         }));
         _a.override({
             height: 300,
@@ -696,10 +702,10 @@
         scheduled();
     }
 },
-"3df8113309": /* models/anywidget_component.js */ function _(require, module, exports, __esModule, __esExport) {
+"1f663ffe94": /* models/anywidget_component.js */ function _(require, module, exports, __esModule, __esExport) {
     var _a;
     __esModule();
-    const reactive_esm_1 = require("7ce3127e65") /* ./reactive_esm */;
+    const reactive_esm_1 = require("0b75212524") /* ./reactive_esm */;
     class AnyWidgetModelAdapter {
         constructor(model) {
             this.view = null;
@@ -823,11 +829,24 @@
                 this.destroyer.then((d) => d({ model: this.adapter, el: this.container }));
             }
         }
+        after_rendered() {
+            this.render_children();
+            this._rendered = true;
+        }
+    }
+    exports.AnyWidgetComponentView = AnyWidgetComponentView;
+    AnyWidgetComponentView.__name__ = "AnyWidgetComponentView";
+    class AnyWidgetComponent extends reactive_esm_1.ReactiveESM {
+        constructor(attrs) {
+            super(attrs);
+            this.sucrase_transforms = ["typescript", "jsx"];
+        }
         _render_code() {
             return `
-const view = Bokeh.index.find_one_by_id('${this.model.id}')
+function render(id) {
+  const view = Bokeh.index.find_one_by_id(id)
+  if (!view) { return }
 
-function render() {
   const out = Promise.resolve(view.render_fn({
     view, model: view.adapter, data: view.model.data, el: view.container
   }) || null)
@@ -837,17 +856,6 @@ function render() {
 
 export default {render}`;
         }
-        after_rendered() {
-            this.render_children();
-            this._rendered = true;
-        }
-    }
-    exports.AnyWidgetComponentView = AnyWidgetComponentView;
-    AnyWidgetComponentView.__name__ = "AnyWidgetComponentView";
-    class AnyWidgetComponent extends reactive_esm_1.ReactiveESM {
-        constructor(attrs) {
-            super(attrs);
-        }
         _run_initializer(initialize) {
             const props = { model: new AnyWidgetModelAdapter(this) };
             initialize(props);
@@ -861,7 +869,7 @@ export default {render}`;
         _a.prototype.default_view = AnyWidgetComponentView;
     })();
 },
-"7ce3127e65": /* models/reactive_esm.js */ function _(require, module, exports, __esModule, __esExport) {
+"0b75212524": /* models/reactive_esm.js */ function _(require, module, exports, __esModule, __esExport) {
     var _a, _b, _c;
     __esModule();
     exports.model_getter = model_getter;
@@ -1052,7 +1060,6 @@ export default {render}`;
             this.accessed_properties = [];
             this.accessed_children = [];
             this.compiled_module = null;
-            this.render_module = null;
             this._changing = false;
             this._child_rendered = new Map();
             this._event_handlers = [];
@@ -1076,15 +1083,6 @@ export default {render}`;
                 set: model_setter,
             });
         }
-        init_module() {
-            if (this.model.compile_error) {
-                return;
-            }
-            const code = this._render_code();
-            const render_url = URL.createObjectURL(new Blob([code], { type: "text/javascript" }));
-            // @ts-ignore
-            this.render_module = importShim(render_url);
-        }
         async lazy_initialize() {
             await super.lazy_initialize();
             this.compiled_module = await this.model.compiled_module;
@@ -1210,30 +1208,12 @@ export default {render}`;
                 this.render_error(this.model.compile_error);
             }
             else {
-                if (this.render_module == null) {
-                    this.init_module();
-                }
                 this.render_esm();
             }
-        }
-        _render_code() {
-            return `
-const view = Bokeh.index.find_one_by_id('${this.model.id}')
-
-function render() {
-  const output = view.render_fn({
-    view: view, model: view.model_proxy, data: view.model.data, el: view.container
-  })
-
-  Promise.resolve(output).then((out) => {
-    if (out instanceof Element) {
-      view.container.replaceChildren(out)
-    }
-    view.after_rendered()
-  })
-}
-
-export default {render}`;
+            for (const element_view of this.element_views) {
+                const target = element_view.rendering_target() ?? this.self_target;
+                element_view.render_to(target);
+            }
         }
         after_rendered() {
             const handlers = (this._lifecycle_handlers.get("after_render") || []);
@@ -1250,7 +1230,7 @@ export default {render}`;
             this._rendered = true;
         }
         render_esm() {
-            if (this.model.compiled === null || this.render_module === null) {
+            if (this.model.compiled === null || this.model.render_module === null) {
                 return;
             }
             this.accessed_properties = [];
@@ -1258,7 +1238,7 @@ export default {render}`;
                 (this._lifecycle_handlers.get(lf) || []).splice(0);
             }
             this.model.disconnect_watchers(this);
-            this.render_module.then((mod) => mod.default.render());
+            this.model.render_module.then((mod) => mod.default.render(this.model.id));
         }
         render_children() {
             for (const child of this.model.children) {
@@ -1385,6 +1365,7 @@ export default {render}`;
             this.compiled = null;
             this.compiled_module = null;
             this.compile_error = null;
+            this.render_module = null;
             this.sucrase_transforms = ["typescript"];
             this._destroyer = null;
             this._esm_watchers = {};
@@ -1519,6 +1500,46 @@ export default {render}`;
                 this._destroyer(this.model_proxy);
             }
         }
+        init_module() {
+            if (this.compile_error) {
+                return;
+            }
+            else if (MODULE_CACHE.has(this._render_cache_key)) {
+                this.render_module = MODULE_CACHE.get(this._render_cache_key);
+            }
+            else {
+                const code = this._render_code();
+                const render_url = URL.createObjectURL(new Blob([code], { type: "text/javascript" }));
+                // @ts-ignore
+                this.render_module = importShim(render_url);
+                MODULE_CACHE.set(this.data.type, this.render_module);
+            }
+        }
+        _render_code() {
+            return `
+function render(id) {
+  const view = Bokeh.index.find_one_by_id(id)
+  if (view == null) {
+    return null
+  }
+
+  const output = view.render_fn({
+    view: view, model: view.model_proxy, data: view.model.data, el: view.container
+  })
+
+  Promise.resolve(output).then((out) => {
+    if (out instanceof Element) {
+      view.container.replaceChildren(out)
+    }
+    view.after_rendered()
+  })
+}
+
+export default {render}`;
+        }
+        get _render_cache_key() {
+            return "reactive_esm";
+        }
         compile() {
             if (this.bundle != null) {
                 return this.esm;
@@ -1593,6 +1614,7 @@ export default {render}`;
                     if (initialize) {
                         this._run_initializer(initialize);
                     }
+                    this.init_module();
                     return mod;
                 }
                 catch (e) {
@@ -18629,7 +18651,7 @@ ${namesToRegister
     __esModule();
     const tslib_1 = require("tslib");
     const DOM = tslib_1.__importStar(require("@bokehjs/core/dom"));
-    const column_1 = require("42f54ab82e") /* ./column */;
+    const column_1 = require("975c86e1d3") /* ./column */;
     const card_css_1 = tslib_1.__importDefault(require("edc7ee0090") /* ../styles/models/card.css */);
     const CHEVRON_RIGHT = `
 <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"><path stroke="none" d="M0 0h12v12H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg>
@@ -18788,7 +18810,7 @@ ${namesToRegister
         }));
     })();
 },
-"42f54ab82e": /* models/column.js */ function _(require, module, exports, __esModule, __esExport) {
+"975c86e1d3": /* models/column.js */ function _(require, module, exports, __esModule, __esExport) {
     var _a, _b, _c;
     __esModule();
     var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -18932,6 +18954,27 @@ ${namesToRegister
                 this.model.trigger_event(new ScrollButtonClick());
             });
         }
+        async update_children() {
+            // Can be removed after https://github.com/bokeh/bokeh/pull/14459 is released
+            const created = await this.build_child_views();
+            const created_children = new Set(created);
+            // Since appending to a DOM node will move the node to the end if it has
+            // already been added appending all the children in order will result in
+            // correct ordering
+            for (const child_view of this.child_views) {
+                const is_new = created_children.has(child_view);
+                const target = child_view.rendering_target() ?? this.shadow_el;
+                if (is_new) {
+                    child_view.render_to(target);
+                }
+                else {
+                    target.append(child_view.el);
+                }
+            }
+            this.r_after_render();
+            this._update_children();
+            this.invalidate_layout();
+        }
         after_render() {
             super.after_render();
             requestAnimationFrame(() => {
@@ -26115,7 +26158,7 @@ ${namesToRegister
         return c > 3 && r && Object.defineProperty(target, key, r), r;
     };
     var ScrollLatestEvent_1;
-    const column_1 = require("42f54ab82e") /* ./column */;
+    const column_1 = require("975c86e1d3") /* ./column */;
     const bokeh_events_1 = require("@bokehjs/core/bokeh_events");
     const build_views_1 = require("@bokehjs/core/build_views");
     const column_2 = require("@bokehjs/models/layouts/column");
@@ -27220,7 +27263,7 @@ ${namesToRegister
         _a.prototype.default_view = MathJaxView;
     })();
 },
-"c7aa6cc7c5": /* models/modal.js */ function _(require, module, exports, __esModule, __esExport) {
+"90f76e3d2e": /* models/modal.js */ function _(require, module, exports, __esModule, __esExport) {
     var _a, _b;
     __esModule();
     const tslib_1 = require("tslib");
@@ -27243,16 +27286,19 @@ ${namesToRegister
     const layout_dom_1 = require("@bokehjs/models/layouts/layout_dom");
     const modal_css_1 = tslib_1.__importDefault(require("be4b4352c6") /* ../styles/models/modal.css */);
     let ModalDialogEvent = (_a = class ModalDialogEvent extends bokeh_events_1.ModelEvent {
-        constructor(open) {
+        constructor(model, open) {
             super();
+            this.model = model;
             this.open = open;
+            this.open = open;
+            this.origin = model;
         }
         get event_values() {
-            return { open: this.open };
+            return { open: this.open, origin: this.origin };
         }
         static from_values(values) {
-            const { open } = values;
-            return new ModalDialogEvent_1(open);
+            const { open, model } = values;
+            return new ModalDialogEvent_1(model, open);
         }
     },
         (() => {
@@ -28571,10 +28617,10 @@ ${namesToRegister
         }));
     })();
 },
-"134ad3d91a": /* models/react_component.js */ function _(require, module, exports, __esModule, __esExport) {
+"6ad133a76d": /* models/react_component.js */ function _(require, module, exports, __esModule, __esExport) {
     var _a;
     __esModule();
-    const reactive_esm_1 = require("7ce3127e65") /* ./reactive_esm */;
+    const reactive_esm_1 = require("0b75212524") /* ./reactive_esm */;
     class ReactComponentView extends reactive_esm_1.ReactiveESMView {
         constructor() {
             super(...arguments);
@@ -28583,7 +28629,7 @@ ${namesToRegister
             this._force_update_callbacks = [];
         }
         render_esm() {
-            if (this.model.compiled === null || this.render_module === null) {
+            if (this.model.compiled === null || this.model.render_module === null) {
                 return;
             }
             if (this.model.usesMui) {
@@ -28600,8 +28646,8 @@ ${namesToRegister
                 (this._lifecycle_handlers.get(lf) || []).splice(0);
             }
             this.model.disconnect_watchers(this);
-            this.render_module.then((mod) => {
-                this.react_root = mod.default.render();
+            this.model.render_module.then((mod) => {
+                this.react_root = mod.default.render(this.model.id);
             });
         }
         on_force_update(cb) {
@@ -28616,16 +28662,51 @@ ${namesToRegister
             super.remove();
             this._force_update_callbacks = [];
             if (this.react_root) {
-                this.react_root.unmount();
+                this.react_root.then((root) => root.unmount());
             }
         }
         render() {
             if (this.react_root) {
-                this.react_root.unmount();
+                this.react_root.then((root) => root.unmount());
             }
             this._force_update_callbacks = [];
             super.render();
         }
+        async update_children() {
+            const created_children = new Set(await this.build_child_views());
+            const all_views = this.child_views;
+            const new_views = new Map();
+            for (const child_view of this.child_views) {
+                if (!created_children.has(child_view)) {
+                    continue;
+                }
+                const child = this._lookup_child(child_view);
+                if (!child) {
+                    continue;
+                }
+                if (new_views.has(child)) {
+                    new_views.get(child).push(child_view);
+                }
+                else {
+                    new_views.set(child, [child_view]);
+                }
+            }
+            for (const view of this._child_rendered.keys()) {
+                if (!all_views.includes(view)) {
+                    this._child_rendered.delete(view);
+                    view.el.remove();
+                }
+            }
+            for (const child of this.model.children) {
+                const callbacks = this._child_callbacks.get(child) || [];
+                const new_children = new_views.get(child) || [];
+                for (const callback of callbacks) {
+                    callback(new_children);
+                }
+            }
+            this._update_children();
+            this.invalidate_layout();
+        }
         after_rendered() {
             const handlers = (this._lifecycle_handlers.get("after_render") || []);
             for (const cb of handlers) {
@@ -28638,13 +28719,27 @@ ${namesToRegister
             }
             this._rendered = true;
         }
+    }
+    exports.ReactComponentView = ReactComponentView;
+    ReactComponentView.__name__ = "ReactComponentView";
+    class ReactComponent extends reactive_esm_1.ReactiveESM {
+        constructor(attrs) {
+            super(attrs);
+            this.sucrase_transforms = ["typescript", "jsx"];
+        }
+        get usesMui() {
+            if (this.importmap?.imports) {
+                return Object.keys(this.importmap?.imports).some(k => k.startsWith("@mui"));
+            }
+            return false;
+        }
         _render_code() {
-            let import_code;
-            const cache_key = (this.model.bundle === "url") ? this.model.esm : (this.model.bundle || `${this.model.class_name}-${this.model.esm.length}`);
-            if (this.model.bundle) {
-                import_code = `
-const ns = await view._module_cache.get("${cache_key}")
-const {React, createRoot} = ns.default`;
+            let [import_code, bundle_code] = ["", ""];
+            const cache_key = (this.bundle === "url") ? this.esm : (this.bundle || `${this.class_name}-${this.esm.length}`);
+            if (this.bundle) {
+                bundle_code = `
+  const ns = await view._module_cache.get("${cache_key}")
+  const {React, createRoot} = ns.default`;
             }
             else {
                 import_code = `
@@ -28653,11 +28748,11 @@ import { createRoot } from "react-dom/client"`;
             }
             let init_code = "";
             let render_code = "";
-            if (this.model.usesMui) {
-                if (this.model.bundle) {
-                    import_code = `
-const ns = await view._module_cache.get("${cache_key}")
-const {CacheProvider, React, createCache, createRoot} = ns.default`;
+            if (this.usesMui) {
+                if (this.bundle) {
+                    bundle_code = `
+  const ns = await view._module_cache.get("${cache_key}")
+  const {CacheProvider, React, createCache, createRoot} = ns.default`;
                 }
                 else {
                     import_code = `
@@ -28665,150 +28760,163 @@ ${import_code}
 import createCache from "@emotion/cache"
 import { CacheProvider } from "@emotion/react"`;
                 }
-                const css_key = this.model.id.replace("-", "").replace(/\d/g, (digit) => String.fromCharCode(digit.charCodeAt(0) + 49)).toLowerCase();
                 init_code = `
-this.mui_cache = createCache({
-  key: 'css-${css_key}',
-  prepend: true,
-  container: view.style_cache,
-})`;
+  const css_key = id.replace("-", "").replace(/\d/g, (digit) => String.fromCharCode(digit.charCodeAt(0) + 49)).toLowerCase()
+  this.mui_cache = createCache({
+    key: 'css-'+css_key,
+    prepend: true,
+    container: view.style_cache,
+  })`;
                 render_code = `
   if (rendered) {
     rendered = React.createElement(CacheProvider, {value: this.mui_cache}, rendered)
   }`;
             }
             return `
-const view = Bokeh.index.find_one_by_id('${this.model.id}')
-
 ${import_code}
 
-class Child extends React.PureComponent {
-
-  constructor(props) {
-    super(props)
-    this.render_callback = null
+async function render(id) {
+  const view = Bokeh.index.find_one_by_id(id)
+  if (view == null) {
+    return null
   }
 
-  get view() {
-    const child = this.props.parent.model.data[this.props.name]
-    const model = this.props.index == null ? child : child[this.props.index]
-    return this.props.parent.get_child_view(model)
-  }
+  ${bundle_code}
 
-  get element() {
-    const view = this.view
-    return view == null ? null : view.el
-  }
+  class Child extends React.PureComponent {
 
-  componentDidMount() {
-    this.props.parent.rerender_(this.view)
-    this.render_callback = (new_views) => {
-      const view = this.view
-      if (!view) {
-        return
-      } else if (new_views.includes(view)) {
-        if (this.props.id === undefined) { this.forceUpdate() }
-        this.props.parent.rerender_(view)
-      } else {
-        this.forceUpdate()
-        if (view.force_update) { view.force_update() }
+    constructor(props) {
+      super(props)
+      this.render_callback = null
+      this.containerRef = React.createRef()
+    }
+
+    updateElement() {
+      const childView = this.view
+      const el = childView?.el
+      if (el && this.containerRef.current && !this.containerRef.current.contains(el)) {
+        this.containerRef.current.innerHTML = ""
+        this.containerRef.current.appendChild(el)
       }
     }
-    this.props.parent.on_child_render(this.props.name, this.render_callback)
-    this.props.parent.notify_mount(this.props.name, this.view.model.id)
-  }
 
-  componentWillUnmount() {
-    if (this.render_callback) {
-      this.props.parent.remove_on_child_render(this.props.name, this.render_callback)
+    get view() {
+      const child = this.props.parent.model.data[this.props.name]
+      const model = this.props.id == null ? child : child.find(item => item.id === this.props.id)
+      return this.props.parent.get_child_view(model)
     }
-  }
 
-  render() {
-    return React.createElement('div', {
-      className: "child-wrapper",
-      ref: (ref) => {
-        if (ref != null && this.view != null) {
-          ref.appendChild(this.element)
+    get element() {
+      const view = this.view
+      return view == null ? null : view.el
+    }
+
+    componentDidMount() {
+      const view = this.view
+      if (view == null) { return }
+      this.updateElement()
+      this.props.parent.rerender_(view)
+      this.render_callback = (new_views) => {
+        const view = this.view
+        if (!view) {
+          return
+        }
+        this.updateElement()
+        if (new_views.includes(view)) {
+          this.props.parent.rerender_(view)
         }
       }
-    })
+      this.props.parent.on_child_render(this.props.name, this.render_callback)
+      this.props.parent.notify_mount(this.props.name, view.model.id)
+    }
+
+    componentWillUnmount() {
+      if (this.render_callback) {
+        this.props.parent.remove_on_child_render(this.props.name, this.render_callback)
+      }
+    }
+
+    componentDidUpdate() {
+      this.updateElement()
+    }
+
+    render() {
+      return React.createElement('div', {className: "child-wrapper", ref: this.containerRef})
+    }
   }
-}
 
-function react_getter(target, name) {
-  if (name === "useMount") {
-    return (callback) => React.useEffect(() => {
-      target.model_proxy.on('lifecycle:mounted', callback)
-      return () => target.model_proxy.off('lifecycle:mounted', callback)
-    }, [])
-  } if (name == "useState") {
-    return (prop) => {
-      const data_model = target.model.data
-      const propPath = prop.split(".")
-      let targetModel = data_model
-      let resolvedProp = null
+  function react_getter(target, name) {
+    if (name === "useMount") {
+      return (callback) => React.useEffect(() => {
+        target.model_proxy.on('lifecycle:mounted', callback)
+        return () => target.model_proxy.off('lifecycle:mounted', callback)
+      }, [])
+    } if (name == "useState") {
+      return (prop) => {
+        const data_model = target.model.data
+        const propPath = prop.split(".")
+        let targetModel = data_model
+        let resolvedProp = null
 
-      for (let i = 0; i < propPath.length - 1; i++) {
-        if (targetModel && targetModel.properties && propPath[i] in targetModel.properties) {
-          targetModel = targetModel[propPath[i]]
-        } else {
-          // Stop if any part of the path is missing
-          targetModel = null
-          break
+        for (let i = 0; i < propPath.length - 1; i++) {
+          if (targetModel && targetModel.properties && propPath[i] in targetModel.properties) {
+            targetModel = targetModel[propPath[i]]
+          } else {
+            // Stop if any part of the path is missing
+            targetModel = null
+            break
+          }
         }
-      }
-      if (targetModel && targetModel.attributes && propPath[propPath.length - 1] in targetModel.attributes) {
-        resolvedProp = propPath[propPath.length - 1]
-      }
-      if (resolvedProp && targetModel) {
-        const [value, setValue] = React.useState(targetModel.attributes[resolvedProp])
+        if (targetModel && targetModel.attributes && propPath[propPath.length - 1] in targetModel.attributes) {
+          resolvedProp = propPath[propPath.length - 1]
+        }
+        if (resolvedProp && targetModel) {
+          const [value, setValue] = React.useState(targetModel.attributes[resolvedProp])
 
-        react_proxy.on(prop, () => setValue(targetModel.attributes[resolvedProp]))
+          react_proxy.on(prop, () => setValue(targetModel.attributes[resolvedProp]))
 
-        React.useEffect(() => {
-            targetModel.setv({ [resolvedProp]: value })
-        }, [value])
+          React.useEffect(() => {
+              targetModel.setv({ [resolvedProp]: value })
+          }, [value])
 
-        return [value, setValue]
+          return [value, setValue]
+        }
+        throw ReferenceError("Could not resolve " + prop + " on " + target.model.class_name)
       }
-      throw ReferenceError("Could not resolve " + prop + " on " + target.model.class_name)
-    }
-  } else if (name === "get_child") {
-    return (child) => {
-      const data_model = target.model.data
-      const value = data_model.attributes[child]
-      if (Array.isArray(value)) {
-        const [children_state, set_children] = React.useState(value.map((model, i) =>
-          React.createElement(Child, { parent: target, name: child, key: child+i, index: i })
-        ))
-        React.useEffect(() => {
-          target.on_child_render(child, () => {
-            const current_models = data_model.attributes[child]
-            const previous_models = children_state.map(child => child.props.index)
-            if (current_models.length !== previous_models.length ||
-                current_models.some((model, i) => i !== previous_models[i])) {
-              set_children(current_models.map((model, i) => (
-                React.createElement(Child, { parent: target, name: child, key: child+i, index: i })
-              )))
-            }
-          })
-        }, [])
-        return children_state
-      } else {
-        return React.createElement(Child, {parent: target, name: child})
+    } else if (name === "get_child") {
+      return (child) => {
+        const data_model = target.model.data
+        const value = data_model.attributes[child]
+        if (Array.isArray(value)) {
+          const [children_state, set_children] = React.useState(value.map((model) =>
+            React.createElement(Child, { parent: target, name: child, key: model.id, id: model.id })
+          ))
+          React.useEffect(() => {
+            target.on_child_render(child, () => {
+              const current_models = data_model.attributes[child]
+              const previous_models = children_state.map(child => child.props.index)
+              if (current_models.some((model, i) => model.id !== previous_models[i])) {
+                set_children(current_models.map((model, i) => (
+                  React.createElement(Child, { parent: target, name: child, key: model.id, id: model.id })
+                )))
+              }
+            })
+          }, [])
+          return children_state
+        } else {
+          return React.createElement(Child, {parent: target, name: child})
+        }
       }
     }
+    return target.model_getter(target, name)
   }
-  return target.model_getter(target, name)
-}
 
-const react_proxy = new Proxy(view, {
-  get: react_getter,
-  set: view.model_setter
-})
+  const react_proxy = new Proxy(view, {
+    get: react_getter,
+    set: view.model_setter
+  })
 
-class ErrorBoundary extends React.Component {
+  class ErrorBoundary extends React.Component {
   constructor(props) {
     super(props)
     // initialize the error state
@@ -28830,35 +28938,34 @@ class ErrorBoundary extends React.Component {
     }
     return React.createElement('div', {className: "error-wrapper"}, this.props.children)
   }
-}
-
-class Component extends React.Component {
-
-  constructor(props) {
-    super(props)
-    ${init_code}
   }
 
-  componentDidMount() {
-    this.props.view.on_force_update(() => {
+  class Component extends React.Component {
+
+    constructor(props) {
+      super(props)
       ${init_code}
-      this.forceUpdate()
-    })
-    this.props.view._changing = false
-    this.props.view.after_rendered()
-  }
+    }
 
-  render() {
-    let rendered = React.createElement(this.props.view.render_fn, this.props)
-    if (this.props.view.model.dev) {
-       rendered = React.createElement(ErrorBoundary, {view}, rendered)
+    componentDidMount() {
+      this.props.view.on_force_update(() => {
+        ${init_code}
+        this.forceUpdate()
+      })
+      this.props.view._changing = false
+      this.props.view.after_rendered()
+    }
+
+    render() {
+      let rendered = React.createElement(this.props.view.render_fn, this.props)
+      if (this.props.view.model.dev) {
+        rendered = React.createElement(ErrorBoundary, {view}, rendered)
+      }
+      ${render_code}
+      return rendered
     }
-    ${render_code}
-    return rendered
   }
-}
 
-function render() {
   const props = {view, model: react_proxy, data: view.model.data, el: view.container}
   const rendered = React.createElement(Component, props)
   if (rendered) {
@@ -28886,20 +28993,6 @@ function render() {
 
 export default {render}`;
         }
-    }
-    exports.ReactComponentView = ReactComponentView;
-    ReactComponentView.__name__ = "ReactComponentView";
-    class ReactComponent extends reactive_esm_1.ReactiveESM {
-        constructor(attrs) {
-            super(attrs);
-            this.sucrase_transforms = ["typescript", "jsx"];
-        }
-        get usesMui() {
-            if (this.importmap?.imports) {
-                return Object.keys(this.importmap?.imports).some(k => k.startsWith("@mui"));
-            }
-            return false;
-        }
         compile() {
             const compiled = super.compile();
             if (this.bundle) {
@@ -28913,6 +29006,10 @@ import * as React from "react"
 
 ${compiled}`;
         }
+        get _render_cache_key() {
+            const cache_key = (this.bundle === "url") ? this.esm : (this.bundle || `${this.class_name}-${this.esm.length}`);
+            return `react-${this.usesMui}-${cache_key}`;
+        }
     }
     exports.ReactComponent = ReactComponent;
     _a = ReactComponent;
@@ -40105,5 +40202,5 @@ ${compiled}`;
         util_1.vtkns.FullScreenRenderWindowSynchronized = FullScreenRenderWindowSynchronized;
     }
 },
-}, "4e90918c0a", {"index":"4e90918c0a","models/index":"2fe1822b2b","models/ace":"4ccbc5a371","models/layout":"9b11ce01a3","models/util":"6ae1cb3800","models/anywidget_component":"3df8113309","models/reactive_esm":"7ce3127e65","models/event-to-object":"2cc1a33000","models/html":"4c04683fdc","styles/models/html.css":"8694ed3f61","styles/models/esm.css":"727a14f76b","models/audio":"fd59c985b3","models/browser":"5a16cc23e6","models/button":"1db93211cd","models/button_icon":"1738ddeb3a","models/icon":"6c7fbea0ef","models/card":"330f4a8735","models/column":"42f54ab82e","styles/models/card.css":"edc7ee0090","models/checkbox_button_group":"51fbe9e2d0","models/chatarea_input":"27a077673d","models/textarea_input":"b7d595d74a","models/comm_manager":"3ec0e8eb36","models/customselect":"92bbd30bd1","models/multiselect":"27b5580835","models/tabulator":"8fc874f76d","models/data":"be689f0377","styles/models/tabulator.css":"b0e650c65c","models/datetime_picker":"ddf98634bb","models/datetime_slider":"c97cc0eade","models/deckgl":"f3ddc6fd49","models/lumagl":"a49afbffe9","models/tooltips":"f8f8ea4284","models/discrete_player":"0dca2cd4f6","models/player":"b5cfca1687","models/echarts":"253f80e325","models/feed":"4cfe0841a5","models/file_download":"84a13dddfb","models/file_dropper":"c0c26a60ff","styles/models/filedropper.css":"c03dd3c931","models/ipywidget":"8a8089cbf3","models/json":"245cd3cfde","models/jsoneditor":"d34360f699","models/katex":"f672d71a9f","models/location":"bd8e0fe48b","models/mathjax":"d889a68424","models/modal":"c7aa6cc7c5","styles/models/modal.css":"be4b4352c6","models/pdf":"f87ad1873c","models/perspective":"5db5031a50","styles/models/perspective.css":"2e2913ea54","models/plotly":"ffbe075545","styles/models/plotly.css":"ce7c8e2a4f","models/progress":"b1f4d68596","models/quill":"f6d86c7342","models/radio_button_group":"25e2d7c208","models/react_component":"134ad3d91a","models/reactive_html":"d5752cda5a","models/singleselect":"4155401209","models/speech_to_text":"5ac2cab0ab","models/state":"92822cb73a","models/tabs":"2231cdc549","models/terminal":"121f00bd6f","models/text_input":"8be416b160","models/text_to_speech":"a04eb51988","models/time_picker":"1afcab4e45","models/toggle_icon":"ad985f285e","models/tooltip_icon":"ae3a172647","models/trend":"29d55a28a9","models/vega":"119dc23765","models/video":"79dc37b888","styles/models/video.css":"dfe21e6f1b","models/videostream":"f8afc4e661","models/vizzu":"1f7bc1f95b","models/vtk/index":"c51f25e2a7","models/vtk/vtkjs":"ac55912dc1","models/vtk/vtklayout":"b06d05fa3e","models/vtk/util":"df9946ff52","models/vtk/vtkcolorbar":"b1d68776a9","models/vtk/vtkaxes":"0379dcf1cd","models/vtk/vtkvolume":"18592eecef","models/vtk/vtksynchronized":"a4e5946204","models/vtk/panel_fullscreen_renwin_sync":"5e89c7b3eb"}, {});});
+}, "4e90918c0a", {"index":"4e90918c0a","models/index":"2fe1822b2b","models/ace":"04c3c73615","models/layout":"9b11ce01a3","models/util":"6ae1cb3800","models/anywidget_component":"1f663ffe94","models/reactive_esm":"0b75212524","models/event-to-object":"2cc1a33000","models/html":"4c04683fdc","styles/models/html.css":"8694ed3f61","styles/models/esm.css":"727a14f76b","models/audio":"fd59c985b3","models/browser":"5a16cc23e6","models/button":"1db93211cd","models/button_icon":"1738ddeb3a","models/icon":"6c7fbea0ef","models/card":"330f4a8735","models/column":"975c86e1d3","styles/models/card.css":"edc7ee0090","models/checkbox_button_group":"51fbe9e2d0","models/chatarea_input":"27a077673d","models/textarea_input":"b7d595d74a","models/comm_manager":"3ec0e8eb36","models/customselect":"92bbd30bd1","models/multiselect":"27b5580835","models/tabulator":"8fc874f76d","models/data":"be689f0377","styles/models/tabulator.css":"b0e650c65c","models/datetime_picker":"ddf98634bb","models/datetime_slider":"c97cc0eade","models/deckgl":"f3ddc6fd49","models/lumagl":"a49afbffe9","models/tooltips":"f8f8ea4284","models/discrete_player":"0dca2cd4f6","models/player":"b5cfca1687","models/echarts":"253f80e325","models/feed":"4cfe0841a5","models/file_download":"84a13dddfb","models/file_dropper":"c0c26a60ff","styles/models/filedropper.css":"c03dd3c931","models/ipywidget":"8a8089cbf3","models/json":"245cd3cfde","models/jsoneditor":"d34360f699","models/katex":"f672d71a9f","models/location":"bd8e0fe48b","models/mathjax":"d889a68424","models/modal":"90f76e3d2e","styles/models/modal.css":"be4b4352c6","models/pdf":"f87ad1873c","models/perspective":"5db5031a50","styles/models/perspective.css":"2e2913ea54","models/plotly":"ffbe075545","styles/models/plotly.css":"ce7c8e2a4f","models/progress":"b1f4d68596","models/quill":"f6d86c7342","models/radio_button_group":"25e2d7c208","models/react_component":"6ad133a76d","models/reactive_html":"d5752cda5a","models/singleselect":"4155401209","models/speech_to_text":"5ac2cab0ab","models/state":"92822cb73a","models/tabs":"2231cdc549","models/terminal":"121f00bd6f","models/text_input":"8be416b160","models/text_to_speech":"a04eb51988","models/time_picker":"1afcab4e45","models/toggle_icon":"ad985f285e","models/tooltip_icon":"ae3a172647","models/trend":"29d55a28a9","models/vega":"119dc23765","models/video":"79dc37b888","styles/models/video.css":"dfe21e6f1b","models/videostream":"f8afc4e661","models/vizzu":"1f7bc1f95b","models/vtk/index":"c51f25e2a7","models/vtk/vtkjs":"ac55912dc1","models/vtk/vtklayout":"b06d05fa3e","models/vtk/util":"df9946ff52","models/vtk/vtkcolorbar":"b1d68776a9","models/vtk/vtkaxes":"0379dcf1cd","models/vtk/vtkvolume":"18592eecef","models/vtk/vtksynchronized":"a4e5946204","models/vtk/panel_fullscreen_renwin_sync":"5e89c7b3eb"}, {});});
 //# sourceMappingURL=panel.js.map