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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@journeyapps-labs/reactor-mod-data-browser",
-  "version": "3.4.0",
+  "version": "3.6.0",
   "main": "./dist/index.js",
   "typings": "./dist/@types/index",
   "publishConfig": {
@@ -15,14 +15,14 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@emotion/styled": "^11.14.1",
-    "@fortawesome/react-fontawesome": "^3.2.0",
+    "@fortawesome/react-fontawesome": "^3.3.0",
     "@journeyapps-labs/client-backend-v4": "1.0.0",
     "@journeyapps-labs/common-ioc": "^1.0.1",
     "@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.3.1",
-    "@journeyapps-labs/reactor-mod-editor": "2.2.1",
+    "@journeyapps-labs/lib-reactor-data-layer": "1.0.11",
+    "@journeyapps-labs/reactor-mod": "5.6.0",
+    "@journeyapps-labs/reactor-mod-editor": "2.2.4",
     "@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": "3.0.1",
+    "@journeyapps-labs/lib-reactor-builder": "3.0.2",
     "@types/async": "^3.2.25",
     "@types/lodash": "^4.17.24",
     "@types/react": "^19.2.14",
@@ -42,6 +42,7 @@
   },
   "scripts": {
     "build:module": "reactor build .",
+    "clean": "rm -rf dist-module",
     "watch:module": "pnpm build:module --watch"
   }
 }

package/src/DataBrowserModule.ts

@@ -18,6 +18,7 @@ import { EditSchemaModelAction } from './actions/schema-model/EditSchemaModelAct
 import { TypeEngine } from './forms/TypeEngine';
 import { ViewSchemaModelAsJsonAction } from './actions/schema-model/ViewSchemaModelAsJsonAction';
 import { ViewHasManyAction } from './actions/schema-model/ViewHasManyAction';
+import { DeleteSchemaModelAction } from './actions/schema-model/DeleteSchemaModelAction';
 import { ModelJsonPanelFactory } from './panels/model-json/ModelJsonPanelFactory';
 import { SchemaModelIndexDefinition } from './entities/SchemaModelIndexDefinition';
 import { SavedQueryStore } from './stores/SavedQueryStore';
@@ -25,6 +26,7 @@ import { SavedQueryEntityDefinition } from './entities/SavedQueryEntityDefinitio
 import { OpenSavedQueryAction } from './actions/saved-queries/OpenSavedQueryAction';
 import { RemoveSavedQueryAction } from './actions/saved-queries/RemoveSavedQueryAction';
 import { registerQueryControlPreferences } from './preferences/QueryControlPreferences';
+import { registerSchemaOrderingPreferences } from './preferences/SchemaOrderingPreferences';
 
 export class DataBrowserModule extends AbstractReactorModule {
   constructor() {
@@ -51,12 +53,14 @@ export class DataBrowserModule extends AbstractReactorModule {
     actionStore.registerAction(new EditSchemaModelAction());
     actionStore.registerAction(new ViewSchemaModelAsJsonAction());
     actionStore.registerAction(new ViewHasManyAction());
+    actionStore.registerAction(new DeleteSchemaModelAction());
     actionStore.registerAction(new OpenSavedQueryAction());
     actionStore.registerAction(new RemoveSavedQueryAction());
 
     system.addStore(ConnectionStore, connectionStore);
     system.addStore(SavedQueryStore, new SavedQueryStore());
     registerQueryControlPreferences(ioc.get(PrefsStore));
+    registerSchemaOrderingPreferences(ioc.get(PrefsStore));
 
     system.registerDefinition(new ConnectionEntityDefinition());
     system.registerDefinition(new ConnectionFactoryEntityDefinition());

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

@@ -0,0 +1,43 @@
+import {
+  ActionStore,
+  EntityAction,
+  EntityActionEvent,
+  ioc,
+  setupDeleteConfirmation
+} from '@journeyapps-labs/reactor-mod';
+import { DataBrowserEntities } from '../../entities';
+import { SchemaModelObject } from '../../core/SchemaModelObject';
+import { runDeleteSchemaModels } from '../../core/delete-schema-models';
+import { ModelPanelModel } from '../../panels/model/ModelPanelFactory';
+
+export interface DeleteSchemaModelActionEvent extends EntityActionEvent<SchemaModelObject> {
+  sourcePanel?: ModelPanelModel;
+}
+
+export class DeleteSchemaModelAction extends EntityAction<SchemaModelObject, DeleteSchemaModelActionEvent> {
+  static ID = 'DELETE_SCHEMA_MODEL';
+
+  constructor() {
+    super({
+      id: DeleteSchemaModelAction.ID,
+      name: 'Delete schema model',
+      icon: 'trash',
+      target: DataBrowserEntities.SCHEMA_MODEL_OBJECT
+    });
+
+    setupDeleteConfirmation({
+      action: this
+    });
+  }
+
+  async fireEvent(event: DeleteSchemaModelActionEvent): Promise<any> {
+    await runDeleteSchemaModels({
+      models: [event.targetEntity],
+      sourcePanel: event.sourcePanel
+    });
+  }
+
+  static get() {
+    return ioc.get(ActionStore).getActionByID<DeleteSchemaModelAction>(DeleteSchemaModelAction.ID);
+  }
+}

package/src/core/AbstractConnection.ts

@@ -1,7 +1,6 @@
 import { Database, ObjectType } from '@journeyapps/db';
 import { Schema } from '@journeyapps/parser-schema';
 import { AbstractConnectionFactory } from './AbstractConnectionFactory';
-import * as _ from 'lodash';
 import { SchemaModelDefinition } from './SchemaModelDefinition';
 import { v4 } from 'uuid';
 import { BaseObserver } from '@journeyapps-labs/common-utils';
@@ -12,6 +11,8 @@ import { EntityDescription } from '@journeyapps-labs/reactor-mod';
 import { V4BackendClient, V4Index, V4Indexes } from '@journeyapps-labs/client-backend-v4';
 import { SchemaModelObject } from './SchemaModelObject';
 import { getDefaultConnectionColor } from './connection-colors';
+import { SchemaModelOrderValue, SchemaModelOrderingPreference } from '../preferences/SchemaOrderingPreferences';
+import * as _ from 'lodash';
 
 export interface AbstractConnectionSerialized {
   factory: string;
@@ -93,6 +94,27 @@ export abstract class AbstractConnection extends BaseObserver<AbstractConnection
     }
   }
 
+  async batchDelete(models: SchemaModelObject[]) {
+    if (models.length === 0) {
+      return;
+    }
+    const database = await this.getConnection();
+    let batch = new database.Batch();
+    for (let model of models) {
+      if (!model?.model?.persisted) {
+        continue;
+      }
+      batch.destroy(model.model);
+    }
+    await batch.execute();
+    for (let model of models) {
+      if (!model?.model?.persisted) {
+        continue;
+      }
+      model.definition.cache.delete(model.id);
+    }
+  }
+
   getSchemaModelDefinitionByName(name: string) {
     return this.schema_models.items.find((i) => i.definition.name === name);
   }
@@ -118,10 +140,18 @@ export abstract class AbstractConnection extends BaseObserver<AbstractConnection
     return connection.schema;
   }
 
+  protected getOrderedSchemaObjects(schema: Schema): ObjectType[] {
+    const objects = Object.keys(schema.objects).map((key) => schema.objects[key]);
+    if (SchemaModelOrderingPreference.getValue() === SchemaModelOrderValue.ALPHABETICAL) {
+      return _.sortBy(objects, (object) => (object.label || object.name || '').toLowerCase());
+    }
+    return objects;
+  }
+
   async reload() {
     await this.schema_models_collection.load(async () => {
       const schema = await this.getSchema();
-      return _.values(schema.objects);
+      return this.getOrderedSchemaObjects(schema);
     });
   }
 
@@ -156,7 +186,7 @@ export abstract class AbstractConnection extends BaseObserver<AbstractConnection
 
   protected async getSchemaModelDefinitions() {
     const schema = await this.getSchema();
-    return _.map(schema.objects, (o) => {
+    return this.getOrderedSchemaObjects(schema).map((o) => {
       return new SchemaModelDefinition({
         definition: o,
         connection: this

package/src/core/SchemaModelDefinition.ts

@@ -12,6 +12,7 @@ import { action, observable } from 'mobx';
 import { IndexModel } from './IndexModel';
 import { TypeEngine } from '../forms/TypeEngine';
 import { STANDARD_MODEL_FIELD_LABELS, StandardModelFields, idVariable } from './query/StandardModelFields';
+import { SchemaFieldOrderValue, SchemaFieldOrderingPreference } from '../preferences/SchemaOrderingPreferences';
 
 export interface SchemaModelDefinitionListener {
   resolved: (event: { object: SchemaModelObject }) => any;
@@ -29,6 +30,26 @@ export interface FilterableField {
   group: 'Fields' | 'Belongs to';
 }
 
+export enum OrderedSchemaFieldType {
+  FIELD = 'FIELD',
+  BELONGS_TO = 'BELONGS_TO'
+}
+
+export type OrderedSchemaFieldOrRelationship =
+  | {
+      type: OrderedSchemaFieldType.FIELD;
+      object: Variable;
+      key: string;
+      label: string;
+    }
+  | {
+      type: OrderedSchemaFieldType.BELONGS_TO;
+      object: ObjectType['belongsTo'][string];
+      key: string;
+      label: string;
+      variable: Variable;
+    };
+
 export class SchemaModelDefinition
   extends BaseObserver<SchemaModelDefinitionListener>
   implements LifecycleModel<ObjectType>
@@ -222,6 +243,70 @@ export class SchemaModelDefinition
     };
   }
 
+  private getSchemaOrderedFields(): Variable[] {
+    return Object.keys(this.definition.attributes).map((key) => this.definition.attributes[key]);
+  }
+
+  private getSchemaOrderedBelongsToFields(): OrderedSchemaFieldOrRelationship[] {
+    return Object.keys(this.definition.belongsTo)
+      .map((relationshipName) => {
+        const relationship = this.definition.belongsTo[relationshipName];
+        const variable = this.getBelongsToIdVariableForRelationship(relationshipName);
+        if (!relationship || !variable) {
+          return null;
+        }
+        return {
+          type: OrderedSchemaFieldType.BELONGS_TO,
+          object: relationship,
+          key: variable.name,
+          label: relationship.name || variable.label || variable.name,
+          variable
+        } as OrderedSchemaFieldOrRelationship;
+      })
+      .filter((value): value is OrderedSchemaFieldOrRelationship => !!value);
+  }
+
+  private getAlphabeticalOrderedFields(): OrderedSchemaFieldOrRelationship[] {
+    return _.sortBy(
+      this.getSchemaOrderedFields().map((attribute) => {
+        return {
+          type: OrderedSchemaFieldType.FIELD,
+          object: attribute,
+          key: attribute.name,
+          label: attribute.label || attribute.name
+        } as OrderedSchemaFieldOrRelationship;
+      }),
+      (item) => item.label.toLowerCase()
+    );
+  }
+
+  getOrderedFieldsAndRelationships(): OrderedSchemaFieldOrRelationship[] {
+    const orderedFields = this.getAlphabeticalOrderedFields();
+    const orderedBelongsTo = _.sortBy(this.getSchemaOrderedBelongsToFields(), (item) => item.label.toLowerCase());
+
+    switch (SchemaFieldOrderingPreference.getValue()) {
+      case SchemaFieldOrderValue.ALPHABETICAL:
+        return _.sortBy([...orderedFields, ...orderedBelongsTo], (item) => item.label.toLowerCase());
+      case SchemaFieldOrderValue.BELONGS_TO_FIRST:
+        return [...orderedBelongsTo, ...orderedFields];
+      case SchemaFieldOrderValue.BELONGS_TO_LAST:
+        return [...orderedFields, ...orderedBelongsTo];
+      case SchemaFieldOrderValue.AS_DEFINED_IN_SCHEMA:
+      default:
+        return [
+          ...this.getSchemaOrderedFields().map((attribute) => {
+            return {
+              type: OrderedSchemaFieldType.FIELD,
+              object: attribute,
+              key: attribute.name,
+              label: attribute.label || attribute.name
+            } as OrderedSchemaFieldOrRelationship;
+          }),
+          ...this.getSchemaOrderedBelongsToFields()
+        ];
+    }
+  }
+
   getFilterableFields(typeEngine: TypeEngine): FilterableField[] {
     return [
       ...(typeEngine.getHandler(idVariable.type)?.setupFilter
@@ -233,28 +318,23 @@ export class SchemaModelDefinition
             }
           ]
         : []),
-      ...Object.values(this.definition.belongsToIdVars)
-        .map((variable) => {
-          if (!variable?.name || !variable.relationship) {
-            return null;
+      ...this.getOrderedFieldsAndRelationships()
+        .map((entry) => {
+          if (entry.type === OrderedSchemaFieldType.BELONGS_TO) {
+            return {
+              key: entry.key,
+              label: entry.label,
+              group: 'Belongs to' as const
+            };
           }
-          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);
+
+          const handler = typeEngine.getHandler(entry.object.type);
           if (!handler?.setupFilter) {
             return null;
           }
           return {
-            key: attribute.name,
-            label: attribute.label || attribute.name,
+            key: entry.key,
+            label: entry.label,
             group: 'Fields' as const
           };
         })

package/src/core/delete-schema-models.ts

@@ -0,0 +1,131 @@
+import { CrudError } from '@journeyapps/db';
+import {
+  DialogStore,
+  ioc,
+  NotificationStore,
+  NotificationType,
+  ReactorPanelModel,
+  WorkspaceStore
+} from '@journeyapps-labs/reactor-mod';
+import * as _ from 'lodash';
+import { SchemaModelObject } from './SchemaModelObject';
+import { QueryPanelModel } from '../panels/query/QueryPanelFactory';
+import { ModelPanelModel } from '../panels/model/ModelPanelFactory';
+
+export interface DeleteSchemaModelsOptions {
+  models: SchemaModelObject[];
+  sourcePanel?: ReactorPanelModel;
+}
+
+const normalizeModels = (models: SchemaModelObject[]) => {
+  return _.uniqBy(
+    models.filter((model) => model?.model?.persisted),
+    (model) => model.id
+  );
+};
+
+const getErrorMessage = (error: unknown) => {
+  if (error instanceof CrudError) {
+    return error.firstError()?.detail || error.message;
+  }
+  if (error instanceof Error) {
+    return error.message;
+  }
+  return 'An unknown error occurred while deleting the selected models.';
+};
+
+const buildDeleteMarkdown = (models: SchemaModelObject[]) => {
+  if (models.length === 1) {
+    const model = models[0];
+    const display = model.data?.display || model.id;
+    return `Delete **${display}**?\n\nThis action cannot be undone.`;
+  }
+
+  return `Delete **${models.length}** models?\n\nThis action cannot be undone.`;
+};
+
+export const runDeleteSchemaModels = async (options: DeleteSchemaModelsOptions): Promise<boolean> => {
+  const models = normalizeModels(options.models);
+
+  if (models.length === 0) {
+    return false;
+  }
+
+  const definition = models[0].definition;
+  const mismatchedModel = models.find((model) => model.definition.connection !== definition.connection);
+  if (mismatchedModel) {
+    ioc.get(NotificationStore).showNotification({
+      title: 'Cannot delete models',
+      description: 'Selected models must come from the same connection.',
+      type: NotificationType.ERROR
+    });
+    return false;
+  }
+
+  try {
+    await definition.connection.batchDelete(models);
+    const sourcePanelID = options.sourcePanel?.id;
+    if (options.sourcePanel instanceof ModelPanelModel) {
+      options.sourcePanel.delete();
+    }
+    await Promise.all(
+      ioc
+        .get(WorkspaceStore)
+        .flatten(ioc.get(WorkspaceStore).getRoot())
+        .map(async (panel) => {
+          if (panel.id === sourcePanelID) {
+            return;
+          }
+          if (panel instanceof QueryPanelModel) {
+            await panel.reloadQuery();
+            return;
+          }
+          if (panel instanceof ModelPanelModel && models.some((model) => model.id === panel.model?.id)) {
+            panel.delete();
+          }
+        })
+    );
+    ioc.get(NotificationStore).showNotification({
+      title: models.length === 1 ? 'Model deleted' : 'Models deleted',
+      description:
+        models.length === 1
+          ? 'The selected model has been deleted.'
+          : `${models.length} selected models have been deleted.`,
+      type: NotificationType.SUCCESS
+    });
+    return true;
+  } catch (error) {
+    ioc.get(NotificationStore).showNotification({
+      title: 'Delete failed',
+      description: getErrorMessage(error),
+      type: NotificationType.ERROR
+    });
+    return false;
+  }
+};
+
+export const deleteSchemaModels = async (options: DeleteSchemaModelsOptions): Promise<boolean> => {
+  const models = normalizeModels(options.models);
+
+  if (models.length <= 1) {
+    return false;
+  }
+
+  const confirmed = await ioc.get(DialogStore).showConfirmDialog({
+    title: 'Delete selected models',
+    markdown: buildDeleteMarkdown(models),
+    yesBtn: {
+      label: `Delete ${models.length} models`,
+      icon: 'trash'
+    }
+  });
+
+  if (!confirmed) {
+    return false;
+  }
+
+  return runDeleteSchemaModels({
+    ...options,
+    models
+  });
+};

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

@@ -17,6 +17,7 @@ import { STANDARD_MODEL_FIELD_LABELS, StandardModelFields, idVariable } from '..
 import { TypeEngine } from '../../../forms/TypeEngine';
 import { setupBelongsToFilter } from '../../../forms/types/belongs-to-filter';
 import { Condition, SimpleFilter, Statement } from '../filters';
+import { OrderedSchemaFieldType } from '../../SchemaModelDefinition';
 
 export interface BuildSimpleQueryColumnsOptions {
   definition: SchemaModelDefinition;
@@ -81,82 +82,88 @@ export const buildSimpleQueryColumns = (options: BuildSimpleQueryColumnsOptions)
         return <CellDisplayWidget name={StandardModelFields.UPDATED_AT} cell={row.model.updated_at} row={row} />;
       }
     },
-    ..._.map(options.definition.definition.belongsToIdVars, (a) => {
-      return {
-        key: a.name,
-        display: (
-          <SmartColumnWidget
-            variable={options.definition.definition.belongsToVars[a.relationship]}
-            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}
-              filterBelongsTo={async (object) => {
-                options.filterState.setFilter(
-                  a.name,
-                  new SimpleFilter(a, [new Statement(Condition.EQUALS, object.id)])
-                );
+    ...options.definition.getOrderedFieldsAndRelationships().flatMap((entry) => {
+      if (entry.type === OrderedSchemaFieldType.BELONGS_TO) {
+        const variable = entry.variable;
+        const relationship = entry.object;
+        return [
+          {
+            key: variable.name,
+            display: (
+              <SmartColumnWidget
+                variable={options.definition.definition.belongsToVars[variable.relationship]}
+                typeLabel={`Belongs To: ${relationship.foreignType.label}`}
+                filter={options.filterState.getFilter(variable.name)}
+                setupFilter={async ({ filter }) => {
+                  return await setupBelongsToFilter({
+                    definition: options.definition,
+                    relationship,
+                    variable,
+                    filter
+                  });
+                }}
+                filterChanged={async (filter) => {
+                  if (!filter) {
+                    options.filterState.getFilter(variable.name)?.delete();
+                    return;
+                  }
+                  options.filterState.setFilter(variable.name, filter);
+                }}
+              />
+            ),
+            noWrap: true,
+            accessor: (cell, row: PageRow) => {
+              return (
+                <SmartBelongsToDisplayWidget
+                  variable_id={variable}
+                  row={row}
+                  connection={options.connection}
+                  filterBelongsTo={async (object) => {
+                    options.filterState.setFilter(
+                      variable.name,
+                      new SimpleFilter(variable, [new Statement(Condition.EQUALS, object.id)])
+                    );
+                  }}
+                />
+              );
+            }
+          } as TableColumn
+        ];
+      }
+
+      const attribute = entry.object;
+      return [
+        {
+          key: attribute.name,
+          display: (
+            <SmartColumnWidget
+              variable={attribute}
+              typeLabel={ioc.get(TypeEngine).getHandler(attribute.type)?.getTypeLabel?.(attribute.type)}
+              filter={options.filterState.getFilter(attribute.name)}
+              sortDirection={options.sortState.getSort(attribute.name)?.direction}
+              onToggleSort={async () => {
+                const sort = options.sortState.getSort(attribute.name);
+                if (!sort) {
+                  options.sortState.addSort(SimpleQuerySort.create(attribute.name));
+                  return;
+                }
+                sort.toggle();
+              }}
+              filterChanged={async (filter) => {
+                if (!filter) {
+                  options.filterState.getFilter(attribute.name)?.delete();
+                  return;
+                }
+                options.filterState.setFilter(attribute.name, filter);
               }}
             />
-          );
-        }
-      } as TableColumn;
-    }),
-    ..._.map(options.definition.definition.attributes, (a) => {
-      return {
-        key: a.name,
-        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 () => {
-              const sort = options.sortState.getSort(a.name);
-              if (!sort) {
-                options.sortState.addSort(SimpleQuerySort.create(a.name));
-                return;
-              }
-              sort.toggle();
-            }}
-            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 <SmartCellDisplayWidget name={a.name} row={row} />;
-        }
-      } as TableColumn;
+          ),
+          noWrap: true,
+          accessor: (cell, row: PageRow) => {
+            return <SmartCellDisplayWidget name={attribute.name} row={row} />;
+          }
+        } as TableColumn
+      ];
     })
   ];
 };

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

@@ -1,17 +1,30 @@
 import * as React from 'react';
-import { NotificationStore, NotificationType, TableButtonWidget, ioc, styled } from '@journeyapps-labs/reactor-mod';
+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> = (props) => {
+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>
-      <S.Value>{props.id}</S.Value>
+      {showIdValue ? <S.Value>{props.id}</S.Value> : null}
       <TableButtonWidget
         icon="copy"
         tooltip="Copy ID"
@@ -26,7 +39,7 @@ export const IDCellDisplayWidget: React.FC<IDCellDisplayWidgetProps> = (props) =
       />
     </S.Container>
   );
-};
+});
 
 namespace S {
   export const Container = styled.div`