Need to filter, escape and/or provide warnings about invalid characters in Heat Map Attribute and Top Label Items fields.

[jmelott]

Entering single or double quotes as part of a heat map attribute or top items fields breaks the JSON objects and thereby the map. Other characters possibly should also be filtered To reproduce problem: Create a map using sample matrix. Open Developer console. Press next until you get to the Format Heat Map Page. Click the checkbox to "Show Advanced Features". In the "HEAT MAP ATTRIBUTES" field enter: test:"test" Click apply.

Errors appear in console: VM92:1 Uncaught SyntaxError: Expected ',' or '}' after property value in JSON at position 398 at JSON.parse () at ngchmWidget-min.js?v=NG-CHM%20GUI%202.20.2:157:258 at ngchmWidget-min.js?v=NG-CHM%20GUI%202.20.2:48:46 at g.onload (ngchmWidget-min.js?v=NG-CHM%20GUI%202.20.2:39:502)

Others errors may appear after that error.

The user is not told there is an issue unless they had the developer console open, but the map will not display in the builder until they delete the bad attribute.

[jmelott]

Attribute issue in example fixed, but new bug introduced. Top items still has the same issue the attributes field did. Putting "1234" in Top Label Items causes error in console and the map will not load if the user goes to the next page. In addition, if they come back to the Format Heat Map page and select "Labels and Attributes", the Label types will not load properly and an additional error will appear in the console. Errors: 560:1 Uncaught (in promise) SyntaxError: Expected ',' or ']' after array element in JSON at position 1341 at JSON.parse () at ngchmWidget-min.js?v=2328b71125a2111f369d6eba960b24cc:174:105 (anonymous) @ ngchmWidget-min.js?v=2328b71125a2111f369d6eba960b24cc:174 Promise.then (async) b @ ngchmWidget-min.js?v=2328b71125a2111f369d6eba960b24cc:174 (anonymous) @ ngchmWidget-min.js?v=2328b71125a2111f369d6eba960b24cc:175 setTimeout (async) (anonymous) @ ngchmWidget-min.js?v=2328b71125a2111f369d6eba960b24cc:175 Promise.then (async) h @ ngchmWidget-min.js?v=2328b71125a2111f369d6eba960b24cc:174 a @ ngchmWidget-min.js?v=2328b71125a2111f369d6eba960b24cc:169 u.createHeatMap @ ngchmWidget-min.js?v=2328b71125a2111f369d6eba960b24cc:241 z @ ngchmWidget-min.js?v=2328b71125a2111f369d6eba960b24cc:915 b.onreadystatechange @ ngchmWidget-min.js?v=2328b71125a2111f369d6eba960b24cc:914 XMLHttpRequest.send (async) t @ ngchmWidget-min.js?v=2328b71125a2111f369d6eba960b24cc:914 y.onLoadCHM @ ngchmWidget-min.js?v=2328b71125a2111f369d6eba960b24cc:944 P @ ngchmWidget-min.js?v=2328b71125a2111f369d6eba960b24cc:917 req.onreadystatechange @ NGCHM_GUI_Util.js?v=32fda1f9467297d06fc65859b857178d:345 XMLHttpRequest.send (async) NgChmGui.UTIL.loadHeatMapView @ NGCHM_GUI_Util.js?v=32fda1f9467297d06fc65859b857178d:354 NgChmGui.FORMAT.loadFormatView @ FormatOutput.js?v=e64563934382f51f6772f78afb39a05b:1061 NgChmGui.FORMAT.applyComplete @ FormatOutput.js?v=e64563934382f51f6772f78afb39a05b:79 req.onreadystatechange @ NGCHM_GUI_Util.js?v=32fda1f9467297d06fc65859b857178d:225 XMLHttpRequest.send (async) NgChmGui.UTIL.setHeatmapProperties @ NGCHM_GUI_Util.js?v=32fda1f9467297d06fc65859b857178d:232 NgChmGui.UTIL.applySettings @ NGCHM_GUI_Util.js?v=32fda1f9467297d06fc65859b857178d:273 onclick @ Format_Display.html?adv=Y:50

ngchmWidget-min.js?v…69d6eba960b24cc:214 Uncaught TypeError: Cannot read properties of undefined (reading 'totalColumns') at a.getNumColumns (ngchmWidget-min.js?v…eba960b24cc:214:438) at a.getSummaryHist (ngchmWidget-min.js?v…6eba960b24cc:223:97) at Object.getSummaryHist (ngchmWidget-min.js?v…eba960b24cc:974:450) at NgChmGui.FORMAT.loadColorPreviewDiv (FormatOutput.js?v=e6…f78afb39a05b:645:13) at NgChmGui.FORMAT.applyComplete (FormatOutput.js?v=e6…2f78afb39a05b:80:21) at req.onreadystatechange (NGCHM_GUI_Util.js?v=…65859b857178d:225:7) 

[jmelott]

Other characters other than just double quote causing issues. To reproduce try the following test string for the attributes and the top items areas test:♂ !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~⌂ÇüéâäàåçêëèïîìÄÅÉæÆôöòûùÿÖÜ¢£¥₧ƒáíóúñѪº¿⌐¬½¼¡«»░▒▓│┤╡╢╖╕╣║╗╝╜╛┐└┴┬├─┼╞╟╚╔╩╦╠═╬╧╨╤╥╙╘╒╓╫╪┘┌█▄▌▐▀αßΓπΣσµτΦΘΩδ∞φε∩≡±≥≤⌠⌡÷≈°∙·√ⁿ²■ ☺☻♥♦♣♠•◘○◙♂♀♪♫☼►◄↕‼¶§▬↨↑↓→←∟↔▲▼

[bmbroom]

I tried copy pasting the above test string into both top_items and attributes and didn't encounter any issues (after removing ").

But the copy paste turned many of the special symbols into just their names. e.g. the first symbol turned into male_sign. I don't know how to enter such a symbol directly.

I'm thinking it's no longer a show-stopper issue.

[jmelott]

I agree it's no longer a showstopper. Although it's unlikely that someone might do so, the characters can all be typed on a keyboard on a windows machine by typing alt and a three digit number on the numeric keypad in the range of 000 to 255, so they can be typed. It's probably more likely that someone might copy and paste such characters from some file, possibly without even realizing that some of them are there. Here's a file with the full character set I often use for testing of data entry fields in this manner rather than typing them all in again like I originally did to make the file. input_test_characters.txt

[jmelott]

As a note, it did pass my test of dumping a bunch of Chinese characters that I have in a different file. We ran into an issue with those on one program, I think NGCHMs when someone copied some data that had the characters into some field once and things broke. Here's the test file I have for that. ChineseCharacters.txt