feat(menu/compareied): ignore attributes/elements when comparing IED Elements (openscd#926)

* Feature: Added the possibility to ignore attributes and/or elements when checking for differences between 2 elements.

Signed-off-by: Pascal Wilbrink <[email protected]>

* Cleanup of code

Signed-off-by: Pascal Wilbrink <[email protected]>

* Reverted package-lock.json

Signed-off-by: Pascal Wilbrink <[email protected]>

* Refactored and renamed some variables

Signed-off-by: Pascal Wilbrink <[email protected]>

* Fixed code review comments

Signed-off-by: Pascal Wilbrink <[email protected]>

* Fixed translation in test

Signed-off-by: Pascal Wilbrink <[email protected]>

* 841 Fix review comment

Signed-off-by: Pascal Wilbrink <[email protected]>

Signed-off-by: Pascal Wilbrink <[email protected]>

Author: pascalwilbrink

src/foundation/compare.ts

@@ -14,6 +14,69 @@ export type Diff<T> =
   | { oldValue: null; newValue: T }
   | { oldValue: T; newValue: T };
 
+/**
+ * Type to filter out a difference based on `tagName`.`attributeName`
+ *
+ * The matcher can be a boolean or a `consumer` that returns a boolean
+ */
+export interface DiffFilter<T> {
+  [selector: string]: DiffFilterSelector<T>;
+};
+
+interface DiffFilterSelector<T> {
+  full?: DiffFilterConsumer<T>;
+  attributes?: {
+    [name: string]: DiffFilterConsumer<T>;
+  };
+}
+
+/**
+ * Consumer to match if a diff should be filtered out.
+ */
+type DiffFilterConsumer<T> = boolean | ((value: T | null) => boolean);
+
+function getDiffFilterSelector(
+  elementToBeCompared: Element,
+  rootElementToBeCompared: Element,
+  filters: DiffFilter<Element>
+): DiffFilterSelector<Element> | undefined {
+  const querySelector: string | undefined =
+    rootElementToBeCompared === elementToBeCompared
+      ? ':scope'
+      : Object.keys(filters).find(selector =>
+          Array.from(
+            rootElementToBeCompared.querySelectorAll(selector)
+          ).includes(elementToBeCompared)
+        );
+
+  return querySelector ? filters[querySelector!] : undefined;
+}
+
+function shouldFilterElement(
+  element: Element,
+  filter: DiffFilterSelector<Element> | undefined
+): boolean {
+  if (!filter || !filter.full) {
+    return false;
+  }
+  const consumer: DiffFilterConsumer<Element> = filter!.full!;
+
+  return typeof consumer === 'boolean' ? consumer : consumer(element);
+}
+
+function shouldFilterAttribute(
+  element: Element,
+  attribute: string,
+  filter: DiffFilterSelector<Element> | undefined
+): boolean {
+  if (!filter || !filter.attributes || !filter.attributes![attribute]) {
+    return false;
+  }
+  const consumer: DiffFilterConsumer<Element> = filter!.attributes![attribute];
+
+  return typeof consumer === 'boolean' ? consumer : consumer(element);
+}
+
 /**
  * Returns the description of the Element that differs.
  *
@@ -32,8 +95,11 @@ function describe(element: Element): string {
  */
 export function diffSclAttributes(
   elementToBeCompared: Element,
-  elementToCompareAgainst: Element
+  elementToCompareAgainst: Element,
+  filterToIgnore: DiffFilter<Element>,
+  searchElementToBeCompared: Element,
 ): [string, Diff<string>][] {
+
   const attrDiffs: [string, Diff<string>][] = [];
 
   // First check if there is any text inside the element and there should be no child elements.
@@ -44,7 +110,18 @@ export function diffSclAttributes(
     elementToCompareAgainst.childElementCount === 0 &&
     newText !== oldText
   ) {
-    attrDiffs.push(['value', { newValue: newText, oldValue: oldText }]);
+    const shouldFilter: boolean = shouldFilterElement(
+      elementToBeCompared,
+      getDiffFilterSelector(
+        elementToBeCompared,
+        searchElementToBeCompared,
+        filterToIgnore
+      )
+    );
+
+    if (!shouldFilter) {
+      attrDiffs.push(['value', { newValue: newText, oldValue: oldText }]);
+    }
   }
 
   // Next check if there are any difference between attributes.
@@ -54,9 +131,19 @@ export function diffSclAttributes(
       .concat(elementToBeCompared.getAttributeNames())
   );
   for (const name of attributeNames) {
+    const shouldFilter: boolean = shouldFilterAttribute(
+      elementToBeCompared,
+      name,
+      getDiffFilterSelector(
+        elementToBeCompared,
+        searchElementToBeCompared,
+        filterToIgnore
+      )
+    );
     if (
+      !shouldFilter &&
       elementToCompareAgainst.getAttribute(name) !==
-      elementToBeCompared.getAttribute(name)
+        elementToBeCompared.getAttribute(name)
     ) {
       attrDiffs.push([
         name,
@@ -111,30 +198,54 @@ export function isSame(newValue: Element, oldValue: Element): boolean {
  */
 export function diffSclChilds(
   elementToBeCompared: Element,
-  elementToCompareAgainst: Element
+  elementToCompareAgainst: Element,
+  filterToIgnore: DiffFilter<Element>,
+  searchElementToBeCompared: Element,
+  searchElementToCompareAgainst: Element
 ): Diff<Element>[] {
   const childDiffs: Diff<Element>[] = [];
   const childrenToBeCompared = Array.from(elementToBeCompared.children);
   const childrenToCompareTo = Array.from(elementToCompareAgainst.children);
 
   childrenToBeCompared.forEach(newElement => {
     if (!newElement.closest('Private')) {
-      const twinIndex = childrenToCompareTo.findIndex(ourChild =>
-        isSame(newElement, ourChild)
+      const shouldFilter: boolean = shouldFilterElement(
+        newElement,
+        getDiffFilterSelector(
+          newElement,
+          searchElementToBeCompared,
+          filterToIgnore 
+        )
       );
-      const oldElement = twinIndex > -1 ? childrenToCompareTo[twinIndex] : null;
+      if (!shouldFilter) {
+        const twinIndex = childrenToCompareTo.findIndex(ourChild =>
+          isSame(newElement, ourChild)
+        );
+        const oldElement =
+          twinIndex > -1 ? childrenToCompareTo[twinIndex] : null;
 
-      if (oldElement) {
-        childrenToCompareTo.splice(twinIndex, 1);
-        childDiffs.push({ newValue: newElement, oldValue: oldElement });
-      } else {
-        childDiffs.push({ newValue: newElement, oldValue: null });
+        if (oldElement) {
+          childrenToCompareTo.splice(twinIndex, 1);
+          childDiffs.push({ newValue: newElement, oldValue: oldElement });
+        } else {
+          childDiffs.push({ newValue: newElement, oldValue: null });
+        }
       }
     }
   });
   childrenToCompareTo.forEach(oldElement => {
     if (!oldElement.closest('Private')) {
-      childDiffs.push({ newValue: null, oldValue: oldElement });
+      const shouldFilter: boolean = shouldFilterElement(
+        oldElement,
+        getDiffFilterSelector(
+          oldElement,
+          searchElementToCompareAgainst,
+          filterToIgnore
+        )
+      );
+      if (!shouldFilter) {
+        childDiffs.push({ newValue: null, oldValue: oldElement });
+      }
     }
   });
   return childDiffs;
@@ -149,23 +260,50 @@ export function diffSclChilds(
  */
 export function renderDiff(
   elementToBeCompared: Element,
-  elementToCompareAgainst: Element
+  elementToCompareAgainst: Element,
+  filterToIgnore: DiffFilter<Element> = {}
+): TemplateResult | null {
+  return renderDiffInternal(
+    elementToBeCompared, 
+    elementToCompareAgainst,
+    filterToIgnore,
+    elementToBeCompared,
+    elementToCompareAgainst
+  );
+}
+
+function renderDiffInternal(
+  elementToBeCompared: Element,
+  elementToCompareAgainst: Element,
+  filterToIgnore: DiffFilter<Element> = {},
+  searchElementToBeCompared: Element,
+  searchElementToCompareAgainst: Element
 ): TemplateResult | null {
   // Determine the ID from the current tag. These can be numbers or strings.
   let idTitle: string | undefined = identity(elementToBeCompared).toString();
   if (idTitle === 'NaN') {
     idTitle = undefined;
   }
 
-  // First get all differences in attributes and text for the current 2 elements.
+  // Set the root elements if they are not defined yet
+  searchElementToBeCompared = searchElementToBeCompared || elementToBeCompared;
+  searchElementToCompareAgainst =
+    searchElementToCompareAgainst || elementToCompareAgainst;
+
   const attrDiffs: [string, Diff<string>][] = diffSclAttributes(
     elementToBeCompared,
-    elementToCompareAgainst
+    elementToCompareAgainst,
+    filterToIgnore,
+    searchElementToBeCompared,
   );
+
   // Next check which elements are added, deleted or in both elements.
   const childDiffs: Diff<Element>[] = diffSclChilds(
     elementToBeCompared,
-    elementToCompareAgainst
+    elementToCompareAgainst,
+    filterToIgnore,
+    searchElementToBeCompared,
+    searchElementToCompareAgainst
   );
 
   const childAddedOrDeleted: Diff<Element>[] = [];
@@ -180,7 +318,15 @@ export function renderDiff(
 
   // These children exist in both old and new element, let's check if there are any difference in the children.
   const childToCompareTemplates = childToCompare
-    .map(diff => renderDiff(diff.newValue!, diff.oldValue!))
+    .map(diff =>
+      renderDiffInternal(
+        diff.newValue!,
+        diff.oldValue!,
+        filterToIgnore,
+        searchElementToBeCompared,
+        searchElementToCompareAgainst
+      )
+    )
     .filter(result => result !== null);
 
   // If there are difference generate the HTML otherwise just return null.
@@ -189,21 +335,26 @@ export function renderDiff(
     attrDiffs.length > 0 ||
     childAddedOrDeleted.length > 0
   ) {
-    return html` ${attrDiffs.length > 0 || childAddedOrDeleted.length > 0
-      ? html` <mwc-list multi>
-          ${attrDiffs.length > 0
-            ? html` <mwc-list-item noninteractive ?twoline=${!!idTitle}>
+    return html` ${
+      attrDiffs.length > 0 || childAddedOrDeleted.length > 0
+        ? html` <mwc-list multi>
+          ${
+            attrDiffs.length > 0
+              ? html` <mwc-list-item noninteractive ?twoline=${!!idTitle}>
                   <span class="resultTitle">
                     ${translate('compare.attributes', {
                       elementName: elementToBeCompared.tagName,
                     })}
                   </span>
-                  ${idTitle
-                    ? html`<span slot="secondary">${idTitle}</span>`
-                    : nothing}
+                  ${
+                    idTitle
+                      ? html`<span slot="secondary">${idTitle}</span>`
+                      : nothing
+                  }
                 </mwc-list-item>
                 <li padded divider role="separator"></li>`
-            : ''}
+              : ''
+          }
           ${repeat(
             attrDiffs,
             e => e,
@@ -220,38 +371,45 @@ export function renderDiff(
                 </mwc-icon>
               </mwc-list-item>`
           )}
-          ${childAddedOrDeleted.length > 0
-            ? html` <mwc-list-item noninteractive ?twoline=${!!idTitle}>
+          ${
+            childAddedOrDeleted.length > 0
+              ? html` <mwc-list-item noninteractive ?twoline=${!!idTitle}>
                   <span class="resultTitle">
                     ${translate('compare.children', {
                       elementName: elementToBeCompared.tagName,
                     })}
                   </span>
-                  ${idTitle
-                    ? html`<span slot="secondary">${idTitle}</span>`
-                    : nothing}
+                  ${
+                    idTitle
+                      ? html`<span slot="secondary">${idTitle}</span>`
+                      : nothing
+                  }
                 </mwc-list-item>
                 <li padded divider role="separator"></li>`
-            : ''}
+              : ''
+          }
           ${repeat(
             childAddedOrDeleted,
             e => e,
             diff =>
               html` <mwc-list-item twoline left hasMeta>
                 <span>${diff.oldValue?.tagName ?? diff.newValue?.tagName}</span>
                 <span slot="secondary">
-                  ${diff.oldValue
-                    ? describe(diff.oldValue)
-                    : describe(diff.newValue)}
+                  ${
+                    diff.oldValue
+                      ? describe(diff.oldValue)
+                      : describe(diff.newValue)
+                  }
                 </span>
                 <mwc-icon slot="meta">
                   ${diff.oldValue ? 'delete' : 'add'}
                 </mwc-icon>
               </mwc-list-item>`
           )}
         </mwc-list>`
-      : ''}
+        : ''
+    }
     ${childToCompareTemplates}`;
   }
   return null;
-}
+}