Implement front end calculated value highlighting

package.json

@@ -26,6 +26,7 @@
     "lerna": "^3.22.0"
   },
   "dependencies": {
+    "diff": "^5.0.0",
     "dotenv-defaults": "^2.0.2",
     "dotenv-extended": "^2.9.0",
     "esm": "^3.2.25",

packages/optimus-code-api/src/index.js

@@ -1138,9 +1138,9 @@ export const codeGenerators = {
       +( (payload.drop) ? ', drop=True' : '')
       +')'
 
-    if (payload.request.type === 'preview') {
-      code += `.cols.find(${_argument}, sub=["${payload.separator}"])`
-    }
+    // if (payload.request.type === 'preview') {
+    //   code += `.cols.find(${_argument}, sub=["${payload.separator}"])`
+    // }
     return code
   },
 

packages/web/components/BumblebeeTable.vue

@@ -513,6 +513,8 @@
 
 import { mapState, mapGetters } from 'vuex';
 
+import { diffChars } from 'diff';
+
 import dataTypesMixin from '@/plugins/mixins/data-types'
 import clientMixin from '@/plugins/mixins/client'
 
@@ -1962,6 +1964,12 @@ export default {
     computeColumnValues (columnValues, noHighlight = false, limit = Infinity) {
       var cValues = {}
 
+      const highlightDiff = this.previewCode.highlightDiff;
+      const highlightValue = this.previewCode.highlightValue;
+      const highlightMatch = this.previewCode.highlightMatch;
+
+      const colors = this.currentHighlights?.color;
+
       for (const name in columnValues) {
         // TO-DO: do not include highlights
         var array = []
@@ -1971,24 +1979,86 @@ export default {
           return cValues[name] = []
           continue // TO-DO: Handling
         }
-        const highlight = !noHighlight && this.highlightMatches && this.highlightMatches[name] && this.highlightMatches[name].title
-        const hlValues = columnValues[highlight]
-        if (highlight && hlValues && hlValues.length) {
-          const preview = name.includes('__preview__') || name.includes('__new__') // TO-DO: Check
-          const color = this.currentHighlights.color['default'] ? this.currentHighlights.color[preview ? 'preview' : 'default'] : this.currentHighlights.color
+        
+        const preview = name.includes('__preview__') || name.includes('__new__');  // TO-DO: Check __preview__
+        const otherName = preview ? name.replace('__new__', '') : `__new__${name}`;
+
+        let otherValues = columnValues[otherName];
+
+        if (!otherValues || !otherValues.length) {
+          otherValues = false;
+        }
+
+        const color = colors?.default ? colors[preview ? 'preview' : 'default'] : colors;
+
+        const enableHighlight = color === false ? false : !noHighlight;
+
+        const highlight = this.highlightMatches && this.highlightMatches[name] && this.highlightMatches[name].title;
+        const hlValues = columnValues[highlight];        
+
+        if (enableHighlight && highlight && hlValues && hlValues.length) {
+          // custom highlight
+
+          for (const index in values) {
+            if (index>=limit) {
+              continue
+            }
+            const html = this.getCellHtmlHighlight(values[index], hlValues[index], color)
+            array.push({html , index: +index, value: values[index]})
+          }
+        } else if (enableHighlight && highlightDiff && otherValues) {
+          // highlight differences between new and old (replace)
+          const color = this.currentHighlights.color?.default ? this.currentHighlights.color[preview ? 'preview' : 'default'] : this.currentHighlights.color
+          
           for (const index in values) {
             if (index>=limit) {
               continue
             }
-            var html = this.getCellHtmlHighlight(values[index], hlValues[index], color)
+            const html = this.getCellHtmlHighlightDiff(values[index], otherValues[index], color)
             array.push({html , index: +index, value: values[index]})
           }
+        } else if (enableHighlight && highlightValue && (preview || otherValues)) {
+          // highlight a value from the arguments (split, merge)
+          const color = this.currentHighlights.color?.default ? this.currentHighlights.color[preview ? 'preview' : 'default'] : this.currentHighlights.color
+          const stringToHighlight = this.previewCode?.codePayload ? this.previewCode?.codePayload[highlightValue] : null;
+          if (stringToHighlight) {
+            for (const index in values) {
+              if (index>=limit) {
+                continue
+              }
+              const html = this.getCellHtmlHighlightValue(values[index], stringToHighlight, color)
+              array.push({html , index: +index, value: values[index]})
+            }
+          }
+        } else if (enableHighlight && highlightMatch && preview) {
+          // highlight a value from other column
+          const color = this.currentHighlights.color?.default ? this.currentHighlights.color[preview ? 'preview' : 'default'] : this.currentHighlights.color
+          const highlightValues = columnValues[highlightMatch];
+          if (highlightValues && highlightValues.length) {
+            for (const index in values) {
+              if (index>=limit) {
+                continue
+              }
+              const html = this.getCellHtmlHighlightValue(values[index], highlightValues[index], color)
+              array.push({html , index: +index, value: values[index]})
+            }
+          } else {
+            // default
+            for (const index in values) {
+              if (index>=limit) {
+                continue
+              }
+              const html = this.getCellHtml(values[index])
+              array.push({html , index: +index, value: values[index]})
+            }
+          }
         } else {
+          // default
           for (const index in values) {
             if (index>=limit) {
               continue
             }
-            var html = this.getCellHtml(values[index])
+            const html = this.getCellHtml(values[index])
             array.push({html , index: +index, value: values[index]})
           }
         }
@@ -2175,7 +2245,7 @@ export default {
 
           this.$store.commit('setPreviewColumns', previewColumns)
 
-          this.$store.commit('setHighlights', { matchColumns, color: this.previewCode.color })
+          this.$store.commit('setHighlights', { matchColumns, color: this.previewCode.highlightColor })
 
           if (previewColumns.length || matchRowsColumns.length) {
             // console.debug('[DEBUG][checkIncomingColumns] check = true')
@@ -2310,7 +2380,7 @@ export default {
     getRowHighlight (row) {
       try {
         if (this.columnValues['__match__'][row]) {
-          return 'bb-highlight--'+(this.previewCode.color || 'green')
+          return 'bb-highlight--'+(this.previewCode.highlightColor || 'green')
         }
       } catch (err) {
         // console.error(err)
@@ -2357,6 +2427,73 @@ export default {
       }
     },
 
+    getCellHtmlHighlightDiff (value, other = null, color = 'green') {
+      
+      if (value==='') {
+        return '<span class="null-cell">Empty</span>'
+      } else if (value===null) {
+        return '<span class="null-cell">None</span>'
+      } else if (!value) {
+        return value
+      }
+
+      let _value = replaceTags(value)
+
+      try {
+        if (other !== null) {
+          const diff = diffChars(value, other);
+
+          _value = diff.map(part => {
+            if (part.added) {
+              return '';
+            }
+            return part.removed ? `<span class="hlt--${color}">${part.value}</span>` : part.value;
+          }).join('');
+        }
+        return _value
+      } catch (err) {
+        console.error(err);
+        if (value) {
+          return value
+        } else if (_value) {
+          return _value
+        } else {
+          return '<span class="null-cell">Null</span>'
+        }
+      }
+    },
+
+    getCellHtmlHighlightValue (value, other = null, color = 'green') {
+      
+      if (value==='') {
+        return '<span class="null-cell">Empty</span>'
+      } else if (value===null) {
+        return '<span class="null-cell">None</span>'
+      } else if (!value) {
+        return value
+      }
+
+      let _value = replaceTags(value)
+
+      try {
+        if (other !== null) {
+          _value = value
+            .split(other)
+            .join(`<span class="hlt--${color}">${other}</span>`);
+        }
+        return _value
+      } catch (err) {
+        console.error(err);
+        if (value) {
+          return value
+        } else if (_value) {
+          return _value
+        } else {
+          return '<span class="null-cell">Null</span>'
+        }
+      }
+    },
+
     updateSelection (value) {
       try {
 

packages/web/components/Cells.vue

@@ -1395,7 +1395,10 @@ export default {
           code: this.getCode(this.currentCommand, 'preview'),
           codePayload: deepCopy(this.currentCommand),
           beforeCodeEval: this.currentCommand.beforeCodeEval ? ()=>this.currentCommand.beforeCodeEval(this.currentCommand) : false,
-          color: getProperty(preview.highlightColor, [this.currentCommand]),
+          highlightDiff: getProperty(preview.highlightDiff, [this.currentCommand]),
+          highlightValue: getProperty(preview.highlightValue, [this.currentCommand]),
+          highlightMatch: getProperty(preview.highlightMatch, [this.currentCommand]),
+          highlightColor: getProperty(preview.highlightColor, [this.currentCommand]),
           from: this.currentCommand.columns,
           latePreview: !!getProperty(preview.latePreview, [this.currentCommand]),
           datasetPreview: !!getProperty(preview.datasetPreview, [this.currentCommand]),

packages/web/utils/operations.js

@@ -4141,6 +4141,7 @@ export const commandsHandlers = {
       _search_by_string: true,
       preview: {
         type: "replace",
+        highlightDiff: true,
         highlightColor: { default: "red", preview: "green" },
       },
     }),
@@ -4320,7 +4321,11 @@ export const commandsHandlers = {
         preview: {
           type: "unnest",
           expectedColumns: (c) => (c.splits ? c.splits : -1),
-          highlightColor: "red",
+          highlightValue: "separator",
+          highlightColor: {
+            default: "red",
+            preview: false
+          },
           multipleOutputs: true,
         },
       };

yarn.lock

@@ -1797,6 +1797,11 @@ dezalgo@^1.0.0:
     asap "^2.0.0"
     wrappy "1"
 
+diff@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-5.0.0.tgz#7ed6ad76d859d030787ec35855f5b1daf31d852b"
+  integrity sha512-/VTCrvm5Z0JGty/BWHljh+BAiw3IK+2j87NGMu8Nwc/f48WoDAC395uomO9ZD117ZOBaHmkX1oyLvkVM/aIT3w==
+
 dir-glob@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-2.2.2.tgz#fa09f0694153c8918b18ba0deafae94769fc50c4"