config-editor-base 2.9.0 → 2.9.2

package/dist/index.modern.js

@@ -8,6 +8,7 @@ import Select from 'react-select';
 import Files from 'react-files';
 import applyNav, { GENERIC_NAV } from 'rjsf-tabs';
 import { ReactGhLikeDiff } from 'react-gh-like-diff';
+import Ajv from 'ajv';
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -19271,8 +19272,14 @@ var EditorSection = /*#__PURE__*/function (_React$Component) {
       isSubmitting: false,
       isDownloadConfig: false,
       isCompareChanges: false,
-      activeSideBar: 'schema-modal'
+      activeSideBar: 'schema-modal',
+      showNewToolsHighlight: true
     };
+    setTimeout(function () {
+      _this.setState({
+        showNewToolsHighlight: false
+      });
+    }, 10000);
     _this.input = '';
     _this.s3 = _this.props.fetchFileContentExt ? true : false;
     return _this;
@@ -19564,7 +19571,9 @@ var EditorSection = /*#__PURE__*/function (_React$Component) {
     }, ' ', "Review changes", ' ')), /*#__PURE__*/React.createElement("div", {
       className: "col-xs-7",
       style: {
-        "float": 'left'
+        "float": 'left',
+        display: 'flex',
+        alignItems: 'center'
       }
     }, editorToolsFull.map(function (modal, idx) {
       return /*#__PURE__*/React.createElement(EditorToolButton, {
@@ -19575,7 +19584,15 @@ var EditorSection = /*#__PURE__*/function (_React$Component) {
         comment: modal.comment,
         className: modal["class"]
       });
-    }))))))), /*#__PURE__*/React.createElement("div", {
+    }), this.state.showNewToolsHighlight && /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '12px',
+        color: '#337ab7',
+        marginLeft: '10px',
+        transition: 'opacity 1s ease-out',
+        opacity: this.state.showNewToolsHighlight ? 1 : 0
+      }
+    }, "New: OBD & filter builder tools"))))))), /*#__PURE__*/React.createElement("div", {
       className: "config-bar-background"
     }));
   };
@@ -21876,7 +21893,6 @@ function extractSupportedPidsFromBitmap(rangeStart, bitmapHex, supportedSet) {
 }
 
 var merge$1 = require("deepmerge");
-var yourForm$1;
 var modeOptions = [{
   value: "all",
   label: "Select from all PIDs"
@@ -22187,6 +22203,7 @@ var OBDTool = /*#__PURE__*/function (_React$Component) {
     }
   };
   _proto.testMergedFile = function testMergedFile() {
+    var _this8 = this;
     var _this$state4 = this.state,
       generatedConfig = _this$state4.generatedConfig,
       enableControlSignal = _this$state4.enableControlSignal,
@@ -22257,8 +22274,24 @@ var OBDTool = /*#__PURE__*/function (_React$Component) {
     this.setState({
       mergedConfig: mergedConfigTemp
     }, function () {
-      if (yourForm$1) {
-        yourForm$1.submit();
+      var schemaContent = _this8.props.schemaContent;
+      if (schemaContent && mergedConfigTemp) {
+        try {
+          var ajv = new Ajv({
+            allErrors: true,
+            strict: false,
+            logger: false
+          });
+          var validate = ajv.compile(schemaContent);
+          var valid = validate(mergedConfigTemp);
+          _this8.setState({
+            mergedConfigValid: valid
+          });
+        } catch (e) {
+          _this8.setState({
+            mergedConfigValid: false
+          });
+        }
       }
     });
   };
@@ -22306,7 +22339,7 @@ var OBDTool = /*#__PURE__*/function (_React$Component) {
     linkElement.click();
   };
   _proto.render = function render() {
-    var _this8 = this;
+    var _this9 = this;
     var _this$state6 = this.state,
       toolMode = _this$state6.toolMode,
       channel = _this$state6.channel,
@@ -22317,7 +22350,6 @@ var OBDTool = /*#__PURE__*/function (_React$Component) {
       searchQuery = _this$state6.searchQuery,
       supportedPids = _this$state6.supportedPids,
       generatedConfig = _this$state6.generatedConfig,
-      mergedConfig = _this$state6.mergedConfig,
       mergedConfigValid = _this$state6.mergedConfigValid,
       csvFileName = _this$state6.csvFileName,
       mixedWarning = _this$state6.mixedWarning,
@@ -22327,7 +22359,6 @@ var OBDTool = /*#__PURE__*/function (_React$Component) {
       combinedConfig = _this$state6.combinedConfig;
     var _this$props = this.props,
       formData = _this$props.formData,
-      schemaContent = _this$props.schemaContent,
       editorConfigFiles = _this$props.editorConfigFiles;
     var configFileName = editorConfigFiles && editorConfigFiles.length > 0 ? editorConfigFiles[0].name : "";
     var isVersion0109 = configFileName.includes("01.09");
@@ -22371,7 +22402,7 @@ var OBDTool = /*#__PURE__*/function (_React$Component) {
     }, /*#__PURE__*/React.createElement(Files, {
       onChange: this.handleCsvUpload,
       onError: function onError(error) {
-        return _this8.props.showAlert("danger", error.message);
+        return _this9.props.showAlert("danger", error.message);
       },
       accepts: [".csv"],
       multiple: false,
@@ -22398,7 +22429,7 @@ var OBDTool = /*#__PURE__*/function (_React$Component) {
       options: channelOptions,
       value: channel,
       onChange: function onChange(opt) {
-        return _this8.handleSettingChange("channel", opt);
+        return _this9.handleSettingChange("channel", opt);
       },
       comment: "Select which CAN channel should be used to transmit the OBD requests."
     })), /*#__PURE__*/React.createElement("div", {
@@ -22408,7 +22439,7 @@ var OBDTool = /*#__PURE__*/function (_React$Component) {
       options: bitRateOptions,
       value: bitRate,
       onChange: function onChange(opt) {
-        return _this8.handleSettingChange("bitRate", opt);
+        return _this9.handleSettingChange("bitRate", opt);
       },
       comment: "Cars typically use 500K, trucks/buses may use 250K or 500K."
     }))), toolMode !== "test" && /*#__PURE__*/React.createElement("div", {
@@ -22420,7 +22451,7 @@ var OBDTool = /*#__PURE__*/function (_React$Component) {
       options: canIdOptions,
       value: canId,
       onChange: function onChange(opt) {
-        return _this8.handleSettingChange("canId", opt);
+        return _this9.handleSettingChange("canId", opt);
       },
       comment: "Cars typically use 7DF, trucks/buses typically use 18DB33F1."
     })), /*#__PURE__*/React.createElement("div", {
@@ -22430,7 +22461,7 @@ var OBDTool = /*#__PURE__*/function (_React$Component) {
       options: obdModeOptions,
       value: obdMode,
       onChange: function onChange(opt) {
-        return _this8.handleSettingChange("obdMode", opt);
+        return _this9.handleSettingChange("obdMode", opt);
       },
       comment: "Cars use OBD2, trucks/buses may use OBD2 or WWH-OBD."
     }))), toolMode !== "test" && /*#__PURE__*/React.createElement("div", {
@@ -22443,17 +22474,17 @@ var OBDTool = /*#__PURE__*/function (_React$Component) {
       max: 10000,
       onChange: function onChange(e) {
         var val = parseInt(e.target.value) || 0;
-        _this8.setState({
+        _this9.setState({
           spacing: val
         });
       },
       onBlur: function onBlur(e) {
         var val = Math.min(10000, Math.max(100, parseInt(e.target.value) || 100));
-        _this8.setState({
+        _this9.setState({
           spacing: val
         }, function () {
-          if (_this8.getSelectedPids().length > 0) {
-            _this8.generateTransmitList();
+          if (_this9.getSelectedPids().length > 0) {
+            _this9.generateTransmitList();
           }
         });
       }
@@ -22504,7 +22535,7 @@ var OBDTool = /*#__PURE__*/function (_React$Component) {
         key: pid.uniqueId,
         className: "checkbox-white-space",
         onClick: function onClick() {
-          return !pid.disabled && _this8.handlePidToggle(pid.uniqueId);
+          return !pid.disabled && _this9.handlePidToggle(pid.uniqueId);
         },
         style: {
           display: "flex",
@@ -22530,7 +22561,7 @@ var OBDTool = /*#__PURE__*/function (_React$Component) {
         checked: pid.selected,
         disabled: pid.disabled,
         onChange: function onChange() {
-          return !pid.disabled && _this8.handlePidToggle(pid.uniqueId);
+          return !pid.disabled && _this9.handlePidToggle(pid.uniqueId);
         }
       }), /*#__PURE__*/React.createElement("span", null))), /*#__PURE__*/React.createElement("span", {
         className: "binary-text-alt-2",
@@ -22573,11 +22604,11 @@ var OBDTool = /*#__PURE__*/function (_React$Component) {
       type: "checkbox",
       checked: enableOBDFilter,
       onChange: function onChange() {
-        _this8.setState({
+        _this9.setState({
           enableOBDFilter: !enableOBDFilter
         }, function () {
-          if (_this8.getSelectedPids().length > 0) {
-            _this8.generateTransmitList();
+          if (_this9.getSelectedPids().length > 0) {
+            _this9.generateTransmitList();
           }
         });
       },
@@ -22602,11 +22633,11 @@ var OBDTool = /*#__PURE__*/function (_React$Component) {
       type: "checkbox",
       checked: enableControlSignal,
       onChange: function onChange() {
-        _this8.setState({
+        _this9.setState({
           enableControlSignal: !enableControlSignal
         }, function () {
-          if (_this8.getSelectedPids().length > 0) {
-            _this8.generateTransmitList();
+          if (_this9.getSelectedPids().length > 0) {
+            _this9.generateTransmitList();
           }
         });
       },
@@ -22651,7 +22682,7 @@ var OBDTool = /*#__PURE__*/function (_React$Component) {
       type: "checkbox",
       checked: showPreview,
       onChange: function onChange() {
-        return _this8.setState({
+        return _this9.setState({
           showPreview: !showPreview
         });
       },
@@ -22665,20 +22696,7 @@ var OBDTool = /*#__PURE__*/function (_React$Component) {
       }
     }, /*#__PURE__*/React.createElement("pre", {
       className: "browse-file-preview"
-    }, JSON.stringify(combinedConfig, null, 2))))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null)), /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: "none"
-      }
-    }, /*#__PURE__*/React.createElement(Form, {
-      validator: validator,
-      onError: this.onValidationError,
-      schema: schemaContent ? schemaContent : {},
-      formData: mergedConfig ? mergedConfig : {},
-      onSubmit: this.onSubmit,
-      ref: function ref(form) {
-        yourForm$1 = form;
-      }
-    })));
+    }, JSON.stringify(combinedConfig, null, 2))))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null)));
   };
   return OBDTool;
 }(React.Component);
@@ -22991,13 +23009,13 @@ function applyPrescaler(frame, filter, prescalerState) {
       state.lastData = currentData;
       return true;
     }
-    var maskValue = prescalerValue ? parseInt(prescalerValue, 16) : 0xFFFFFFFFFFFFFFFFn;
+    var maskValue = prescalerValue ? BigInt("0x" + prescalerValue) : BigInt("0xFFFFFFFFFFFFFFFF");
     var prevBytes = parseDataBytes(state.lastData);
     var currBytes = parseDataBytes(currentData);
     var changed = false;
     for (var i = 0; i < Math.max(prevBytes.length, currBytes.length); i++) {
       var byteMask = BigInt(1) << BigInt(i);
-      if ((BigInt(maskValue) & byteMask) !== BigInt(0)) {
+      if ((maskValue & byteMask) !== BigInt(0)) {
         var prevByte = prevBytes[i] || 0;
         var currByte = currBytes[i] || 0;
         if (prevByte !== currByte) {
@@ -23104,7 +23122,6 @@ function evaluateFilters(frames, configData, detectedDeviceType) {
 var _excluded = ["name"],
   _excluded2 = ["name"];
 var merge$2 = require("deepmerge");
-var yourForm$2;
 var prescalerOptions = [{
   value: "none",
   label: "None"
@@ -24032,6 +24049,7 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
     return filterConfig;
   };
   _proto.testMergedFile = function testMergedFile() {
+    var _this11 = this;
     var _this$state7 = this.state,
       generatedFilterConfig = _this$state7.generatedFilterConfig,
       filterMergeMode = _this$state7.filterMergeMode;
@@ -24065,8 +24083,24 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
     this.setState({
       mergedConfig: mergedConfigTemp
     }, function () {
-      if (yourForm$2) {
-        yourForm$2.submit();
+      var schemaContent = _this11.props.schemaContent;
+      if (schemaContent && mergedConfigTemp) {
+        try {
+          var ajv = new Ajv({
+            allErrors: true,
+            strict: false,
+            logger: false
+          });
+          var validate = ajv.compile(schemaContent);
+          var valid = validate(mergedConfigTemp);
+          _this11.setState({
+            mergedConfigValid: valid
+          });
+        } catch (e) {
+          _this11.setState({
+            mergedConfigValid: false
+          });
+        }
       }
     });
   };
@@ -24274,7 +24308,7 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
     });
   };
   _proto.render = function render() {
-    var _this11 = this;
+    var _this12 = this;
     var _this$state10 = this.state,
       csvFileName = _this$state10.csvFileName,
       dbcFileNames = _this$state10.dbcFileNames,
@@ -24313,7 +24347,7 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
     }, /*#__PURE__*/React.createElement(Files, {
       onChange: this.handleCsvUpload,
       onError: function onError(error) {
-        return _this11.props.showAlert("danger", error.message);
+        return _this12.props.showAlert("danger", error.message);
       },
       accepts: [".csv"],
       multiple: false,
@@ -24327,7 +24361,7 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
     }, /*#__PURE__*/React.createElement(Files, {
       onChange: this.handleDbcUpload,
       onError: function onError(error) {
-        return _this11.props.showAlert("danger", error.message);
+        return _this12.props.showAlert("danger", error.message);
       },
       accepts: [".dbc"],
       multiple: true,
@@ -24362,10 +24396,10 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
       type: "checkbox",
       checked: groupJ1939Pgns,
       onChange: function onChange() {
-        _this11.setState({
+        _this12.setState({
           groupJ1939Pgns: !groupJ1939Pgns
         }, function () {
-          _this11.mergeData();
+          _this12.mergeData();
         });
       },
       style: {
@@ -24375,7 +24409,7 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
     }), "Group 29-bit IDs as PGNs"), /*#__PURE__*/React.createElement("p", {
       className: "field-description field-description-shift"
     }, "In J1939/ISOBUS/NMEA protocol use cases it can be relevant to evaluate messages at the 18-bit PGN level instead of the 29-bit ID level.")), csvData && function () {
-      var isEnabled = _this11.props.formData && _this11.isFirmwareVersionSupported();
+      var isEnabled = _this12.props.formData && _this12.isFirmwareVersionSupported();
       return /*#__PURE__*/React.createElement("div", {
         className: "form-group pl0 field-string",
         style: {
@@ -24392,9 +24426,9 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
         }
       }, /*#__PURE__*/React.createElement("input", {
         type: "checkbox",
-        checked: _this11.state.showFilteredSummary,
+        checked: _this12.state.showFilteredSummary,
         onChange: function onChange() {
-          return _this11.toggleFilteredSummary();
+          return _this12.toggleFilteredSummary();
         },
         disabled: !isEnabled,
         style: {
@@ -24443,10 +24477,10 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
       }, label, ":"), /*#__PURE__*/React.createElement("input", {
         type: "text",
         className: "form-control encryption-input",
-        value: _this11.state["channelMap" + label],
+        value: _this12.state["channelMap" + label],
         onChange: function onChange(e) {
-          var _this11$setState;
-          return _this11.setState((_this11$setState = {}, _this11$setState["channelMap" + label] = e.target.value, _this11$setState));
+          var _this12$setState;
+          return _this12.setState((_this12$setState = {}, _this12$setState["channelMap" + label] = e.target.value, _this12$setState));
         },
         style: {
           width: "36px",
@@ -24562,11 +24596,11 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
         marginLeft: "8px"
       }
     }, "Signals")), filteredEntries.map(function (entry) {
-      var isChannelValid = _this11.props.deviceType === "CANmod" ? _this11.isChannelValid(entry.channel) : true;
+      var isChannelValid = _this12.props.deviceType === "CANmod" ? _this12.isChannelValid(entry.channel) : true;
       return /*#__PURE__*/React.createElement("div", {
         key: entry.uniqueId,
         onClick: function onClick() {
-          return isChannelValid && _this11.handleEntryToggle(entry.uniqueId);
+          return isChannelValid && _this12.handleEntryToggle(entry.uniqueId);
         },
         style: {
           display: "flex",
@@ -24594,7 +24628,7 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
         checked: entry.selected,
         disabled: !isChannelValid,
         onChange: function onChange() {
-          return isChannelValid && _this11.handleEntryToggle(entry.uniqueId);
+          return isChannelValid && _this12.handleEntryToggle(entry.uniqueId);
         }
       }), /*#__PURE__*/React.createElement("span", null))), /*#__PURE__*/React.createElement("span", {
         className: "binary-text-alt-2",
@@ -24631,7 +24665,7 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
           display: "flex",
           alignItems: "center"
         }
-      }, _this11.renderBarChart(entry.isGroup ? entry.groupedPercentage : entry.percentage, maxPercentage), /*#__PURE__*/React.createElement("span", {
+      }, _this12.renderBarChart(entry.isGroup ? entry.groupedPercentage : entry.percentage, maxPercentage), /*#__PURE__*/React.createElement("span", {
         style: {
           marginLeft: "4px",
           fontFamily: "monospace",
@@ -24722,7 +24756,7 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
         marginLeft: "4px"
       },
       onClick: function onClick() {
-        return _this11.selectTop(30);
+        return _this12.selectTop(30);
       }
     }, "Top 30"), /*#__PURE__*/React.createElement("span", {
       style: {
@@ -24735,7 +24769,7 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
         cursor: "pointer"
       },
       onClick: function onClick() {
-        return _this11.selectTop(50);
+        return _this12.selectTop(50);
       }
     }, "Top 50"), /*#__PURE__*/React.createElement("span", {
       style: {
@@ -24748,7 +24782,7 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
         cursor: "pointer"
       },
       onClick: function onClick() {
-        return _this11.selectMatched(true);
+        return _this12.selectMatched(true);
       }
     }, "Matched"), /*#__PURE__*/React.createElement("span", {
       style: {
@@ -24761,13 +24795,13 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
         cursor: "pointer"
       },
       onClick: function onClick() {
-        return _this11.selectMatched(false);
+        return _this12.selectMatched(false);
       }
     }, "Unmatched")), csvData && function () {
-      var activeCsvData = _this11.state.showFilteredSummary && _this11.state.filteredCsvData ? _this11.state.filteredCsvData : csvData;
-      var isFiltered = _this11.state.showFilteredSummary && _this11.state.filteredCsvData;
-      var originalFileSize = _this11.csvFileSize / (1024 * 1024);
-      var filteredFileSize = isFiltered ? originalFileSize * (1 - _this11.state.filterReductionPercent / 100) : originalFileSize;
+      var activeCsvData = _this12.state.showFilteredSummary && _this12.state.filteredCsvData ? _this12.state.filteredCsvData : csvData;
+      var isFiltered = _this12.state.showFilteredSummary && _this12.state.filteredCsvData;
+      var originalFileSize = _this12.csvFileSize / (1024 * 1024);
+      var filteredFileSize = isFiltered ? originalFileSize * (1 - _this12.state.filterReductionPercent / 100) : originalFileSize;
       return /*#__PURE__*/React.createElement("div", {
         style: {
           fontSize: "12px",
@@ -24794,7 +24828,7 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
           color: "#5cb85c",
           marginTop: "4px"
         }
-      }, "Showing filtered summary (reduction: ", /*#__PURE__*/React.createElement("strong", null, _this11.state.filterReductionPercent.toFixed(1), "%"), ")"));
+      }, "Showing filtered summary (reduction: ", /*#__PURE__*/React.createElement("strong", null, _this12.state.filterReductionPercent.toFixed(1), "%"), ")"));
     }(), function () {
       var hasSelection = mergedEntries.some(function (e) {
         return e.selected;
@@ -24820,8 +24854,8 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement("div", {
         className: "col-xs-6",
         style: {
-          opacity: _this11.props.deviceType === "CANmod" ? 0.5 : 1,
-          pointerEvents: _this11.props.deviceType === "CANmod" ? "none" : "auto"
+          opacity: _this12.props.deviceType === "CANmod" ? 0.5 : 1,
+          pointerEvents: _this12.props.deviceType === "CANmod" ? "none" : "auto"
         }
       }, /*#__PURE__*/React.createElement(SimpleDropdown, {
         name: "Type",
@@ -24832,59 +24866,59 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
           value: "rejection",
           label: "Rejection"
         }],
-        value: _this11.state.filterType,
+        value: _this12.state.filterType,
         onChange: function onChange(opt) {
-          return _this11.setState({
+          return _this12.setState({
             filterType: opt.value
           }, function () {
-            return _this11.generateFilterConfig();
+            return _this12.generateFilterConfig();
           });
         }
-      }), _this11.props.deviceType === "CANmod" && /*#__PURE__*/React.createElement("span", {
+      }), _this12.props.deviceType === "CANmod" && /*#__PURE__*/React.createElement("span", {
         className: "field-description",
         style: {
           fontSize: "11px",
           color: "#999"
         }
-      }, "CANmod only supports acceptance filters")), _this11.state.filterType === "acceptance" && /*#__PURE__*/React.createElement("div", {
+      }, "CANmod only supports acceptance filters")), _this12.state.filterType === "acceptance" && /*#__PURE__*/React.createElement("div", {
         className: "col-xs-6"
       }, /*#__PURE__*/React.createElement(SimpleDropdown, {
         name: "Prescaler",
         options: prescalerOptions,
-        value: _this11.state.prescalerType,
+        value: _this12.state.prescalerType,
         onChange: function onChange(opt) {
-          return _this11.setState({
+          return _this12.setState({
             prescalerType: opt.value
           }, function () {
-            return _this11.generateFilterConfig();
+            return _this12.generateFilterConfig();
           });
         }
-      }))), _this11.state.filterType === "acceptance" && _this11.state.prescalerType !== "none" && /*#__PURE__*/React.createElement("div", {
+      }))), _this12.state.filterType === "acceptance" && _this12.state.prescalerType !== "none" && /*#__PURE__*/React.createElement("div", {
         className: "form-group pl0 field-string"
-      }, _this11.state.prescalerType === "count" && "Count value", _this11.state.prescalerType === "time" && "Time interval (ms)", _this11.state.prescalerType === "data" && "Data mask (hex)", (_this11.state.prescalerType === "count" || _this11.state.prescalerType === "time") && /*#__PURE__*/React.createElement("input", {
+      }, _this12.state.prescalerType === "count" && "Count value", _this12.state.prescalerType === "time" && "Time interval (ms)", _this12.state.prescalerType === "data" && "Data mask (hex)", (_this12.state.prescalerType === "count" || _this12.state.prescalerType === "time") && /*#__PURE__*/React.createElement("input", {
         type: "number",
         className: "form-control encryption-input",
         min: "1",
-        max: _this11.state.prescalerType === "count" ? 256 : 4194304,
-        value: _this11.state.prescalerValue,
+        max: _this12.state.prescalerType === "count" ? 256 : 4194304,
+        value: _this12.state.prescalerValue,
         onChange: function onChange(e) {
-          return _this11.setState({
+          return _this12.setState({
             prescalerValue: parseInt(e.target.value) || 1
           }, function () {
-            return _this11.generateFilterConfig();
+            return _this12.generateFilterConfig();
           });
         }
-      }), _this11.state.prescalerType === "data" && /*#__PURE__*/React.createElement("input", {
+      }), _this12.state.prescalerType === "data" && /*#__PURE__*/React.createElement("input", {
         type: "text",
         className: "form-control encryption-input",
-        value: _this11.state.dataPrescalerMask,
+        value: _this12.state.dataPrescalerMask,
         onChange: function onChange(e) {
           var val = e.target.value.toUpperCase();
           if (/^[a-fA-F0-9]*$/.test(val) && val.length <= 16) {
-            _this11.setState({
+            _this12.setState({
               dataPrescalerMask: val
             }, function () {
-              return _this11.generateFilterConfig();
+              return _this12.generateFilterConfig();
             });
           }
         },
@@ -24895,7 +24929,7 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
         }
       }), /*#__PURE__*/React.createElement("span", {
         className: "field-description field-description-shift"
-      }, _this11.state.prescalerType === "count" && "Accept every Nth message (1-256)", _this11.state.prescalerType === "time" && "Minimum time between messages (1-4194304 ms)", _this11.state.prescalerType === "data" && "Hex mask for data change detection")), /*#__PURE__*/React.createElement("div", {
+      }, _this12.state.prescalerType === "count" && "Accept every Nth message (1-256)", _this12.state.prescalerType === "time" && "Minimum time between messages (1-4194304 ms)", _this12.state.prescalerType === "data" && "Hex mask for data change detection")), /*#__PURE__*/React.createElement("div", {
         style: {
           display: "flex",
           alignItems: "center",
@@ -24915,12 +24949,12 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
         type: "radio",
         name: "filterMergeMode",
         value: "replace",
-        checked: _this11.state.filterMergeMode === "replace",
+        checked: _this12.state.filterMergeMode === "replace",
         onChange: function onChange(e) {
-          return _this11.setState({
+          return _this12.setState({
             filterMergeMode: e.target.value
           }, function () {
-            return _this11.generateFilterConfig();
+            return _this12.generateFilterConfig();
           });
         },
         style: {
@@ -24943,12 +24977,12 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
         type: "radio",
         name: "filterMergeMode",
         value: "append_top",
-        checked: _this11.state.filterMergeMode === "append_top",
+        checked: _this12.state.filterMergeMode === "append_top",
         onChange: function onChange(e) {
-          return _this11.setState({
+          return _this12.setState({
             filterMergeMode: e.target.value
           }, function () {
-            return _this11.generateFilterConfig();
+            return _this12.generateFilterConfig();
           });
         },
         style: {
@@ -24971,12 +25005,12 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
         type: "radio",
         name: "filterMergeMode",
         value: "append_bottom",
-        checked: _this11.state.filterMergeMode === "append_bottom",
+        checked: _this12.state.filterMergeMode === "append_bottom",
         onChange: function onChange(e) {
-          return _this11.setState({
+          return _this12.setState({
             filterMergeMode: e.target.value
           }, function () {
-            return _this11.generateFilterConfig();
+            return _this12.generateFilterConfig();
           });
         },
         style: {
@@ -25010,9 +25044,9 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
         }, 0);
         return " (" + count11Bit + " 11-bit, " + count29Bit + " 29-bit) | " + sizePercent.toFixed(1) + "%";
       }()), function () {
-        var isFirmwareSupported = _this11.isFirmwareVersionSupported();
-        var isCanmod = _this11.props.deviceType === "CANmod";
-        var isCanmodRouter = isCanmod && _this11.isCanmodRouter();
+        var isFirmwareSupported = _this12.isFirmwareVersionSupported();
+        var isCanmod = _this12.props.deviceType === "CANmod";
+        var isCanmodRouter = isCanmod && _this12.isCanmodRouter();
         var minFirmware = isCanmod ? MIN_FIRMWARE_CANMOD_ROUTER : MIN_FIRMWARE_CANEDGE;
         var isDeviceSupported = !isCanmod || isCanmodRouter;
         return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
@@ -25023,20 +25057,20 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
           }
         }, /*#__PURE__*/React.createElement("button", {
           className: "btn btn-primary",
-          onClick: _this11.onMerge,
-          disabled: !_this11.props.formData || Object.keys(_this11.props.formData).length === 0 || _this11.state.mergedConfigValid !== true || !isFirmwareSupported || !isDeviceSupported
+          onClick: _this12.onMerge,
+          disabled: !_this12.props.formData || Object.keys(_this12.props.formData).length === 0 || _this12.state.mergedConfigValid !== true || !isFirmwareSupported || !isDeviceSupported
         }, "Merge files"), /*#__PURE__*/React.createElement("button", {
           className: "btn btn-default",
-          onClick: _this11.onDownload,
-          disabled: Object.keys(_this11.state.generatedFilterConfig).length === 0
-        }, "Download JSON")), _this11.props.formData && Object.keys(_this11.props.formData).length > 0 && isDeviceSupported && !isFirmwareSupported && /*#__PURE__*/React.createElement("div", {
+          onClick: _this12.onDownload,
+          disabled: Object.keys(_this12.state.generatedFilterConfig).length === 0
+        }, "Download JSON")), _this12.props.formData && Object.keys(_this12.props.formData).length > 0 && isDeviceSupported && !isFirmwareSupported && /*#__PURE__*/React.createElement("div", {
           style: {
             fontSize: "12px",
             color: "#666",
             marginTop: "8px"
           }
         }, "Merging requires firmware ", minFirmware, ".XX+ - please update your device"));
-      }(), Object.keys(_this11.state.generatedFilterConfig).length > 0 && /*#__PURE__*/React.createElement("div", {
+      }(), Object.keys(_this12.state.generatedFilterConfig).length > 0 && /*#__PURE__*/React.createElement("div", {
         style: {
           marginTop: "10px"
         }
@@ -25049,17 +25083,17 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
         }
       }, /*#__PURE__*/React.createElement("input", {
         type: "checkbox",
-        checked: _this11.state.showFilterPreview,
+        checked: _this12.state.showFilterPreview,
         onChange: function onChange() {
-          return _this11.setState({
-            showFilterPreview: !_this11.state.showFilterPreview
+          return _this12.setState({
+            showFilterPreview: !_this12.state.showFilterPreview
           });
         },
         style: {
           marginRight: "6px",
           marginBottom: "4px"
         }
-      }), "Show partial config preview"), _this11.state.showFilterPreview && /*#__PURE__*/React.createElement("div", {
+      }), "Show partial config preview"), _this12.state.showFilterPreview && /*#__PURE__*/React.createElement("div", {
         style: {
           marginTop: "10px"
         }
@@ -25070,21 +25104,8 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
           overflow: "auto",
           fontSize: "11px"
         }
-      }, JSON.stringify(_this11.state.generatedFilterConfig, null, 2)))));
-    }()), /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: "none"
-      }
-    }, /*#__PURE__*/React.createElement(Form, {
-      validator: validator,
-      onError: this.onValidationError,
-      schema: this.props.schemaContent ? this.props.schemaContent : {},
-      formData: this.state.mergedConfig ? this.state.mergedConfig : {},
-      onSubmit: this.onSubmit,
-      ref: function ref(form) {
-        yourForm$2 = form;
-      }
-    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null)));
+      }, JSON.stringify(_this12.state.generatedFilterConfig, null, 2)))));
+    }()), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null)));
   };
   return FilterBuilderTool;
 }(React.Component);