⚡ Add performance oriented refactor to token sidebar and token-pill

frontend/src/app/main/ui/workspace/tokens/sidebar.cljs

@@ -33,7 +33,6 @@
    [app.main.ui.workspace.tokens.sets-context-menu :refer [sets-context-menu]]
    [app.main.ui.workspace.tokens.style-dictionary :as sd]
    [app.main.ui.workspace.tokens.theme-select :refer [theme-select]]
-   [app.main.ui.workspace.tokens.token :as wtt]
    [app.main.ui.workspace.tokens.token-pill :refer [token-pill*]]
    [app.util.array :as array]
    [app.util.dom :as dom]
@@ -66,19 +65,10 @@
     :sizing "expand"
     "add"))
 
-(def ^:private
-  xf:map-id
-  (map :id))
-
-(defn- all-selected? [token selected-shapes attributes]
-  (let [ids-by-attributes (wtt/shapes-ids-by-applied-attributes token selected-shapes attributes)
-        shape-ids         (into #{} xf:map-id selected-shapes)]
-    (wtt/shapes-applied-all? ids-by-attributes shape-ids attributes)))
-
 (mf/defc token-group*
   {::mf/private true}
   [{:keys [type tokens selected-shapes active-theme-tokens is-open]}]
-  (let [{:keys [modal attributes all-attributes title] :as token-type-props}
+  (let [{:keys [modal title]}
         (get wtch/token-properties type)
 
         tokens
@@ -144,23 +134,13 @@
         [:& cmm/asset-section-block {:role :content}
          [:div {:class (stl/css :token-pills-wrapper)}
           (for [token tokens]
-            (let [theme-token (get active-theme-tokens (:name token))
+            [:> token-pill*
-                  multiple-selection (< 1 (count selected-shapes))
+             {:key (:name token)
-                  full-applied (all-selected? token selected-shapes (or all-attributes attributes))
+              :token token
-                  applied      (wtt/shapes-token-applied? token selected-shapes (or all-attributes attributes))]
+              :selected-shapes selected-shapes
-
+              :active-theme-tokens active-theme-tokens
-              [:> token-pill*
+              :on-click on-token-pill-click
-               {:key (:name token)
+              :on-context-menu on-context-menu}])]])]]))
-                :token (d/nilv theme-token token)
-                :selected-shapes selected-shapes
-                :active-theme-tokens active-theme-tokens
-                :half-applied (or (and applied multiple-selection)
-                                  (and applied (not full-applied)))
-                :full-applied (if multiple-selection
-                                false
-                                applied)
-                :on-click on-token-pill-click
-                :on-context-menu on-context-menu}]))]])]]))
 
 (defn- get-sorted-token-groups
   "Separate token-types into groups of `empty` or `filled` depending if

frontend/src/app/main/ui/workspace/tokens/token_pill.cljs

@@ -141,17 +141,49 @@
   (let [match (second (re-find #"\{([^}]+)\}" text))]
     (contains? active-tokens match)))
 
+(def ^:private
+  xf:map-id
+  (map :id))
+
+(defn- applied-all-attributes?
+  [token selected-shapes attributes]
+  (let [ids-by-attributes (wtt/shapes-ids-by-applied-attributes token selected-shapes attributes)
+        shape-ids         (into #{} xf:map-id selected-shapes)]
+    (wtt/shapes-applied-all? ids-by-attributes shape-ids attributes)))
+
+
 (mf/defc token-pill*
-  [{:keys [on-click token full-applied on-context-menu half-applied selected-shapes active-theme-tokens]}]
+  {::mf/wrap [mf/memo]}
+  [{:keys [on-click token on-context-menu selected-shapes active-theme-tokens]}]
   (let [{:keys [name value errors]} token
 
+        token
+        (or (get active-theme-tokens (:name token)) token)
+
+        has-selected?  (pos? (count selected-shapes))
         is-reference?  (wtt/is-reference? token)
         contains-path? (str/includes? name ".")
 
+        {:keys [attributes all-attributes]}
+        (get wtch/token-properties (:type token))
+
+        full-applied?
+        (if has-selected?
+          (applied-all-attributes? token selected-shapes (or all-attributes attributes))
+          true)
+
+        applied?
+        (if has-selected?
+          (wtt/shapes-token-applied? token selected-shapes (or all-attributes attributes))
+          false)
+
+        half-applied?
+        (and applied? (not full-applied?))
+
         ;; FIXME: move to context or props
         can-edit? (:can-edit (deref refs/permissions))
 
-        is-viewer (not can-edit?)
+        is-viewer? (not can-edit?)
 
         ref-not-in-active-set
         (and is-reference?
@@ -174,9 +206,9 @@
 
         token-status-id
         (cond
-          half-applied
+          half-applied?
           "token-status-partial"
-          full-applied
+          full-applied?
           "token-status-full"
           :else
           "token-status-non-applied")
@@ -200,26 +232,26 @@
         ;; FIXME: missing deps
         on-hover
         (mf/use-fn
-         (mf/deps selected-shapes is-viewer)
+         (mf/deps selected-shapes is-viewer?)
          (fn [event]
            (let [node  (dom/get-current-target event)
-                 title (generate-tooltip is-viewer (first selected-shapes) token
+                 title (generate-tooltip is-viewer? (first selected-shapes) token
-                                         half-applied no-valid-value ref-not-in-active-set)]
+                                         half-applied? no-valid-value ref-not-in-active-set)]
              (dom/set-attribute! node "title" title))))]
 
     [:button {:class (stl/css-case
                       :token-pill true
                       :token-pill-default can-edit?
-                      :token-pill-applied (and can-edit? (or half-applied full-applied))
+                      :token-pill-applied (and can-edit? has-selected? (or half-applied? full-applied?))
                       :token-pill-invalid (and can-edit? errors?)
-                      :token-pill-invalid-applied (and full-applied errors? can-edit?)
+                      :token-pill-invalid-applied (and full-applied? errors? can-edit?)
-                      :token-pill-viewer is-viewer
+                      :token-pill-viewer is-viewer?
-                      :token-pill-applied-viewer (and is-viewer
+                      :token-pill-applied-viewer (and is-viewer? has-selected?
-                                                      (or half-applied full-applied))
+                                                      (or half-applied? full-applied?))
-                      :token-pill-invalid-viewer (and is-viewer
+                      :token-pill-invalid-viewer (and is-viewer?
                                                       errors?)
-                      :token-pill-invalid-applied-viewer (and is-viewer
+                      :token-pill-invalid-applied-viewer (and is-viewer?
-                                                              (and full-applied errors?)))
+                                                              (and full-applied? errors?)))
               :type "button"
               :on-click on-click
               :on-mouse-enter on-hover