Merge/v0.25.0 to develop

app/packages/core/src/plugins/SchemaIO/components/DashboardView.tsx

@@ -130,12 +130,12 @@ const LayoutPopover = ({
               color="primary"
             />
           }
-          label="Auto Layout"
+          label="Auto layout"
         />
         {isEditMode && !autoLayout && (
           <>
             <FormControl component="fieldset" sx={{ marginBottom: 2 }}>
-              <FormLabel component="legend">Layout Mode</FormLabel>
+              <FormLabel component="legend">Layout mode</FormLabel>
               <RadioGroup
                 row
                 aria-label="layout-mode"
@@ -227,13 +227,13 @@ const ControlContainer = ({
           {autoLayout && (
             <Typography>
               You can customize the layout of the items in this dashboard by
-              dragging to re-order.
+              dragging to re-order
             </Typography>
           )}
           {!autoLayout && (
             <Typography>
               You can customize the layout of the items in this dashboard by
-              resizing them and dragging to re-order.
+              resizing them and dragging to re-order
             </Typography>
           )}
         </Alert>

docs/source/_templates/layout.html

@@ -9,7 +9,7 @@
   href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
   rel="stylesheet"
 />
-<script src="https://tag.clearbitscripts.com/v1/pk_b9ed71c8234edd4f77326bcbfab5a4ca/tags.js" />
+<script src="https://tag.clearbitscripts.com/v1/pk_b9ed71c8234edd4f77326bcbfab5a4ca/tags.js"></script>
 {% endblock %} {% block custom_header %}
 <div class="container-fluid header-holder tutorials-header" id="header-holder">
   <nav id="nav__main" class="nav__main">
@@ -189,10 +189,10 @@
 </footer>
 
 <!-- https://buttons.github.io -->
-<script async defer src="https://buttons.github.io/buttons.js" />
+<script async defer src="https://buttons.github.io/buttons.js" ></script>
 
 <!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-XD15NFRY3M" />
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-XD15NFRY3M" ></script>
 <script>
   window.dataLayer = window.dataLayer || [];
   function gtag() {

docs/source/deprecation.rst

@@ -1,3 +1,5 @@
+.. _deprecation-notices:
+
 FiftyOne Deprecation Notices
 ============================
 

docs/source/plugins/developing_plugins.rst

@@ -2471,12 +2471,12 @@ panel layout based on user input.
 .. code-block:: python
     :linenos:
 
-    class DropdownMenuPanel(foo.Panel):
+    class DropdownMenuExample(foo.Panel):
         @property
         def config(self):
             return foo.PanelConfig(
                 name="example_dropdown_menu",
-                label="Python Panel Example: Dropdown Menu",
+                label="Examples: Dropdown Menu",
             )
 
         def on_load(self, ctx):
@@ -2492,7 +2492,7 @@ panel layout based on user input.
             ctx.ops.reload_samples()
 
         def say_hi(self, ctx):
-            ctx.ops.notify("Hi!")
+            ctx.ops.notify("Hi!", variant="success")
 
         def render(self, ctx):
             panel = types.Object()
@@ -2506,7 +2506,7 @@ panel layout based on user input.
 
             """,
                 name="header",
-                width="500px",
+                width=50,  # 50% of current panel width
                 height="200px",
             )
 
@@ -2594,18 +2594,20 @@ the App.
     import fiftyone.operators.types as types
     from fiftyone import ViewField as F
 
-    class InteractiveHistogram(foo.Panel):
+    class InteractivePlotExample(foo.Panel):
         @property
         def config(self):
             return foo.PanelConfig(
-                name="interactive_histogram_example",
-                label="Interactive Histogram Example",
+                name="example_interactive_plot",
+                label="Examples: Interactive Plot",
                 icon="bar_chart",
             )
 
         def on_load(self, ctx):
             # Get target field
-            target_field = ctx.panel.state.target_field or "ground_truth.detections.label"
+            target_field = (
+                ctx.panel.state.target_field or "ground_truth.detections.label"
+            )
             ctx.panel.state.target_field = target_field
 
             # Compute target histogram for current dataset
@@ -2616,7 +2618,7 @@ the App.
             ctx.panel.data.histogram = {"x": keys, "y": values, "type": "bar"}
 
             # Launch panel in a horizontal split view
-            ctx.ops.split_panel("interactive_histogram_example", layout="horizontal")
+            ctx.ops.split_panel("example_interactive_plot", layout="horizontal")
 
         def on_change_view(self, ctx):
             # Update histogram when current view changes
@@ -2628,10 +2630,11 @@ the App.
 
             # Create a view that matches the selected histogram bar
             field = ctx.panel.state.target_field
-            view = get_view(ctx.dataset, field, value)
+            view = _make_matching_view(ctx.dataset, field, value)
 
-            if view:
-                ctx.ops.set_view(view)
+            # Load view in App
+            if view is not None:
+                ctx.ops.set_view(view=view)
 
         def reset(self, ctx):
             ctx.ops.clear_view()
@@ -2657,7 +2660,10 @@ the App.
             )
 
             panel.btn(
-                "reset", label="Reset Chart", on_click=self.reset, variant="contained"
+                "reset",
+                label="Reset Chart",
+                on_click=self.reset,
+                variant="contained",
             )
 
             return types.Property(
@@ -2673,7 +2679,7 @@ the App.
                 ),
             )
 
-    def get_view(dataset, field, value):
+    def _make_matching_view(dataset, field, value):
         if field.endswith(".label"):
             root_field = field.split(".")[0]
             return dataset.filter_labels(root_field, F("label") == value)
@@ -2700,12 +2706,12 @@ guided workflow.
 .. code-block:: python
     :linenos:
 
-    class WalkthroughTutorialPanel(foo.Panel):
+    class WalkthroughExample(foo.Panel):
         @property
         def config(self):
             return foo.PanelConfig(
-                name="example_walkthrough_tutorial",
-                label="Python Panel Example: Walkthrough Tutorial",
+                name="example_walkthrough",
+                label="Examples: Walkthrough",
             )
 
         def on_load(self, ctx):
@@ -2739,7 +2745,9 @@ guided workflow.
             stack = panel.v_stack(
                 "welcome", gap=2, width=75, align_x="center", align_y="center"
             )
-            button_container = types.GridView(gap=2, align_x="left", align_y="center")
+            button_container = types.GridView(
+                gap=2, align_x="left", align_y="center"
+            )
 
             page = ctx.panel.state.get("page", 1)
 
@@ -2842,11 +2850,12 @@ forms of image and video data.
     .. code-block:: python
         :linenos:
 
-        class ImagePanel(foo.Panel):
+        class ImageExample(foo.Panel):
             @property
             def config(self):
                 return foo.PanelConfig(
-                    name="example_image", label="Python Panel Example: Image"
+                    name="example_image",
+                    label="Examples: Image",
                 )
 
             def on_load(self, ctx):
@@ -2903,12 +2912,12 @@ forms of image and video data.
     .. code-block:: python
         :linenos:
 
-        class MediaPlayerPanel(foo.Panel):
+        class MediaPlayerExample(foo.Panel):
             @property
             def config(self):
                 return foo.PanelConfig(
                     name="example_media_player",
-                    label="Python Panel Example: Media Player",
+                    label="Examples: Media Player",
                 )
 
             def on_load(self, ctx):
@@ -2963,7 +2972,7 @@ you to reveal all of its available methods during development:
 .. code-block:: python
     :linenos:
 
-    from fiftyone.operators.executor import ExecutionContext
+    from fiftyone.operators import ExecutionContext
 
     def on_load(ctx: ExecutionContext):
         ctx.trigger()

docs/source/plugins/index.rst

@@ -41,6 +41,8 @@ these plugins available in the
     +-------------------------------------------------------------------------------------------------------------+---------------------------------------------------------------------------------------------------------------------------+
     | `@voxel51/brain <https://github.com/voxel51/fiftyone-plugins/blob/main/plugins/brain/README.md>`_           | 🧠 Utilities for working with the FiftyOne Brain                                                                          |
     +-------------------------------------------------------------------------------------------------------------+---------------------------------------------------------------------------------------------------------------------------+
+    | `@voxel51/dashboard <https://github.com/voxel51/fiftyone-plugins/blob/main/plugins/dashboard/README.md>`_   | 📊 Create your own custom dashboards from within the App                                                                  |
+    +-------------------------------------------------------------------------------------------------------------+---------------------------------------------------------------------------------------------------------------------------+
     | `@voxel51/evaluation <https://github.com/voxel51/fiftyone-plugins/blob/main/plugins/evaluation/README.md>`_ | ✅ Utilities for evaluating models with FiftyOne                                                                          |
     +-------------------------------------------------------------------------------------------------------------+---------------------------------------------------------------------------------------------------------------------------+
     | `@voxel51/io <https://github.com/voxel51/fiftyone-plugins/blob/main/plugins/io/README.md>`_                 | 📁 A collection of import/export utilities                                                                                |
@@ -80,6 +82,13 @@ plugin and proceed with other work while the execution happens in the background
 
 .. image:: /images/plugins/operators/examples/embeddings.gif
 
+Want to create a custom dashboard that displays statistics of interest about
+the current dataset? Just install the
+`@voxel51/dashboard <https://github.com/voxel51/fiftyone-plugins/blob/main/plugins/dashboard/README.md>`_
+plugin and build away:
+
+.. image:: /images/plugins/panels/dashboard-panel.gif
+
 .. note::
 
     When you choose :ref:`delegated execution <delegated-operations>` in the