Result refactor

packages/query-composer/example/example.tsx

@@ -41,8 +41,12 @@ const CssVariables = styled.div`
 
 const App = () => {
   const [modelDef, setModeDef] = useState(exampleModel);
-  const {queryMalloy, queryName, queryModifiers, querySummary} =
-    useQueryBuilder(modelDef, 'names', modelPath, updateQueryInURL);
+  const {queryModifiers, querySummary, queryWriter} = useQueryBuilder(
+    modelDef,
+    'names',
+    modelPath,
+    updateQueryInURL
+  );
 
   const {result, isRunning, runQuery} = useRunQuery(
     modelDef,
@@ -67,9 +71,8 @@ const App = () => {
             source={source}
             queryModifiers={queryModifiers}
             topValues={topValues}
-            queryName={queryName}
             querySummary={querySummary}
-            queryMalloy={queryMalloy}
+            queryWriter={queryWriter}
             runQuery={runQuery}
             isRunning={isRunning}
             result={result}

packages/query-composer/example/example2.tsx

@@ -0,0 +1,113 @@
+import React, {useState} from 'react';
+import {createRoot} from 'react-dom/client';
+import {useQueryBuilder, useRunQuery} from '../src/index';
+
+import {model as exampleModel, modelPath, topValues} from './example_model';
+import styled, {createGlobalStyle} from 'styled-components';
+import {SourceDef} from '@malloydata/malloy';
+import {QueryEditor} from '../src/components/QueryEditor';
+
+const updateQueryInURL = () => {};
+const runQueryAction = () => {
+  throw new Error('Unimplemented');
+};
+
+const CssVariables = styled.div`
+  --malloy-composer-fontSize: 13px;
+  --malloy-composer-fontFamily: Arial, sans-serif;
+  --malloy-composer-background: #1e1e1e;
+  --malloy-composer-foreground: #eeeeee;
+
+  --malloy-composer-header-background: #333333;
+
+  --malloy-composer-code-fontSize: 13px;
+  --malloy-composer-code-fontFamily: Courier, monospace;
+
+  --malloy-composer-form-background: #000000;
+  --malloy-composer-form-foreground: #eeeeee;
+  --malloy-composer-form-border: #ececed;
+  --malloy-composer-form-fontFamily: Arial, sans-serif;
+  --malloy-composer-form-fontSize: 13px;
+  --malloy-composer-form-focus: #b0b0ff;
+  --malloy-composer-form-focusBackground: #5050ff;
+  --malloy-composer-form-fontSize: 13px;
+
+  --malloy-composer-menu-background: #000000;
+  --malloy-composer-menu-foreground: #eeeeee;
+  --malloy-composer-menu-border: #bbbbbb;
+  --malloy-composer-menu-title: #bbbbbb;
+  --malloy-composer-menu-fontFamily: Courier, monospace;
+  --malloy-composer-menu-fontSize: 13px;
+`;
+
+const App = () => {
+  const [modelDef, setModeDef] = useState(exampleModel);
+  const {queryModifiers, querySummary, queryWriter} = useQueryBuilder(
+    modelDef,
+    'names',
+    modelPath,
+    updateQueryInURL
+  );
+
+  const {isRunning, runQuery} = useRunQuery(
+    modelDef,
+    modelPath,
+    runQueryAction
+  );
+
+  const source = modelDef.contents['names'] as SourceDef;
+
+  const runQueryCallback = () => {
+    const query = queryWriter.getQueryStringForNotebook();
+    if (query) {
+      runQuery(query);
+    }
+  };
+
+  return (
+    <div className="dark">
+      <GlobalStyle />
+      <CssVariables>
+        <div
+          style={{
+            backgroundColor: 'var(--malloy-composer-background)',
+          }}
+        >
+          <QueryEditor
+            model={modelDef}
+            source={source}
+            queryModifiers={queryModifiers}
+            topValues={topValues}
+            querySummary={querySummary}
+            queryWriter={queryWriter}
+            runQuery={runQueryCallback}
+            isRunning={isRunning}
+            refreshModel={() => setModeDef(structuredClone(exampleModel))}
+          />
+        </div>
+      </CssVariables>
+    </div>
+  );
+};
+
+const GlobalStyle = createGlobalStyle`
+  .dark .shiki,
+  .dark .shiki span {
+    color: var(--shiki-dark) !important;
+    background-color: var(--shiki-dark-bg) !important;
+  }
+  .shiki span {
+    font-size: var(--malloy-composer-code-fontSize);
+    font-family: var(--malloy-composer-code-fontFamily);
+  }
+  .shiki code {
+    background-color: var(--malloy-composer-background);
+  }
+
+  body {
+    margin: 0;
+  }
+`;
+
+const root = createRoot(document.getElementById('app')!);
+root.render(<App />);

packages/query-composer/example/index.ts

@@ -1,2 +1,2 @@
-import './example.tsx';
+import './example2.tsx';
 export * from './example_model.ts';

packages/query-composer/src/components/ActionMenu/ActionMenu.tsx

@@ -21,7 +21,7 @@
  * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 import * as React from 'react';
-import {FilterCondition, StructDef, ModelDef} from '@malloydata/malloy';
+import {FilterCondition, StructDef} from '@malloydata/malloy';
 import {ReactElement, useContext, useState} from 'react';
 import styled from 'styled-components';
 import {stringFilterToString} from '../../core/filters';
@@ -72,13 +72,9 @@ interface ActionMenuProps {
   closeMenu: () => void;
   searchItems?: SearchItem[];
   addFilter?: (filter: FilterCondition) => void;
-  model?: ModelDef;
-  modelPath?: string;
 }
 
 export const ActionMenu: React.FC<ActionMenuProps> = ({
-  model,
-  modelPath,
   actions,
   closeMenu,
   searchItems,
@@ -91,12 +87,7 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({
       : undefined
   );
   const [searchTerm, setSearchTerm] = useState('');
-  const {searchResults, isLoading} = useSearch(
-    model,
-    modelPath,
-    valueSearchSource,
-    searchTerm
-  );
+  const {searchResults, isLoading} = useSearch(searchTerm);
   const stringSearchResults =
     searchResults &&
     searchResults.filter(r => r.fieldType === 'string').slice(0, 100);

packages/query-composer/src/components/AddFilter/AddFilter.tsx

@@ -21,12 +21,7 @@
  * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 import * as React from 'react';
-import {
-  FieldDef,
-  FilterCondition,
-  ModelDef,
-  StructDef,
-} from '@malloydata/malloy';
+import {FieldDef, FilterCondition, StructDef} from '@malloydata/malloy';
 import {useContext, useState} from 'react';
 import {CodeInput} from '../CodeInput';
 import {
@@ -62,20 +57,16 @@ import {kindOfField, typeOfField} from '../../utils';
 import {ComposerOptionsContext} from '../ExploreQueryEditor/ExploreQueryEditor';
 
 interface AddFilterProps {
-  model: ModelDef;
   source: StructDef;
   field: FieldDef;
   fieldPath: string;
   addFilter: (filter: FilterCondition, as?: string) => void;
   needsRename: boolean;
   onComplete: () => void;
-  modelPath: string;
   initial?: Filter;
 }
 
 export const AddFilter: React.FC<AddFilterProps> = ({
-  model,
-  modelPath,
   source,
   field,
   addFilter,
@@ -168,9 +159,6 @@ export const AddFilter: React.FC<AddFilterProps> = ({
         )}
         {stringFilter && (
           <StringFilterBuilder
-            modelPath={modelPath}
-            model={model}
-            source={source}
             fieldPath={fieldPath}
             filter={stringFilter}
             setFilter={f => {

packages/query-composer/src/components/AddFilter/StringFilterBuilder.tsx

@@ -21,7 +21,6 @@
  * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 import * as React from 'react';
-import {ModelDef, StructDef} from '@malloydata/malloy';
 import {useState} from 'react';
 import styled from 'styled-components';
 import {stringFilterChangeType} from '../../core/filters';
@@ -49,18 +48,12 @@ import {LoadingSpinner} from '../Spinner';
 import {largeNumberLabel} from '../../utils';
 
 interface StringFilterBuilderProps {
-  model: ModelDef;
-  modelPath: string;
-  source: StructDef;
   fieldPath: string;
   filter: StringFilter;
   setFilter: (filter: StringFilter) => void;
 }
 
 export const StringFilterBuilder: React.FC<StringFilterBuilderProps> = ({
-  model,
-  modelPath,
-  source,
   filter,
   setFilter,
   fieldPath,
@@ -69,14 +62,7 @@ export const StringFilterBuilder: React.FC<StringFilterBuilderProps> = ({
     setFilter(stringFilterChangeType(filter, type));
   };
 
-  const equalTo = useStringEqualToOrNotBuilder(
-    model,
-    modelPath,
-    source,
-    filter,
-    setFilter,
-    fieldPath
-  );
+  const equalTo = useStringEqualToOrNotBuilder(filter, setFilter, fieldPath);
   const startsWith = useStringContainsBuilder(filter, setFilter);
   const doesNotStartWith = useStringNotContainsBuilder(filter, setFilter);
   const contains = useStringStartsWithBuilder(filter, setFilter);
@@ -159,21 +145,12 @@ const UtilRow = styled.div`
 `;
 
 function useStringEqualToOrNotBuilder(
-  model: ModelDef,
-  modelPath: string,
-  source: StructDef,
   filter: StringFilter,
   setFilter: (filter: StringEqualToFilter | StringNotEqualToFilter) => void,
   fieldPath: string
 ) {
   const [searchValue, setSearchValue] = useState('');
-  const {searchResults, isLoading} = useSearch(
-    model,
-    modelPath,
-    source,
-    searchValue,
-    fieldPath
-  );
+  const {searchResults, isLoading} = useSearch(searchValue, fieldPath);
   if (filter.type !== 'is_equal_to' && filter.type !== 'is_not_equal_to') {
     return {builder: null, util: null};
   }

packages/query-composer/src/components/AggregateActionMenu/AggregateActionMenu.tsx

@@ -21,7 +21,7 @@
  * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 import * as React from 'react';
-import {ModelDef, SourceDef} from '@malloydata/malloy';
+import {SourceDef} from '@malloydata/malloy';
 import {OrderByField, PropertyType, StagePath} from '../../types';
 import {FilterContextBar} from '../FilterContextBar';
 import {RenameField} from '../RenameField';
@@ -42,15 +42,11 @@ interface AggregateActionMenuProps {
   definition: string | undefined;
   orderByField: OrderByField;
   stagePath: StagePath;
-  model: ModelDef;
-  modelPath: string;
   queryModifiers: QueryModifiers;
   property: PropertyType;
 }
 
 export const AggregateActionMenu: React.FC<AggregateActionMenuProps> = ({
-  model,
-  modelPath,
   source,
   closeMenu,
   beginReorderingField,
@@ -79,8 +75,6 @@ export const AggregateActionMenu: React.FC<AggregateActionMenuProps> = ({
           closeOnComplete: true,
           Component: ({onComplete}: ActionSubmenuComponentProps) => (
             <FilterContextBar
-              model={model}
-              modelPath={modelPath}
               source={source}
               addFilter={(filter, as) =>
                 queryModifiers.addFilterToField(

packages/query-composer/src/components/DimensionActionMenu/DimensionActionMenu.tsx

@@ -21,7 +21,7 @@
  * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 import * as React from 'react';
-import {FieldDef, StructDef, ModelDef} from '@malloydata/malloy';
+import {FieldDef, StructDef} from '@malloydata/malloy';
 import {OrderByField, StagePath, StageSummary} from '../../types';
 import {ActionMenu, ActionSubmenuComponentProps} from '../ActionMenu';
 import {AddFilter} from '../AddFilter';
@@ -32,7 +32,6 @@ import {RenameField} from '../RenameField';
 import {QueryModifiers} from '../../hooks';
 
 interface DimensionActionMenuProps {
-  model: ModelDef;
   closeMenu: () => void;
   stagePath: StagePath;
   fieldIndex: number;
@@ -45,14 +44,11 @@ interface DimensionActionMenuProps {
   filterField?: FieldDef;
   filterFieldPath?: string;
   orderByField: OrderByField;
-  modelPath: string;
   queryModifiers: QueryModifiers;
 }
 
 export const DimensionActionMenu: React.FC<DimensionActionMenuProps> = ({
   source,
-  model,
-  modelPath,
   name,
   closeMenu,
   fieldIndex,
@@ -95,8 +91,6 @@ export const DimensionActionMenu: React.FC<DimensionActionMenuProps> = ({
           Component: ({onComplete}: ActionSubmenuComponentProps) =>
             filterField && filterFieldPath ? (
               <AddFilter
-                model={model}
-                modelPath={modelPath}
                 onComplete={onComplete}
                 source={source}
                 field={filterField}