@xh/hoist 80.0.0-SNAPSHOT.1769042130982 → 80.0.0-SNAPSHOT.1769114224366

package/CHANGELOG.md

@@ -36,6 +36,7 @@
 * Added `AggregationContext` as an additional argument to `CubeField.canAggregateFn`.
 * Added `filterMatchMode` option to `ColChooserModel`, allowing customizing match to `start`,
   `startWord`, or `any`.
+* Added support for reconnecting a `View` to its associated `Cube`
 
 ### ⚙️ Typescript API Adjustments
 
@@ -61,6 +62,8 @@
   CSS overrides with overrides to variables where possible.
 * Added new CSS variables `--xh-intent-danger-text-color` (and others). Consider using these when
   styling text with Hoist intent colors to enhance legibility in dark mode.
+* Tweaked styling of `DashContainer` tab controls, adding a left border to the control surface and
+  improving the visibility of the tab overflow dropdown.
 
 ### 📚 Libraries
 

package/build/types/data/cube/Cube.d.ts

@@ -127,6 +127,8 @@ export declare class Cube extends HoistBase {
     viewIsConnected(view: View): boolean;
     /** Cease pushing further updates to this Cube's data into a previously connected View. */
     disconnectView(view: View): void;
+    /** Connect a View to this Cube for live updates. */
+    connectView(view: View): void;
     /**
      * Populate this cube with a new dataset.
      * This method largely delegates to {@link Store.loadData} - see that method for more info.

package/build/types/data/cube/View.d.ts

@@ -66,11 +66,13 @@ export declare class View extends HoistBase implements FilterBindTarget, FilterV
     get isFiltered(): boolean;
     /** Stop receiving live updates into this view when the linked Cube data changes. */
     disconnect(): void;
+    /** Connect to the associated Cube to begin receiving live updates. */
+    connect(): void;
     /**
      * Change the query in some way, re-computing the data in this View to reflect the new query.
      *
-     * @param overrides - changes to be applied to the query. May include any arguments to the query
-     *      constructor except `cube`, which cannot be changed once set via the initial query.
+     * @param overrides - changes to be applied to the query. If changing the `cube` and currently
+     *      connected, then we will disconnect from the old cube and connect to the new one.
      */
     updateQuery(overrides: Partial<QueryConfig>): void;
     /** Gather all unique values for each dimension field in the query. */

package/data/cube/Cube.ts

@@ -227,6 +227,18 @@ export class Cube extends HoistBase {
         this._connectedViews.delete(view);
     }
 
+    /** Connect a View to this Cube for live updates. */
+    connectView(view: View) {
+        if (this.viewIsConnected(view)) return;
+
+        this._connectedViews.add(view);
+
+        // If the view is not up-to-date with the current cube data, then reload the view
+        if (view.info !== this.info) {
+            view.noteCubeLoaded();
+        }
+    }
+
     //-------------------
     // Data Loading API
     //-------------------

package/data/cube/View.ts

@@ -156,21 +156,45 @@ export class View
         this.cube.disconnectView(this);
     }
 
+    /** Connect to the associated Cube to begin receiving live updates. */
+    @action
+    connect() {
+        this.cube.connectView(this);
+    }
+
     /**
      * Change the query in some way, re-computing the data in this View to reflect the new query.
      *
-     * @param overrides - changes to be applied to the query. May include any arguments to the query
-     *      constructor except `cube`, which cannot be changed once set via the initial query.
+     * @param overrides - changes to be applied to the query. If changing the `cube` and currently
+     *      connected, then we will disconnect from the old cube and connect to the new one.
      */
     @action
     updateQuery(overrides: Partial<QueryConfig>) {
-        throwIf(overrides.cube, 'Cannot redirect view to a different cube in updateQuery().');
         const oldQuery = this.query,
             newQuery = oldQuery.clone(overrides);
+
         if (oldQuery.equals(newQuery)) return;
 
         this.query = newQuery;
 
+        // If the cube is changing then we need to clear the row cache, and potentially disconnect
+        // from the old cube and connect to the new one
+        const {cube: oldCube} = oldQuery,
+            {cube: newCube} = newQuery;
+
+        if (oldCube !== newCube) {
+            this.info = null;
+            this._rowCache.clear();
+
+            if (oldCube.viewIsConnected(this)) {
+                oldCube.disconnectView(this);
+                newCube.connectView(this);
+
+                // Connecting to the new cube will have triggered a full update so we early out
+                return;
+            }
+        }
+
         // Must clear row cache if we have complex aggregates or more than filter changing.
         if (!this.aggregatorsAreSimple || !oldQuery.equalsExcludingFilter(newQuery)) {
             this._rowCache.clear();

package/desktop/cmp/dash/container/impl/DashContainerMenuButton.ts

@@ -17,15 +17,17 @@ import {dashContainerContextMenu} from './DashContainerContextMenu';
  * @internal
  */
 export const dashContainerMenuButton = hoistCmp.factory({
+    className: 'xh-dash-container-menu-btn',
     model: null,
-    render({stack, dashContainerModel}) {
+
+    render({stack, dashContainerModel, className}) {
         if (dashContainerModel.contentLocked || !dashContainerModel.showMenuButton) return null;
 
         return popover({
             position: Position.BOTTOM,
             item: button({
                 icon: Icon.ellipsisVertical(),
-                className: 'xh-dash-container-menu-btn'
+                className
             }),
             content: dashContainerContextMenu({stack, dashContainerModel})
         });

package/kit/golden-layout/styles.scss

@@ -15,16 +15,6 @@
     background: rgba(0, 0, 0, 0.06);
     min-height: 25px;
 
-    .xh-dash-container-add-button {
-      padding: 5px;
-      color: #999;
-
-      &:hover {
-        cursor: pointer;
-        color: var(--xh-text-color);
-      }
-    }
-
     .lm_tabs {
       flex: 1;
       position: relative;
@@ -37,9 +27,21 @@
       display: flex;
       align-items: center;
 
+      // Add left border to visually structure the control area and help it stand out.
+      border-left: var(--xh-border-solid);
+      padding-left: 3px;
+
+      > li {
+        // Avoid muted opacity on controls - we want users to be able to see these.
+        opacity: 1;
+      }
+
       .lm_tabdropdown {
         &::before {
-          color: var(--xh-button-text-color);
+          // Set warning intent on tab dropdown - this is a tiny V arrow icon that appears when a
+          // tabbed stack is too small to render all tabs. This is the only clue to the user that
+          // there are more widgets in the layout!
+          color: var(--xh-intent-primary-text-color);
         }
       }
     }
@@ -116,6 +118,7 @@
       border: none;
       margin: 0;
       height: 30px;
+      padding: 0 8px;
 
       &:hover {
         background-color: var(--xh-menu-item-highlight-bg);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "80.0.0-SNAPSHOT.1769042130982",
+  "version": "80.0.0-SNAPSHOT.1769114224366",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",