(core) updates from grist-core

2026-03-02 04:09:24 +00:00 · 2023-09-11 10:00:39 -04:00
parent 525613216c 585cf02f6c
commit 18f7e255df
27 changed files with 1151 additions and 288 deletions
--- a/app/client/ui/AddNewButton.ts
+++ b/app/client/ui/AddNewButton.ts
@@ -5,14 +5,27 @@ import {dom, DomElementArg, Observable, styled} from "grainjs";

 const t = makeT(`AddNewButton`);

-export function addNewButton(isOpen: Observable<boolean> | boolean = true, ...args: DomElementArg[]) {
+export function addNewButton(
+  {
+    isOpen,
+    isDisabled = false,
+  }: {
+    isOpen: Observable<boolean> | boolean,
+    isDisabled?: boolean
+  },
+  ...args: DomElementArg[]
+) {
  return cssAddNewButton(
    cssAddNewButton.cls('-open', isOpen),
+    cssAddNewButton.cls('-disabled', isDisabled),
    // Setting spacing as flex items allows them to shrink faster when there isn't enough space.
    cssLeftMargin(),
    cssAddText(t("Add New")),
    dom('div', {style: 'flex: 1 1 16px'}),
-    cssPlusButton(cssPlusIcon('Plus')),
+    cssPlusButton(
+      cssPlusButton.cls('-disabled', isDisabled),
+      cssPlusIcon('Plus')
+    ),
    dom('div', {style: 'flex: 0 1 16px'}),
    ...args,
  );
@@ -47,6 +60,11 @@ export const cssAddNewButton = styled('div', `
    background-color: ${theme.controlPrimaryHoverBg};
    --circle-color: ${theme.addNewCircleHoverBg};
  }
+
+  &-disabled, &-disabled:hover {
+    color: ${theme.controlDisabledFg};
+    background-color: ${theme.controlDisabledBg}
+  }
 `);
 const cssLeftMargin = styled('div', `
  flex: 0 1 24px;
@@ -72,6 +90,9 @@ const cssPlusButton = styled('div', `
  border-radius: 14px;
  background-color: var(--circle-color);
  text-align: center;
+  &-disabled {
+    background-color: ${theme.controlDisabledBg};
+  }
 `);
 const cssPlusIcon = styled(icon, `
  background-color: ${theme.addNewCircleFg};
--- a/app/client/ui/HomeIntro.ts
+++ b/app/client/ui/HomeIntro.ts
@@ -1,5 +1,5 @@
 import {makeT} from 'app/client/lib/localization';
-import {getLoginOrSignupUrl, urlState} from 'app/client/models/gristUrlState';
+import {getLoginOrSignupUrl, getLoginUrl, getSignupUrl, urlState} from 'app/client/models/gristUrlState';
 import {HomeModel} from 'app/client/models/HomeModel';
 import {productPill} from 'app/client/ui/AppHeader';
 import * as css from 'app/client/ui/DocMenuCss';
@@ -12,6 +12,7 @@ import {cssLink} from 'app/client/ui2018/links';
 import {commonUrls, isFeatureEnabled} from 'app/common/gristUrls';
 import {FullUser} from 'app/common/LoginSessionAPI';
 import * as roles from 'app/common/roles';
+import {getGristConfig} from 'app/common/urlUtils';
 import {Computed, dom, DomContents, styled} from 'grainjs';

 const t = makeT('HomeIntro');
@@ -112,10 +113,36 @@ function makePersonalIntro(homeModel: HomeModel, user: FullUser) {
  ];
 }

+function makeAnonIntroWithoutPlayground(homeModel: HomeModel) {
+    return [
+      (!isFeatureEnabled('helpCenter') ? null : cssIntroLine(t("Visit our {{link}} to learn more about Grist.", {
+        link: helpCenterLink()
+      }), testId('welcome-text-no-playground'))),
+      cssIntroLine(t("To use Grist, please either sign up or sign in.")),
+      cssBtnGroup(
+        cssBtn(t("Sign up"), cssButton.cls('-primary'), testId('intro-sign-up'),
+          dom.on('click', () => location.href = getSignupUrl())
+        ),
+        cssBtn(t("Sign in"), testId('intro-sign-in'),
+          dom.on('click', () => location.href = getLoginUrl())
+        )
+      )
+    ];
+}
+
 function makeAnonIntro(homeModel: HomeModel) {
+  const welcomeToGrist = css.docListHeader(t("Welcome to Grist!"), testId('welcome-title'));
+
+  if (!getGristConfig().enableAnonPlayground) {
+    return [
+      welcomeToGrist,
+      ...makeAnonIntroWithoutPlayground(homeModel)
+    ];
+  }
+
  const signUp = cssLink({href: getLoginOrSignupUrl()}, t("Sign up"));
  return [
-    css.docListHeader(t("Welcome to Grist!"), testId('welcome-title')),
+    welcomeToGrist,
    cssIntroLine(t("Get started by exploring templates, or creating your first Grist document.")),
    cssIntroLine(t("{{signUp}} to save your work. ", {signUp}),
      (!isFeatureEnabled('helpCenter') ? null : t("Visit our {{link}} to learn more.", { link: helpCenterLink() })),
--- a/app/client/ui/HomeLeftPane.ts
+++ b/app/client/ui/HomeLeftPane.ts
@@ -30,16 +30,17 @@ export function createHomeLeftPane(leftPanelOpen: Observable<boolean>, home: Hom
  const creating = observable<boolean>(false);
  const renaming = observable<Workspace|null>(null);
  const isAnonymous = !home.app.currentValidUser;
+  const canCreate = !isAnonymous || getGristConfig().enableAnonPlayground;

  return cssContent(
    dom.autoDispose(creating),
    dom.autoDispose(renaming),
-    addNewButton(leftPanelOpen,
-      menu(() => addMenu(home, creating), {
+    addNewButton({ isOpen: leftPanelOpen, isDisabled: !canCreate },
+      canCreate ? menu(() => addMenu(home, creating), {
        placement: 'bottom-start',
        // "Add New" menu should have the same width as the "Add New" button that opens it.
        stretchToSelector: `.${cssAddNewButton.className}`
-      }),
+      }) : null,
      dom.cls('behavioral-prompt-add-new'),
      testId('dm-add-new'),
    ),
--- a/app/client/ui/MakeCopyMenu.ts
+++ b/app/client/ui/MakeCopyMenu.ts
@@ -3,6 +3,7 @@
 * the sample documents (those in the Support user's Examples & Templates workspace).
 */

+import {hooks} from 'app/client/Hooks';
 import {makeT} from 'app/client/lib/localization';
 import {AppModel, reportError} from 'app/client/models/AppModel';
 import {DocPageModel} from 'app/client/models/DocPageModel';
@@ -310,14 +311,14 @@ export function downloadDocModal(doc: Document, pageModel: DocPageModel) {
      ),
      cssModalButtons(
        dom.domComputed(use =>
-          bigPrimaryButtonLink(`Download`, {
+          bigPrimaryButtonLink(`Download`, hooks.maybeModifyLinkAttrs({
              href: pageModel.appModel.api.getDocAPI(doc.id).getDownloadUrl({
                template: use(selected) === "template",
                removeHistory: use(selected) === "nohistory" || use(selected) === "template",
              }),
              target: '_blank',
              download: ''
-            },
+            }),
            dom.on('click', () => {
              ctl.close();
            }),
--- a/app/client/ui/RightPanel.ts
+++ b/app/client/ui/RightPanel.ts
@@ -16,14 +16,15 @@

 import * as commands from 'app/client/components/commands';
 import {GristDoc, IExtraTool, TabContent} from 'app/client/components/GristDoc';
+import {EmptyFilterState} from "app/client/components/LinkingState";
 import {RefSelect} from 'app/client/components/RefSelect';
 import ViewConfigTab from 'app/client/components/ViewConfigTab';
 import {domAsync} from 'app/client/lib/domAsync';
 import * as imports from 'app/client/lib/imports';
 import {makeT} from 'app/client/lib/localization';
-import {createSessionObs} from 'app/client/lib/sessionObs';
+import {createSessionObs, isBoolean, SessionObs} from 'app/client/lib/sessionObs';
 import {reportError} from 'app/client/models/AppModel';
-import {ViewSectionRec} from 'app/client/models/DocModel';
+import {ColumnRec, ViewSectionRec} from 'app/client/models/DocModel';
 import {CustomSectionConfig} from 'app/client/ui/CustomSectionConfig';
 import {buildDescriptionConfig} from 'app/client/ui/DescriptionConfig';
 import {BuildEditorOptions} from 'app/client/ui/FieldConfig';
@@ -41,6 +42,8 @@ import {IconName} from 'app/client/ui2018/IconList';
 import {icon} from 'app/client/ui2018/icons';
 import {select} from 'app/client/ui2018/menus';
 import {FieldBuilder} from 'app/client/widgets/FieldBuilder';
+import {isFullReferencingType} from "app/common/gristTypes";
+import {not} from 'app/common/gutil';
 import {StringUnion} from 'app/common/StringUnion';
 import {IWidgetType} from 'app/common/widgetTypes';
 import {
@@ -60,6 +63,10 @@ import {
 } from 'grainjs';
 import * as ko from 'knockout';

+// some unicode characters
+const BLACK_CIRCLE = '\u2022';
+const ELEMENTOF = '\u2208'; //220A for small elementof
+
 const t = makeT('RightPanel');

 // Represents a top tab of the right side-pane.
@@ -109,6 +116,10 @@ export class RightPanel extends Disposable {
    return sec.getRowId() ? sec : null;
  });

+  // Which subtab is open for configuring page widget.
+  private _advLinkInfoCollapsed = createSessionObs(this, "rightPageAdvancedLinkInfoCollapsed",
+                                                   true, isBoolean);
+
  constructor(private _gristDoc: GristDoc, private _isOpen: Observable<boolean>) {
    super();
    this._extraTool = _gristDoc.rightPanelTool;
@@ -484,6 +495,189 @@ export class RightPanel extends Disposable {
    return dom.maybe(viewConfigTab, (vct) => vct.buildSortFilterDom());
  }

+  private _buildLinkInfo(activeSection: ViewSectionRec, ...domArgs: DomElementArg[]) {
+    //NOTE!: linkingState.filterState might transiently be EmptyFilterState while things load
+    //Each case (filters-table, id cols, etc) needs to be able to handle having lfilter.filterLabels = {}
+    const tgtSec = activeSection;
+    return dom.domComputed((use) => {
+
+      const srcSec = use(tgtSec.linkSrcSection); //might be the empty section
+      const srcCol = use(tgtSec.linkSrcCol);
+      const srcColId = use(use(tgtSec.linkSrcCol).colId); // if srcCol is the empty col, colId will be undefined
+      //const tgtColId = use(use(tgtSec.linkTargetCol).colId);
+      const srcTable = use(srcSec.table);
+      const tgtTable = use(tgtSec.table);
+
+      const lstate = use(tgtSec.linkingState);
+      if(lstate == null) { return null; }
+
+      // if not filter-linking, this will be incorrect, but we don't use it then
+      const lfilter = lstate.filterState ? use(lstate.filterState): EmptyFilterState;
+
+      //If it's null then no cursor-link is set, but in that case we won't show the string anyway.
+      const cursorPos = lstate.cursorPos ? use(lstate.cursorPos) : 0;
+      const linkedCursorStr =  cursorPos ? `${use(tgtTable.tableId)}[${cursorPos}]` : '';
+
+      // Make descriptor for the link's source like: "TableName . ColName" or "${SIGMA} TableName", etc
+      const fromTableDom = [
+          dom.maybe((use2) => use2(srcTable.summarySourceTable), () => cssLinkInfoIcon("Pivot")),
+          use(srcSec.titleDef) + (srcColId ? ` ${BLACK_CIRCLE} ${use(srcCol.label)}` : ''),
+          dom.style("white-space", "normal"), //Allow table name to wrap, reduces how often scrollbar needed
+        ];
+
+      //Count filters for proper pluralization
+      const hasId = lfilter.filterLabels?.hasOwnProperty("id");
+      const numFilters = Object.keys(lfilter.filterLabels).length - (hasId ? 1 : 0);
+
+      // ================== Link-info Helpers
+
+      //For each col-filter in lfilters, makes a row showing "${icon} colName = [filterVals]"
+      //FilterVals is in a box to look like a grid cell
+      const makeFiltersTable = (): DomContents => {
+        return cssLinkInfoBody(
+          dom.style("width", "100%"), //width 100 keeps table from growing outside bounds of flex parent if overfull
+          dom("table",
+            dom.style("margin-left", "8px"),
+            Object.keys(lfilter.filterLabels).map( (colId) => {
+              const vals = lfilter.filterLabels[colId];
+              let operationSymbol = "=";
+              //if [filter (reflist) <- ref], op="intersects", need to convey "list has value". symbol =":"
+              //if [filter (ref) <- reflist], op="in", vals.length>1, need to convey "ref in list"
+              //Sometimes operation will be 'empty', but in that case "=" still works fine, i.e. "list = []"
+              if (lfilter.operations[colId] == "intersects") { operationSymbol = ":"; }
+              else if (vals.length > 1) { operationSymbol = ELEMENTOF; }
+
+              if (colId == "id") {
+                return dom("div", `ERROR: ID FILTER: ${colId}[${vals}]`);
+              } else {
+                return dom("tr",
+                  dom("td", cssLinkInfoIcon("Filter"),
+                    `${colId}`),
+                  dom("td", operationSymbol, dom.style('padding', '0 2px 0 2px')),
+                  dom("td", cssLinkInfoValuesBox(
+                    isFullReferencingType(lfilter.colTypes[colId]) ?
+                      cssLinkInfoIcon("FieldReference"): null,
+                    `${vals.join(', ')}`)),
+                );
+            } }), //end of keys(filterLabels).map
+        ));
+      };
+
+      //Given a list of filterLabels, show them all in a box, as if a grid cell
+      //Shows a "Reference" icon in the left side, since this should only be used for reflinks and cursor links
+      const makeValuesBox = (valueLabels: string[]): DomContents => {
+        return cssLinkInfoBody((
+            cssLinkInfoValuesBox(
+            cssLinkInfoIcon("FieldReference"),
+            valueLabels.join(', '), ) //TODO: join labels like "Entries[1], Entries[2]" to "Entries[[1,2]]"
+        ));
+      };
+
+      const linkType = lstate.linkTypeDescription();
+
+      return cssLinkInfoPanel(() => { switch (linkType) {
+          case "Filter:Summary-Group":
+          case "Filter:Col->Col":
+          case "Filter:Row->Col":
+          case "Summary":
+            return [
+              dom("div", `Link applies filter${numFilters > 1 ? "s" : ""}:`),
+              makeFiltersTable(),
+              dom("div", `Linked from `, fromTableDom),
+            ];
+          case "Show-Referenced-Records": {
+            //filterLabels might be {} if EmptyFilterState, so filterLabels["id"] might be undefined
+            const displayValues = lfilter.filterLabels["id"] ?? [];
+            return [
+              dom("div", `Link shows record${displayValues.length > 1 ? "s" : ""}:`),
+              makeValuesBox(displayValues),
+              dom("div", `from `, fromTableDom),
+            ];
+          }
+          case "Cursor:Same-Table":
+          case "Cursor:Reference":
+            return [
+              dom("div", `Link sets cursor to:`),
+              makeValuesBox([linkedCursorStr]),
+              dom("div", `from `, fromTableDom),
+            ];
+          case "Error:Invalid":
+          default:
+            return dom("div", `Error: Couldn't identify link state`);
+        } },
+        ...domArgs
+      ); // End of cssLinkInfoPanel
+    });
+}
+
+  private _buildLinkInfoAdvanced(activeSection: ViewSectionRec) {
+    return  dom.domComputed((use): DomContents => {
+      //TODO: if this just outputs a string, this could really be in LinkingState as a toDebugStr function
+      //      but the fact that it's all observables makes that trickier to do correctly, so let's leave it here
+      const srcSec = use(activeSection.linkSrcSection); //might be the empty section
+      const tgtSec = activeSection;
+      const srcCol = use(activeSection.linkSrcCol); // might be the empty column
+      const tgtCol = use(activeSection.linkTargetCol);
+      // columns might be the empty column
+      // to check nullness, use `.getRowId() == 0` or `use(srcCol.colId) == undefined`
+
+      const secToStr = (sec: ViewSectionRec) => (!sec || !sec.getRowId()) ?
+          'null' :
+          `#${use(sec.id)} "${use(sec.titleDef)}", (table "${use(use(sec.table).tableId)}")`;
+      const colToStr = (col: ColumnRec) => (!col || !col.getRowId()) ?
+          'null' :
+          `#${use(col.id)} "${use(col.colId)}", type "${use(col.type)}")`;
+
+      // linkingState can be null if the constructor throws, so for debugging we want to show link info
+      // if either the viewSection or the linkingState claim there's a link
+      const hasLink = use(srcSec.id) != undefined || use(tgtSec.linkingState) != null;
+      const lstate = use(tgtSec.linkingState);
+      const lfilter = lstate?.filterState ? use(lstate.filterState) : undefined;
+
+      const cursorPosStr = lstate?.cursorPos ? `${tgtSec.tableId()}[${use(lstate.cursorPos)}]` : "N/A";
+
+      //Main link info as a big string, will be in a <pre></pre> block
+      let preString = "No Incoming Link";
+      if (hasLink) {
+        preString = [
+          `From Sec: ${secToStr(srcSec)}`,
+          `To   Sec: ${secToStr(tgtSec)}`,
+          '',
+          `From Col: ${colToStr(srcCol)}`,
+          `To   Col: ${colToStr(tgtCol)}`,
+          '===========================',
+          // Show linkstate
+          lstate == null ? "LinkState: null" : [
+              `Link Type: ${use(lstate.linkTypeDescription)}`,
+              ``,
+
+              "Cursor Pos: " + cursorPosStr,
+              !lfilter ? "Filter State: null" :
+                ["Filter State:", ...(Object.keys(lfilter).map(key =>
+                  `- ${key}: ${JSON.stringify((lfilter as any)[key])}`))].join('\n'),
+            ].join('\n')
+        ].join('\n');
+      }
+
+      const collapsed: SessionObs<Boolean> = this._advLinkInfoCollapsed;
+      return hasLink ? [
+          cssRow(
+            icon('Dropdown', dom.style('transform', (use2) => use2(collapsed) ? 'rotate(-90deg)' : '')),
+            "Advanced Link info",
+            dom.style('font-size', `${vars.smallFontSize}`),
+            dom.style('text-transform', 'uppercase'),
+            dom.style('cursor', 'pointer'),
+            dom.on('click', () => collapsed.set(!collapsed.get())),
+          ),
+          dom.maybe(not(collapsed), () => cssRow(cssLinkInfoPre(preString)))
+      ] : null;
+    });
+  }
+
+
+
+
+
  private _buildPageDataConfig(owner: MultiHolder, activeSection: ViewSectionRec) {
    const viewConfigTab = this._createViewConfigTab(owner);
    const viewModel = this._gristDoc.viewModel;
@@ -570,15 +764,22 @@ export class RightPanel extends Disposable {
        ),
      ]),

+      dom.maybe(activeSection.linkingState, () => cssRow(this._buildLinkInfo(activeSection))),
+
      domComputed((use) => {
        const selectorFor = use(use(activeSection.linkedSections).getObservable());
        // TODO: sections should be listed following the order of appearance in the view layout (ie:
        // left/right - top/bottom);
        return selectorFor.length ? [
          cssLabel(t("SELECTOR FOR"), testId('selector-for')),
-          cssRow(cssList(selectorFor.map((sec) => this._buildSectionItem(sec))))
+          cssRow(cssList(selectorFor.map((sec) => [
+            this._buildSectionItem(sec)
+          ]))),
        ] : null;
      }),
+
+      //Advanced link info is a little too JSON-ish for general use. But it's very useful for debugging
+      this._buildLinkInfoAdvanced(activeSection),
    ];
  }

@@ -597,6 +798,7 @@ export class RightPanel extends Disposable {
  private _buildSectionItem(sec: ViewSectionRec) {
    return cssListItem(
      dom.text(sec.titleDef),
+      this._buildLinkInfo(sec, dom.style("border", "none")),
      testId('selector-for-entry')
    );
  }
@@ -865,3 +1067,65 @@ const cssTextInput = styled(textInput, `
 const cssSection = styled('div', `
  position: relative;
 `);
+
+
+//============ LinkInfo CSS ============
+
+//LinkInfoPanel is a flex-column
+//`LinkInfoPanel > table` is the table where we show linked filters, if there are any
+const cssLinkInfoPanel = styled('div', `
+  width: 100%;
+
+  display: flex;
+  flex-flow: column;
+  align-items: start;
+  text-align: left;
+
+  font-family: ${vars.fontFamily};
+
+  border: 1px solid ${theme.pagePanelsBorder};
+  border-radius: 4px;
+
+  padding: 6px;
+
+  white-space: nowrap;
+  overflow-x: auto;
+
+  & table {
+      border-spacing: 2px;
+      border-collapse: separate;
+  }
+`);
+
+// Center table / values box inside LinkInfoPanel
+const cssLinkInfoBody= styled('div', `
+  margin: 2px 0 2px 0;
+  align-self: center;
+`);
+
+// Intended to imitate style of a grid cell
+// white-space: normal allows multiple values to wrap
+// min-height: 22px matches real field size, +2 for the borders
+const cssLinkInfoValuesBox = styled('div', `
+  border: 1px solid ${'#CCC'};
+  padding: 3px 3px 0px 3px;
+  min-width: 60px;
+  min-height: 24px;
+
+  white-space: normal;
+`);
+
+//If inline with text, icons look better shifted up slightly
+//since icons are position:relative, bottom:1 should shift it without affecting layout
+const cssLinkInfoIcon = styled(icon, `
+  bottom: 1px;
+  margin-right: 3px;
+  background-color: ${theme.controlSecondaryFg};
+`);
+
+// ============== styles for _buildLinkInfoAdvanced
+const cssLinkInfoPre = styled("pre", `
+  padding: 6px;
+  font-size: ${vars.smallFontSize};
+  line-height: 1.2;
+`);
--- a/app/client/ui/ShareMenu.ts
+++ b/app/client/ui/ShareMenu.ts
@@ -1,3 +1,4 @@
+import {hooks} from 'app/client/Hooks';
 import {loadUserManager} from 'app/client/lib/imports';
 import {AppModel, reportError} from 'app/client/models/AppModel';
 import {DocInfo, DocPageModel} from 'app/client/models/DocPageModel';
@@ -278,12 +279,12 @@ function menuExports(doc: Document, pageModel: DocPageModel) {
        menuItem(() => downloadDocModal(doc, pageModel),
        menuIcon('Download'), t("Download..."), testId('tb-share-option'))
    ),
-    menuItemLink({ href: gristDoc.getCsvLink(), target: '_blank', download: ''},
+    menuItemLink(hooks.maybeModifyLinkAttrs({ href: gristDoc.getCsvLink(), target: '_blank', download: ''}),
      menuIcon('Download'), t("Export CSV"), testId('tb-share-option')),
-    menuItemLink({
+    menuItemLink(hooks.maybeModifyLinkAttrs({
      href: pageModel.appModel.api.getDocAPI(doc.id).getDownloadXlsxUrl(),
      target: '_blank', download: ''
-    }, menuIcon('Download'), t("Export XLSX"), testId('tb-share-option')),
+    }), menuIcon('Download'), t("Export XLSX"), testId('tb-share-option')),
    (!isFeatureEnabled("sendToDrive") ? null : menuItem(() => sendToDrive(doc, pageModel),
      menuIcon('Download'), t("Send to Google Drive"), testId('tb-share-option'))),
  ];
--- a/app/client/ui/ViewLayoutMenu.ts
+++ b/app/client/ui/ViewLayoutMenu.ts
@@ -1,3 +1,4 @@
+import {hooks} from 'app/client/Hooks';
 import {makeT} from 'app/client/lib/localization';
 import {allCommands} from 'app/client/components/commands';
 import {ViewSectionRec} from 'app/client/models/DocModel';
@@ -76,9 +77,9 @@ export function makeViewLayoutMenu(viewSection: ViewSectionRec, isReadonly: bool
      )
    ),
    menuItemCmd(allCommands.printSection, t("Print widget"), testId('print-section')),
-    menuItemLink({ href: gristDoc.getCsvLink(), target: '_blank', download: ''},
+    menuItemLink(hooks.maybeModifyLinkAttrs({ href: gristDoc.getCsvLink(), target: '_blank', download: ''}),
      t("Download as CSV"), testId('download-section')),
-    menuItemLink({ href: gristDoc.getXlsxActiveViewLink(), target: '_blank', download: ''},
+    menuItemLink(hooks.maybeModifyLinkAttrs({ href: gristDoc.getXlsxActiveViewLink(), target: '_blank', download: ''}),
      t("Download as XLSX"), testId('download-section')),
    dom.maybe((use) => ['detail', 'single'].includes(use(viewSection.parentKey)), () =>
      menuItemCmd(allCommands.editLayout, t("Edit Card Layout"),
--- a/app/client/ui/selectBy.ts
+++ b/app/client/ui/selectBy.ts
@@ -42,6 +42,9 @@ interface LinkNode {
  // is the table a summary table
  isSummary: boolean;

+  // does this node involve an "Attachments" column. Can be tricky if Attachments is one of groupby cols
+  isAttachments: boolean;
+
  // For a summary table, the set of col refs of the groupby columns of the underlying table
  groupbyColumns?: Set<number>;

@@ -114,6 +117,12 @@ function isValidLink(source: LinkNode, target: LinkNode) {
    return false;
  }

+  //cannot select from attachments, even though they're implemented as reflists
+  if (source.isAttachments || target.isAttachments) {
+    return false;
+  }
+
+
  // cannot select from chart
  if (source.widgetType === 'chart') {
    return false;
@@ -230,6 +239,7 @@ function fromViewSectionRec(section: ViewSectionRec): LinkNode[] {
  const mainNode: LinkNode = {
    tableId: table.primaryTableId.peek(),
    isSummary,
+    isAttachments: isSummary && table.groupByColumns.peek().some(col => col.type.peek() == "Attachments"),
    groupbyColumns: isSummary ? table.summarySourceColRefs.peek() : undefined,
    widgetType: section.parentKey.peek(),
    ancestors,
@@ -266,6 +276,8 @@ function fromPageWidget(docModel: DocModel, pageWidget: IPageWidget): LinkNode[]
  const mainNode: LinkNode = {
    tableId: table.primaryTableId.peek(),
    isSummary,
+    isAttachments: false, // hmm, we should need a check here in case attachments col is on the main-node link
+    // (e.g.: link from summary table with Attachments in group-by) but it seems to work fine as is
    groupbyColumns,
    widgetType: pageWidget.type,
    ancestors: new Set(),
@@ -284,7 +296,7 @@ function fromColumns(table: TableRec, mainNode: LinkNode, tableExists: boolean =
    }
    const tableId = getReferencedTableId(column.type.peek());
    if (tableId) {
-      nodes.push({...mainNode, tableId, column});
+      nodes.push({...mainNode, tableId, column, isAttachments: column.type.peek() == "Attachments"});
    }
  }
  return nodes;