feat: add tooltips to all components/containers

Instead of only showing tooltips on changed components, this change shows the attributes on all
components, evn in preview mode.

fix #4

Author: Sean Dawson

public/css/plugin.css

@@ -142,10 +142,26 @@
   max-width: 90px;
   padding: 5px;
   position: relative;
+  -webkit-transition: background-color 200ms linear;
+  -moz-transition: background-color 200ms linear;
+  -o-transition: background-color 200ms linear;
+  -ms-transition: background-color 200ms linear;
+  transition: background-color 200ms linear;
 }
 
 .mp .component-container {
   position: relative;
+  border-radius: 5px;
+  -webkit-transition: background-color 200ms linear;
+  -moz-transition: background-color 200ms linear;
+  -o-transition: background-color 200ms linear;
+  -ms-transition: background-color 200ms linear;
+  transition: background-color 200ms linear;
+}
+
+.mp .highlighted > .component-container,
+.mp .highlighted.container {
+  background-color: #f3f3f3;
 }
 
 .mp .component > .label {
@@ -198,17 +214,14 @@
 /* Diffing Styles */
 .mp .edited {
   border: 2px solid #eea236;
-  border-radius: 5px;
 }
 
 .mp .added {
   border: 2px solid #4cae4c;
-  border-radius: 5px;
 }
 
 .mp .removed {
   border: 2px solid #d43f3a;
-  border-radius: 5px;
 }
 
 .mp .container.edited {

src/main/mule_preview/client/components.cljs

@@ -69,6 +69,9 @@
 
 (defn delta-text [name [previous current]]
   (cond
+    (= current previous) [:div
+                          {:key name} (str name ": ")
+                          [:span  current]]
     (and (some? previous) (some? current)) [:div
                                             {:key name} (str name ": ")
                                             [:span {:class ["previous"]} previous]
@@ -87,55 +90,65 @@
                                             current
                                             " (Attribute Added)"]]))
 
-(defn tooltip-item [{:keys [name delta]}]
+(defn tooltip-item [[name delta]]
   (if (#{"content-hash"} name)
     [:div
      {:key name}
      "Content Changed"]
     (delta-text name delta)))
 
-(defn tooltip-edited [change-record]
+
+(defn generate-tooltip-record [change-record attributes]
+  (let [regular-attribute-map (into {} (for [[k v] attributes] [(name k) [v v]]))
+        diff-attribute-map (into {} (for [{:keys [name delta]} change-record] [name delta]))]
+    (merge regular-attribute-map diff-attribute-map)))
+
+(defn tooltip-content [tooltip-record]
   [:div (->>
-         change-record
-         (remove #(#{"hash" "description"} (:name %)))
+         (dissoc tooltip-record "hash" "description")
          (map tooltip-item))])
 
+(defn tooltip-neutral [tooltip-record]
+  [:div (tooltip-content tooltip-record)])
 
-(defn tooltip-added []
-  [:div "Element Added"])
+(defn tooltip-added [tooltip-record]
+  [:div "Element Added"
+   (tooltip-content tooltip-record)])
 
-(defn tooltip-removed []
-  [:div "Element Removed"])
+(defn tooltip-removed [tooltip-record]
+  [:div "Element Removed"
+   (tooltip-content tooltip-record)])
 
-(defn tooltip [change-record labels location placement]
+(defn tooltip [tooltip-record labels location placement]
   [:div {:class ["mp-popover" placement]}
    [:h3 {:class "mp-popover-title"}
     (str "Line " (:line location) ", Column " (:column location))]
    [:div {:class "mp-popover-content"}
     (cond
-      (:added labels) (tooltip-added)
-      (:removed labels) (tooltip-removed)
-      (:edited labels) (tooltip-edited change-record)
-      :else nil)]])
+      (:added labels) (tooltip-added tooltip-record)
+      (:removed labels) (tooltip-removed tooltip-record)
+      :else (tooltip-neutral tooltip-record))]])
 
-(defn popper [change-record labels location showing-atom anchor-el]
-  ; TODO: Remove this dependency on react-dom
+(defn popper [tooltip-record labels location showing-atom anchor-el]
   (when @showing-atom
     [:div {:class "mp-popover-root"}
      [:> Popper {:placement "auto" :reference-element @anchor-el}
       (fn [props]
         (let [{:keys [ref style placement]} (js->clj props :keywordize-keys true)]
           (r/as-element [:div {:ref ref :style style :data-placement placement :class placement}
-                         (tooltip change-record labels location placement)])))]]))
+                         (tooltip tooltip-record labels location placement)])))]]))
 
-(defn mule-component-inner [{:keys [name description css-class content-root location change-record showing-atom labels mappings]}]
+(defn mule-component-inner [{:keys [name description css-class content-root
+                                    location change-record showing-atom labels mappings
+                                    attributes]}]
   (let [anchor-el (clojure.core/atom nil)
         img-url (name-to-img-url name false default-component-mapping mappings)
         diff-icon-url (labels-to-diff-icon-url labels)
         category-url (name-to-category-url name default-category-image mappings)
-        should-show-tooltip (or change-record (:added labels) (:removed labels))]
+        tooltip-record (generate-tooltip-record change-record attributes)
+        should-show-tooltip (and (not= name "mule") (not-empty tooltip-record))]
     (fn []
-      [:div {:ref #(reset! anchor-el %)}
+      [:div {:ref #(reset! anchor-el %) :class (when @showing-atom "highlighted")}
        [:div {:class ["component-container" css-class]
               :on-mouse-over (m/handler-fn
                               (when should-show-tooltip
@@ -148,23 +161,26 @@
          (image category-url "category-frame" content-root)
          (image img-url "icon" content-root)
          [:div {:class "label"} description]]]
-       (popper change-record labels location showing-atom anchor-el)])))
+       (popper tooltip-record labels location showing-atom anchor-el)])))
 
 (defn mule-component [props]
   (let [showing-atom (r/atom false)]
     (fn [] (mule-component-inner (assoc props :showing-atom showing-atom)))))
 
-(defn mule-container-inner [{:keys [name description children css-class content-root location change-record showing-atom labels mappings]}]
+(defn mule-container-inner [{:keys [name description children css-class content-root
+                                    location change-record showing-atom labels mappings
+                                    attributes]}]
   (let [anchor-el (clojure.core/atom nil)
         generated-css-class (name-to-css-class name)
         img-url (name-to-img-url name (some? children) nil mappings)
         category-url (name-to-category-url name default-category-image mappings)
         interposed-children (interpose (arrow content-root) children)
         child-container-component (child-container interposed-children)
-        should-show-tooltip (or change-record (:added labels) (:removed labels))]
+        tooltip-record (generate-tooltip-record change-record attributes)
+        should-show-tooltip (and (not= name "mule") (not-empty tooltip-record))]
     (fn []
       [:div {:ref #(reset! anchor-el %)}
-       [:div {:class ["container" generated-css-class css-class]
+       [:div {:class ["container" generated-css-class css-class (when @showing-atom "highlighted")]
               :on-mouse-over (m/handler-fn
                               (when should-show-tooltip
                                 (reset! showing-atom should-show-tooltip)
@@ -176,7 +192,7 @@
           (image category-url "category-frame" content-root)
           (image img-url "icon container-image" content-root)]
          child-container-component]]
-       (popper change-record labels location showing-atom anchor-el)])))
+       (popper tooltip-record labels location showing-atom anchor-el)])))
 
 (defn mule-container [props]
   (let [showing-atom (r/atom false)]

src/main/mule_preview/client/diff_algorithms/diff_dom.cljs

@@ -11,20 +11,22 @@
           other-attributes (dissoc node :type-tag :content :type :labels :attributes :location)]
       {:nodeName tag-name
        :childNodes content
-       :attributes (merge attributes other-attributes)
+       :attributes attributes
+       :other-attributes other-attributes
        :original-type type
        :original-labels labels
        :location location})
     node))
 
 (defn dom-to-node [node]
   (if (:nodeName node)
-    (let [{:keys [nodeName childNodes attributes original-type original-labels location]} node]
+    (let [{:keys [nodeName childNodes attributes original-type original-labels location other-attributes]} node]
       (merge {:tag-name nodeName
               :content childNodes
               :type (keyword original-type)
               :labels original-labels
-              :location location} attributes))
+              :location location
+              :attributes attributes} other-attributes))
     node))
 
 (defn mast->dom [mast]

src/main/mule_preview/client/react.cljs

@@ -11,18 +11,19 @@
   (clojure.string/join " " (map name labels)))
 
 (defn- create-mule-component [node mappings content-root]
-  (let [{:keys [tag-name description labels location change-record]} node]
+  (let [{:keys [tag-name description labels location change-record attributes]} node]
     [(mule-component {:name tag-name
                       :description description
                       :css-class (labels-to-css labels)
                       :content-root content-root
                       :location location
                       :change-record change-record
                       :labels labels
-                      :mappings mappings})]))
+                      :mappings mappings
+                      :attributes attributes})]))
 
 (defn- create-mule-container-component [node mappings content-root]
-  (let [{:keys [tag-name description content labels location change-record]} node]
+  (let [{:keys [tag-name description content labels location change-record attributes]} node]
     [(mule-container {:name tag-name
                       :description description
                       :children content
@@ -31,7 +32,8 @@
                       :location location
                       :change-record change-record
                       :labels labels
-                      :mappings mappings})]))
+                      :mappings mappings
+                      :attributes attributes})]))
 
 (defn- transform-tag [mappings content-root node]
   (let [type (:type node)]

src/test/mule_preview/client/__snapshots__/components.spec.js.snap

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`when rendering a Mule component when the component has mapping renders correctly 1`] = `
-<div>
+<div
+  className={null}
+>
   <div
     className="component-container some-css-class"
     onMouseOut={[Function]}
@@ -29,7 +31,9 @@ exports[`when rendering a Mule component when the component has mapping renders
 `;
 
 exports[`when rendering a Mule component when the component is unknown renders correctly 1`] = `
-<div>
+<div
+  className={null}
+>
   <div
     className="component-container some-css-class"
     onMouseOut={[Function]}
@@ -78,11 +82,17 @@ exports[`when rendering a Mule container when it has children renders correctly
           className="category-frame"
           src="/img/icons/org.mule.tooling.ui.modules.core.miscellaneous.large.png"
         />
+        <img
+          className="icon container-image"
+          src="/img/icons/UnknownNode-48x32.png"
+        />
       </div>
       <div
         className="container-children"
       >
-        <div>
+        <div
+          className={null}
+        >
           <div
             className="component-container some-css-class"
             onMouseOut={[Function]}
@@ -115,7 +125,9 @@ exports[`when rendering a Mule container when it has children renders correctly
           className="flow-arrow"
           src="/img/arrow-right-2x.png"
         />
-        <div>
+        <div
+          className={null}
+        >
           <div
             className="component-container some-css-class"
             onMouseOut={[Function]}
@@ -148,7 +160,9 @@ exports[`when rendering a Mule container when it has children renders correctly
           className="flow-arrow"
           src="/img/arrow-right-2x.png"
         />
-        <div>
+        <div
+          className={null}
+        >
           <div
             className="component-container some-css-class"
             onMouseOut={[Function]}
@@ -205,6 +219,10 @@ exports[`when rendering a Mule container when it has no children renders correct
           className="category-frame"
           src="/img/icons/org.mule.tooling.ui.modules.core.miscellaneous.large.png"
         />
+        <img
+          className="icon container-image"
+          src="/img/icons/UnknownNode-48x32.png"
+        />
       </div>
       <div
         className="container-children"