Fix variables on mac and linux (#9897) (#9903)

* Fix regexes to work on other platforms

* Fix data frame viewer

* Fix linter problems

Co-authored-by: Don Jayamanne <[email protected]>

Co-authored-by: Don Jayamanne <[email protected]>

Author: rchiodo

src/client/datascience/jupyter/jupyterVariables.ts

@@ -23,11 +23,11 @@ import { JupyterDataRateLimitError } from './jupyterDataRateLimitError';
 
 // Regexes for parsing data from Python kernel. Not sure yet if other
 // kernels will add the ansi encoding.
-const TypeRegex = /\u001b\[1;31mType:\u001b\[0m\s+(\w+)/;
-const ValueRegex = /\u001b\[1;31mValue:\u001b\[0m\s+(.*)/;
-const StringFormRegex = /\u001b\[1;31mString form:\u001b\[0m\s+([\s\S]+?)\n\u001b\[1/;
-const DocStringRegex = /\u001b\[1;31mDocstring:\u001b\[0m\s+(.*)/;
-const CountRegex = /\u001b\[1;31mLength:\u001b\[0m\s+(.*)/;
+const TypeRegex = /.*?\[.*?;31mType:.*?\[0m\s+(\w+)/;
+const ValueRegex = /.*?\[.*?;31mValue:.*?\[0m\s+(.*)/;
+const StringFormRegex = /.*?\[.*?;31mString form:.*?\[0m\s+([\s\S]+?)\n.*?\[.*?/;
+const DocStringRegex = /.*?\[.*?;31mDocstring:.*?\[0m\s+(.*)/;
+const CountRegex = /.*?\[.*?;31mLength:.*?\[0m\s+(.*)/;
 const ShapeRegex = /^\s+\[(\d+) rows x (\d+) columns\]/m;
 
 const DataViewableTypes: Set<string> = new Set<string>(['DataFrame', 'list', 'dict', 'np.array', 'Series']);
@@ -99,7 +99,7 @@ export class JupyterVariables implements IJupyterVariables {
         }
 
         // Prep our targetVariable to send over
-        const variableString = JSON.stringify(targetVariable).replace('\\n', '\\\\n');
+        const variableString = JSON.stringify(targetVariable).replace(/\\n/g, '\\\\n');
 
         // Setup a regex
         const regexPattern = extraReplacements.length === 0 ? '_VSCode_JupyterTestValue' : ['_VSCode_JupyterTestValue', ...extraReplacements.map(v => v.key)].join('|');

src/datascience-ui/data-explorer/globalJQueryImports.ts

@@ -0,0 +1,24 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+'use strict';
+
+/*
+This file exists for the sole purpose of ensuring jQuery and slickgrid load in the right sequence.
+We need to first load jquery into window.jQuery.
+After that we need to load slickgrid, and then the jQuery plugin from slickgrid event.drag.
+*/
+
+// Slickgrid requires jquery to be defined. Globally. So we do some hacks here.
+// We need to manipulate the grid with the same jquery that it uses
+// use slickgridJQ instead of the usual $ to make it clear that we need that JQ and not
+// the one currently in node-modules
+
+// tslint:disable-next-line: no-var-requires no-require-imports
+require('expose-loader?jQuery!slickgrid/lib/jquery-1.11.2.min');
+
+// tslint:disable-next-line: no-var-requires no-require-imports
+require('slickgrid/lib/jquery-1.11.2.min');
+
+// tslint:disable-next-line: no-var-requires no-require-imports
+require('expose-loader?jQuery.fn.drag!slickgrid/lib/jquery.event.drag-2.3.0');

src/datascience-ui/data-explorer/reactSlickGrid.tsx

@@ -7,29 +7,38 @@ import * as ReactDOM from 'react-dom';
 import { MaxStringCompare } from '../../client/datascience/data-viewing/types';
 import { KeyCodes } from '../react-common/constants';
 import { measureText } from '../react-common/textMeasure';
+import './globalJQueryImports';
 import { ReactSlickGridFilterBox } from './reactSlickGridFilterBox';
 
-// Slickgrid requires jquery to be defined. Globally. So we do some hacks here.
-// We need to manipulate the grid with the same jquery that it uses
-// use slickgridJQ instead of the usual $ to make it clear that we need that JQ and not
-// the one currently in node-modules
-// tslint:disable-next-line: no-var-requires no-require-imports
-require('expose-loader?jQuery!slickgrid/lib/jquery-1.11.2.min');
+/*
+WARNING: Do not change the order of these imports.
+Slick grid MUST be imported after we load jQuery and other stuff from `./globalJQueryImports`
+*/
 // tslint:disable-next-line: no-var-requires no-require-imports
 const slickgridJQ = require('slickgrid/lib/jquery-1.11.2.min');
-// tslint:disable-next-line: no-var-requires no-require-imports
-require('expose-loader?jQuery.fn.drag!slickgrid/lib/jquery.event.drag-2.3.0');
 
+// Adding comments to ensure order of imports does not change due to auto formatters.
+// tslint:disable-next-line: ordered-imports
 import 'slickgrid/slick.core';
+// Adding comments to ensure order of imports does not change due to auto formatters.
+// tslint:disable-next-line: ordered-imports
 import 'slickgrid/slick.dataview';
+// Adding comments to ensure order of imports does not change due to auto formatters.
+// tslint:disable-next-line: ordered-imports
 import 'slickgrid/slick.grid';
-
+// Adding comments to ensure order of imports does not change due to auto formatters.
+// tslint:disable-next-line: ordered-imports
 import 'slickgrid/plugins/slick.autotooltips';
-
+// Adding comments to ensure order of imports does not change due to auto formatters.
+// tslint:disable-next-line: ordered-imports
 import 'slickgrid/slick.grid.css';
-
 // Make sure our css comes after the slick grid css. We override some of its styles.
+// tslint:disable-next-line: ordered-imports
 import './reactSlickGrid.css';
+/*
+WARNING: Do not change the order of these imports.
+Slick grid MUST be imported after we load jQuery and other stuff from `./globalJQueryImports`
+*/
 
 const MinColumnWidth = 70;
 const MaxColumnWidth = 500;