hover tag animation

frontend/lit/TagReferences/Main.js

@@ -2,13 +2,13 @@ import {toJS} from "mobx";
 import {inject, observer} from "mobx-react";
 import PropTypes from "prop-types";
 import React, {Component} from "react";
+import HelpTextPopup from "shared/components/HelpTextPopup";
+import Modal from "shared/components/Modal";
+import {LocalStorageBoolean} from "shared/utils/LocalStorage";
 
 import Reference from "../components/Reference";
 import ReferenceSortSelector from "../components/ReferenceSortSelector";
 import TagTree from "../components/TagTree";
-import HelpTextPopup from "shared/components/HelpTextPopup";
-import Modal from "shared/components/Modal";
-import {LocalStorageBoolean} from "shared/utils/LocalStorage";
 
 @inject("store")
 @observer
@@ -197,11 +197,12 @@ class TagReferencesMain extends Component {
                         </div>
                     ) : null}
                 </div>
-                <div className="px-3" id="tagtree-col">
+                <div className="px-3 w-25">
                     <h4>Available tags</h4>
                     <TagTree
                         tagtree={toJS(store.tagtree)}
                         handleTagClick={tag => store.addTag(tag)}
+                        showTagHover={true}
                     />
                 </div>
                 <Modal

frontend/lit/TagReferences/store.js

@@ -1,5 +1,5 @@
 import _ from "lodash";
-import {action, toJS, observable} from "mobx";
+import {action, observable, toJS} from "mobx";
 
 import {sortReferences} from "../constants";
 import Reference from "../Reference";

frontend/lit/components/TagTree.js

@@ -13,8 +13,11 @@ class TagNode extends Component {
         };
     }
     render() {
-        const {tag, showReferenceCount, handleOnClick, selectedTag} = this.props,
-            tagClass = tag === selectedTag ? "d-flex nestedTag selected" : "d-flex nestedTag",
+        const {tag, showReferenceCount, handleOnClick, selectedTag, showTagHover} = this.props,
+            tagClass =
+                tag === selectedTag
+                    ? "d-flex nestedTag selected align-items-center"
+                    : "d-flex nestedTag align-items-center",
             hasChildren = tag.children.length > 0,
             expanderIcon = this.state.expanded ? "fa-minus" : "fa-plus",
             toggleExpander = e => {
@@ -27,16 +30,18 @@ class TagNode extends Component {
         return (
             <>
                 <div className={tagClass} onClick={() => handleOnClick(tag)}>
-                    <div style={{width: (tag.depth - 1) * 10 + 25}}>
+                    <div
+                        className="d-flex justify-content-end"
+                        style={{width: (tag.depth - 1) * 10 + 25}}>
                         {hasChildren ? (
-                            <button
-                                className="float-right btn btn-sm px-2"
-                                onClick={toggleExpander}>
-                                <i className={`fa ${expanderIcon}`}></i>
+                            <button className="d-flex btn btn-sm px-1" onClick={toggleExpander}>
+                                <i
+                                    className={`fa ${expanderIcon}`}
+                                    style={{fontSize: "0.8rem"}}></i>
                             </button>
                         ) : null}
                     </div>
-                    <div style={{flex: 1}}>
+                    <div className={showTagHover ? "tagName" : null} style={{flex: 1}}>
                         <span>
                             {tag.data.name}
                             {showReferenceCount ? ` (${tag.get_references_deep().length})` : null}
@@ -51,6 +56,7 @@ class TagNode extends Component {
                               handleOnClick={handleOnClick}
                               showReferenceCount={showReferenceCount}
                               selectedTag={selectedTag}
+                              showTagHover={showTagHover}
                           />
                       ))
                     : null}
@@ -63,6 +69,7 @@ TagNode.propTypes = {
     handleOnClick: PropTypes.func.isRequired,
     showReferenceCount: PropTypes.bool.isRequired,
     selectedTag: PropTypes.object,
+    showTagHover: PropTypes.bool,
 };
 
 @observer
@@ -75,6 +82,7 @@ class TagTree extends Component {
             selectedTag,
             untaggedHandleClick,
             untaggedCount,
+            showTagHover,
         } = this.props;
         return (
             <div id="litTagtree" className="resize-y p-2 mt-2">
@@ -85,6 +93,7 @@ class TagTree extends Component {
                         handleOnClick={handleTagClick}
                         showReferenceCount={showReferenceCount}
                         selectedTag={selectedTag}
+                        showTagHover={showTagHover}
                     />
                 ))}
                 {untaggedHandleClick ? (
@@ -103,10 +112,12 @@ TagTree.propTypes = {
     selectedTag: PropTypes.object,
     untaggedCount: PropTypes.number,
     untaggedHandleClick: PropTypes.func,
+    showTagHover: PropTypes.bool,
 };
 TagTree.defaultProps = {
     showReferenceCount: false,
     handleTagClick: h.noop,
+    showTagHover: false,
 };
 
 export default TagTree;

frontend/shared/utils/LocalStorage.js

@@ -37,4 +37,4 @@ class LocalStorageBoolean extends LocalStorageItem {
     }
 }
 
-export {LocalStorageItem, LocalStorageBoolean};
+export {LocalStorageBoolean, LocalStorageItem};

hawc/static/css/hawc.css

@@ -304,9 +304,6 @@ div.smart-tag.active {
     transform: scaleX(-1);
     transition: transform 250ms ease-in-out;
 }
-#tagtree-col {
-    width: 25%;
-}
 #litTagtree {
     max-height: 120vh;
     background-color: #e0f0ff;
@@ -315,7 +312,7 @@ div.smart-tag.active {
 .abstracts {
     font-size: 1.15rem;
     margin-top: 0.25rem;
-    height: 25rem;
+    height: 50vh;
     background-color: #f5f5f5;
     border-radius: 6px;
 }
@@ -347,14 +344,50 @@ div.smart-tag.active {
 .abstract_label {
     font-weight: bold;
 }
-.nestedTag {
-    border: 2px solid transparent;
+ .nestedTag {
     cursor: pointer;
+    border: 1px solid transparent;
 }
-.nestedTag:hover {
-    border: 2px solid #ababab;
-    background-color: #8ee8ff;
+
+.nestedTag > div.tagName {
+    display: inline-block;
+    position: relative;
+    background: linear-gradient(0deg, #484848, #484848) no-repeat right bottom / 0 var(--bg-h);
+    transition: background-size 200ms;
+    --bg-h: 2px;
+    text-decoration: none;
+    padding-left: 5px;
+    padding-right: 15px;
+    border: 3px solid transparent;
+}
+
+.nestedTag > div.tagName:where(:hover, :focus-visible) {
+    background-size: 100% var(--bg-h);
+    background-position-x: left;
 }
+
+.nestedTag>div.tagName::before {
+    color: #484848;
+    content: "\f067";
+    font-family: FontAwesome;
+    font-size: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: -1px;
+    right: -1px;
+    width: 25px;
+    height: 110%;
+    transform: scale(1, 0);
+    transform-origin: bottom;
+    transition: all 75ms ease-in 125ms;
+}
+
+.nestedTag>div.tagName:hover::before {
+    transform: scale(1, 1);
+}
+
 .nestedTag.selected {
     color: #0044cc;
     font-weight: bold;

tests/data/api/api-visual-barchart.json

@@ -457,4 +457,4 @@
   "url_delete": "/summary/visual/assessment/2/barchart/delete/",
   "url_update": "/summary/visual/assessment/2/barchart/update/",
   "visual_type": "risk of bias barchart"
-}
+}

tests/data/api/api-visual-rob-heatmap.json

@@ -459,4 +459,4 @@
   "url_delete": "/summary/visual/assessment/2/rob-heatmap/delete/",
   "url_update": "/summary/visual/assessment/2/rob-heatmap/update/",
   "visual_type": "risk of bias heatmap"
-}
+}