@journeyapps-labs/reactor-mod-data-browser 3.0.1 → 3.1.0

package/src/panels/query/table-controls/QueryControlsWidget.tsx

@@ -0,0 +1,127 @@
+import * as React from 'react';
+import {
+  ComboBoxItem,
+  ComboBoxStore2,
+  DialogStore,
+  InputContainerWidget,
+  ioc,
+  PanelButtonWidget,
+  SimpleComboBoxDirective,
+  styled
+} from '@journeyapps-labs/reactor-mod';
+import { SavedQueryStore } from '../../../stores/SavedQueryStore';
+import { SimpleQuery } from '../../../core/query/query-simple/SimpleQuery';
+import { observer } from 'mobx-react';
+
+export interface QueryControlsWidgetProps {
+  query: { load: () => Promise<any> | any };
+  simpleQuery: SimpleQuery | null;
+  activeSavedQueryName?: string | null;
+  onLoadSavedQuery?: (id: string) => Promise<any> | any;
+}
+
+export const QueryControlsWidget: React.FC<QueryControlsWidgetProps> = observer((props) => {
+  const savedQueryStore = ioc.get(SavedQueryStore);
+  const savedQueries = props.simpleQuery ? savedQueryStore.getSavedForQuery(props.simpleQuery) : [];
+
+  const showSavedQueryMenu = async (event: React.MouseEvent<any>) => {
+    if (!props.simpleQuery) {
+      return;
+    }
+
+    const queryChildren: ComboBoxItem[] =
+      savedQueries.length > 0
+        ? savedQueries.map((saved) => {
+            return {
+              title: saved.name,
+              key: `query-${saved.id}`,
+              icon: 'search',
+              action: async () => {
+                await props.onLoadSavedQuery?.(saved.id);
+              }
+            } as ComboBoxItem;
+          })
+        : ([{ title: 'No saved queries', key: 'no-queries', disabled: true }] as ComboBoxItem[]);
+
+    const deleteChildren: ComboBoxItem[] =
+      savedQueries.length > 0
+        ? savedQueries.map((saved) => {
+            return {
+              title: saved.name,
+              key: `delete-${saved.id}`,
+              icon: 'trash',
+              action: async () => {
+                await savedQueryStore.removeSavedQuery(saved.id);
+              }
+            } as ComboBoxItem;
+          })
+        : ([{ title: 'No saved queries', key: 'no-delete-queries', disabled: true }] as ComboBoxItem[]);
+
+    const directive = await ioc.get(ComboBoxStore2).show(
+      new SimpleComboBoxDirective({
+        title: 'Saved queries',
+        event: event as any,
+        items: [
+          {
+            title: 'Save query',
+            key: 'save-query',
+            icon: 'bookmark',
+            action: async () => {
+              const suggestedName = `${props.simpleQuery.options.definition.definition.label} query`;
+              const name = await ioc.get(DialogStore).showInputDialog({
+                title: 'Save query',
+                initialValue: suggestedName
+              });
+              if (!name) {
+                return;
+              }
+              await savedQueryStore.saveQuery(name, props.simpleQuery);
+            }
+          },
+          { title: 'Queries', key: 'queries', icon: 'list', children: queryChildren },
+          { title: 'Delete query', key: 'delete-query', icon: 'trash', children: deleteChildren }
+        ]
+      })
+    );
+    directive.getSelectedItem();
+  };
+
+  return (
+    <InputContainerWidget label="Query">
+      <S.Group>
+        <PanelButtonWidget
+          tooltip="Reload query"
+          icon="refresh"
+          action={async () => {
+            await props.query.load();
+          }}
+        />
+        {props.simpleQuery ? (
+          <PanelButtonWidget
+            tooltip={
+              props.activeSavedQueryName
+                ? `Saved query active: ${props.activeSavedQueryName}`
+                : 'Unsaved or modified query'
+            }
+            icon="bookmark"
+            highlight={!!props.activeSavedQueryName}
+            action={async (event) => {
+              await showSavedQueryMenu(event as any);
+            }}
+          />
+        ) : null}
+      </S.Group>
+    </InputContainerWidget>
+  );
+});
+
+namespace S {
+  export const Group = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    column-gap: 5px;
+    row-gap: 5px;
+    flex-wrap: wrap;
+  `;
+}

package/src/panels/query/table-controls/SortChipWidget.tsx

@@ -0,0 +1,119 @@
+import * as React from 'react';
+import {
+  ComboBoxStore2,
+  MetadataWidget,
+  PanelButtonMode,
+  PanelButtonWidget,
+  SimpleComboBoxDirective,
+  ioc,
+  styled,
+  useDraggableRaw,
+  useDroppableRaw
+} from '@journeyapps-labs/reactor-mod';
+import { getTransparentColor } from '@journeyapps-labs/lib-reactor-utils';
+import { SimpleQuerySort, SortDirection } from '../../../core/query/query-simple/SimpleQuery';
+
+const SORT_DRAG_MIME = 'application/reactor-sort-field';
+
+export interface SortChipWidgetProps {
+  sort: SimpleQuerySort;
+  label: string;
+  onToggle: () => Promise<any> | any;
+  onRemove: () => Promise<any> | any;
+  onDropBefore: (field: string) => Promise<any> | any;
+}
+
+export const SortChipWidget: React.FC<SortChipWidgetProps> = (props) => {
+  const ref = React.useRef<HTMLDivElement>(null);
+  const [hover, setHover] = React.useState(false);
+
+  useDraggableRaw({
+    forwardRef: ref,
+    encode: () => {
+      return {
+        data: {
+          [SORT_DRAG_MIME]: props.sort.field
+        },
+        icon: null
+      };
+    }
+  });
+
+  useDroppableRaw<{ [key: string]: string }>(
+    {
+      forwardRef: ref,
+      accepts: (mimes) => mimes.includes(SORT_DRAG_MIME),
+      dragover: () => {
+        setHover(true);
+      },
+      dragexit: () => {
+        setHover(false);
+      },
+      dropped: async ({ entities }) => {
+        setHover(false);
+        const sourceField = entities[SORT_DRAG_MIME];
+        if (!sourceField || sourceField === props.sort.field) {
+          return;
+        }
+        await props.onDropBefore(sourceField);
+      }
+    },
+    [props.sort.field]
+  );
+
+  return (
+    <S.SortItem
+      ref={ref}
+      hover={hover}
+      onContextMenu={async (event) => {
+        event.preventDefault();
+        const directive = await ioc.get(ComboBoxStore2).show(
+          new SimpleComboBoxDirective({
+            title: props.label,
+            event: event as any,
+            items: [
+              {
+                key: 'delete',
+                title: 'Delete sort',
+                icon: 'trash',
+                action: async () => {
+                  await props.onRemove();
+                }
+              }
+            ]
+          })
+        );
+        directive.getSelectedItem();
+      }}
+    >
+      <MetadataWidget
+        onClick={props.onToggle}
+        label={props.label}
+        value={props.sort.direction === SortDirection.ASC ? 'ASC' : 'DESC'}
+      />
+      <S.CloseButton
+        mode={PanelButtonMode.LINK}
+        icon="close"
+        tooltip={`Remove ${props.label} sort`}
+        action={async () => {
+          await props.onRemove();
+        }}
+      />
+    </S.SortItem>
+  );
+};
+
+namespace S {
+  export const CloseButton = styled(PanelButtonWidget)`
+    padding: 2px;
+  `;
+
+  export const SortItem = styled.div<{ hover: boolean }>`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-radius: 4px;
+    padding: 2px;
+    background: ${(p) => (p.hover ? getTransparentColor(p.theme.dnd.hoverColor, 0.35) : 'transparent')};
+  `;
+}

package/src/panels/query/table-controls/SortControlsWidget.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import {
+  ComboBoxItem,
+  ComboBoxStore2,
+  InputContainerWidget,
+  ioc,
+  PanelButtonWidget,
+  SimpleComboBoxDirective,
+  styled
+} from '@journeyapps-labs/reactor-mod';
+import { SimpleQuery, SimpleQuerySort } from '../../../core/query/query-simple/SimpleQuery';
+import { SortChipWidget } from './SortChipWidget';
+
+export interface SortControlsWidgetProps {
+  simpleQuery: SimpleQuery;
+  goToPage?: (index: number) => any;
+}
+
+export const SortControlsWidget: React.FC<SortControlsWidgetProps> = (props) => {
+  const showAddSortMenu = async (event: React.MouseEvent<any>) => {
+    const used = new Set(props.simpleQuery.sortState.sorts.map((sort) => sort.field));
+    const fields = props.simpleQuery.sortState.getSortableFields().filter((field) => !used.has(field.key));
+    if (fields.length === 0) {
+      return;
+    }
+    const directive = await ioc.get(ComboBoxStore2).show(
+      new SimpleComboBoxDirective({
+        title: 'Add sort',
+        event: event as any,
+        items: fields.map((field) => {
+          return {
+            key: field.key,
+            title: field.label,
+            action: async () => {
+              props.simpleQuery.sortState.addSort(SimpleQuerySort.create(field.key));
+              props.goToPage?.(0);
+            }
+          } as ComboBoxItem;
+        })
+      })
+    );
+    directive.getSelectedItem();
+  };
+
+  const getSortLabel = (field: string) => {
+    const resolved = props.simpleQuery.sortState.getSortableFields().find((entry) => entry.key === field);
+    return resolved?.label || field;
+  };
+
+  return (
+    <InputContainerWidget label="Sort">
+      <S.Group>
+        <PanelButtonWidget
+          icon="plus"
+          tooltip="Add sort"
+          action={async (event) => {
+            await showAddSortMenu(event as any);
+          }}
+        />
+        {props.simpleQuery.sortState.sorts.map((sort) => {
+          return (
+            <SortChipWidget
+              key={sort.field}
+              sort={sort}
+              label={getSortLabel(sort.field)}
+              onToggle={async () => {
+                sort.toggle();
+                props.goToPage?.(0);
+              }}
+              onRemove={async () => {
+                sort.remove();
+                props.goToPage?.(0);
+              }}
+              onDropBefore={async (sourceField) => {
+                props.simpleQuery.sortState.moveSortBefore(sourceField, sort.field);
+                props.goToPage?.(0);
+              }}
+            />
+          );
+        })}
+      </S.Group>
+    </InputContainerWidget>
+  );
+};
+
+namespace S {
+  export const Group = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    column-gap: 5px;
+    row-gap: 5px;
+    flex-wrap: wrap;
+  `;
+}

package/src/preferences/QueryControlPreferences.ts

@@ -0,0 +1,34 @@
+import { BooleanSetting, PrefsStore } from '@journeyapps-labs/reactor-mod';
+
+export enum QueryControlPreferences {
+  SHOW_SORT_CONTROLS = 'databrowser/query-controls/show-sort-controls',
+  SHOW_FILTER_CONTROLS = 'databrowser/query-controls/show-filter-controls',
+  FILTER_NULL_FIELDS_IN_RELATIONSHIP_PEEK = 'databrowser/query-controls/filter-null-fields-in-relationship-peek'
+}
+
+export const registerQueryControlPreferences = (prefsStore: PrefsStore) => {
+  prefsStore.registerPreference(
+    new BooleanSetting({
+      key: QueryControlPreferences.SHOW_SORT_CONTROLS,
+      checked: true,
+      name: 'Show sort controls',
+      category: 'Query Controls'
+    })
+  );
+  prefsStore.registerPreference(
+    new BooleanSetting({
+      key: QueryControlPreferences.SHOW_FILTER_CONTROLS,
+      checked: true,
+      name: 'Show filter controls',
+      category: 'Query Controls'
+    })
+  );
+  prefsStore.registerPreference(
+    new BooleanSetting({
+      key: QueryControlPreferences.FILTER_NULL_FIELDS_IN_RELATIONSHIP_PEEK,
+      checked: true,
+      name: 'Hide null fields in relationship peek',
+      category: 'Query Controls'
+    })
+  );
+};

package/src/stores/ConnectionStore.ts

@@ -2,6 +2,7 @@ import { AbstractStore, LocalStorageSerializer } from '@journeyapps-labs/reactor
 import { AbstractConnection, AbstractConnectionSerialized } from '../core/AbstractConnection';
 import { action, computed, observable, runInAction, when } from 'mobx';
 import { AbstractConnectionFactory } from '../core/AbstractConnectionFactory';
+import { getDefaultConnectionColor } from '../core/connection-colors';
 
 export interface ConnectionStoreSerialized {
   connections: AbstractConnectionSerialized[];
@@ -53,6 +54,7 @@ export class ConnectionStore extends AbstractStore<ConnectionStoreSerialized> {
     let conn = this._connectionFactories.get(data.factory).generateConnection();
     conn.id = data.id;
     await conn._deSerialize(data.payload);
+    conn.color = data.color || getDefaultConnectionColor(conn.id);
     return conn;
   }
 

package/src/stores/SavedQueryStore.ts

@@ -0,0 +1,121 @@
+import { AbstractStore, inject, LocalStorageSerializer } from '@journeyapps-labs/reactor-mod';
+import { action, computed, observable } from 'mobx';
+import { v4 } from 'uuid';
+import { SimpleQuery, SimpleQueryEncoded } from '../core/query/query-simple/SimpleQuery';
+import { ConnectionStore } from './ConnectionStore';
+
+export interface SavedQuery {
+  id: string;
+  name: string;
+  created_at: string;
+  updated_at: string;
+  query: SimpleQueryEncoded;
+}
+
+export interface SavedQueryStoreSerialized {
+  queries: SavedQuery[];
+}
+
+export class SavedQueryEntity {
+  constructor(public saved: SavedQuery) {}
+
+  get id(): string {
+    return this.saved.id;
+  }
+
+  get name(): string {
+    return this.saved.name;
+  }
+}
+
+export class SavedQueryStore extends AbstractStore<SavedQueryStoreSerialized> {
+  @inject(ConnectionStore)
+  accessor connectionStore: ConnectionStore;
+
+  @observable
+  protected accessor _queries: SavedQuery[];
+
+  constructor() {
+    super({
+      name: 'SAVED_QUERY_STORE',
+      serializer: new LocalStorageSerializer({
+        key: 'SAVED_QUERY_STORE'
+      })
+    });
+    this._queries = [];
+  }
+
+  @computed
+  get queries(): SavedQuery[] {
+    return [...this._queries].sort((a, b) => b.updated_at.localeCompare(a.updated_at));
+  }
+
+  protected serialize(): SavedQueryStoreSerialized {
+    return {
+      queries: this._queries
+    };
+  }
+
+  protected async deserialize(data: SavedQueryStoreSerialized): Promise<void> {
+    this._queries = data?.queries || [];
+  }
+
+  getSavedForQuery(query: SimpleQuery): SavedQuery[] {
+    const definition = query.options.definition?.definition?.name;
+    const connectionID = query.connection?.id;
+    return this.queries.filter((saved) => {
+      return saved.query.definition === definition && saved.query.connection_id === connectionID;
+    });
+  }
+
+  getSavedEntitiesForConnection(connectionID: string): SavedQueryEntity[] {
+    return this.queries
+      .filter((saved) => saved.query.connection_id === connectionID)
+      .map((saved) => new SavedQueryEntity(saved));
+  }
+
+  @action
+  async saveQuery(name: string, query: SimpleQuery): Promise<SavedQuery> {
+    const now = new Date().toISOString();
+    const saved: SavedQuery = {
+      id: v4(),
+      name,
+      created_at: now,
+      updated_at: now,
+      query: query.serialize()
+    };
+    this._queries.push(saved);
+    await this.save();
+    return saved;
+  }
+
+  getByID(id: string): SavedQuery | null {
+    return this._queries.find((query) => query.id === id) || null;
+  }
+
+  getSavedEntityByID(id: string): SavedQueryEntity | null {
+    const saved = this.getByID(id);
+    if (!saved) {
+      return null;
+    }
+    return new SavedQueryEntity(saved);
+  }
+
+  async loadSavedQuery(id: string): Promise<SimpleQuery | null> {
+    const saved = this.getByID(id);
+    if (!saved) {
+      return null;
+    }
+    const query = new SimpleQuery({
+      limit: saved.query.limit
+    });
+    await query.deserialize(this.connectionStore, saved.query);
+    return query;
+  }
+
+  @action
+  async removeSavedQuery(id: string): Promise<void> {
+    this._queries = this._queries.filter((query) => query.id !== id);
+    await this.save();
+  }
+}

package/src/widgets/EmptyValueWidget.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { themed } from '@journeyapps-labs/reactor-mod';
+
+export interface EmptyValueWidgetProps {
+  label?: string;
+  className?: any;
+  children?: React.ReactNode;
+}
+
+export const EmptyValueWidget: React.FC<EmptyValueWidgetProps> = (props) => {
+  const value = props.children ?? props.label ?? 'null';
+  return <S.Label className={props.className}>{value}</S.Label>;
+};
+
+namespace S {
+  export const Label = themed.span`
+    color: ${(p) => p.theme.text.secondary};
+    opacity: 0.6;
+  `;
+}