'run:' the default style of malloy display

.node-version

@@ -0,0 +1 @@
+18.16.0

src/app/ExploreQueryEditor/ExploreQueryEditor.tsx

@@ -26,6 +26,7 @@ interface ExploreQueryEditorProps {
   result: MalloyResult | undefined;
   dataStyles: DataStyles;
   queryMalloy: {
+    notebook: string;
     model: string;
     source: string;
     markdown: string;

src/app/Result/Result.tsx

@@ -50,6 +50,7 @@ interface ResultProps {
     source: string;
     model: string;
     markdown: string;
+    notebook: string;
     isRunnable: boolean;
   };
   onDrill: (filters: malloy.FilterCondition[]) => void;
@@ -66,6 +67,8 @@ export const Result: React.FC<ResultProps> = ({
   isRunning,
 }) => {
   const [html, setHTML] = useState<HTMLElement>();
+  const [highlightedNotebookMalloy, setHighlightedNotebookMalloy] =
+    useState<HTMLElement>();
   const [highlightedSourceMalloy, setHighlightedSourceMalloy] =
     useState<HTMLElement>();
   const [highlightedModelMalloy, setHighlightedModelMalloy] =
@@ -76,7 +79,7 @@ export const Result: React.FC<ResultProps> = ({
   const [view, setView] = useState<'sql' | 'malloy' | 'html'>('html');
   const [copiedMalloy, setCopiedMalloy] = useState(false);
   const [rendering, setRendering] = useState(false);
-  const [malloyType, setMalloyType] = useState('source');
+  const [malloyType, setMalloyType] = useState('notebook');
   const [displaying, setDisplaying] = useState(false);
   const resultId = useRef(0);
   const previousResult = usePrevious(result);
@@ -91,6 +94,10 @@ export const Result: React.FC<ResultProps> = ({
       .then(setHighlightedSourceMalloy)
       // eslint-disable-next-line no-console
       .catch(console.log);
+    highlightPre(indentCode(malloy.notebook), 'malloy')
+      .then(setHighlightedNotebookMalloy)
+      // eslint-disable-next-line no-console
+      .catch(console.log);
     highlightPre(malloy.model, 'malloy')
       .then(setHighlightedModelMalloy)
       // eslint-disable-next-line no-console
@@ -243,6 +250,9 @@ export const Result: React.FC<ResultProps> = ({
           <PreWrapper
             style={{marginLeft: malloyType === 'source' ? '-2ch' : ''}}
           >
+            {malloyType === 'notebook' && highlightedNotebookMalloy && (
+              <DOMElement element={highlightedNotebookMalloy} />
+            )}
             {malloyType === 'source' && highlightedSourceMalloy && (
               <DOMElement element={highlightedSourceMalloy} />
             )}
@@ -272,6 +282,7 @@ export const Result: React.FC<ResultProps> = ({
                   setCopiedMalloy(false);
                 }}
                 options={[
+                  {value: 'notebook', label: 'Notebook'},
                   {value: 'source', label: 'Source'},
                   {value: 'model', label: 'Model'},
                   {value: 'markdown', label: 'Markdown'},

src/app/hooks/use_query_builder.ts

@@ -42,6 +42,7 @@ interface UseQueryBuilderResult {
   queryMalloy: {
     model: string;
     source: string;
+    notebook: string;
     markdown: string;
     isRunnable: boolean;
   };

src/core/query.ts

@@ -184,12 +184,14 @@ export class QueryBuilder extends SourceUtils {
     modelPath: string
   ): {
     model: string;
+    notebook: string;
     markdown: string;
     source: string;
     isRunnable: boolean;
   } {
     const writer = this.getWriter();
     return {
+      notebook: writer.getQueryStringForNotebook(),
       model: writer.getQueryStringForModel(),
       source: writer.getQueryStringForSource(this.query.name),
       markdown: writer.getQueryStringForMarkdown(renderer, modelPath),
@@ -915,7 +917,7 @@ export class QueryWriter extends SourceUtils {
     renderer: string | undefined,
     modelPath: string
   ): string {
-    const malloy = this.getMalloyString(false, this.query.name);
+    const malloy = this.getMalloyString('run', this.query.name);
     return `<!-- malloy-query
   name="${snakeToTitle(this.query.name)}"
   description="Add a description here." ${
@@ -932,11 +934,15 @@ ${malloy}
   }
 
   getQueryStringForSource(name: string): string {
-    return this.getMalloyString(true, name);
+    return this.getMalloyString('view', name);
   }
 
   getQueryStringForModel(): string {
-    return this.getMalloyString(false, this.query.name);
+    return this.getMalloyString('query', this.query.name);
+  }
+
+  getQueryStringForNotebook(): string {
+    return this.getMalloyString('run');
   }
 
   private getFiltersString(filterList: FilterCondition[]): Fragment[] {
@@ -1131,18 +1137,18 @@ ${malloy}
     return malloy;
   }
 
-  private getMalloyString(forSource: boolean, name?: string): string {
+  private getMalloyString(
+    forUse: 'view' | 'query' | 'run',
+    name?: string
+  ): string {
     if (this.getSource() === undefined) return '';
     const initParts = [];
-    if (forSource) {
-      initParts.push('view:');
-    } else {
-      initParts.push('query:');
-    }
-    if (name !== undefined) {
+    initParts.push(`${forUse}:`);
+
+    if (forUse !== 'run' && name !== undefined) {
       initParts.push(`${maybeQuoteIdentifier(name)} is`);
     }
-    if (!forSource) {
+    if (forUse !== 'view') {
       initParts.push(
         maybeQuoteIdentifier(this.getSource().as || this.getSource().name)
       );
@@ -1155,7 +1161,7 @@ ${malloy}
       stageIndex++
     ) {
       const stage = this.query.pipeline[stageIndex];
-      if (!forSource || stageIndex > 0) {
+      if (forUse !== 'view' || stageIndex > 0) {
         malloy.push(' ->');
       }
       malloy.push(...this.getMalloyStringForStage(stage, stageSource));