fix infinit update loop

src/components/DataFilter.ts

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { Query, Column, DataTableOptions, JS_QUERY_DEFAULT, FieldQuery } from './Vue2DataTable';
+import { DataTableOptions, JS_QUERY_DEFAULT } from './Vue2DataTable';
 import { TDNode } from 'treedoc';
 import { TableUtil } from '../models/TableUtil';
 

src/components/JsonTable.vue

@@ -104,12 +104,12 @@ export default class JsonTable extends Vue {
     columns: [],
     data: [],
     filteredData: [],
-    // filteredDataAsObjectArray: [],
     rawData: [],
     total: 0,
     // Have to initialize all the fields to make them able to be persisted in cache. (reactivity problem by proxy?)
     query: new Query(),
-    xprops: { tstate: null, columnStatistic: {}, filteredDataAsObjectArray:[] },
+    // !!!Have to initialize xprops.filteredData to make it reactive
+    xprops: { tstate: null, filteredData:[] },
   };
   defTableOpt!: any;
   // !! class based component, we have to initialized the data field, "undefined" won't be reactive. !!
@@ -323,7 +323,10 @@ export default class JsonTable extends Vue {
 
 
   @Watch('query', {deep: true})
-  watchQuery() { this.queryData(); }
+  watchQuery() {
+    console.log("query changed: " + JSON.stringify(this.query));
+    this.queryData(); 
+  }
 
   @Watch('isColumnExpanded')
   watchisColumnExpanded() {

src/components/SimpleValue.vue

@@ -20,6 +20,17 @@ import TreeState from '../models/TreeState';
 import TreeUtil from '../models/TreeUtil';
 import _ from 'lodash';
 
+// number and between 1980-01-01 and 2040-01-01, maybe a Date
+const START_TIME = new Date('1980-01-01').getTime();
+const END_TIME = new Date('2040-01-01').getTime();
+
+function tryDate(val: number): Date | null{
+  if (val > START_TIME && val < END_TIME) {
+    return new Date(val);
+  }
+  return null;
+}
+
 @Component
 export default class SimpleValue extends Vue {
   @Prop() tnode!: TDNode;
@@ -33,17 +44,10 @@ export default class SimpleValue extends Vue {
   }
 
   get date() {
-    // number and between 1980-01-01 and 2040-01-01, maybe a Date
     const val = Number(this.tnode.value);
-    if (_.isNumber(val) && val > 315532800000 && val < 2208988800000) {
-      return `\n${new Date(val as number).toISOString()}`;
-    }
-    // Numbers that are in seconds
-    if (_.isNumber(val) && val > 315532800 && val < 2208988800) {
-      return `\n${new Date((val as number) * 1000).toISOString()}`;
-    }
-    
-    return null;
+    if (!_.isNumber(val)) return null;
+    const date = tryDate(val) || tryDate(val * 1000) || tryDate(val / 1000_000);
+    return date ? `\n${date.toISOString()}` : null;
   }
 
   get refAbsolute() {

src/components/Vue2DataTable.ts

@@ -10,6 +10,7 @@ export declare interface Column {
 
 export class FieldQuery {
   query: string = '';
+  compiledQuery: string = '';
   isRegex: boolean = false;
   // If it's array, the query string will be parsed with JSONex Parser as array of string
   // For example: "abc,def" will be parsed as ["abc", "def"], '"ab\"c", "def"' will be parsed as ['ab"c', 'def']
@@ -19,6 +20,15 @@ export class FieldQuery {
   queryCompiled?: (string | RegExp)[];
 
   compile() {
+    // Avoid recompile if query is not changes which will cause infinite update loop from vue
+    if (this.query === this.compiledQuery)
+      return;
+    this.compiledQuery = this.query;
+
+    if (!this.query) {
+      this.queryCompiled = [];
+      return;
+    }
     const values: string[] = this.isArray ? TD.parse(this.query, {defaultRootType: TDNodeType.ARRAY}) : [this.query];
     // console.log('compile', this.query, values);
     this.queryCompiled = values.map(q => {