@journeyapps-labs/reactor-mod-data-browser 3.2.1 → 3.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@journeyapps-labs/reactor-mod-data-browser",
-  "version": "3.2.1",
+  "version": "3.4.0",
   "main": "./dist/index.js",
   "typings": "./dist/@types/index",
   "publishConfig": {
@@ -21,8 +21,8 @@
     "@journeyapps-labs/common-sdk": "^1.0.3",
     "@journeyapps-labs/common-utils": "^1.0.1",
     "@journeyapps-labs/lib-reactor-data-layer": "1.0.10",
-    "@journeyapps-labs/reactor-mod": "5.2.1",
-    "@journeyapps-labs/reactor-mod-editor": "2.1.2",
+    "@journeyapps-labs/reactor-mod": "5.3.1",
+    "@journeyapps-labs/reactor-mod-editor": "2.2.1",
     "@journeyapps/db": "^8.1.1",
     "@journeyapps/parser-schema": "^8.2.5",
     "@projectstorm/react-workspaces-core": "4.2.3",
@@ -34,7 +34,7 @@
     "uuid": "^13.0.0"
   },
   "devDependencies": {
-    "@journeyapps-labs/lib-reactor-builder": "2.0.5",
+    "@journeyapps-labs/lib-reactor-builder": "3.0.1",
     "@types/async": "^3.2.25",
     "@types/lodash": "^4.17.24",
     "@types/react": "^19.2.14",

package/src/DataBrowserModule.ts

@@ -17,6 +17,7 @@ import { SchemaModelObjectEntityDefinition } from './entities/SchemaModelObjectE
 import { EditSchemaModelAction } from './actions/schema-model/EditSchemaModelAction';
 import { TypeEngine } from './forms/TypeEngine';
 import { ViewSchemaModelAsJsonAction } from './actions/schema-model/ViewSchemaModelAsJsonAction';
+import { ViewHasManyAction } from './actions/schema-model/ViewHasManyAction';
 import { ModelJsonPanelFactory } from './panels/model-json/ModelJsonPanelFactory';
 import { SchemaModelIndexDefinition } from './entities/SchemaModelIndexDefinition';
 import { SavedQueryStore } from './stores/SavedQueryStore';
@@ -49,6 +50,7 @@ export class DataBrowserModule extends AbstractReactorModule {
     actionStore.registerAction(new CreateModelAction());
     actionStore.registerAction(new EditSchemaModelAction());
     actionStore.registerAction(new ViewSchemaModelAsJsonAction());
+    actionStore.registerAction(new ViewHasManyAction());
     actionStore.registerAction(new OpenSavedQueryAction());
     actionStore.registerAction(new RemoveSavedQueryAction());
 

package/src/actions/schema-model/ViewHasManyAction.ts

@@ -0,0 +1,114 @@
+import {
+  ActionStore,
+  ComboBoxItem,
+  ComboBoxStore2,
+  EntityAction,
+  EntityActionEvent,
+  NotificationStore,
+  NotificationType,
+  SimpleComboBoxDirective,
+  WorkspaceStore,
+  inject,
+  ioc
+} from '@journeyapps-labs/reactor-mod';
+import { Relationship } from '@journeyapps/parser-schema';
+import { DataBrowserEntities } from '../../entities';
+import { SchemaModelObject } from '../../core/SchemaModelObject';
+import { QueryPanelModel } from '../../panels/query/QueryPanelFactory';
+import { SimpleQuery } from '../../core/query/query-simple/SimpleQuery';
+import { Condition, SimpleFilter, Statement } from '../../core/query/filters';
+
+export class ViewHasManyAction extends EntityAction<SchemaModelObject> {
+  static ID = 'VIEW_HAS_MANY';
+
+  @inject(ComboBoxStore2)
+  accessor comboStore: ComboBoxStore2;
+
+  @inject(WorkspaceStore)
+  accessor workspaceStore: WorkspaceStore;
+
+  @inject(NotificationStore)
+  accessor notifications: NotificationStore;
+
+  constructor() {
+    super({
+      id: ViewHasManyAction.ID,
+      name: 'View has many',
+      icon: 'list',
+      target: DataBrowserEntities.SCHEMA_MODEL_OBJECT
+    });
+  }
+
+  async fireEvent(event: EntityActionEvent<SchemaModelObject>): Promise<any> {
+    const relationships = Object.values(event.targetEntity.definition.definition.hasMany || {});
+    if (relationships.length === 0) {
+      this.notifications.showNotification({
+        title: 'No relationships',
+        description: 'This record has no has-many relationships to view.',
+        type: NotificationType.ERROR
+      });
+      return;
+    }
+
+    const directive = await this.comboStore.show(
+      new SimpleComboBoxDirective({
+        title: 'View has many',
+        subtitle: event.targetEntity.data.display || event.targetEntity.id,
+        event: event.position,
+        items: relationships.map((relationship) => {
+          return {
+            key: relationship.foreignName || relationship.name,
+            title: relationship.foreignName || relationship.name,
+            subtitle: relationship.objectType.label || relationship.objectType.name,
+            action: async () => {}
+          } as ComboBoxItem;
+        })
+      })
+    );
+
+    const selected = directive.getSelectedItem();
+    if (!selected?.key) {
+      return;
+    }
+
+    const relationship = relationships.find((entry) => (entry.foreignName || entry.name) === selected.key);
+    if (!relationship) {
+      return;
+    }
+
+    await this.openRelationshipQuery(event.targetEntity, relationship);
+  }
+
+  private async openRelationshipQuery(parent: SchemaModelObject, relationship: Relationship) {
+    const definition = await parent.definition.connection.waitForSchemaModelDefinitionByName(
+      relationship.objectType.name
+    );
+    const variable = definition.getBelongsToIdVariableForRelationship(relationship.name);
+    if (!variable) {
+      this.notifications.showNotification({
+        title: 'Cannot open relationship',
+        description: `No belongs-to field found for ${relationship.name}.`,
+        type: NotificationType.ERROR
+      });
+      return;
+    }
+
+    variable.label = relationship.name;
+
+    const query = new SimpleQuery({
+      definition,
+      limit: 30
+    });
+
+    query.filterState.setFilter(
+      variable.name,
+      new SimpleFilter(variable, [new Statement(Condition.EQUALS, parent.id)])
+    );
+
+    this.workspaceStore.addModel(new QueryPanelModel(query));
+  }
+
+  static get() {
+    return ioc.get(ActionStore).getActionByID<ViewHasManyAction>(ViewHasManyAction.ID);
+  }
+}

package/src/core/AbstractConnection.ts

@@ -7,7 +7,7 @@ import { v4 } from 'uuid';
 import { BaseObserver } from '@journeyapps-labs/common-utils';
 import { Collection, LifecycleCollection } from '@journeyapps-labs/lib-reactor-data-layer';
 import { when } from 'mobx';
-import { observable } from 'mobx';
+import { computed, observable } from 'mobx';
 import { EntityDescription } from '@journeyapps-labs/reactor-mod';
 import { V4BackendClient, V4Index, V4Indexes } from '@journeyapps-labs/client-backend-v4';
 import { SchemaModelObject } from './SchemaModelObject';
@@ -24,18 +24,27 @@ export interface AbstractConnectionListener {
   removed: () => any;
 }
 
+export enum ConnectionOnlineState {
+  OFFLINE = 'offline',
+  LOADING = 'loading',
+  ONLINE = 'online'
+}
+
 export abstract class AbstractConnection extends BaseObserver<AbstractConnectionListener> {
   id: string;
   @observable accessor color: string;
+  @observable accessor onlineState: ConnectionOnlineState;
 
   schema_models_collection: Collection<ObjectType>;
   schema_models: LifecycleCollection<ObjectType, SchemaModelDefinition>;
   private fetch_indexes_promise: Promise<V4Indexes['models']>;
+  private initialize_online_promise: Promise<void>;
 
   constructor(public factory: AbstractConnectionFactory) {
     super();
     this.id = v4();
     this.color = getDefaultConnectionColor(this.id);
+    this.onlineState = ConnectionOnlineState.OFFLINE;
     this.schema_models_collection = new Collection();
     this.schema_models = new LifecycleCollection({
       collection: this.schema_models_collection,
@@ -88,7 +97,16 @@ export abstract class AbstractConnection extends BaseObserver<AbstractConnection
     return this.schema_models.items.find((i) => i.definition.name === name);
   }
 
+  @computed get isOnline() {
+    return this.onlineState === ConnectionOnlineState.ONLINE;
+  }
+
+  @computed get isLoadingOnline() {
+    return this.onlineState === ConnectionOnlineState.LOADING;
+  }
+
   async waitForSchemaModelDefinitionByName(name: string) {
+    await this.ensureOnline();
     await when(() => !!this.getSchemaModelDefinitionByName(name));
     return this.getSchemaModelDefinitionByName(name);
   }
@@ -107,10 +125,35 @@ export abstract class AbstractConnection extends BaseObserver<AbstractConnection
     });
   }
 
-  async init() {
+  async init() {}
+
+  protected async connectOnline() {
     await this.reload();
   }
 
+  async ensureOnline() {
+    if (this.isOnline) {
+      return;
+    }
+    if (!this.initialize_online_promise) {
+      this.initialize_online_promise = this.initializeOnline();
+    }
+    await this.initialize_online_promise;
+  }
+
+  private async initializeOnline() {
+    this.onlineState = ConnectionOnlineState.LOADING;
+    try {
+      await this.connectOnline();
+      this.onlineState = ConnectionOnlineState.ONLINE;
+    } finally {
+      if (this.onlineState === ConnectionOnlineState.LOADING) {
+        this.onlineState = ConnectionOnlineState.OFFLINE;
+      }
+      this.initialize_online_promise = null;
+    }
+  }
+
   protected async getSchemaModelDefinitions() {
     const schema = await this.getSchema();
     return _.map(schema.objects, (o) => {

package/src/core/SchemaModelDefinition.ts

@@ -1,6 +1,7 @@
 import { AbstractConnection } from './AbstractConnection';
 import { ObjectType } from '@journeyapps/parser-schema';
-import { Collection, JourneyAPIAdapter, Query } from '@journeyapps/db';
+import { Collection, JourneyAPIAdapter, Query, Variable } from '@journeyapps/db';
+import * as _ from 'lodash';
 import { SchemaModelObject } from './SchemaModelObject';
 import { LifecycleModel } from '@journeyapps-labs/lib-reactor-data-layer';
 import { BaseObserver } from '@journeyapps-labs/common-utils';
@@ -10,6 +11,7 @@ import { V4Index } from '@journeyapps-labs/client-backend-v4';
 import { action, observable } from 'mobx';
 import { IndexModel } from './IndexModel';
 import { TypeEngine } from '../forms/TypeEngine';
+import { STANDARD_MODEL_FIELD_LABELS, StandardModelFields, idVariable } from './query/StandardModelFields';
 
 export interface SchemaModelDefinitionListener {
   resolved: (event: { object: SchemaModelObject }) => any;
@@ -20,6 +22,13 @@ export interface SchemaModelDefinitionOptions {
   connection: AbstractConnection;
   definition: ObjectType;
 }
+
+export interface FilterableField {
+  key: string;
+  label: string;
+  group: 'Fields' | 'Belongs to';
+}
+
 export class SchemaModelDefinition
   extends BaseObserver<SchemaModelDefinitionListener>
   implements LifecycleModel<ObjectType>
@@ -171,18 +180,85 @@ export class SchemaModelDefinition
     });
   }
 
-  getFilterableFields(typeEngine: TypeEngine): { key: string; label: string }[] {
-    return Object.values(this.definition.attributes)
-      .map((attribute) => {
-        const handler = typeEngine.getHandler(attribute.type);
-        if (!handler?.setupFilter) {
-          return null;
-        }
-        return {
-          key: attribute.name,
-          label: attribute.label || attribute.name
-        };
-      })
-      .filter((value) => !!value);
+  getBelongsToIdVariableForRelationship(relationshipName: string): Variable | undefined {
+    const variable = _.find(_.values(this.definition.belongsToIdVars), (entry) => {
+      return entry.relationship === relationshipName;
+    });
+
+    if (!variable) {
+      return undefined;
+    }
+
+    const relationship = this.definition.belongsTo[relationshipName];
+    if (relationship) {
+      variable.label = relationship.name;
+    }
+
+    return variable;
+  }
+
+  getBelongsToRelationshipForField(field: string):
+    | {
+        variable: Variable;
+        relationship: ObjectType['belongsTo'][string];
+      }
+    | undefined {
+    const variable = _.find(_.values(this.definition.belongsToIdVars), (entry) => {
+      return entry.name === field;
+    });
+    if (!variable?.relationship) {
+      return undefined;
+    }
+
+    const relationship = this.definition.belongsTo[variable.relationship];
+    if (!relationship) {
+      return undefined;
+    }
+
+    variable.label = relationship.name;
+    return {
+      variable,
+      relationship
+    };
+  }
+
+  getFilterableFields(typeEngine: TypeEngine): FilterableField[] {
+    return [
+      ...(typeEngine.getHandler(idVariable.type)?.setupFilter
+        ? [
+            {
+              key: StandardModelFields.ID,
+              label: STANDARD_MODEL_FIELD_LABELS[StandardModelFields.ID],
+              group: 'Fields' as const
+            }
+          ]
+        : []),
+      ...Object.values(this.definition.belongsToIdVars)
+        .map((variable) => {
+          if (!variable?.name || !variable.relationship) {
+            return null;
+          }
+          const relationship = this.definition.belongsTo[variable.relationship];
+          return {
+            key: variable.name,
+            label: relationship?.name || variable.label || variable.name,
+            group: 'Belongs to' as const
+          };
+        })
+        .filter((value) => !!value),
+      ...Object.values(this.definition.attributes)
+        .map((attribute) => {
+          const handler = typeEngine.getHandler(attribute.type);
+          if (!handler?.setupFilter) {
+            return null;
+          }
+          return {
+            key: attribute.name,
+            label: attribute.label || attribute.name,
+            group: 'Fields' as const
+          };
+        })
+        .filter((value) => !!value)
+    ];
   }
 }

package/src/core/query/StandardModelFields.ts

@@ -1,3 +1,5 @@
+import { TextType, Variable } from '@journeyapps/db';
+
 export enum StandardModelFields {
   ID = 'id',
   UPDATED_AT = 'updated_at'
@@ -7,3 +9,9 @@ export const STANDARD_MODEL_FIELD_LABELS: Record<StandardModelFields, string> =
   [StandardModelFields.ID]: 'ID',
   [StandardModelFields.UPDATED_AT]: 'Updated at'
 };
+
+export const idVariable = new Variable(StandardModelFields.ID, new TextType()) as Variable & {
+  label?: string;
+};
+
+idVariable.label = STANDARD_MODEL_FIELD_LABELS[StandardModelFields.ID];

package/src/core/query/query-simple/SimpleQueryColumns.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TableColumn } from '@journeyapps-labs/reactor-mod';
+import { ioc, TableColumn } from '@journeyapps-labs/reactor-mod';
 import * as _ from 'lodash';
 import { PageRow } from '../Page';
 import { CellDisplayWidget } from '../widgets/CellDisplayWidget';
@@ -7,12 +7,16 @@ import { SmartColumnWidget } from '../widgets/SmartColumnWidget';
 import { SmartCellDisplayWidget } from '../widgets/SmartCellDisplayWidget';
 import { SmartBelongsToDisplayWidget } from '../widgets/SmartBelongsToDisplayWidget';
 import { ColumnDisplayWidget } from '../widgets/ColumnDisplayWidget';
+import { IDCellDisplayWidget } from '../widgets/IDCellDisplayWidget';
 import { SchemaModelDefinition } from '../../SchemaModelDefinition';
 import { AbstractConnection } from '../../AbstractConnection';
 import { SimpleQuerySort, SortDirection } from './SimpleQueryTypes';
 import { SimpleQuerySortState } from './SimpleQuerySortState';
 import { SimpleQueryFilterState } from './SimpleQueryFilterState';
-import { STANDARD_MODEL_FIELD_LABELS, StandardModelFields } from '../StandardModelFields';
+import { STANDARD_MODEL_FIELD_LABELS, StandardModelFields, idVariable } from '../StandardModelFields';
+import { TypeEngine } from '../../../forms/TypeEngine';
+import { setupBelongsToFilter } from '../../../forms/types/belongs-to-filter';
+import { Condition, SimpleFilter, Statement } from '../filters';
 
 export interface BuildSimpleQueryColumnsOptions {
   definition: SchemaModelDefinition;
@@ -27,27 +31,31 @@ export const buildSimpleQueryColumns = (options: BuildSimpleQueryColumnsOptions)
     if (!direction) {
       return label;
     }
-    return `${label} ${direction === SortDirection.ASC ? '↑' : '↓'}`;
+    return `${label} ${direction === SortDirection.ASC ? '↓' : '↑'}`;
   };
 
   return [
     {
       key: StandardModelFields.ID,
       display: (
-        <ColumnDisplayWidget
-          label={getSortLabel(StandardModelFields.ID, STANDARD_MODEL_FIELD_LABELS[StandardModelFields.ID])}
-          onClick={async () => {
-            const sort = options.sortState.getSort(StandardModelFields.ID);
-            if (!sort) {
-              options.sortState.addSort(SimpleQuerySort.create(StandardModelFields.ID));
+        <SmartColumnWidget
+          variable={idVariable}
+          typeLabel={ioc.get(TypeEngine).getHandler(idVariable.type)?.getTypeLabel?.(idVariable.type)}
+          filter={options.filterState.getFilter(StandardModelFields.ID)}
+          filterChanged={async (filter) => {
+            if (!filter) {
+              options.filterState.getFilter(StandardModelFields.ID)?.delete();
               return;
             }
-            sort.toggle();
+            options.filterState.setFilter(StandardModelFields.ID, filter);
           }}
         />
       ),
       noWrap: true,
-      shrink: true
+      shrink: true,
+      accessor: (cell, row: PageRow) => {
+        return <IDCellDisplayWidget id={row.model.id} />;
+      }
     },
     {
       key: StandardModelFields.UPDATED_AT,
@@ -79,14 +87,41 @@ export const buildSimpleQueryColumns = (options: BuildSimpleQueryColumnsOptions)
         display: (
           <SmartColumnWidget
             variable={options.definition.definition.belongsToVars[a.relationship]}
-            type={options.definition.definition.belongsTo[a.relationship].foreignType}
-            filterChanged={(filter) => {}}
+            typeLabel={`Belongs To: ${options.definition.definition.belongsTo[a.relationship].foreignType.label}`}
+            filter={options.filterState.getFilter(a.name)}
+            setupFilter={async ({ filter }) => {
+              return await setupBelongsToFilter({
+                definition: options.definition,
+                relationship: options.definition.definition.belongsTo[a.relationship],
+                variable: a,
+                filter
+              });
+            }}
+            filterChanged={async (filter) => {
+              if (!filter) {
+                options.filterState.getFilter(a.name)?.delete();
+                return;
+              }
+              options.filterState.setFilter(a.name, filter);
+            }}
           />
         ),
         noWrap: true,
         shrink: true,
         accessor: (cell, row: PageRow) => {
-          return <SmartBelongsToDisplayWidget variable_id={a} row={row} connection={options.connection} />;
+          return (
+            <SmartBelongsToDisplayWidget
+              variable_id={a}
+              row={row}
+              connection={options.connection}
+              filterBelongsTo={async (object) => {
+                options.filterState.setFilter(
+                  a.name,
+                  new SimpleFilter(a, [new Statement(Condition.EQUALS, object.id)])
+                );
+              }}
+            />
+          );
         }
       } as TableColumn;
     }),
@@ -96,6 +131,7 @@ export const buildSimpleQueryColumns = (options: BuildSimpleQueryColumnsOptions)
         display: (
           <SmartColumnWidget
             variable={a}
+            typeLabel={ioc.get(TypeEngine).getHandler(a.type)?.getTypeLabel?.(a.type)}
             filter={options.filterState.getFilter(a.name)}
             sortDirection={options.sortState.getSort(a.name)?.direction}
             onToggleSort={async () => {

package/src/core/query/query-simple/SimpleQueryFilterState.ts

@@ -1,9 +1,11 @@
 import { Variable } from '@journeyapps/db';
 import * as _ from 'lodash';
 import { BaseObserver } from '@journeyapps-labs/common-utils';
-import { SchemaModelDefinition } from '../../SchemaModelDefinition';
+import { FilterableField, SchemaModelDefinition } from '../../SchemaModelDefinition';
 import { SerializedSimpleFilter, SimpleFilter } from '../filters';
 import { TypeEngine } from '../../../forms/TypeEngine';
+import { setupBelongsToFilter } from '../../../forms/types/belongs-to-filter';
+import { idVariable, StandardModelFields } from '../StandardModelFields';
 
 export interface SimpleQueryFilterStateListener {
   changed: () => any;
@@ -52,7 +54,7 @@ export class SimpleQueryFilterState extends BaseObserver<SimpleQueryFilterStateL
     return definitionChanged || hadFilters;
   }
 
-  getFilterableFields(): { key: string; label: string }[] {
+  getFilterableFields(): FilterableField[] {
     if (!this.definition?.definition) {
       return [];
     }
@@ -69,7 +71,7 @@ export class SimpleQueryFilterState extends BaseObserver<SimpleQueryFilterStateL
   }
 
   getFilter(field: string): SimpleFilter | undefined {
-    const variable = this.resolveAttribute(field);
+    const variable = this.resolveField(field);
     return variable ? this.simpleFilters.get(variable) : undefined;
   }
 
@@ -87,9 +89,7 @@ export class SimpleQueryFilterState extends BaseObserver<SimpleQueryFilterStateL
       if (!SimpleFilter.canDeserialize(filter)) {
         return;
       }
-      const variable = _.find(_.values(definition.definition.attributes), (attribute) => {
-        return attribute.name === filter.variable;
-      });
+      const variable = this.resolveField(filter.variable);
       if (!variable) {
         return;
       }
@@ -98,7 +98,7 @@ export class SimpleQueryFilterState extends BaseObserver<SimpleQueryFilterStateL
   }
 
   setFilter(field: string, filter: SimpleFilter) {
-    const variable = this.resolveAttribute(field);
+    const variable = this.resolveField(field);
     if (!variable) {
       return false;
     }
@@ -106,7 +106,21 @@ export class SimpleQueryFilterState extends BaseObserver<SimpleQueryFilterStateL
   }
 
   async setupFilterForField(field: string, position?: MouseEvent): Promise<boolean> {
-    const variable = this.resolveAttribute(field);
+    const relationship = this.resolveBelongsToField(field);
+    if (relationship) {
+      const existing = this.simpleFilters.get(relationship.variable);
+      const nextFilter = await setupBelongsToFilter({
+        definition: this.definition,
+        relationship: relationship.relationship,
+        variable: relationship.variable,
+        filter: existing
+      });
+      if (!nextFilter) {
+        return false;
+      }
+      return this.addFilter(relationship.variable, nextFilter);
+    }
+    const variable = this.resolveField(field);
     if (!variable) {
       return false;
     }
@@ -149,12 +163,31 @@ export class SimpleQueryFilterState extends BaseObserver<SimpleQueryFilterStateL
     return true;
   }
 
-  private resolveAttribute(field: string): Variable | undefined {
+  private resolveField(field: string): Variable | undefined {
     if (!this.definition?.definition) {
       return undefined;
     }
+    if (field === StandardModelFields.ID) {
+      return idVariable;
+    }
+    const relationship = this.resolveBelongsToField(field);
+    if (relationship) {
+      return relationship.variable;
+    }
     return _.find(_.values(this.definition.definition.attributes), (attribute) => {
       return attribute.name === field;
     });
   }
+
+  private resolveBelongsToField(field: string):
+    | {
+        variable: Variable;
+        relationship: any;
+      }
+    | undefined {
+    if (!this.definition?.definition) {
+      return undefined;
+    }
+    return this.definition.getBelongsToRelationshipForField(field);
+  }
 }

package/src/core/query/query-simple/SimpleQuerySortState.ts

@@ -105,7 +105,6 @@ export class SimpleQuerySortState extends BaseObserver<SimpleQuerySortStateListe
       };
     });
     return [
-      { key: StandardModelFields.ID, label: STANDARD_MODEL_FIELD_LABELS[StandardModelFields.ID] },
       {
         key: StandardModelFields.UPDATED_AT,
         label: STANDARD_MODEL_FIELD_LABELS[StandardModelFields.UPDATED_AT]

package/src/core/query/widgets/BelongsToDisplayWidget.tsx

@@ -14,6 +14,7 @@ export interface BelongsToDisplayWidgetProps {
   id: string;
   connection: AbstractConnection;
   open: (object: SchemaModelObject) => any;
+  filterBelongsTo?: (object: SchemaModelObject) => any;
   className?: any;
 }
 
@@ -62,7 +63,7 @@ export const BelongsToDisplayWidget: React.FC<BelongsToDisplayWidgetProps> = obs
     <S.Container className={props.className}>
       {object.data.display}
       <S.Actions>
-        <PeekRelationshipButton object={object} open={props.open} />
+        <PeekRelationshipButton object={object} open={props.open} filterBelongsTo={props.filterBelongsTo} />
         <TableButtonWidget
           icon="arrow-right"
           action={() => {