@journeyapps-labs/reactor-mod-data-browser 3.3.0 → 3.5.0

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={() => {

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

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 
 export interface ColumnDisplayWidgetProps {
   label: string;
+  secondaryLabel?: string;
   className?: any;
   onClick?: () => any;
 }
@@ -11,15 +12,16 @@ export const ColumnDisplayWidget: React.FC<ColumnDisplayWidgetProps> = (props) =
   const parts = (props.label || '').split(' ');
   const minWidth = parts.length >= 5 ? 150 : parts.length >= 3 ? 80 : undefined;
   return (
-    <S.Label
+    <S.Container
       className={props.className}
       minWidth={minWidth}
       clickable={!!props.onClick}
       nowrap={!minWidth}
       onClick={props.onClick}
     >
-      {props.label}
-    </S.Label>
+      <S.Label>{props.label}</S.Label>
+      {props.secondaryLabel ? <S.SecondaryLabel>{props.secondaryLabel}</S.SecondaryLabel> : null}
+    </S.Container>
   );
 };
 
@@ -32,9 +34,20 @@ namespace S {
     }
   `;
 
-  export const Label = styled.div<{ minWidth?: number; clickable: boolean; nowrap: boolean }>`
+  export const Container = styled.div<{ minWidth?: number; clickable: boolean; nowrap: boolean }>`
     ${(p) => (p.minWidth ? `min-width: ${p.minWidth}px;` : '')};
     ${(p) => (p.nowrap ? 'white-space: nowrap;' : '')};
     ${(p) => (p.clickable ? clickableStyle : '')};
+    display: inline-flex;
+    flex-direction: column;
+    align-items: flex-start;
+    row-gap: 2px;
+  `;
+
+  export const Label = styled.div``;
+
+  export const SecondaryLabel = styled.div`
+    opacity: 0.4;
+    font-size: 12px;
   `;
 }

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

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import {
+  BooleanSetting,
+  NotificationStore,
+  NotificationType,
+  PrefsStore,
+  TableButtonWidget,
+  ioc,
+  styled
+} from '@journeyapps-labs/reactor-mod';
+import { copyTextToClipboard } from '@journeyapps-labs/lib-reactor-utils';
+import { QueryControlPreferences } from '../../../preferences/QueryControlPreferences';
+
+export interface IDCellDisplayWidgetProps {
+  id: string;
+}
+
+export const IDCellDisplayWidget: React.FC<IDCellDisplayWidgetProps> = observer((props) => {
+  const notifications = ioc.get(NotificationStore);
+  const showIdValue = ioc
+    .get(PrefsStore)
+    .getPreference<BooleanSetting>(QueryControlPreferences.SHOW_ID_VALUE_IN_ID_COLUMN).checked;
+
+  return (
+    <S.Container>
+      {showIdValue ? <S.Value>{props.id}</S.Value> : null}
+      <TableButtonWidget
+        icon="copy"
+        tooltip="Copy ID"
+        action={() => {
+          copyTextToClipboard(props.id);
+          notifications.showNotification({
+            title: 'Copied',
+            description: 'ID copied to clipboard',
+            type: NotificationType.SUCCESS
+          });
+        }}
+      />
+    </S.Container>
+  );
+});
+
+namespace S {
+  export const Container = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    column-gap: 5px;
+    width: 100%;
+  `;
+
+  export const Value = styled.div`
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `;
+}

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

@@ -21,6 +21,7 @@ import { EmptyValueWidget } from '../../../widgets/EmptyValueWidget';
 export interface PeekRelationshipButtonProps {
   object: SchemaModelObject;
   open: (object: SchemaModelObject) => any;
+  filterBelongsTo?: (object: SchemaModelObject) => any;
 }
 
 export const PeekRelationshipButton: React.FC<PeekRelationshipButtonProps> = (props) => {
@@ -89,8 +90,15 @@ export const PeekRelationshipButton: React.FC<PeekRelationshipButtonProps> = (pr
         title: 'ID',
         icon: 'copy',
         right: <S.FieldValue>{props.object.id}</S.FieldValue>,
-        disabled: true,
-        group: 'Object'
+        group: 'Object',
+        action: async () => {
+          copyTextToClipboard(props.object.id);
+          notifications.showNotification({
+            title: 'Copied',
+            description: 'Relationship ID copied to clipboard',
+            type: NotificationType.SUCCESS
+          });
+        }
       },
       {
         key: 'meta-updated',
@@ -114,20 +122,19 @@ export const PeekRelationshipButton: React.FC<PeekRelationshipButtonProps> = (pr
           props.open(props.object);
         }
       },
-      {
-        key: 'copy',
-        title: 'Copy ID',
-        icon: 'copy',
-        group: 'Actions',
-        action: async () => {
-          copyTextToClipboard(props.object.id);
-          notifications.showNotification({
-            title: 'Copied',
-            description: 'Relationship ID copied to clipboard',
-            type: NotificationType.SUCCESS
-          });
-        }
-      }
+      ...(props.filterBelongsTo
+        ? [
+            {
+              key: 'filter-belongs-to',
+              title: 'Filter belongs to',
+              icon: 'filter',
+              group: 'Actions',
+              action: async () => {
+                await props.filterBelongsTo?.(props.object);
+              }
+            } as ComboBoxItem
+          ]
+        : [])
     ];
     const directive = await ioc.get(ComboBoxStore2).show(
       new SimpleComboBoxDirective({

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

@@ -4,6 +4,7 @@ import { BelongsToDisplayWidget } from './BelongsToDisplayWidget';
 import { PageRow } from '../Page';
 import { ActionSource, styled } from '@journeyapps-labs/reactor-mod';
 import { AbstractConnection } from '../../AbstractConnection';
+import { SchemaModelObject } from '../../SchemaModelObject';
 import { Variable } from '@journeyapps/db';
 import { observer } from 'mobx-react';
 
@@ -11,6 +12,7 @@ export interface SmartBelongsToDisplayWidgetProps {
   row: PageRow;
   connection: AbstractConnection;
   variable_id: Variable;
+  filterBelongsTo?: (object: SchemaModelObject) => any;
 }
 
 export const SmartBelongsToDisplayWidget: React.FC<SmartBelongsToDisplayWidgetProps> = observer((props) => {
@@ -35,6 +37,7 @@ export const SmartBelongsToDisplayWidget: React.FC<SmartBelongsToDisplayWidgetPr
       relationship={row.model.definition.definition.belongsTo[variable_id.relationship]}
       connection={connection}
       id={value}
+      filterBelongsTo={props.filterBelongsTo}
     />
   );
 });

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

@@ -1,17 +1,22 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
-import { ObjectType, Variable } from '@journeyapps/db';
+import { Variable } from '@journeyapps/db';
 import { ColumnDisplayWidget } from './ColumnDisplayWidget';
-import { SmartFilterWidget } from './SmartFilterWidget';
+import { SmartFilterWidget, SmartTypeEngineFilterWidget } from './SmartFilterWidget';
 import { SimpleFilter } from '../filters';
 import { SortDirection } from '../query-simple/SimpleQuery';
 
 export interface SmartColumnWidgetProps {
   variable: Variable;
-  type?: ObjectType;
+  typeLabel?: string;
   filter?: SimpleFilter;
   sortDirection?: SortDirection;
   onToggleSort?: () => Promise<any> | any;
+  setupFilter?: (event: {
+    variable: Variable;
+    filter?: SimpleFilter;
+    position?: MouseEvent;
+  }) => Promise<SimpleFilter | null>;
   filterChanged: (filter: SimpleFilter | null) => any;
 }
 
@@ -20,20 +25,24 @@ export const SmartColumnWidget: React.FC<SmartColumnWidgetProps> = (props) => {
   const displayLabel = props.sortDirection
     ? `${baseLabel} ${props.sortDirection === SortDirection.ASC ? '↓' : '↑'}`
     : baseLabel;
-  let display = <ColumnDisplayWidget label={displayLabel} onClick={props.onToggleSort} />;
-  if (props.type) {
-    display = (
-      <S.TypeGroup>
-        {display}
-        <S.Type label={props.type.label} />
-      </S.TypeGroup>
-    );
-  }
   return (
     <S.Container>
       <S.TopRow>
-        {display}
-        <SmartFilterWidget filter={props.filter} variable={props.variable} filterChanged={props.filterChanged} />
+        <ColumnDisplayWidget label={displayLabel} secondaryLabel={props.typeLabel} onClick={props.onToggleSort} />
+        {props.setupFilter ? (
+          <SmartFilterWidget
+            filter={props.filter}
+            variable={props.variable}
+            setupFilter={props.setupFilter}
+            filterChanged={props.filterChanged}
+          />
+        ) : (
+          <SmartTypeEngineFilterWidget
+            filter={props.filter}
+            variable={props.variable}
+            filterChanged={props.filterChanged}
+          />
+        )}
       </S.TopRow>
     </S.Container>
   );
@@ -54,12 +63,6 @@ namespace S {
     column-gap: 5px;
   `;
 
-  export const Type = styled(ColumnDisplayWidget)`
-    opacity: 0.5;
-  `;
-
-  export const TypeGroup = styled.div``;
-
   export const FilterMetaRow = styled.div`
     display: flex;
     align-items: center;

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

@@ -15,6 +15,11 @@ import { SimpleFilter, StatementMatch } from '../filters';
 export interface SmartFilterWidgetProps {
   variable: Variable;
   filter?: SimpleFilter;
+  setupFilter: (event: {
+    variable: Variable;
+    filter?: SimpleFilter;
+    position?: MouseEvent;
+  }) => Promise<SimpleFilter | null>;
   filterChanged: (filter: SimpleFilter | null) => any;
 }
 
@@ -63,10 +68,6 @@ export const SmartFilterMetadataWidget: React.FC<SmartFilterMetadataWidgetProps>
 
 export const SmartFilterWidget: React.FC<SmartFilterWidgetProps> = (props) => {
   const isActive = (props.filter?.statements?.length || 0) > 0;
-  const handler = ioc.get(TypeEngine).getHandler(props.variable.type);
-  if (!handler?.setupFilter) {
-    return null;
-  }
   return (
     <S.FilterButton
       active={isActive}
@@ -75,7 +76,7 @@ export const SmartFilterWidget: React.FC<SmartFilterWidgetProps> = (props) => {
         tooltipPos: TooltipPosition.BOTTOM
       })}
       onClick={async (event) => {
-        const filter = await handler.setupFilter?.({
+        const filter = await props.setupFilter({
           variable: props.variable,
           filter: props.filter,
           position: event.nativeEvent
@@ -91,6 +92,14 @@ export const SmartFilterWidget: React.FC<SmartFilterWidgetProps> = (props) => {
   );
 };
 
+export const SmartTypeEngineFilterWidget: React.FC<Omit<SmartFilterWidgetProps, 'setupFilter'>> = (props) => {
+  const setupFilter = ioc.get(TypeEngine).getHandler(props.variable.type)?.setupFilter;
+  if (!setupFilter) {
+    return null;
+  }
+  return <SmartFilterWidget {...props} setupFilter={setupFilter} />;
+};
+
 namespace S {
   export const MetaList = styled.div`
     display: flex;

package/src/entities/SchemaModelDefinitionEntityDefinition.ts

@@ -3,9 +3,8 @@ import {
   EntityActionHandlerComponent,
   EntityDefinition,
   EntityDescriberComponent,
-  inject,
   InlineEntityEncoderComponent,
-  InlineTreePresenterComponent,
+  inject,
   SimpleParentEntitySearchEngine
 } from '@journeyapps-labs/reactor-mod';
 import { DataBrowserEntities } from '../entities';
@@ -14,6 +13,7 @@ import { AbstractConnection } from '../core/AbstractConnection';
 import { SchemaModelDefinition } from '../core/SchemaModelDefinition';
 import { QuerySchemaModelAction } from '../actions/schema-definitions/QuerySchemaModelAction';
 import { IndexModel } from '../core/IndexModel';
+import { SchemaModelTreePresenterComponent } from './SchemaModelTreePresenterComponent';
 
 export interface SchemaModelDefinitionEntityDefinitionEncoded {
   connection_id: string;
@@ -77,17 +77,7 @@ export class SchemaModelDefinitionEntityDefinition extends EntityDefinition<Sche
       })
     );
 
-    this.registerComponent(
-      new InlineTreePresenterComponent({
-        loadChildrenAsNodesAreOpened: true,
-        cacheTreeEntities: true,
-        augmentTreeNodeProps: () => {
-          return {
-            openOnSingleClick: false
-          };
-        }
-      })
-    );
+    this.registerComponent(new SchemaModelTreePresenterComponent({ loadChildrenAsNodesAreOpened: true }));
 
     this.registerComponent(
       new SimpleParentEntitySearchEngine<AbstractConnection, SchemaModelDefinition>({

package/src/entities/SchemaModelObjectEntityDefinition.ts

@@ -1,4 +1,5 @@
 import {
+  Action,
   EntityDefinition,
   EntityDescriberComponent,
   inject,
@@ -10,6 +11,8 @@ import { DataBrowserEntities } from '../entities';
 import { ConnectionStore } from '../stores/ConnectionStore';
 import { SchemaModelObject } from '../core/SchemaModelObject';
 import { SchemaModelDefinition } from '../core/SchemaModelDefinition';
+import { validate as validateUUID } from 'uuid';
+import { ViewHasManyAction } from '../actions/schema-model/ViewHasManyAction';
 
 export interface SchemaModelObjectEntityDefinitionEncoded {
   connection_id: string;
@@ -42,21 +45,6 @@ export class SchemaModelObjectEntityDefinition extends EntityDefinition<SchemaMo
       })
     );
 
-    // this.registerComponent(
-    //   new SimpleParentEntitySearchEngine<SchemaModelDefinition,SchemaModelObject>({
-    //     label: 'ID',
-    //     filterResultsWithMatcher: false,
-    //     type: DataBrowserEntities.SCHEMA_MODEL_DEFINITION,
-    //     getEntities: async (event) => {
-    //       let object = await event.parameters.parent.resolve(event.value);
-    //       if(object){
-    //         return [object]
-    //       }
-    //       return []
-    //     }
-    //   })
-    // );
-
     this.registerComponent(
       new SimpleParentEntitySearchEngine<SchemaModelDefinition, SchemaModelObject>({
         label: 'Label',
@@ -66,6 +54,13 @@ export class SchemaModelObjectEntityDefinition extends EntityDefinition<SchemaMo
           if (!event.value) {
             return [];
           }
+          if (validateUUID(event.value)) {
+            const object = await event.parameters.parent.resolve(event.value);
+            if (object) {
+              return [object];
+            }
+            return [];
+          }
           return await event.parameters.parent.search(event.value);
         }
       })
@@ -101,4 +96,11 @@ export class SchemaModelObjectEntityDefinition extends EntityDefinition<SchemaMo
   getEntityUID(t: SchemaModelObject) {
     return t.model.id;
   }
+
+  isActionAllowedForEntity(action: Action, entity: SchemaModelObject) {
+    if (action.id === ViewHasManyAction.ID) {
+      return Object.keys(entity.definition.definition.hasMany || {}).length > 0;
+    }
+    return super.isActionAllowedForEntity(action, entity);
+  }
 }

package/src/entities/SchemaModelTreePresenterComponent.ts

@@ -0,0 +1,31 @@
+import {
+  CachedEntityTreePresenterContext,
+  EntityReactorNode,
+  EntityTreePresenterComponent,
+  ReactorTreeEntity
+} from '@journeyapps-labs/reactor-mod';
+import { SchemaModelDefinition } from '../core/SchemaModelDefinition';
+import { SchemaModelOrderValue, SchemaModelOrderingPreference } from '../preferences/SchemaOrderingPreferences';
+
+class SchemaModelTreePresenterContext extends CachedEntityTreePresenterContext<SchemaModelDefinition> {
+  getSortedEntities(entities: SchemaModelDefinition[]) {
+    if (SchemaModelOrderingPreference.getValue() === SchemaModelOrderValue.AS_DEFINED_IN_SCHEMA) {
+      return entities;
+    }
+    return super.getSortedEntities(entities);
+  }
+
+  protected doGenerateTreeNode(entity: SchemaModelDefinition, options): ReactorTreeEntity {
+    return new EntityReactorNode({
+      entity,
+      definition: this.definition,
+      events: options?.events
+    });
+  }
+}
+
+export class SchemaModelTreePresenterComponent extends EntityTreePresenterComponent<SchemaModelDefinition> {
+  protected _generateContext() {
+    return new SchemaModelTreePresenterContext(this);
+  }
+}