Merge main.

v3/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## Version 3.0.0-pre.1652 - May 17, 2024
+
+### ✨ Features & Improvements:
+- **PT-187458779:** Graph has option to Show/Hide Parent Visibility Toggles
+- **PT-187458777:** Graph has option to Display Only Selected Cases
+- **PT-186948720:** User can display a standard error bar on a dot plot
+- **PT-187573958:** Fix Sampler Plugin
+
+### 🐞 Bug Fixes:
+- **PT-187539044:** Dragging categories on axis does not affect the placement of points
+- **PT-187392421:** Unable to reorder categories in categorical legend
+- **PT-187619346:** Marquee selection broken in newly created graph
+
+### Asset Sizes
+|      File |          Size | % Increase from Previous Release |
+|-----------|---------------|----------------------------------|
+|  main.css |  171330 bytes |                            9.60% |
+|  index.js | 5356175 bytes |                            3.03% |
+
 ## Version 3.0.0-pre.1639 - May 10, 2024
 
 ### ✨ Features & Improvements:
@@ -18,8 +37,8 @@
 ### Asset Sizes
 |      File |          Size | % Increase from Previous Release |
 |-----------|---------------|----------------------------------|
-|  main.css |  156316 bytes |                            8.45% |
-|  index.js | 5198791 bytes |                            2.60% |
+|  main.css |  169305 bytes |                            8.45% |
+|  index.js | 5307568 bytes |                            2.60% |
 
 ## Version 3.0.0-pre.1631 - May 3, 2024
 
@@ -37,8 +56,8 @@
 ### Asset Sizes
 |      File |          Size | % Increase from Previous Release |
 |-----------|---------------|----------------------------------|
-|  main.css |  156316 bytes |                           -0.17% |
-|  index.js | 5198791 bytes |                            1.09% |
+|  main.css |  156113 bytes |                           -0.17% |
+|  index.js | 5296975 bytes |                            1.09% |
 
 ## Version 3.0.0-pre.1522 - April 26, 2024
 
@@ -64,8 +83,8 @@
 ### Asset Sizes
 |      File |          Size | % Increase from Previous Release |
 |-----------|---------------|----------------------------------|
-|  main.css |  156316 bytes |                            0.24% |
-|  index.js | 5198791 bytes |                            0.79% |
+|  main.css |  157690 bytes |                            0.24% |
+|  index.js | 5239861 bytes |                            0.79% |
 
 ## Version 3.0.0-pre.1521 - April 12, 2024
 
@@ -98,7 +117,7 @@
 ### Asset Sizes
 |      File |          Size | % Increase from Previous Release |
 |-----------|---------------|----------------------------------|
-|  main.css |  156316 bytes |                            6.08% |
+|  main.css |  157376 bytes |                            6.08% |
 |  index.js | 5198791 bytes |                            0.57% |
 
 ## Version 3.0.0-pre.1520 - March 28, 2024

v3/build_number.json

@@ -1 +1 @@
-{"buildNumber":1652}
+{"buildNumber":1657}

v3/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codap3",
-  "version": "3.0.0-pre.1639",
+  "version": "3.0.0-pre.1652",
   "description": "Common Online Data Analysis Platform v3",
   "main": "index.js",
   "browser": {

v3/src/components/container/free-tile-component.tsx

@@ -1,7 +1,7 @@
 import { useDndContext } from "@dnd-kit/core"
 import { clsx } from "clsx"
 import { observer } from "mobx-react-lite"
-import React, { useCallback, useState } from "react"
+import React, { useCallback, useEffect, useState } from "react"
 import { getDragTileId, IUseDraggableTile, useDraggableTile } from "../../hooks/use-drag-drop"
 import { IFreeTileLayout, IFreeTileRow, isFreeTileRow } from "../../models/document/free-tile-row"
 import { getTileComponentInfo } from "../../models/tiles/tile-component-info"
@@ -131,10 +131,21 @@ export const FreeTileComponent = observer(function FreeTileComponent({ row, tile
     minimized: rowTile?.isMinimized,
     "disable-animation": disableAnimation })
 
+  // The CSS transition used to animate the tile can cause child components to prematurely apply effects that depend on
+  // the tile's dimensions. To prevent this, we add a transitionend handler that sets a flag on the tile model when the
+  // transition completes. Child components can check this flag to avoid or counteract premature application of effects.
+  useEffect(function addTransitionEndHandler() {
+    const handleTransitionEnd = () => tile.setTransitionComplete(true)
+    const element = document.getElementById(`${tileId}`)
+    element?.addEventListener("transitionend", handleTransitionEnd)
+
+    return () => element?.removeEventListener("transitionend", handleTransitionEnd)
+  }, [tile, tileId])
+
   if (!info || rowTile?.isHidden) return null
 
   return (
-    <div className={classes} style={style} key={tileId} ref={setNodeRef}>
+    <div id={tileId} className={classes} style={style} key={tileId} ref={setNodeRef}>
       {tile && rowTile &&
         <CodapComponent tile={tile}
           isMinimized={rowTile.isMinimized}

v3/src/components/data-display/components/attribute-label.tsx

@@ -1,12 +1,13 @@
-import { autorun } from "mobx"
 import React, { ForwardedRef, forwardRef, useEffect, useState } from "react"
 import { createPortal } from "react-dom"
 import { IDataSet } from "../../../models/data/data-set"
 import {kPortalClassSelector} from "../data-display-types"
 import { GraphPlace } from "../../axis-graph-shared"
 import { useDataDisplayLayout } from "../hooks/use-data-display-layout"
+import { useDataDisplayModelContext } from "../hooks/use-data-display-model"
 import { AxisOrLegendAttributeMenu } from "../../axis/components/axis-or-legend-attribute-menu"
 import { AttributeType } from "../../../models/data/attribute"
+import { mstAutorun } from "../../../utilities/mst-autorun"
 
 import "./attribute-label.scss"
 
@@ -23,20 +24,21 @@ export const AttributeLabel = forwardRef((props: IProps, labelRef: ForwardedRef<
   // labelRef must be a MutableRefObject, not a function
   const labelElt = typeof labelRef !== "function" ? labelRef?.current ?? null : null
   const portal = labelElt?.closest(kPortalClassSelector) as HTMLDivElement ?? null
+  const contentModel = useDataDisplayModelContext()
   const layout = useDataDisplayLayout()
   const [ , setLayoutBounds] = useState("")
 
   useEffect(() => {
-    return autorun(() => {
+    return mstAutorun(() => {
       // accessing layout triggers autorun on change
       const bounds = layout.getComputedBounds(place)
       const layoutBounds = JSON.stringify(bounds)
       // trigger re-render on layout position change
       setLayoutBounds(layoutBounds)
       // render label and trigger autorun on change to observables within
       refreshLabel()
-    }, { name: "AttributeLabel.autorun [refreshLabel]" })
-  }, [layout, place, refreshLabel])
+    }, { name: "AttributeLabel.autorun [refreshLabel]" }, contentModel)
+  }, [contentModel, layout, place, refreshLabel])
 
   return (
     <>

v3/src/components/map/components/map-interior.tsx

@@ -1,5 +1,5 @@
 import {observer} from "mobx-react-lite"
-import React, {useCallback} from "react"
+import React, {useCallback, useEffect} from "react"
 import {PixiPoints} from "../../data-display/pixi/pixi-points"
 import {useMapModelContext} from "../hooks/use-map-model-context"
 import {useMapModel} from "../hooks/use-map-model"
@@ -9,20 +9,31 @@ import {MapPointLayer} from "./map-point-layer"
 import {isMapPolygonLayerModel} from "../models/map-polygon-layer-model"
 import {MapPolygonLayer} from "./map-polygon-layer"
 import { DataConfigurationContext } from "../../data-display/hooks/use-data-configuration-context"
+import { useTileModelContext } from "../../../hooks/use-tile-model-context"
 
 interface IProps {
   pixiPointsArrayRef:  React.MutableRefObject<PixiPoints[]>
 }
 
 export const MapInterior = observer(function MapInterior({pixiPointsArrayRef}: IProps) {
   const mapModel = useMapModelContext()
+  const { transitionComplete: tileTransitionComplete } = useTileModelContext()
 
   useMapModel()
 
   const onSetPixiPointsForLayer = useCallback((pixiPoints: PixiPoints, layerIndex: number) => {
     pixiPointsArrayRef.current[layerIndex] = pixiPoints
   }, [pixiPointsArrayRef])
 
+
+  // Ensure the map rescales when its tile's CSS transition is complete to compensate for any changes to the tile's
+  // size that may have occurred after the map was initially rendered.
+  useEffect(function rescaleOnTileTransitionEnd() {
+    if (tileTransitionComplete) {
+      mapModel.rescale()
+    }
+  }, [tileTransitionComplete, mapModel])
+
   /**
    * Note that we don't have to worry about layer order because polygons will be sent to the back
    */

v3/src/components/map/components/map-point-layer.tsx

@@ -1,6 +1,7 @@
 import React, {useCallback, useEffect, useRef} from "react"
 import {comparer, reaction} from "mobx"
 import { observer } from "mobx-react-lite"
+import { isAlive } from "mobx-state-tree"
 import * as PIXI from "pixi.js"
 import {mstReaction} from "../../../utilities/mst-reaction"
 import {onAnyAction} from "../../../utilities/mst-utils"
@@ -33,7 +34,7 @@ interface IProps {
 
 export const MapPointLayer = observer(function MapPointLayer({mapLayerModel, onSetPixiPointsForLayer}: IProps) {
   const {dataConfiguration, pointDescription} = mapLayerModel,
-    dataset = dataConfiguration?.dataset,
+    dataset = isAlive(dataConfiguration) ? dataConfiguration?.dataset : undefined,
     mapModel = useMapModelContext(),
     {isAnimating} = useDataDisplayAnimation(),
     leafletMap = useMap(),

v3/src/components/map/hooks/use-map-model.ts

@@ -45,10 +45,6 @@ export function useMapModel() {
         })
       })
     }
-    // If the map doesn't have a position but does have data, then scale to fit the data.
-    else {
-      mapModel.rescale()
-    }
     mapModel.setHasBeenInitialized()
   }, [layout.isTileExtentInitialized, leafletMap, mapModel, mapModel.isSharedDataInitialized])
 }

v3/src/components/map/models/leaflet-map-state.ts

@@ -85,6 +85,26 @@ export class LeafletMapState {
     return this.isMoving || this.isZooming || this.isLeafletInteracting || this.isMapViewChanging
   }
 
+  @action
+  setZoom(zoom: number) {
+    this.zoom = zoom
+  }
+
+  @action
+  setCenter(center: LatLng) {
+    this.center = center
+  }
+
+  @action
+  setIsZooming(isZooming: boolean) {
+    this.isZooming = isZooming
+  }
+
+  @action
+  setIsMoving(isMoving: boolean) {
+    this.isMoving = isMoving
+  }
+
   @action
   setOnClickCallback(onClick?: (event: MouseEvent) => void) {
     this.onClick = onClick
@@ -97,35 +117,35 @@ export class LeafletMapState {
   @action
   handleMoveStart() {
     if (!this.isChanging) this.startLeafletInteraction("DG.Undo.map.pan", "DG.Redo.map.pan")
-    this.isMoving = true
+    this.setIsMoving(true)
   }
 
   @action
   handleMove() {
-    this.center = this.leafletMap?.getCenter()
+    this.setCenter(this.leafletMap?.getCenter() ?? new LatLng(0, 0))
   }
 
   @action
   handleMoveEnd() {
     this.completeInProgressChanges()
-    this.isMoving = false
+    this.setIsMoving(false)
   }
 
   @action
   handleZoomStart() {
     if (!this.isChanging) this.startLeafletInteraction("DG.Undo.map.zoom", "DG.Redo.map.zoom")
-    this.isZooming = true
+    this.setIsZooming(true)
   }
 
   @action
   handleZoom() {
-    this.zoom = this.leafletMap?.getZoom()
+    this.setZoom(this.leafletMap?.getZoom() ?? 0)
   }
 
   @action
   handleZoomEnd() {
     this.completeInProgressChanges()
-    this.isZooming = false
+    this.setIsZooming(false)
   }
 
   installHandlers() {

v3/src/components/web-view/use-data-interactive-controller.ts

@@ -1,4 +1,3 @@
-import { useToast } from "@chakra-ui/react"
 import iframePhone from "iframe-phone"
 import React, { useEffect } from "react"
 import { getDIHandler } from "../../data-interactive/data-interactive-handler"
@@ -21,7 +20,6 @@ function extractOrigin(url?: string) {
 }
 
 export function useDataInteractiveController(iframeRef: React.RefObject<HTMLIFrameElement>, tile?: ITileModel) {
-  const toast = useToast()
   const tileContentModel = tile?.content
   const webViewModel = isWebViewModel(tileContentModel) ? tileContentModel : undefined
   const url = webViewModel?.url
@@ -39,13 +37,6 @@ export function useDataInteractiveController(iframeRef: React.RefObject<HTMLIFra
         (request: DIRequest, callback: (returnValue: DIRequestResponse) => void) =>
       {
         debugLog(DEBUG_PLUGINS, `Received data-interactive: ${JSON.stringify(request)}`)
-        toast({
-          title: "Web view received message",
-          description: JSON.stringify(request),
-          status: "success",
-          duration: 9000,
-          isClosable: true
-        })
         let result: DIRequestResponse = { success: false }
 
         const errorResult = (error: string) => ({ success: false, values: { error }} as const)
@@ -82,5 +73,5 @@ export function useDataInteractiveController(iframeRef: React.RefObject<HTMLIFra
         phone.disconnect()
       }
     }
-  }, [iframeRef, tile, toast, url, webViewModel])
+  }, [iframeRef, tile, url, webViewModel])
 }