Add preview to schema sources (#257)

malloydata · Sep 22, 2023 · b6f8f14 · b6f8f14
1 parent 908e56c
commit b6f8f14
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 1 deletion.
diff --git a/src/extension/notebook/renderer/schema_entry.tsx b/src/extension/notebook/renderer/schema_entry.tsx
@@ -130,12 +130,23 @@ const SchemaRendererWrapper = ({
     }
   };
 
+  const onPreviewClick = (explore: Explore) => {
+    const type = 'malloy.runQuery';
+    const args = [
+      `query: ${explore.name}->{ project: *; limit: 20 }`,
+      `preview ${explore.name}`,
+      'html',
+    ];
+    postMessage?.({type, args});
+  };
+
   return (
     <SchemaRenderer
       explores={explores}
       queries={queries}
       onFieldClick={onFieldClick}
       onQueryClick={onQueryClick}
+      onPreviewClick={onPreviewClick}
     />
   );
 };
diff --git a/src/extension/webviews/components/SchemaRenderer.tsx b/src/extension/webviews/components/SchemaRenderer.tsx
@@ -48,6 +48,7 @@ export interface SchemaRendererProps {
   defaultShow?: boolean;
   onFieldClick?: (field: Field) => void;
   onQueryClick?: (query: NamedQuery | QueryField) => void;
+  onPreviewClick?: (explore: Explore) => void;
 }
 
 /**
@@ -206,6 +207,7 @@ export const SchemaRenderer: React.FC<SchemaRendererProps> = ({
   defaultShow = false,
   onFieldClick,
   onQueryClick,
+  onPreviewClick,
 }) => {
   if (!explores || !explores.length) {
     return <b>No Schema Information</b>;
@@ -235,12 +237,23 @@ export const SchemaRenderer: React.FC<SchemaRendererProps> = ({
       [setHidden]
     );
 
+    const onClick = (event: React.MouseEvent) => {
+      onPreviewClick?.(explore);
+      event.stopPropagation();
+      event.preventDefault();
+    };
+
     return (
       <li className={`schema ${hidden}`} title={buildTitle(explore, path)}>
         <div onClick={toggleHidden}>
           <span>{hidden ? '▶' : '▼'}</span>{' '}
           {getIconElement(`struct_${subtype}`, false)}{' '}
-          <b className="explore_name">{getExploreName(explore, path)}</b>
+          <b className="explore_name">{getExploreName(explore, path)}</b>{' '}
+          {onPreviewClick && !explore.hasParentExplore() && (
+            <span className="preview" onClick={onClick}>
+              Preview
+            </span>
+          )}
         </div>
         <ul>
           {queries.length ? (
@@ -430,4 +443,15 @@ const SchemaTree = styled.div`
     vertical-align: middle;
     display: inline-block;
   }
+
+  .preview {
+    color: var(--vscode-editorCodeLens-foreground);
+    font-size: 0.8em;
+    padding-left: 5px;
+    cursor: pointer;
+
+    &:hover {
+      color: var(--vscode-editorLink-activeForeground);
+    }
+  }
 `;