Animate list items on name change (#1008)

* animate list items

* fix comment

client/package-lock.json

@@ -10746,6 +10746,14 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
       "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
     },
+    "react-flip-toolkit": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/react-flip-toolkit/-/react-flip-toolkit-7.0.6.tgz",
+      "integrity": "sha512-zZpwNfAGS8/WRrHKOA224NP2aVG4ryVx9vkTkxFsU7tkGUpM5AvjsICYmOVDJhEl5wmR36SjMSmWFicloJVibA==",
+      "requires": {
+        "rematrix": "0.2.2"
+      }
+    },
     "react-helmet": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-5.2.1.tgz",
@@ -11059,6 +11067,11 @@
       "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=",
       "dev": true
     },
+    "rematrix": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/rematrix/-/rematrix-0.2.2.tgz",
+      "integrity": "sha512-agFFS3RzrLXJl5LY5xg/xYyXvUuVAnkhgKO7RaO9J1Ssth6yvbO+PIiV67V59MB5NCdAK2flvGvNT4mdKVniFA=="
+    },
     "remove-trailing-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",

client/package.json

@@ -48,6 +48,7 @@
     "react": "^16.9.0",
     "react-autocomplete": "^1.7.2",
     "react-dom": "^16.9.0",
+    "react-flip-toolkit": "7.0.6",
     "react-helmet": "^5.2.1",
     "react-icons": "^3.7.0",
     "react-redux": "^7.1.1",

client/src/components/categorical/category.js

@@ -2,6 +2,7 @@ import React from "react";
 import _ from "lodash";
 import { connect } from "react-redux";
 import { FaChevronRight, FaChevronDown } from "react-icons/fa";
+import { Flipper, Flipped, Spring } from "react-flip-toolkit";
 import {
   Button,
   Tooltip,
@@ -172,21 +173,26 @@ class Category extends React.Component {
     }
   }
 
-  renderCategoryItems() {
-    const { categoricalSelection, metadataField, isUserAnno } = this.props;
+  renderCategoryItems(optTuples) {
+    const { metadataField, isUserAnno } = this.props;
 
-    const cat = categoricalSelection[metadataField];
-    const optTuples = sortedCategoryValues([...cat.categoryValueIndices]);
-    return _.map(optTuples, (tuple, i) => (
-      <Value
-        isUserAnno={isUserAnno}
-        optTuples={optTuples}
-        key={tuple[1]}
-        metadataField={metadataField}
-        categoryIndex={tuple[1]}
-        i={i}
-      />
-    ));
+    return _.map(optTuples, (tuple, i) => {
+      return (
+        <Flipped key={tuple[1]} flipId={tuple[1]}>
+          {flippedProps => (
+            <Value
+              isUserAnno={isUserAnno}
+              optTuples={optTuples}
+              key={tuple[1]}
+              metadataField={metadataField}
+              categoryIndex={tuple[1]}
+              i={i}
+              flippedProps={flippedProps}
+            />
+          )}
+        </Flipped>
+      );
+    });
   }
 
   render() {
@@ -201,6 +207,10 @@ class Category extends React.Component {
     } = this.props;
     const { isTruncated } = categoricalSelection[metadataField];
 
+    const cat = categoricalSelection[metadataField];
+    const optTuples = sortedCategoryValues([...cat.categoryValueIndices]);
+    const optTuplesAsKey = _.map(optTuples, t => t[0]).join(""); // animation
+
     return (
       <div
         style={{
@@ -423,7 +433,9 @@ class Category extends React.Component {
           </div>
         </div>
         <div style={{ marginLeft: 26 }}>
-          {isExpanded ? this.renderCategoryItems() : null}
+          <Flipper spring="veryGentle" flipKey={optTuplesAsKey}>
+            {isExpanded ? this.renderCategoryItems(optTuples) : null}
+          </Flipper>
         </div>
         <div>
           {isExpanded && isTruncated ? (

client/src/components/categorical/value.js

@@ -183,7 +183,10 @@ class CategoryValue extends React.Component {
       i,
       schema,
       isUserAnno,
-      annotations
+      annotations,
+      // flippedProps is potentially brittle, their docs want {...flippedProps} on our div,
+      // our lint doesn't like jsx spread, we are version pinned to prevent api change on their part
+      flippedProps
     } = this.props;
 
     if (!categoricalSelection) return null;
@@ -231,6 +234,9 @@ class CategoryValue extends React.Component {
     return (
       <div
         key={i}
+        data-flip-config={flippedProps["data-flip-config"]}
+        data-flip-id={flippedProps["data-flip-id"]}
+        data-portal-key={flippedProps["data-portal-key"]}
         className={styles.value}
         data-testclass="categorical-row"
         style={{