Allow click to run in notebooks

package.json

@@ -552,7 +552,8 @@
         "id": "malloy.notebook-renderer-schema",
         "mimeTypes": [
           "x-application/malloy-schema"
-        ]
+        ],
+        "requiresMessaging": "optional"
       }
     ]
   },

src/extension/notebook/malloy_controller.ts

@@ -110,6 +110,14 @@ export function activateNotebookController(
       newUntitledNotebookCommand
     )
   );
+
+  const messageChannel = vscode.notebooks.createRendererMessaging(
+    'malloy.notebook-renderer-schema'
+  );
+  messageChannel.onDidReceiveMessage(event => {
+    const {type, args} = event.message;
+    vscode.commands.executeCommand(type, ...args);
+  });
 }
 
 class MalloyController {

src/extension/notebook/renderer/schema_entry.tsx

@@ -26,9 +26,10 @@ import React from 'react';
 import {StyleSheetManager} from 'styled-components';
 import {ActivationFunction} from 'vscode-notebook-renderer';
 import {SchemaRenderer} from '../../webviews/components/SchemaRenderer';
-import {Explore, SerializedExplore} from '@malloydata/malloy';
+import {Explore, Field, SerializedExplore} from '@malloydata/malloy';
+import {fieldType} from '../../common/schema';
 
-export const activate: ActivationFunction = () => {
+export const activate: ActivationFunction = ({postMessage}) => {
   return {
     renderOutputItem(info, element) {
       let shadow = element.shadowRoot;
@@ -45,7 +46,10 @@ export const activate: ActivationFunction = () => {
 
       ReactDOM.render(
         <StyleSheetManager target={root}>
-          <SchemaRendererWrapper results={info.json()} />
+          <SchemaRendererWrapper
+            results={info.json()}
+            postMessage={postMessage}
+          />
         </StyleSheetManager>,
         root
       );
@@ -55,6 +59,7 @@ export const activate: ActivationFunction = () => {
 
 interface SchemaRendererWrapperProps {
   results: SerializedExplore[];
+  postMessage?: (message: unknown) => void;
 }
 
 /**
@@ -63,7 +68,10 @@ interface SchemaRendererWrapperProps {
  * we use useEffect() to delay rendering the actual contents until
  * it's ready.
  */
-const SchemaRendererWrapper = ({results}: SchemaRendererWrapperProps) => {
+const SchemaRendererWrapper = ({
+  results,
+  postMessage,
+}: SchemaRendererWrapperProps) => {
   const [explores, setExplores] = React.useState<Explore[]>();
 
   React.useEffect(() => {
@@ -77,5 +85,34 @@ const SchemaRendererWrapper = ({results}: SchemaRendererWrapperProps) => {
     return null;
   }
 
-  return <SchemaRenderer explores={explores} />;
+  const onFieldClick = (field: Field) => {
+    const type = fieldType(field);
+
+    let path = field.name;
+    let current: Explore = field.parentExplore;
+    while (current.parentExplore) {
+      path = `${current.name}.${path}`;
+      current = current.parentExplore;
+    }
+    const topLevelExplore = current;
+
+    if (type === 'query') {
+      const type = 'malloy.runQuery';
+      const args = [
+        `query: ${topLevelExplore.name}->${path}`,
+        `${topLevelExplore.name}->${path}`,
+      ];
+      postMessage?.({type, args});
+    } else {
+      let path = field.name;
+      let current: Explore = field.parentExplore;
+      while (current.parentExplore) {
+        path = `${current.name}.${path}`;
+        current = current.parentExplore;
+      }
+      navigator.clipboard.writeText(path);
+    }
+  };
+
+  return <SchemaRenderer explores={explores} onFieldClick={onFieldClick} />;
 };

src/extension/webviews/components/SchemaRenderer.tsx

@@ -41,6 +41,7 @@ import OneToOneIcon from '../../../media/one_to_one.svg';
 export interface SchemaRendererProps {
   explores: Explore[];
   defaultShow?: boolean;
+  onFieldClick?: (field: Field) => void;
 }
 
 /**
@@ -147,6 +148,9 @@ Path: ${path}${path ? '.' : ''}${fieldName}
 Type: ${type}`;
 }
 
+const sortByName = (a: Field | Explore, b: Field | Explore) =>
+  a.name.localeCompare(b.name);
+
 /**
  * Bucket fields by type and sort by name.
  *
@@ -161,9 +165,6 @@ function bucketFields(fields: Field[]) {
   const measures: Field[] = [];
   const explores: Explore[] = [];
 
-  const sortByName = (a: Field | Explore, b: Field | Explore) =>
-    a.name.localeCompare(b.name);
-
   for (const field of fields) {
     const type = fieldType(field);
 
@@ -193,6 +194,7 @@ function bucketFields(fields: Field[]) {
 export const SchemaRenderer: React.FC<SchemaRendererProps> = ({
   explores,
   defaultShow = false,
+  onFieldClick,
 }) => {
   if (!explores || !explores.length) {
     return <b>No Schema Information</b>;
@@ -268,15 +270,16 @@ export const SchemaRenderer: React.FC<SchemaRendererProps> = ({
 
   const FieldItem = ({field, path}: FieldProps) => {
     const onClick = () => {
-      const type = fieldType(field);
-      const fieldName = field.name;
-      if (type !== 'query') {
-        navigator.clipboard.writeText(`${path}${path ? '.' : ''}${fieldName}`);
-      }
+      onFieldClick?.(field);
     };
+    const clickable = onFieldClick ? 'clickable' : '';
 
     return (
-      <div className="field" title={buildTitle(field, path)} onClick={onClick}>
+      <div
+        className={`field ${clickable}`}
+        title={buildTitle(field, path)}
+        onClick={onClick}
+      >
         {getIconElement(fieldType(field), isFieldAggregate(field))}
         <span className="field_name">{field.name}</span>
       </div>
@@ -300,7 +303,7 @@ export const SchemaRenderer: React.FC<SchemaRendererProps> = ({
   return (
     <SchemaTree>
       <ul>
-        {explores.map(explore => (
+        {explores.sort(sortByName).map(explore => (
           <StructItem key={explore.name} explore={explore} path={''} />
         ))}
       </ul>
@@ -355,6 +358,10 @@ const SchemaTree = styled.div`
     border-radius: 8px;
     padding: 0.25em 0.75em;
     margin: 0.2em;
+
+    &.clickable {
+      cursor: pointer;
+    }
   }
 
   .field_list {

src/extension/webviews/query_page/App.tsx

@@ -21,7 +21,7 @@
  * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import {Explore, Result} from '@malloydata/malloy';
+import {Explore, Field, Result} from '@malloydata/malloy';
 import {HTMLView} from '@malloydata/render';
 import React, {
   DOMElement,
@@ -47,6 +47,7 @@ import {CopyButton} from './CopyButton';
 import {Scroll} from '../components/Scroll';
 import {PrismContainer} from '../components/PrismContainer';
 import {SchemaRenderer} from '../components/SchemaRenderer';
+import {fieldType} from '../../common/schema';
 
 enum Status {
   Ready = 'ready',
@@ -237,6 +238,20 @@ export const App: React.FC = () => {
     [resultKind, results]
   );
 
+  const onFieldClick = (field: Field) => {
+    const type = fieldType(field);
+
+    if (type !== 'query') {
+      let path = field.name;
+      let current: Explore = field.parentExplore;
+      while (current.parentExplore) {
+        path = `${current.name}.${path}`;
+        current = current.parentExplore;
+      }
+      navigator.clipboard.writeText(path);
+    }
+  };
+
   return (
     <div
       style={{
@@ -324,7 +339,11 @@ export const App: React.FC = () => {
       )}
       {!status.error && results.schema && resultKind === ResultKind.SCHEMA && (
         <Scroll>
-          <SchemaRenderer explores={results.schema} defaultShow={true} />
+          <SchemaRenderer
+            explores={results.schema}
+            defaultShow={true}
+            onFieldClick={onFieldClick}
+          />
         </Scroll>
       )}
       {status.error && (