cleanup and functional test

Author: IanMatthewHuff

src/datascience-ui/history-react/variableExplorer.tsx

@@ -195,7 +195,7 @@ export class VariableExplorer extends React.Component<IVariableExplorerProps, IV
  this.props.variableExplorerToggled(!this.state.open);
  }
 
- private sortRows = (sortColumn: string | number, sortDirection: string) => {
+ public sortRows = (sortColumn: string | number, sortDirection: string) => {
  this.setState({
  sortColumn,
  sortDirection,
@@ -204,20 +204,20 @@ export class VariableExplorer extends React.Component<IVariableExplorerProps, IV
  }
 
  private getColumnType(key: string | number) : string | undefined {
- // Special case our "size" column. It's displayed as a string but
- // we will compare it as a number
- if (key === 'size') {
- return 'number';
- }
-
  let column;
  if (typeof key === 'string') {
  //tslint:disable-next-line:no-any
  column = this.state.gridColumns.find(c => c.key === key) as any;
  } else {
+ // This is the index lookup
  column = this.state.gridColumns[key];
  }
- if (column && column.type) {
+
+ // Special case our size column, it's displayed as a string
+ // but we will sort it like a number
+ if (column && column.key === 'size') {
+ return 'number';
+ } else if (column && column.type) {
  return column.type;
  }
  }
@@ -256,27 +256,31 @@ export class VariableExplorer extends React.Component<IVariableExplorerProps, IV
  return gridRows.sort(comparer);
  }
 
+ // Get the numerical comparison value for a column
  private getComparisonValue(gridRow: IGridRow, sortColumn: string | number): number {
- // We need a special case here for the size column
- if (sortColumn === 'size') {
- const sizeStr: string = gridRow.size as string;
- if (!sizeStr || sizeStr.length === 0) {
- return 0;
- } else if (sizeStr[0] === '(') {
- const commaIndex = sizeStr.indexOf(',');
- if (commaIndex > 0) {
- return parseInt(sizeStr.substring(1, commaIndex), 10);
- }
- } else {
- // In this case we expect a straight i to a conversion
- return parseInt(sizeStr, 10);
- }
+ return (sortColumn === 'size') ? this.sizeColumnComparisonValue(gridRow) : gridRow[sortColumn];
+ }
+
+ // The size column needs special casing
+ private sizeColumnComparisonValue(gridRow: IGridRow): number {
+ const sizeStr: string = gridRow.size as string;
+
+ if (!sizeStr) {
+ return -1;
+ }
+
+ let sizeNumber = -1;
+ const commaIndex = sizeStr.indexOf(',');
+ // First check the shape case like so (5000,1000) in this case we want the 5000 to compare with
+ if (sizeStr[0] === '(' && commaIndex > 0) {
+ sizeNumber = parseInt(sizeStr.substring(1, commaIndex), 10);
  } else {
- // For none size column just assume a standard numeric column
- return gridRow[sortColumn];
+ // If not in the shape format, assume a to i conversion
+ sizeNumber = parseInt(sizeStr, 10);
  }
 
- return 0;
+ // If our parse fails we get NaN for any case that like return -1
+ return isNaN(sizeNumber) ? -1 : sizeNumber;
  }
 
  private rowDoubleClick = (_rowIndex: number, row: IGridRow) => {

src/test/datascience/variableexplorer.functional.test.tsx

@@ -220,6 +220,8 @@ myTuple = 1,2,3,4,5,6,7,8,9
  {name: 'myDataframe', value: ' 0\n0 0.00000\n1 2.00004\n2 4.00008\n3 6.00012\n4 8.00016\n5 10.00020\n6 12.00024\n7 14.00028\n8 16.00032\n', supportsDataExplorer: true, type: 'DataFrame', size: 54, shape: '', count: 0, truncated: false},
  {name: 'myFloat', value: '9999.9999', supportsDataExplorer: false, type: 'float', size: 58, shape: '', count: 0, truncated: false},
  {name: 'myInt', value: '99999999', supportsDataExplorer: false, type: 'int', size: 56, shape: '', count: 0, truncated: false},
+ {name: 'mynpArray', value: `[0.00000000e+00 2.00004000e+00 4.00008000e+00 ... 9.99959999e+04
+ 9.99980000e+04 1.00000000e+05]`, supportsDataExplorer: true, type: 'ndarray', size: 54, shape: '', count: 0, truncated: false},
  {name: 'mySeries', value: `0 0.00000
 1 2.00004
 2 4.00008
@@ -230,9 +232,44 @@ myTuple = 1,2,3,4,5,6,7,8,9
 7 14.00028
 8 16.00032
 9 `, supportsDataExplorer: true, type: 'Series', size: 54, shape: '', count: 0, truncated: false},
- {name: 'myTuple', value: '(1, 2, 3, 4, 5, 6, 7, 8, 9)', supportsDataExplorer: false, type: 'tuple', size: 54, shape: '', count: 0, truncated: false},
- {name: 'mynpArray', value: `[0.00000000e+00 2.00004000e+00 4.00008000e+00 ... 9.99959999e+04
- 9.99980000e+04 1.00000000e+05]`, supportsDataExplorer: true, type: 'ndarray', size: 54, shape: '', count: 0, truncated: false}
+ {name: 'myTuple', value: '(1, 2, 3, 4, 5, 6, 7, 8, 9)', supportsDataExplorer: false, type: 'tuple', size: 54, shape: '', count: 0, truncated: false}
+ ];
+ verifyVariables(wrapper, targetVariables);
+ }, () => { return ioc; });
+
+ runMountedTest('Variable explorer - Sorting', async (wrapper) => {
+ const basicCode: string = `b = 2
+c = 3
+stra = 'a'
+strb = 'b'
+strc = 'c'`;
+
+ openVariableExplorer(wrapper);
+
+ await addCode(getOrCreateHistory, wrapper, 'a=1\na');
+ await addCode(getOrCreateHistory, wrapper, basicCode, 4);
+
+ await waitForUpdate(wrapper, VariableExplorer, 7);
+
+ let targetVariables: IJupyterVariable[] = [
+ {name: 'a', value: '1', supportsDataExplorer: false, type: 'int', size: 54, shape: '', count: 0, truncated: false},
+ {name: 'b', value: '2', supportsDataExplorer: false, type: 'int', size: 54, shape: '', count: 0, truncated: false},
+ {name: 'c', value: '3', supportsDataExplorer: false, type: 'int', size: 54, shape: '', count: 0, truncated: false},
+ {name: 'stra', value: 'a', supportsDataExplorer: false, type: 'str', size: 54, shape: '', count: 0, truncated: false},
+ {name: 'strb', value: 'b', supportsDataExplorer: false, type: 'str', size: 54, shape: '', count: 0, truncated: false},
+ {name: 'strc', value: 'c', supportsDataExplorer: false, type: 'str', size: 54, shape: '', count: 0, truncated: false},
+ ];
+ verifyVariables(wrapper, targetVariables);
+
+ sortVariableExplorer(wrapper, 'value', 'DESC');
+
+ targetVariables = [
+ {name: 'strc', value: 'c', supportsDataExplorer: false, type: 'str', size: 54, shape: '', count: 0, truncated: false},
+ {name: 'strb', value: 'b', supportsDataExplorer: false, type: 'str', size: 54, shape: '', count: 0, truncated: false},
+ {name: 'stra', value: 'a', supportsDataExplorer: false, type: 'str', size: 54, shape: '', count: 0, truncated: false},
+ {name: 'c', value: '3', supportsDataExplorer: false, type: 'int', size: 54, shape: '', count: 0, truncated: false},
+ {name: 'b', value: '2', supportsDataExplorer: false, type: 'int', size: 54, shape: '', count: 0, truncated: false},
+ {name: 'a', value: '1', supportsDataExplorer: false, type: 'int', size: 54, shape: '', count: 0, truncated: false},
  ];
  verifyVariables(wrapper, targetVariables);
  }, () => { return ioc; });
@@ -249,6 +286,16 @@ function openVariableExplorer(wrapper: ReactWrapper<any, Readonly<{}>, React.Com
  }
 }
 
+function sortVariableExplorer(wrapper: ReactWrapper<any, Readonly<{}>, React.Component>, sortColumn: string, sortDirection: string) {
+ const varExp: VariableExplorer = wrapper.find('VariableExplorer').instance() as VariableExplorer;
+
+ assert(varExp);
+
+ if (varExp) {
+ varExp.sortRows(sortColumn, sortDirection);
+ }
+}
+
 // Verify a set of rows versus a set of expected variables
 function verifyVariables(wrapper: ReactWrapper<any, Readonly<{}>, React.Component>, targetVariables: IJupyterVariable[]) {
  const foundRows = wrapper.find('div.react-grid-Row');