figpack 0.2.15__py3-none-any.whl → 0.2.17__py3-none-any.whl

figpack/figpack-figure-dist/assets/{index-D9a3K6eW.css → index-DHWczh-Q.css}

@@ -1 +1 @@
-.unitEntryBase{padding-right:13px;padding-top:10px}.unselectedUnitEntry{border:1px transparent solid;font-weight:400;color:#000;background-color:#fff}.selectedUnitEntry{border:1px solid blue;font-weight:700;color:#000;background-color:#b5d1ff}.unitIdsColumnLabelStyle{min-width:200px;font-weight:700;padding:7px 5px}.unitLabelsStyle{padding-right:3px;color:#333}.plotUnitLabel{text-align:left;margin-left:20px;margin-top:5px;font-weight:700}.plotWrapperButtonParent{display:inline-block}.plotWrapperStyleButton{padding-top:50px}.plotUnselectedStyle{border:3px solid rgb(202,224,231)}.plotSelectedStyle{border:3px solid #9999ff;background-color:#fff}.plotUnselectableStyle{border:3px solid transparent}.plotCurrentStyle{border:3px solid blue;background-color:#fff}.plotLabelStyle{font-weight:700;text-align:center;overflow:hidden;white-space:nowrap}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;overflow:hidden}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.status-bar{position:fixed;bottom:0;left:0;right:0;height:30px;background-color:#2a2a2a;color:#fff;display:flex;align-items:center;padding:0 12px;font-size:12px;border-top:1px solid #444;z-index:1000}.status-bar.warning{background-color:#ff9800;color:#000}.status-bar.error{background-color:#f44336;color:#fff}.status-bar.expired{background-color:#d32f2f;color:#fff}.manage-button{background-color:#444;color:#fff;border:none;padding:4px 8px;border-radius:4px;cursor:pointer;font-size:11px;height:22px;margin-left:12px;transition:background-color .2s}.manage-button:hover{background-color:#666}.about-button{background-color:#444;color:#fff;border:none;padding:4px 8px;border-radius:4px;cursor:pointer;font-size:11px;height:22px;margin-left:12px;transition:background-color .2s}.about-button:hover{background-color:#666}.about-dialog-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:2000}.about-dialog{background-color:#2a2a2a;color:#fff;border-radius:8px;max-width:600px;max-height:80vh;width:90%;box-shadow:0 4px 20px #0000004d;overflow:hidden}.about-dialog-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #444}.about-dialog-header h2{margin:0;font-size:18px;font-weight:600}.about-dialog-close{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s}.about-dialog-close:hover{background-color:#444}.about-dialog-content{padding:20px;overflow-y:auto;max-height:calc(80vh - 80px)}.about-dialog-description{line-height:1.6}.about-dialog-description h1,.about-dialog-description h2,.about-dialog-description h3{margin-top:0;margin-bottom:12px}.about-dialog-description p{margin-bottom:12px}.about-dialog-description code{background-color:#444;padding:2px 4px;border-radius:3px;font-family:Courier New,monospace;font-size:.9em}.about-dialog-description pre{background-color:#444;padding:12px;border-radius:4px;overflow-x:auto;margin-bottom:12px}.about-dialog-description ul,.about-dialog-description ol{margin-bottom:12px;padding-left:20px}.about-dialog-description blockquote{border-left:4px solid #666;padding-left:16px;margin:12px 0;font-style:italic}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}.status-bar{background-color:#f5f5f5;color:#333;border-top:1px solid #ddd}.status-bar.warning{background-color:#fff3cd;color:#856404;border-top:1px solid #ffeaa7}.status-bar.error,.status-bar.expired{background-color:#f8d7da;color:#721c24;border-top:1px solid #f5c6cb}.manage-button{background-color:#e0e0e0;color:#333;border:1px solid #ccc}.manage-button:hover{background-color:#d0d0d0}.about-button{background-color:#e0e0e0;color:#333;border:1px solid #ccc}.about-button:hover{background-color:#d0d0d0}.about-dialog{background-color:#fff;color:#333;box-shadow:0 4px 20px #00000026}.about-dialog-header{border-bottom:1px solid #ddd}.about-dialog-close{color:#333}.about-dialog-close:hover{background-color:#f0f0f0}.about-dialog-description code,.about-dialog-description pre{background-color:#f5f5f5;color:#333}.about-dialog-description blockquote{border-left:4px solid #ccc}}.VerticalToolbar{overflow:hidden;position:absolute}.HorizontalToolbar{display:flex;justify-content:center;align-items:center;overflow:hidden;margin:auto}.SortableTableWidget .MuiTableCell-root{padding:1px 0;font-size:12px;border:solid 1px #f0f0f0}.SortableTableWidget .MuiTableRow-root.selectedRow{background-color:#b5d1ff}.SortableTableWidget .MuiTableRow-root.currentRow{background-color:#95b1df}.SortCaretSpan{font-size:16px;color:gray;padding-left:3px;padding-right:5px;padding-top:2px}.SortableTableWidget .unitLabel{width:10px;height:10px;position:relative;display:inline-block}.SortableTableWidget .SortableTableCheckbox{padding:1px}.NiceTable .MuiTableCell-root{padding:5px}.NiceTable .MuiIconButton-root{padding:1px}
+.unitEntryBase{padding-right:13px;padding-top:10px}.unselectedUnitEntry{border:1px transparent solid;font-weight:400;color:#000;background-color:#fff}.selectedUnitEntry{border:1px solid blue;font-weight:700;color:#000;background-color:#b5d1ff}.unitIdsColumnLabelStyle{min-width:200px;font-weight:700;padding:7px 5px}.unitLabelsStyle{padding-right:3px;color:#333}.plotUnitLabel{text-align:left;margin-left:20px;margin-top:5px;font-weight:700}.plotWrapperButtonParent{display:inline-block}.plotWrapperStyleButton{padding-top:50px}.plotUnselectedStyle{border:3px solid rgb(202,224,231)}.plotSelectedStyle{border:3px solid #9999ff;background-color:#fff}.plotUnselectableStyle{border:3px solid transparent}.plotCurrentStyle{border:3px solid blue;background-color:#fff}.plotLabelStyle{font-weight:700;text-align:center;overflow:hidden;white-space:nowrap}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;overflow:hidden}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.status-bar{position:fixed;bottom:0;left:0;right:0;height:30px;background-color:#2a2a2a;color:#fff;display:flex;align-items:center;padding:0 12px;font-size:12px;border-top:1px solid #444;z-index:1000}.status-bar.warning{background-color:#ff9800;color:#000}.status-bar.error{background-color:#f44336;color:#fff}.status-bar.expired{background-color:#d32f2f;color:#fff}.manage-button{background-color:#444;color:#fff;border:none;padding:4px 8px;border-radius:4px;cursor:pointer;font-size:11px;height:22px;margin-left:12px;transition:background-color .2s}.manage-button:hover{background-color:#666}.about-button{background-color:#444;color:#fff;border:none;padding:4px 8px;border-radius:4px;cursor:pointer;font-size:11px;height:22px;margin-left:12px;transition:background-color .2s}.about-button:hover{background-color:#666}.about-dialog-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:2000}.about-dialog{background-color:#2a2a2a;color:#fff;border-radius:8px;max-width:600px;max-height:80vh;width:90%;box-shadow:0 4px 20px #0000004d;overflow:hidden}.about-dialog-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #444}.about-dialog-header h2{margin:0;font-size:18px;font-weight:600}.about-dialog-close{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s}.about-dialog-close:hover{background-color:#444}.about-dialog-content{padding:20px;overflow-y:auto;max-height:calc(80vh - 80px)}.about-dialog-description{line-height:1.6}.about-dialog-description h1,.about-dialog-description h2,.about-dialog-description h3{margin-top:0;margin-bottom:12px}.about-dialog-description p{margin-bottom:12px}.about-dialog-description code{background-color:#444;padding:2px 4px;border-radius:3px;font-family:Courier New,monospace;font-size:.9em}.about-dialog-description pre{background-color:#444;padding:12px;border-radius:4px;overflow-x:auto;margin-bottom:12px}.about-dialog-description ul,.about-dialog-description ol{margin-bottom:12px;padding-left:20px}.about-dialog-description blockquote{border-left:4px solid #666;padding-left:16px;margin:12px 0;font-style:italic}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}.status-bar{background-color:#f5f5f5;color:#333;border-top:1px solid #ddd}.status-bar.warning{background-color:#fff3cd;color:#856404;border-top:1px solid #ffeaa7}.status-bar.error,.status-bar.expired{background-color:#f8d7da;color:#721c24;border-top:1px solid #f5c6cb}.manage-button{background-color:#e0e0e0;color:#333;border:1px solid #ccc}.manage-button:hover{background-color:#d0d0d0}.about-button{background-color:#e0e0e0;color:#333;border:1px solid #ccc}.about-button:hover{background-color:#d0d0d0}.about-dialog{background-color:#fff;color:#333;box-shadow:0 4px 20px #00000026}.about-dialog-header{border-bottom:1px solid #ddd}.about-dialog-close{color:#333}.about-dialog-close:hover{background-color:#f0f0f0}.about-dialog-description code,.about-dialog-description pre{background-color:#f5f5f5;color:#333}.about-dialog-description blockquote{border-left:4px solid #ccc}}

figpack/figpack-figure-dist/index.html

@@ -5,8 +5,8 @@
     <link rel="icon" type="image/png" href="./assets/neurosift-logo-CLsuwLMO.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>figpack figure</title>
-    <script type="module" crossorigin src="./assets/index-DtOnN02w.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-D9a3K6eW.css">
+    <script type="module" crossorigin src="./assets/index-DBwmtEpB.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-DHWczh-Q.css">
   </head>
   <body>
     <div id="root"></div>

figpack/views/Box.py

@@ -4,9 +4,8 @@ Box view for figpack - a layout container that handles other views
 
 from typing import Any, Dict, List, Literal, Optional
 
-import zarr
-
 from ..core.figpack_view import FigpackView
+from ..core.zarr import Group
 from .LayoutItem import LayoutItem
 
 
@@ -43,7 +42,7 @@ class Box(FigpackView):
         self.items = items
         self.title = title
 
-    def _write_to_zarr_group(self, group: zarr.Group) -> None:
+    def _write_to_zarr_group(self, group: Group) -> None:
         """
         Write the Box layout data to a Zarr group
 

figpack/views/DataFrame.py

@@ -3,13 +3,12 @@ DataFrame view for figpack - displays pandas DataFrames as interactive tables
 """
 
 import json
-from typing import Any, Dict, Union
 
 import numpy as np
-import pandas as pd
 import zarr
 
 from ..core.figpack_view import FigpackView
+from ..core.zarr import Group
 
 
 class DataFrame(FigpackView):
@@ -17,7 +16,7 @@ class DataFrame(FigpackView):
     A DataFrame visualization component for displaying pandas DataFrames as interactive tables
     """
 
-    def __init__(self, df: pd.DataFrame):
+    def __init__(self, df):
         """
         Initialize a DataFrame view
 
@@ -27,12 +26,14 @@ class DataFrame(FigpackView):
         Raises:
             ValueError: If df is not a pandas DataFrame
         """
+        import pandas as pd
+
         if not isinstance(df, pd.DataFrame):
             raise ValueError("df must be a pandas DataFrame")
 
         self.df = df
 
-    def _write_to_zarr_group(self, group: zarr.Group) -> None:
+    def _write_to_zarr_group(self, group: Group) -> None:
         """
         Write the DataFrame data to a Zarr group
 
@@ -54,11 +55,6 @@ class DataFrame(FigpackView):
             group.create_dataset(
                 "csv_data",
                 data=csv_array,
-                dtype=np.uint8,
-                chunks=True,
-                compressor=zarr.Blosc(
-                    cname="zstd", clevel=3, shuffle=zarr.Blosc.SHUFFLE
-                ),
             )
 
             # Store metadata about the DataFrame
@@ -104,6 +100,4 @@ class DataFrame(FigpackView):
             group.attrs["data_size"] = 0
             group.attrs["column_info"] = "[]"
             # Create empty array as placeholder
-            group.create_dataset(
-                "csv_data", data=np.array([], dtype=np.uint8), dtype=np.uint8
-            )
+            group.create_dataset("csv_data", data=np.array([], dtype=np.uint8))

figpack/views/Gallery.py

@@ -4,9 +4,8 @@ Gallery view for figpack - a gallery layout container that handles other views w
 
 from typing import Any, Dict, List, Optional
 
-import zarr
-
 from ..core.figpack_view import FigpackView
+from ..core.zarr import Group
 from .GalleryItem import GalleryItem
 
 
@@ -45,7 +44,7 @@ class Gallery(FigpackView):
             max(0, min(initial_item_index, len(items) - 1)) if items else 0
         )
 
-    def _write_to_zarr_group(self, group: zarr.Group) -> None:
+    def _write_to_zarr_group(self, group: Group) -> None:
         """
         Write the Gallery data to a Zarr group
 

figpack/views/Image.py

@@ -8,6 +8,7 @@ import numpy as np
 import zarr
 
 from ..core.figpack_view import FigpackView
+from ..core.zarr import Group
 
 
 class Image(FigpackView):
@@ -69,7 +70,7 @@ class Image(FigpackView):
         except Exception as e:
             raise ValueError(f"Failed to download image from URL: {str(e)}")
 
-    def _write_to_zarr_group(self, group: zarr.Group) -> None:
+    def _write_to_zarr_group(self, group: Group) -> None:
         """
         Write the image data to a Zarr group
 
@@ -98,11 +99,6 @@ class Image(FigpackView):
             group.create_dataset(
                 "image_data",
                 data=image_array,
-                dtype=np.uint8,
-                chunks=True,
-                compressor=zarr.Blosc(
-                    cname="zstd", clevel=3, shuffle=zarr.Blosc.SHUFFLE
-                ),
             )
 
             # Try to determine format from file signature
@@ -124,6 +120,4 @@ class Image(FigpackView):
             group.attrs["image_format"] = "Unknown"
             group.attrs["data_size"] = 0
             # Create empty array as placeholder
-            group.create_dataset(
-                "image_data", data=np.array([], dtype=np.uint8), dtype=np.uint8
-            )
+            group.create_dataset("image_data", data=np.array([], dtype=np.uint8))

figpack/views/Markdown.py

@@ -6,6 +6,7 @@ import numpy as np
 import zarr
 
 from ..core.figpack_view import FigpackView
+from ..core.zarr import Group
 
 
 class Markdown(FigpackView):
@@ -22,7 +23,7 @@ class Markdown(FigpackView):
         """
         self.content = content
 
-    def _write_to_zarr_group(self, group: zarr.Group) -> None:
+    def _write_to_zarr_group(self, group: Group) -> None:
         """
         Write the markdown data to a Zarr group
 
@@ -37,9 +38,7 @@ class Markdown(FigpackView):
         content_array = np.frombuffer(content_bytes, dtype=np.uint8)
 
         # Store the markdown content as a zarr array
-        group.create_dataset(
-            "content_data", data=content_array, dtype=np.uint8, chunks=True
-        )
+        group.create_dataset("content_data", data=content_array, chunks=True)
 
         # Store content size in attrs
         group.attrs["data_size"] = len(content_bytes)

figpack/views/MatplotlibFigure.py

@@ -9,6 +9,7 @@ from typing import Any, Union
 import zarr
 
 from ..core.figpack_view import FigpackView
+from ..core.zarr import Group
 
 
 class MatplotlibFigure(FigpackView):
@@ -25,7 +26,7 @@ class MatplotlibFigure(FigpackView):
         """
         self.fig = fig
 
-    def _write_to_zarr_group(self, group: zarr.Group) -> None:
+    def _write_to_zarr_group(self, group: Group) -> None:
         """
         Write the matplotlib figure data to a Zarr group
 
@@ -54,11 +55,6 @@ class MatplotlibFigure(FigpackView):
             group.create_dataset(
                 "svg_data",
                 data=svg_array,
-                dtype=np.uint8,
-                chunks=True,
-                compressor=zarr.Blosc(
-                    cname="zstd", clevel=3, shuffle=zarr.Blosc.SHUFFLE
-                ),
             )
 
             # Store figure dimensions for reference
@@ -77,11 +73,6 @@ class MatplotlibFigure(FigpackView):
             group.create_dataset(
                 "svg_data",
                 data=np.array([], dtype=np.uint8),
-                dtype=np.uint8,
-                chunks=True,
-                compressor=zarr.Blosc(
-                    cname="zstd", clevel=3, shuffle=zarr.Blosc.SHUFFLE
-                ),
             )
             group.attrs["error"] = f"Failed to export matplotlib figure: {str(e)}"
             group.attrs["figure_width_inches"] = 6.0

figpack/views/MultiChannelTimeseries.py

@@ -6,9 +6,9 @@ import math
 from typing import List, Optional, Union
 
 import numpy as np
-import zarr
 
 from ..core.figpack_view import FigpackView
+from ..core.zarr import Group
 
 
 class MultiChannelTimeseries(FigpackView):
@@ -174,7 +174,7 @@ class MultiChannelTimeseries(FigpackView):
         else:  # len(shape) == 3
             return (chunk_timepoints, 2, n_channels)
 
-    def _write_to_zarr_group(self, group: zarr.Group) -> None:
+    def _write_to_zarr_group(self, group: Group) -> None:
         """
         Write the multi-channel timeseries data to a Zarr group
 
@@ -198,8 +198,6 @@ class MultiChannelTimeseries(FigpackView):
             "data",
             data=self.data,
             chunks=original_chunks,
-            compression="blosc",
-            compression_opts={"cname": "lz4", "clevel": 5, "shuffle": 1},
         )
 
         # Store downsampled data arrays
@@ -216,8 +214,6 @@ class MultiChannelTimeseries(FigpackView):
                 dataset_name,
                 data=downsampled_array,
                 chunks=ds_chunks,
-                compression="blosc",
-                compression_opts={"cname": "lz4", "clevel": 5, "shuffle": 1},
             )
 
         print(

figpack/views/PlotlyExtension/PlotlyExtension.py

@@ -1,58 +1,11 @@
 import json
 import numpy as np
-import zarr
-import urllib.request
-import urllib.error
 from datetime import date, datetime
 
-from figpack import FigpackExtension, ExtensionRegistry, ExtensionView
+import figpack
 
 
-def _download_plotly_library():
-    url = "https://cdn.plot.ly/plotly-2.35.2.min.js"
-    try:
-        with urllib.request.urlopen(url) as response:
-            return response.read().decode("utf-8")
-    except urllib.error.URLError as e:
-        raise RuntimeError(f"Failed to download plotly library from {url}: {e}")
-
-
-def _load_javascript_code():
-    """Load the JavaScript code from the plotly.js file"""
-    import os
-
-    js_path = os.path.join(os.path.dirname(__file__), "plotly_view.js")
-    try:
-        with open(js_path, "r", encoding="utf-8") as f:
-            return f.read()
-    except FileNotFoundError:
-        raise FileNotFoundError(
-            f"Could not find plotly.js at {js_path}. "
-            "Make sure the JavaScript file is present in the package."
-        )
-
-
-# Download the plotly library and create the extension with additional files
-try:
-    plotly_lib_js = _download_plotly_library()
-    additional_files = {"plotly.min.js": plotly_lib_js}
-except Exception as e:
-    print(f"Warning: Could not download plotly library: {e}")
-    print("Extension will fall back to CDN loading")
-    additional_files = {}
-
-# Create and register the plotly extension
-_plotly_extension = FigpackExtension(
-    name="figpack_plotly",
-    javascript_code=_load_javascript_code(),
-    additional_files=additional_files,
-    version="1.0.0",
-)
-
-ExtensionRegistry.register(_plotly_extension)
-
-
-class PlotlyFigure(ExtensionView):
+class PlotlyFigure(figpack.ExtensionView):
     """
     A Plotly graph visualization view using the plotly library.
 
@@ -66,13 +19,14 @@ class PlotlyFigure(ExtensionView):
         Args:
             fig: The plotly figure object
         """
-        # for some reason, we need to reregister here to avoid issues with pytest
-        ExtensionRegistry.register(_plotly_extension)
-        super().__init__(extension_name="figpack_plotly")
+        # It's important that we only import conditionally, so we are not always downloading plotly
+        from ._plotly_extension import _plotly_extension
+
+        super().__init__(extension=_plotly_extension, view_type="plotly.PlotlyFigure")
 
         self.fig = fig
 
-    def _write_to_zarr_group(self, group: zarr.Group) -> None:
+    def _write_to_zarr_group(self, group: figpack.Group) -> None:
         """
         Write the plotly figure data to a Zarr group
 
@@ -92,13 +46,7 @@ class PlotlyFigure(ExtensionView):
         json_array = np.frombuffer(json_bytes, dtype=np.uint8)
 
         # Store the figure data as compressed array
-        group.create_dataset(
-            "figure_data",
-            data=json_array,
-            dtype=np.uint8,
-            chunks=True,
-            compressor=zarr.Blosc(cname="zstd", clevel=3, shuffle=zarr.Blosc.SHUFFLE),
-        )
+        group.create_dataset("figure_data", data=json_array)
 
         # Store data size for reference
         group.attrs["data_size"] = len(json_bytes)

figpack/views/PlotlyExtension/_plotly_extension.py

@@ -0,0 +1,46 @@
+import urllib.request
+import urllib.error
+
+from ...core.figpack_extension import FigpackExtension
+
+
+def _load_javascript_code():
+    """Load the JavaScript code from the plotly.js file"""
+    import os
+
+    js_path = os.path.join(os.path.dirname(__file__), "plotly_view.js")
+    try:
+        with open(js_path, "r", encoding="utf-8") as f:
+            return f.read()
+    except FileNotFoundError:
+        raise FileNotFoundError(
+            f"Could not find plotly.js at {js_path}. "
+            "Make sure the JavaScript file is present in the package."
+        )
+
+
+def _download_plotly_library():
+    url = "https://cdn.plot.ly/plotly-2.35.2.min.js"
+    try:
+        with urllib.request.urlopen(url) as response:
+            return response.read().decode("utf-8")
+    except urllib.error.URLError as e:
+        raise RuntimeError(f"Failed to download plotly library from {url}: {e}")
+
+
+# Download the plotly library and create the extension with additional files
+try:
+    plotly_lib_js = _download_plotly_library()
+    additional_files = {"plotly.min.js": plotly_lib_js}
+except Exception as e:
+    print(f"Warning: Could not download plotly library: {e}")
+    print("Extension will fall back to CDN loading")
+    additional_files = {}
+
+# Create and register the plotly extension
+_plotly_extension = FigpackExtension(
+    name="figpack-plotly",
+    javascript_code=_load_javascript_code(),
+    additional_files=additional_files,
+    version="1.0.0",
+)

figpack/views/PlotlyExtension/plotly_view.js

@@ -5,8 +5,8 @@
 
 const loadFigureData = async (zarrGroup) => {
     // Get the figure data from the zarr array
-    const data = await zarrGroup.file.getDatasetData(
-        joinPath(zarrGroup.path, "figure_data"),
+    const data = await zarrGroup.getDatasetData(
+        "figure_data",
         {},
     );
     if (!data || data.length === 0) {
@@ -24,83 +24,87 @@ const loadFigureData = async (zarrGroup) => {
     return parsedData;
 };
 
-(function() {
-    window.figpackExtensions = window.figpackExtensions || {};
-    
-    window.figpackExtensions['figpack_plotly'] = {
-        render: async function(container, zarrGroup, width, height, onResize) {
-            container.innerHTML = '';
-            
-            try {
-                const figureData = await loadFigureData(zarrGroup); 
-                
-                const makePlot = () => {
-                    window.Plotly.newPlot(
-                        container,
-                        figureData.data || [],
-                        {
-                            ...figureData.layout,
-                            width: width,
-                            height: height,
-                            margin: { l: 50, r: 50, t: 50, b: 50 },
-                        },
-                        {
-                            responsive: true,
-                            displayModeBar: true,
-                            displaylogo: false,
-                        },
-                    )
-                };
-                
-                makePlot();
-
-                // Handle resize events
-                onResize((newWidth, newHeight) => {
-                    window.Plotly.relayout(container, {width: newWidth, height: newHeight});
-                });
-                
-                return {
-                    destroy: () => {
-                        window.Plotly.purge(container);
-                    }
-                };
-                
-            } catch (error) {
-                console.error('Error rendering plotly figure:', error);
-                this.renderError(container, width, height, error.message);
-                return { destroy: () => {} };
+const renderPlotlyFigure = async (params) => {
+  const { container, zarrGroup, width, height, onResize } = params;
+  container.innerHTML = "";
+
+    try {
+        const figureData = await loadFigureData(zarrGroup);
+
+        const makePlot = () => {
+            window.Plotly.newPlot(
+                container,
+                figureData.data || [],
+                {
+                    ...figureData.layout,
+                    width: width,
+                    height: height,
+                    margin: { l: 50, r: 50, t: 50, b: 50 },
+                },
+                {
+                    responsive: true,
+                    displayModeBar: true,
+                    displaylogo: false,
+                },
+            );
+        };
+
+        makePlot();
+
+        // Handle resize events
+        onResize((newWidth, newHeight) => {
+            window.Plotly.relayout(container, { width: newWidth, height: newHeight });
+        });
+
+        return {
+            destroy: () => {
+                window.Plotly.purge(container);
             }
-        },
-        
-        renderError: function(container, width, height, message) {
-            container.innerHTML = `
-                <div style="
-                    width: ${width}px; 
-                    height: ${height}px; 
-                    display: flex; 
-                    align-items: center; 
-                    justify-content: center; 
-                    background-color: #f8f9fa; 
-                    border: 1px solid #dee2e6; 
-                    color: #6c757d;
-                    font-family: system-ui, -apple-system, sans-serif;
-                    font-size: 14px;
-                    text-align: center;
-                    padding: 20px;
-                    box-sizing: border-box;
-                ">
-                    <div>
-                        <div style="margin-bottom: 10px; font-weight: 500;">Force Graph Error</div>
-                        <div style="font-size: 12px;">${message}</div>
-                    </div>
-                </div>
-            `;
-        }
-    };
-})();
-
-const joinPath = function(p1, p2) {
-    if (p1.endsWith('/')) p1 = p1.slice(0, -1);
-    if (p2.startsWith('/')) p2 = p2.slice(1);
-    return p1 + '/' + p2;
+        };
+
+    } catch (error) {
+        console.error('Error rendering plotly figure:', error);
+        renderError(container, width, height, error.message);
+        return { destroy: () => {} };
+    }
 };
+
+const renderError = (container, width, height, message) => {
+  container.innerHTML = `
+    <div style="
+      width: ${width}px; 
+      height: ${height}px; 
+      display: flex; 
+      align-items: center; 
+      justify-content: center; 
+      background-color: #f8f9fa; 
+      border: 1px solid #dee2e6; 
+      color: #6c757d;
+      font-family: system-ui, -apple-system, sans-serif;
+      font-size: 14px;
+      text-align: center;
+      padding: 20px;
+      box-sizing: border-box;
+    ">
+      <div>
+        <div style="margin-bottom: 10px; font-weight: 500;">Plotly Figure Error</div>
+        <div style="font-size: 12px;">${message}</div>
+      </div>
+    </div>
+  `;
+};
+
+const registerExtension = () => {
+  const registerFPViewComponent = window.figpack_p1.registerFPViewComponent;
+  registerFPViewComponent({
+    name: "plotly.PlotlyFigure",
+    render: renderPlotlyFigure,
+  });
+
+  // const registerFPViewContextCreator = window.figpack_p1.registerFPViewContextCreator;
+
+  const registerFPExtension = window.figpack_p1.registerFPExtension;
+  registerFPExtension({ name: "figpack-plotly" });
+};
+
+registerExtension();

figpack/views/Spectrogram.py

@@ -9,6 +9,7 @@ import numpy as np
 import zarr
 
 from ..core.figpack_view import FigpackView
+from ..core.zarr import Group
 
 
 class Spectrogram(FigpackView):
@@ -185,7 +186,7 @@ class Spectrogram(FigpackView):
 
         return (chunk_timepoints, n_frequencies)
 
-    def _write_to_zarr_group(self, group: zarr.Group) -> None:
+    def _write_to_zarr_group(self, group: Group) -> None:
         """
         Write the spectrogram data to a Zarr group
 
@@ -212,8 +213,6 @@ class Spectrogram(FigpackView):
             group.create_dataset(
                 "frequencies",
                 data=self.frequencies,
-                compression="blosc",
-                compression_opts={"cname": "lz4", "clevel": 5, "shuffle": 1},
             )
 
         # Store original data with optimal chunking
@@ -222,8 +221,6 @@ class Spectrogram(FigpackView):
             "data",
             data=self.data,
             chunks=original_chunks,
-            compression="blosc",
-            compression_opts={"cname": "lz4", "clevel": 5, "shuffle": 1},
         )
 
         # Store downsampled data arrays
@@ -240,8 +237,6 @@ class Spectrogram(FigpackView):
                 dataset_name,
                 data=downsampled_array,
                 chunks=ds_chunks,
-                compression="blosc",
-                compression_opts={"cname": "lz4", "clevel": 5, "shuffle": 1},
             )
 
         print(f"Stored Spectrogram with {len(downsample_factors)} downsampled levels:")

figpack/views/Splitter.py

@@ -4,9 +4,8 @@ Splitter view for figpack - a resizable split layout container
 
 from typing import Literal
 
-import zarr
-
 from ..core.figpack_view import FigpackView
+from ..core.zarr import Group
 from .LayoutItem import LayoutItem
 
 
@@ -37,7 +36,7 @@ class Splitter(FigpackView):
         self.item2 = item2
         self.split_pos = max(0.1, min(0.9, split_pos))  # Clamp between 0.1 and 0.9
 
-    def _write_to_zarr_group(self, group: zarr.Group) -> None:
+    def _write_to_zarr_group(self, group: Group) -> None:
         """
         Write the Splitter layout data to a Zarr group