fix: filtering, revamp logic

- Remove the query language stuff that was a pain to use (long term
  should be replaced with a notebook)
- Uses a simple 'language' similar to the VS Code marketplace search
  syntax.
- Build that and fix filtering to work in the flame graph

Fixes #5

Author: connor4312

.vscode/settings.json

@@ -1,12 +1,16 @@
 // Place your settings in this file to overwrite default and user settings.
 {
-    "files.exclude": {
-        "**/out": false // set this to true to hide the "out" folder with the compiled JS files
-    },
-    "search.exclude": {
-        "**/out": true // set this to false to include "out" folder in search results
-    },
-    // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
-    "typescript.tsc.autoDetect": "off",
-    "eslint.enable": true
+  "files.exclude": {
+    "**/out": false // set this to true to hide the "out" folder with the compiled JS files
+  },
+  "search.exclude": {
+    "**/out": true // set this to false to include "out" folder in search results
+  },
+  // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
+  "typescript.tsc.autoDetect": "off",
+  "eslint.enable": true,
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": true
+  }
 }

packages/vscode-js-profile-core/src/client/rich-filter.tsx

@@ -2,16 +2,16 @@
  * Copyright (C) Microsoft Corporation. All rights reserved.
  *--------------------------------------------------------*/
 
-import { h, FunctionComponent, Fragment, ComponentChild } from 'preact';
-import { useState, useEffect, useContext } from 'preact/hooks';
-import { Filter } from './filter';
-import { ToggleButton } from './toggle-button';
+import { ComponentChild, Fragment, FunctionComponent, h } from 'preact';
+import { useContext, useEffect, useState } from 'preact/hooks';
 import * as CaseSensitive from 'vscode-codicons/src/icons/case-sensitive.svg';
 import * as Regex from 'vscode-codicons/src/icons/regex.svg';
+import { evaluate, IDataSource, IQueryResults } from '../ql';
+import { Filter } from './filter';
 import styles from './rich-filter.css';
-import { evaluate, IDataSource } from '../ql';
-import { VsCodeApi, IVscodeApi } from './vscodeApi';
+import { ToggleButton } from './toggle-button';
 import { useLazyEffect } from './useLazyEffect';
+import { IVscodeApi, VsCodeApi } from './vscodeApi';
 
 /**
  * Filter that the RichFilter returns,
@@ -42,15 +42,13 @@ export const compileFilter = (fn: IRichFilter): ((input: string) => boolean) =>
 export type RichFilterComponent<T> = FunctionComponent<{
   data: IDataSource<T>;
   placeholder: string;
-  getDefaultFilterText: (value: T) => ReadonlyArray<string>;
-  onChange: (data: ReadonlyArray<T>) => void;
+  onChange: (data: IQueryResults<T>) => void;
   foot?: ComponentChild;
 }>;
 
 export const richFilter = <T extends {}>(): RichFilterComponent<T> => ({
   placeholder,
   data,
-  getDefaultFilterText,
   onChange,
   foot,
 }) => {
@@ -65,17 +63,13 @@ export const richFilter = <T extends {}>(): RichFilterComponent<T> => ({
   }, [text]);
 
   useEffect(() => {
-    if (!text.includes('query()')) {
-      const filter = compileFilter({ text, caseSensitive, regex });
-      onChange(data.data.filter(d => getDefaultFilterText(d).some(filter)));
-      return;
-    }
-
     try {
       onChange(
         evaluate({
-          expression: text,
-          dataSources: { query: data },
+          input: text,
+          regex,
+          caseSensitive,
+          datasource: data,
         }),
       );
       setError(undefined);

packages/vscode-js-profile-core/src/cpu/layout.tsx

@@ -5,15 +5,14 @@ import { h, FunctionComponent, Fragment, ComponentType } from 'preact';
 import { useState, useMemo } from 'preact/hooks';
 import { richFilter, RichFilterComponent } from '../client/rich-filter';
 import styles from './layout.css';
-import { IDataSource } from '../ql';
+import { IDataSource, IQueryResults } from '../ql';
 
 export interface IBodyProps<T> {
-  data: ReadonlyArray<T>;
+  data: IQueryResults<T>;
 }
 
 type CpuProfileLayoutComponent<T> = FunctionComponent<{
   data: IDataSource<T>;
-  getDefaultFilterText: (value: T) => ReadonlyArray<string>;
   body: ComponentType<IBodyProps<T>>;
   filterFooter?: ComponentType<{}>;
 }>;
@@ -23,20 +22,18 @@ type CpuProfileLayoutComponent<T> = FunctionComponent<{
  */
 export const cpuProfileLayoutFactory = <T extends {}>(): CpuProfileLayoutComponent<T> => ({
   data,
-  getDefaultFilterText,
   body: RowBody,
   filterFooter: FilterFooter,
 }) => {
   const RichFilter = useMemo<RichFilterComponent<T>>(richFilter, []);
-  const [filteredData, setFilteredData] = useState<ReadonlyArray<T> | undefined>(undefined);
+  const [filteredData, setFilteredData] = useState<IQueryResults<T> | undefined>(undefined);
   const footer = useMemo(() => (FilterFooter ? <FilterFooter /> : undefined), [FilterFooter]);
 
   return (
     <Fragment>
       <div className={styles.filter}>
         <RichFilter
           data={data}
-          getDefaultFilterText={getDefaultFilterText}
           onChange={setFilteredData}
           placeholder="Filter functions or files, or start a query()"
           foot={footer}

packages/vscode-js-profile-core/src/cpu/model.ts

@@ -14,6 +14,7 @@ export const enum Category {
   System,
   User,
   Module,
+  Deemphasized,
 }
 
 /**