Merge pull request #882 from concord-consortium/186031756-fix-fade-in…

…-out-effects-in-graph-adornment

fix: fade in / out effects in graph adornment (PT-186031756)

v3/cypress/e2e/adornments.spec.ts

@@ -28,12 +28,12 @@ context("Graph adornments", () => {
     cy.get("[data-testid=graph-adornments-grid]")
       .find("[data-testid=graph-adornments-grid__cell]").should("have.length", 1)
     cy.get("[data-testid=adornment-wrapper]").should("have.length", 1)
-    cy.get("[data-testid=adornment-wrapper]").should("have.class", "fadeIn")
+    cy.get("[data-testid=adornment-wrapper]").should("have.class", "visible")
     cy.get("[data-testid=graph-adornments-grid]").find("*[data-testid^=graph-count]").should("exist")
     cy.get("[data-testid=graph-adornments-grid]").find("*[data-testid^=graph-count]").should("have.text", "21")
     cy.wait(250)
     countCheckbox.click()
-    cy.get("[data-testid=adornment-wrapper]").should("have.class", "fadeOut")
+    cy.get("[data-testid=adornment-wrapper]").should("have.class", "hidden")
   })
   it("adds a percent to the graph when the Percent checkbox is checked", () => {
     c.selectTile("graph", 0)
@@ -53,12 +53,12 @@ context("Graph adornments", () => {
     cy.get("[data-testid=graph-adornments-grid]")
       .find("[data-testid=graph-adornments-grid__cell]").should("have.length", 9)
     cy.get("[data-testid=adornment-wrapper]").should("have.length", 9)
-    cy.get("[data-testid=adornment-wrapper]").should("have.class", "fadeIn")
+    cy.get("[data-testid=adornment-wrapper]").should("have.class", "visible")
     cy.get("[data-testid=graph-adornments-grid]").find("*[data-testid^=graph-count]").should("exist")
     cy.get("[data-testid=graph-adornments-grid]").find("*[data-testid^=graph-count]").first().should("have.text", "0%")
     cy.wait(250)
     percentCheckbox.click()
-    cy.get("[data-testid=adornment-wrapper]").should("have.class", "fadeOut")
+    cy.get("[data-testid=adornment-wrapper]").should("have.class", "hidden")
   })
   it("adds a movable line to the graph when the Movable Line checkbox is checked", () => {
     c.selectTile("graph", 0)
@@ -74,7 +74,7 @@ context("Graph adornments", () => {
     cy.get("[data-testid=graph-adornments-grid]")
       .find("[data-testid=graph-adornments-grid__cell]").should("have.length", 1)
     cy.get("[data-testid=adornment-wrapper]").should("have.length", 1)
-    cy.get("[data-testid=adornment-wrapper]").should("have.class", "fadeIn")
+    cy.get("[data-testid=adornment-wrapper]").should("have.class", "visible")
     cy.get("[data-testid=adornment-wrapper]").find("*[data-testid^=movable-line]").should("exist")
     cy.get("[data-testid=adornment-wrapper]").find("*[data-testid^=movable-line-equation-container-]")
       .find("[data-testid=movable-line-equation-]").should("not.be.empty")
@@ -83,7 +83,7 @@ context("Graph adornments", () => {
     // TODO: Test unpinning equation box from line
     cy.wait(250)
     movableLineCheckbox.click()
-    cy.get("[data-testid=adornment-wrapper]").should("have.class", "fadeOut")
+    cy.get("[data-testid=adornment-wrapper]").should("have.class", "hidden")
   })
   it("adds a movable point to the graph when the Movable Point checkbox is checked", () => {
     c.selectTile("graph", 0)
@@ -99,13 +99,13 @@ context("Graph adornments", () => {
     cy.get("[data-testid=graph-adornments-grid]")
       .find("[data-testid=graph-adornments-grid__cell]").should("have.length", 1)
     cy.get("[data-testid=adornment-wrapper]").should("have.length", 1)
-    cy.get("[data-testid=adornment-wrapper]").should("have.class", "fadeIn")
+    cy.get("[data-testid=adornment-wrapper]").should("have.class", "visible")
     cy.get("[data-testid=graph-adornments-grid]").find("*[data-testid^=movable-point]").should("exist")
     // TODO: Also test the above after attributes are added to top and right axes (i.e. when there are multiple points)
     // TODO: Test dragging of point
     cy.wait(250)
     movablePointCheckbox.click()
-    cy.get("[data-testid=adornment-wrapper]").should("have.class", "fadeOut")
+    cy.get("[data-testid=adornment-wrapper]").should("have.class", "hidden")
   })
 
 })

v3/cypress/support/commands.ts

@@ -11,7 +11,7 @@ Cypress.Commands.add("dragAttributeToTarget", (source, attribute, target, num =
     caseCardHeaderDropZone: ".react-data-card .data-cell-lower",
     caseCardCollectionDropZone: ".react-data-card .collection-header-row",
     graphTile: ".graph-plot svg",
-    legend: ".graph-plot .droppable-legend",
+    legend: ".graph-plot .legend .chakra-menu__menu-button",
     x_axis: ".codap-graph .droppable-axis.droppable-svg.bottom",
     x_axis_label: ".codap-graph .axis-legend-attribute-menu.bottom .chakra-menu__menu-button",
     y_axis: ".codap-graph .droppable-axis.droppable-svg.left",

v3/package.json

@@ -176,7 +176,7 @@
     "lodash": "^4.17.21",
     "mathjs": "^11.11.0",
     "mobx": "^6.10.2",
-    "mobx-react-lite": "^3.4.3",
+    "mobx-react-lite": "^4.0.4",
     "nanoid": "^4.0.2",
     "papaparse": "^5.4.1",
     "pluralize": "^8.0.0",

v3/src/components/graph/adornments/adornment.scss

@@ -5,17 +5,14 @@
   top: 0;
   width: 100%;
 
-  &.fadeIn {
+  &.visible {
     animation-name: adornmentFadeIn;
     opacity: 1;
   }
-  &.fadeOut {
+  &.hidden {
     animation-name: adornmentFadeOut;
     opacity: 0;
   }
-  &.hidden {
-    display: none;
-  }
 }
 
 @keyframes adornmentFadeIn {

v3/src/components/graph/adornments/adornment.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react"
+import React from "react"
 import { clsx } from "clsx"
 import { observer } from "mobx-react-lite"
 import { IAdornmentModel } from "./adornment-models"
@@ -27,14 +27,7 @@ export const Adornment = observer(function Adornment(
                      : layout.plotWidth,
     subPlotHeight = rightCats.length > 0
                       ? layout.plotHeight / rightCats.length
-                      : layout.plotHeight,
-    isFadeInComplete = useRef(false),
-    isFadeOutComplete = useRef(false)
-
-  useEffect(function fadeInCleanup() {
-    isFadeInComplete.current = adornment.isVisible
-    isFadeOutComplete.current = !adornment.isVisible
-  }, [adornment.isVisible])
+                      : layout.plotHeight
 
   const classFromCellKey = adornment.classNameFromKey(cellKey)
   // The adornmentKey is a unique value used for React's key prop and for the adornment wrapper's HTML ID.
@@ -46,13 +39,12 @@ export const Adornment = observer(function Adornment(
   const { Component } = componentInfo
 
   const adornmentWrapperClass = clsx(
-    'adornment-wrapper',
+    "adornment-wrapper",
     `${adornmentKey}-wrapper`,
-    `${classFromCellKey}`,
+    classFromCellKey,
     {
-      'fadeIn': adornment.isVisible && !isFadeInComplete.current,
-      'fadeOut': !adornment.isVisible && !isFadeOutComplete.current,
-      'hidden': !adornment.isVisible && isFadeOutComplete.current
+      "visible": adornment.isVisible,
+      "hidden": !adornment.isVisible
     }
   )
 
@@ -61,7 +53,7 @@ export const Adornment = observer(function Adornment(
       id={adornmentKey}
       className={adornmentWrapperClass}
       style={{animationDuration: `${transitionDuration}ms`}}
-      data-testid={'adornment-wrapper'}
+      data-testid={"adornment-wrapper"}
     >
       <Component
         containerId={adornmentKey}