@finos/legend-cube-builder 0.0.4 → 0.0.6

package/src/components/show-pure/CubeShowPureDialog.tsx

@@ -24,10 +24,17 @@ import {
   PanelLoadingIndicator,
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
-import { CUBE_PENDING_LABEL } from '../../__lib__/LegendCubeLabels.js';
+import {
+  CUBE_PENDING_LABEL,
+  CUBE_RUN_PURE_NOTE,
+} from '../../__lib__/LegendCubeLabels.js';
 import type { CubeEditorState } from '../../stores/CubeEditorState.js';
+import { CUBE_PRIMARY_BUTTON_DARK_MODE } from '../CubeDialogTheme.js';
 
-/** The Pure text of what Execute would run, read-only, with Copy */
+/**
+ * The Pure text of what Execute would run, read-only, with Copy; or of a run
+ * from the Runs panel, as it ran (PLAN §11.16)
+ */
 export const CubeShowPureDialog = observer(
   (props: { editorState: CubeEditorState }) => {
     const { editorState } = props;
@@ -35,17 +42,24 @@ export const CubeShowPureDialog = observer(
     const { applicationStore } = editorState.host;
     const darkMode =
       !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled;
-    const { text, error } = showPure;
+    const { text, error, run } = showPure;
 
     return (
       <Dialog open={showPure.isOpen} onClose={() => showPure.close()}>
         <Modal darkMode={darkMode} className="w-[800px] max-w-full">
           <ModalHeader>
-            <div className="modal__title">Pure query</div>
+            <div className="modal__title truncate" title={run}>
+              {run === undefined ? 'Pure query' : `Pure query of ${run}`}
+            </div>
           </ModalHeader>
           <PanelLoadingIndicator isLoading={showPure.isRendering} />
           <ModalBody>
             <div className="flex flex-col gap-2">
+              {run !== undefined && (
+                <div className="text-base text-[var(--color-text-secondary)]">
+                  {CUBE_RUN_PURE_NOTE}
+                </div>
+              )}
               {showPure.isRendering && (
                 <div className="text-base text-[var(--color-text-secondary)]">
                   {CUBE_PENDING_LABEL.RENDERING_QUERY}
@@ -71,7 +85,7 @@ export const CubeShowPureDialog = observer(
           </ModalBody>
           <ModalFooter>
             <ModalFooterButton
-              darkMode={darkMode}
+              darkMode={CUBE_PRIMARY_BUTTON_DARK_MODE}
               formatText={false}
               text="Copy to Clipboard"
               disabled={text === undefined}

package/src/components/source-picker/CubeDataProductTab.tsx

@@ -37,16 +37,19 @@ import {
 } from '../../stores/source-picker/CubeDataProductTabState.js';
 import type { CubeAccessPoint } from '../../graph-manager/CubeDataProductCatalog.js';
 import type { CubeResultValue } from '../../graph-manager/CubeEngine.js';
+import {
+  CUBE_PICKER_LIST_CLASS,
+  CubePickerListItem,
+} from './CubePickerListItem.js';
 import { CubeButton } from '../CubeButton.js';
 import { CubeSchemaColumnsTable } from '../CubeSchemaColumnsTable.js';
 import { CubePickerStep } from './CubePickerStep.js';
+import { CUBE_PROJECT_SOURCE_LABEL } from '../../__lib__/LegendCubeProjectSourceLabels.js';
+import { isCubeProjectHost } from '../../stores/CubeHost.js';
 
 const INPUT_CLASS =
   'h-7 rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-input)] px-1 text-base text-[var(--color-text-primary)] disabled:text-[var(--color-text-secondary)]';
 
-const LIST_ITEM_CLASS =
-  'flex w-full items-center gap-2 px-2 py-1 text-left text-base enabled:hover:bg-[var(--color-bg-hover)] disabled:cursor-not-allowed disabled:text-[var(--color-text-disabled)]';
-
 /** An error as the tab shows it: its first line, the rest on demand, and an action when it has one */
 const CubeDataProductTabAlert: React.FC<{
   error: CubeDataProductTabError;
@@ -118,7 +121,9 @@ const CubeSampleValue: React.FC<{ value: CubeResultValue }> = ({ value }) =>
 const CubeAccessPointPreview: React.FC<{
   accessPoint: CubeAccessPoint;
   marketplaceLink: string | undefined;
-}> = ({ accessPoint, marketplaceLink }) => (
+  /** False where products have no deployed artifact to read sample rows from, as a Studio workspace's */
+  fromArtifact?: boolean | undefined;
+}> = ({ accessPoint, marketplaceLink, fromArtifact = true }) => (
   <section
     className="flex flex-col gap-1 rounded-sm border border-[var(--color-border-default)] p-2"
     aria-label="Access point preview"
@@ -171,14 +176,151 @@ const CubeAccessPointPreview: React.FC<{
           </tbody>
         </table>
       </div>
-    ) : (
+    ) : fromArtifact ? (
       <span className="text-base text-[var(--color-text-muted)]">
         No sample rows in the deployed artifact
       </span>
-    )}
+    ) : null}
   </section>
 );
 
+/** A product's access points, by group, each picked or ticked to add */
+const CubeAccessPointList = observer(
+  (props: { tab: CubeDataProductTabState }) => {
+    const { tab } = props;
+    if (!tab.description) {
+      return null;
+    }
+    return (
+      <ul
+        className={`max-h-56 overflow-auto ${CUBE_PICKER_LIST_CLASS}`}
+        aria-label="Access points"
+      >
+        {tab.description.groups.map((group) => (
+          <li key={group.id}>
+            <div className="flex items-center gap-2 px-2 pt-1 text-sm text-[var(--color-text-secondary)]">
+              <span className="min-w-0 flex-1 truncate">
+                {group.title ?? group.id}
+              </span>
+              <CubeAccessPointGroupBadge tab={tab} groupId={group.id} />
+            </div>
+            <ul aria-label={`Access points of ${group.title ?? group.id}`}>
+              {group.accessPoints.map((point) => (
+                <CubePickerListItem
+                  key={point.id}
+                  picked={tab.isAccessPointPicked(group.id, point.id)}
+                  disabled={!point.isPickable}
+                  title={point.disabledReason ?? point.description}
+                  adds={true}
+                  onPick={() => tab.selectAccessPoint(group.id, point.id)}
+                  onToggle={() => tab.toggleAccessPoint(group.id, point.id)}
+                  toggleLabel={point.title ?? point.id}
+                >
+                  <span className="min-w-0 flex-1 truncate">
+                    {point.title ?? point.id}
+                  </span>
+                  <span className="shrink-0 text-sm text-[var(--color-text-muted)]">
+                    {point.isPickable
+                      ? `${point.schema?.columns.length ?? 0} columns`
+                      : point.disabledReason}
+                  </span>
+                </CubePickerListItem>
+              ))}
+            </ul>
+          </li>
+        ))}
+      </ul>
+    );
+  },
+);
+
+/**
+ * The Data Product tab on a host reading one project's data products
+ * (Studio): the project's products by name, each path muted beside it, then
+ * a product's access points; the runtime its runs use is named, not picked
+ */
+const CubeProjectDataProductTab = observer(
+  (props: { tab: CubeDataProductTabState }) => {
+    const { tab } = props;
+    const candidates = tab.candidates;
+    return (
+      <div className="flex flex-col gap-2">
+        <span
+          className="text-sm text-[var(--color-text-muted)]"
+          aria-label="Runtime"
+        >
+          {tab.projectRuntime
+            ? CUBE_PROJECT_SOURCE_LABEL.RUNS_ON(tab.projectRuntime.label)
+            : tab.isReadingProjectRuntime
+              ? CUBE_PROJECT_SOURCE_LABEL.READING_RUNTIME
+              : ''}
+        </span>
+        {tab.projectRuntimeError !== undefined && (
+          <CubeDataProductTabAlert error={tab.projectRuntimeError} />
+        )}
+        {tab.isListing && (
+          <div className="text-base text-[var(--color-text-secondary)]">
+            listing data products
+          </div>
+        )}
+        {tab.listError !== undefined && (
+          <CubeDataProductTabAlert error={tab.listError}>
+            <div>
+              <CubeButton onClick={() => tab.retryListing()}>Retry</CubeButton>
+            </div>
+          </CubeDataProductTabAlert>
+        )}
+        {candidates && (
+          <ul
+            className={`max-h-40 overflow-auto ${CUBE_PICKER_LIST_CLASS}`}
+            aria-label="Data products"
+          >
+            {candidates.map((candidate) => (
+              <CubePickerListItem
+                key={candidate.dataProductPath}
+                picked={tab.candidate === candidate}
+                title={candidate.description ?? candidate.dataProductPath}
+                onPick={() => tab.selectCandidate(candidate)}
+              >
+                <span className="shrink-0">{candidate.title}</span>
+                <span className="min-w-0 flex-1 truncate text-sm text-[var(--color-text-muted)]">
+                  {candidate.dataProductPath}
+                </span>
+              </CubePickerListItem>
+            ))}
+          </ul>
+        )}
+        {candidates?.length === 0 && (
+          <span className="text-sm text-[var(--color-text-muted)]">
+            {CUBE_PROJECT_SOURCE_LABEL.NO_DATA_PRODUCTS}
+          </span>
+        )}
+        {tab.isDescribing && (
+          <div className="text-base text-[var(--color-text-secondary)]">
+            loading access points
+          </div>
+        )}
+        <CubeAccessPointList tab={tab} />
+        {tab.accessPoint?.isPickable === true && (
+          <CubeAccessPointPreview
+            accessPoint={tab.accessPoint}
+            marketplaceLink={undefined}
+            fromArtifact={false}
+          />
+        )}
+        {tab.isAdding && (
+          <div className="text-base text-[var(--color-text-secondary)]">
+            {CUBE_PENDING_LABEL.RESOLVING_SOURCE}
+          </div>
+        )}
+        {tab.error !== undefined && (
+          <CubeDataProductTabAlert error={tab.error} />
+        )}
+      </div>
+    );
+  },
+);
+
 /**
  * The source dialog's Data Product tab (PLAN §6.8), as Data Cube's selection
  * goes: the mode, a deployed data product, one of its access points, and the
@@ -189,6 +331,11 @@ export const CubeDataProductTab = observer(
     const { tab } = props;
     const warehouseId = useId();
     const project = tab.fixedProject;
+    // a host reading one project's data products, as Studio, lists them
+    // alone: no class, search or warehouse to pick, its runtime named instead
+    if (isCubeProjectHost(tab.editorState.host)) {
+      return <CubeProjectDataProductTab tab={tab} />;
+    }
     return (
       <div className="flex flex-col gap-2">
         <CubePickerStep
@@ -259,32 +406,27 @@ export const CubeDataProductTab = observer(
           </CubeDataProductTabAlert>
         )}
         <ul
-          className="max-h-40 overflow-auto rounded-sm border border-[var(--color-border-subtle)]"
+          className={`max-h-40 overflow-auto ${CUBE_PICKER_LIST_CLASS}`}
           aria-label="Data products"
         >
           {tab.shownCandidates.map((candidate) => {
             const isPicked = tab.candidate === candidate;
             const reason = tab.getCandidateDisabledReason(candidate);
             return (
-              <li key={`${candidate.id}/${candidate.deploymentId}`}>
-                <button
-                  type="button"
-                  className={clsx(LIST_ITEM_CLASS, {
-                    'bg-[var(--color-bg-selected)]': isPicked,
-                  })}
-                  aria-pressed={isPicked}
-                  disabled={reason !== undefined}
-                  title={reason ?? candidate.description}
-                  onClick={() => tab.selectCandidate(candidate)}
-                >
-                  <span className="min-w-0 flex-1 truncate">
-                    {candidate.title}
-                  </span>
-                  <span className="shrink-0 text-sm text-[var(--color-text-muted)]">
-                    {reason ?? `${candidate.id} · ${candidate.versionId}`}
-                  </span>
-                </button>
-              </li>
+              <CubePickerListItem
+                key={`${candidate.id}/${candidate.deploymentId}`}
+                picked={isPicked}
+                disabled={reason !== undefined}
+                title={reason ?? candidate.description}
+                onPick={() => tab.selectCandidate(candidate)}
+              >
+                <span className="min-w-0 flex-1 truncate">
+                  {candidate.title}
+                </span>
+                <span className="shrink-0 text-sm text-[var(--color-text-muted)]">
+                  {reason ?? `${candidate.id} · ${candidate.versionId}`}
+                </span>
+              </CubePickerListItem>
             );
           })}
         </ul>
@@ -309,55 +451,7 @@ export const CubeDataProductTab = observer(
             loading access points
           </div>
         )}
-        {tab.description && (
-          <ul
-            className="max-h-56 overflow-auto rounded-sm border border-[var(--color-border-subtle)]"
-            aria-label="Access points"
-          >
-            {tab.description.groups.map((group) => (
-              <li key={group.id}>
-                <div className="flex items-center gap-2 px-2 pt-1 text-sm text-[var(--color-text-secondary)]">
-                  <span className="min-w-0 flex-1 truncate">
-                    {group.title ?? group.id}
-                  </span>
-                  <CubeAccessPointGroupBadge tab={tab} groupId={group.id} />
-                </div>
-                <ul aria-label={`Access points of ${group.title ?? group.id}`}>
-                  {group.accessPoints.map((point) => {
-                    const isPicked =
-                      tab.accessPointKey?.group === group.id &&
-                      tab.accessPointKey.id === point.id;
-                    return (
-                      <li key={point.id}>
-                        <button
-                          type="button"
-                          className={clsx(LIST_ITEM_CLASS, {
-                            'bg-[var(--color-bg-selected)]': isPicked,
-                          })}
-                          aria-pressed={isPicked}
-                          disabled={!point.isPickable}
-                          title={point.disabledReason ?? point.description}
-                          onClick={() =>
-                            tab.selectAccessPoint(group.id, point.id)
-                          }
-                        >
-                          <span className="min-w-0 flex-1 truncate">
-                            {point.title ?? point.id}
-                          </span>
-                          <span className="shrink-0 text-sm text-[var(--color-text-muted)]">
-                            {point.isPickable
-                              ? `${point.schema?.columns.length ?? 0} columns`
-                              : point.disabledReason}
-                          </span>
-                        </button>
-                      </li>
-                    );
-                  })}
-                </ul>
-              </li>
-            ))}
-          </ul>
-        )}
+        <CubeAccessPointList tab={tab} />
         {tab.accessPoint?.isPickable === true && (
           <CubeAccessPointPreview
             accessPoint={tab.accessPoint}

package/src/components/source-picker/CubeDirectConnectionTab.tsx

@@ -18,6 +18,7 @@ import { clsx } from '@finos/legend-art';
 import { flowResult } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { useId } from 'react';
+import { CubeTablePreview } from './CubeTablePreview.js';
 import {
   CUBE_CSV_HELP_TEXT,
   CUBE_DIRECT_HELP_TEXT,
@@ -34,6 +35,10 @@ import {
   type CubeDirectConnectionTabState,
   isExploredTableSelectable,
 } from '../../stores/source-picker/CubeDirectConnectionTabState.js';
+import {
+  CUBE_PICKER_LIST_CLASS,
+  CubePickerListItem,
+} from './CubePickerListItem.js';
 import { CubeButton } from '../CubeButton.js';
 import { CubePickerStep } from './CubePickerStep.js';
 
@@ -271,46 +276,53 @@ export const CubeDirectConnectionTab = observer(
               onChange={(event) => tab.setTableSearch(event.target.value)}
             />
             <ul
-              className="h-56 overflow-auto rounded-sm border border-[var(--color-border-subtle)]"
+              className={`h-56 overflow-auto ${CUBE_PICKER_LIST_CLASS}`}
               aria-label="Tables"
             >
               {tab.tables.map((table) => {
                 const selectable = isExploredTableSelectable(table);
-                const isPicked = tab.tableName === table.storedName;
+                const isPicked = tab.tableNames.includes(table.storedName);
                 const hidden = getHiddenColumnsLabel(table.hiddenColumnCount);
                 return (
-                  <li key={table.storedName}>
-                    <button
-                      type="button"
-                      className={clsx(
-                        'flex w-full items-center gap-2 px-2 py-1 text-left text-base enabled:hover:bg-[var(--color-bg-hover)] disabled:cursor-not-allowed disabled:text-[var(--color-text-disabled)]',
-                        { 'bg-[var(--color-bg-selected)]': isPicked },
-                      )}
-                      aria-pressed={isPicked}
-                      disabled={!selectable}
-                      onClick={() => tab.selectTable(table.storedName)}
-                    >
-                      <span className="min-w-0 flex-1 truncate">
-                        {table.name}
-                      </span>
-                      {table.flags.map((flag) => (
-                        <span
-                          key={flag}
-                          className="rounded-sm bg-[var(--color-status-warn-bg)] px-1 text-sm text-[var(--color-status-warn)]"
-                          title={CUBE_TABLE_FLAG_LABELS[flag].description}
-                        >
-                          {CUBE_TABLE_FLAG_LABELS[flag].label}
-                        </span>
-                      ))}
-                      <span className="shrink-0 text-sm text-[var(--color-text-muted)]">
-                        {table.columnCount} columns
-                        {hidden !== undefined && `, ${hidden}`}
+                  <CubePickerListItem
+                    key={table.storedName}
+                    picked={isPicked}
+                    disabled={!selectable}
+                    adds={true}
+                    onPick={() => tab.selectTable(table.storedName)}
+                    onToggle={() => tab.toggleTable(table.storedName)}
+                    toggleLabel={table.name}
+                  >
+                    <span className="min-w-0 flex-1 truncate">
+                      {table.name}
+                    </span>
+                    {table.flags.map((flag) => (
+                      <span
+                        key={flag}
+                        className="rounded-sm bg-[var(--color-status-warn-bg)] px-1 text-sm text-[var(--color-status-warn)]"
+                        title={CUBE_TABLE_FLAG_LABELS[flag].description}
+                      >
+                        {CUBE_TABLE_FLAG_LABELS[flag].label}
                       </span>
-                    </button>
-                  </li>
+                    ))}
+                    <span className="shrink-0 text-sm text-[var(--color-text-muted)]">
+                      {table.columnCount} columns
+                      {hidden !== undefined && `, ${hidden}`}
+                    </span>
+                  </CubePickerListItem>
                 );
               })}
             </ul>
+            {tab.previewTableName !== undefined && (
+              <CubeTablePreview
+                name={
+                  tab.tables.find(
+                    (table) => table.storedName === tab.previewTableName,
+                  )?.name ?? tab.previewTableName
+                }
+                columns={tab.previewedColumns}
+              />
+            )}
           </div>
         )}
         {tab.isResolving && (