Added the ability to search for tables and automatically bring them into view in the ERD tool. #4306

adityatoshniwal · adityatoshniwal · commit 0b8c4fbc32f1 · 2025-10-28T16:22:01.000+05:30
diff --git a/docs/en_US/erd_tool.rst b/docs/en_US/erd_tool.rst
@@ -86,6 +86,9 @@ Editing Options
    +----------------------+---------------------------------------------------------------------------------------------------+----------------+
    | Icon                 | Behavior                                                                                          | Shortcut       |
    +======================+===================================================================================================+================+
+   | *Search table*       | Click to search for a table in the diagram. Selecting a table from the search results will bring  | Option/Alt +   |
+   |                      | it into view and highlight it.                                                                    | Ctrl + F       |
+   +----------------------+---------------------------------------------------------------------------------------------------+----------------+
    | *Add table*          | Click this button to add a new table to the diagram. On clicking, this will open a table dialog   | Option/Alt +   |
    |                      | where you can put the table details.                                                              | Ctrl + A       |
    +----------------------+---------------------------------------------------------------------------------------------------+----------------+
@@ -109,11 +112,14 @@ Table Relationship Options
    +----------------------+---------------------------------------------------------------------------------------------------+----------------+
    | Icon                 | Behavior                                                                                          | Shortcut       |
    +======================+===================================================================================================+================+
-   | *1M*                 | Click this button to open a one-to-many relationship dialog to add a relationship between the     | Option/Alt +   |
+   | *1-1*                | Click this button to open a one-to-one relationship dialog to add a relationship between the      | Option/Alt +   |
+   |                      | two tables. The selected table becomes the referencing table.                                     | Ctrl + B       |
+   +----------------------+---------------------------------------------------------------------------------------------------+----------------+
+   | *1-M*                | Click this button to open a one-to-many relationship dialog to add a relationship between the     | Option/Alt +   |
    |                      | two tables. The selected table becomes the referencing table and will have the *many* endpoint of | Ctrl + O       |
    |                      | the link.                                                                                         |                |
    +----------------------+---------------------------------------------------------------------------------------------------+----------------+
-   | *MM*                 | Click this button to open a many-to-many relationship dialog to add a relationship between the    | Option/Alt +   |
+   | *M-M*                | Click this button to open a many-to-many relationship dialog to add a relationship between the    | Option/Alt +   |
    |                      | two tables. This option will create a new table based on the selected columns for the two relating| Ctrl + M       |
    |                      | tables and link them.                                                                             |                |
    +----------------------+---------------------------------------------------------------------------------------------------+----------------+
diff --git a/docs/en_US/images/erd_tool.png b/docs/en_US/images/erd_tool.png
diff --git a/docs/en_US/images/erd_tool_toolbar.png b/docs/en_US/images/erd_tool_toolbar.png
diff --git a/web/pgadmin/static/js/helpers/ModalProvider.jsx b/web/pgadmin/static/js/helpers/ModalProvider.jsx
@@ -295,7 +295,7 @@ const StyleDialog = styled(Dialog)(({theme}) => ({
   },
 }));
 
-function ModalContainer({ id, title, content, dialogHeight, dialogWidth, onClose, fullScreen = false, isFullWidth = false, showFullScreen = false, isResizeable = false, minHeight = MIN_HEIGHT, minWidth = MIN_WIDTH, showTitle=true }) {
+function ModalContainer({ id, title, content, dialogHeight, dialogWidth, onClose, fullScreen = false, isFullWidth = false, showFullScreen = false, isResizeable = false, minHeight = MIN_HEIGHT, minWidth = MIN_WIDTH, showTitle=true, ...props }) {
   let useModalRef = useModal();
   let closeModal = (_e, reason) => {
     if(reason == 'backdropClick' && showTitle) {
@@ -321,6 +321,7 @@ function ModalContainer({ id, title, content, dialogHeight, dialogWidth, onClose
       fullScreen={isFullScreen}
       fullWidth={isFullWidth}
       disablePortal
+      {...props}
     >
       { showTitle &&
         <DialogTitle className='modal-drag-area'>
diff --git a/web/pgadmin/tools/erd/__init__.py b/web/pgadmin/tools/erd/__init__.py
@@ -158,6 +158,24 @@ def register_preferences(self):
             fields=shortcut_fields
         )
 
+        self.preference.register(
+            'keyboard_shortcuts',
+            'search_table',
+            gettext('Search table'),
+            'keyboardshortcut',
+            {
+                'alt': True,
+                'shift': False,
+                'control': True,
+                'key': {
+                    'key_code': 70,
+                    'char': 'f'
+                }
+            },
+            category_label=PREF_LABEL_KEYBOARD_SHORTCUTS,
+            fields=shortcut_fields
+        )
+
         self.preference.register(
             'keyboard_shortcuts',
             'add_table',
diff --git a/web/pgadmin/tools/erd/static/js/erd_tool/ERDConstants.js b/web/pgadmin/tools/erd/static/js/erd_tool/ERDConstants.js
@@ -4,10 +4,13 @@ export const ERD_EVENTS = {
   TRIGGER_SHOW_SQL: 'TRIGGER_SHOW_SQL',
   SHOW_SQL: 'SHOW_SQL',
   DOWNLOAD_IMAGE: 'DOWNLOAD_IMAGE',
+
+  SEARCH_NODE: 'SEARCH_NODE',
   ADD_NODE: 'ADD_NODE',
   EDIT_NODE: 'EDIT_NODE',
   CLONE_NODE: 'CLONE_NODE',
   DELETE_NODE: 'DELETE_NODE',
+
   SHOW_NOTE: 'SHOW_NOTE',
   ONE_TO_ONE: 'ONE_TO_ONE',
   ONE_TO_MANY: 'ONE_TO_MANY',
diff --git a/web/pgadmin/tools/erd/static/js/erd_tool/components/ERDTool.jsx b/web/pgadmin/tools/erd/static/js/erd_tool/components/ERDTool.jsx
@@ -42,6 +42,7 @@ import { useApplicationState } from '../../../../../../settings/static/Applicati
 import { connectServerModal, connectServer } from '../../../../../sqleditor/static/js/components/connectServer';
 import { useEffect } from 'react';
 import { FileManagerUtils } from '../../../../../../misc/file_manager/static/js/components/FileManager';
+import SearchNode from './SearchNode';
 
 /* Custom react-diagram action for keyboard events */
 export class KeyboardShortcutAction extends Action {
@@ -169,9 +170,9 @@ export default class ERDTool extends React.Component {
     this.eventBus = new EventBus();
 
     _.bindAll(this, ['onLoadDiagram', 'onSaveDiagram', 'onSQLClick',
-      'onImageClick', 'onAddNewNode', 'onEditTable', 'onCloneNode', 'onDeleteNode', 'onNoteClick',
+      'onImageClick', 'onSearchNode', 'onAddNewNode', 'onEditTable', 'onCloneNode', 'onDeleteNode', 'onNoteClick',
       'onNoteClose', 'onOneToOneClick', 'onOneToManyClick', 'onManyToManyClick', 'onAutoDistribute', 'onDetailsToggle',
-      'onChangeColors', 'onDropNode', 'onNotationChange', 'closePanel'
+      'onChangeColors', 'onDropNode', 'onNotationChange', 'closePanel', 'scrollToNode'
     ]);
 
     this.diagram.zoomToFit = this.diagram.zoomToFit.bind(this.diagram);
@@ -240,6 +241,7 @@ export default class ERDTool extends React.Component {
     this.eventBus.registerListener(ERD_EVENTS.SAVE_DIAGRAM, this.onSaveDiagram);
     this.eventBus.registerListener(ERD_EVENTS.SHOW_SQL, this.onSQLClick);
     this.eventBus.registerListener(ERD_EVENTS.DOWNLOAD_IMAGE, this.onImageClick);
+    this.eventBus.registerListener(ERD_EVENTS.SEARCH_NODE, this.onSearchNode);
     this.eventBus.registerListener(ERD_EVENTS.ADD_NODE, this.onAddNewNode);
     this.eventBus.registerListener(ERD_EVENTS.EDIT_NODE, this.onEditTable);
     this.eventBus.registerListener(ERD_EVENTS.CLONE_NODE, this.onCloneNode);
@@ -276,6 +278,9 @@ export default class ERDTool extends React.Component {
       [this.state.preferences.download_image, ()=>{
         this.eventBus.fireEvent(ERD_EVENTS.DOWNLOAD_IMAGE);
       }],
+      [this.state.preferences.search_table, ()=>{
+        this.eventBus.fireEvent(ERD_EVENTS.SEARCH_NODE);
+      }],
       [this.state.preferences.add_table, ()=>{
         this.eventBus.fireEvent(ERD_EVENTS.ADD_NODE);
       }],
@@ -471,12 +476,69 @@ export default class ERDTool extends React.Component {
     }
   }
 
+  scrollToNode(node) {
+    const engine = this.diagram.getEngine();
+    const model = engine.getModel();
+    const container = this.canvasEle;
+    if (!node || !container) return;
+
+    const { x, y } = node.getPosition();
+    const zoom = model.getZoomLevel() / 100;
+    const offsetX = model.getOffsetX();
+    const offsetY = model.getOffsetY();
+
+    const viewportWidth = container.clientWidth;
+    const viewportHeight = container.clientHeight;
+
+    const nodeWidth = node.width; // Approximate width of a table node
+    const nodeHeight = node.height; // Approximate height of a table node
+
+    // Node screen bounds
+    const nodeLeft = x * zoom + offsetX;
+    const nodeRight = nodeLeft + nodeWidth * zoom;
+    const nodeTop = y * zoom + offsetY;
+    const nodeBottom = nodeTop + nodeHeight * zoom;
+
+    let newOffsetX = offsetX;
+    let newOffsetY = offsetY;
+
+    // Check horizontal visibility
+    if (nodeLeft < 0) {
+      newOffsetX += -nodeLeft + 20; // 20px padding
+    } else if (nodeRight > viewportWidth) {
+      newOffsetX -= nodeRight - viewportWidth + 20;
+    }
+
+    // Check vertical visibility
+    if (nodeHeight * zoom >= viewportHeight) {
+    // Node taller than viewport: snap top of node to top of viewport
+      newOffsetY = offsetY + viewportHeight / 2 - (nodeHeight * zoom) / 2;
+      newOffsetY = offsetY - (nodeTop - 20); // aligns top
+    } else {
+    // Node fits in viewport: ensure fully visible
+      if (nodeTop < 0) {
+        newOffsetY += -nodeTop + 20;
+      } else if (nodeBottom > viewportHeight) {
+        newOffsetY -= nodeBottom - viewportHeight + 20;
+      }
+    }
+
+    // Update offset only if needed
+    if (newOffsetX !== offsetX || newOffsetY !== offsetY) {
+      model.setOffset(newOffsetX, newOffsetY);
+    }
+
+    this.diagram.repaint();
+    node.setSelected(true);
+    node.fireEvent({}, 'highlightFlash');
+  };
+
+
   addEditTable(node) {
     let dialog = this.getDialog('table_dialog');
     if(node) {
-      let [schema, table] = node.getSchemaTableName();
       let oldData = node.getData();
-      dialog(gettext('Table: %s (%s)', _.escape(table),_.escape(schema)), oldData, false, (newData)=>{
+      dialog(gettext('Table: %s', node.getDisplayName()), oldData, false, (newData)=>{
         if(this.diagram.anyDuplicateNodeName(newData, oldData)) {
           return gettext('Table name already exists');
         }
@@ -543,6 +605,12 @@ export default class ERDTool extends React.Component {
     }
   }
 
+  onSearchNode() {
+    this.context.showModal(gettext('Search'), (closeModal)=>(
+      <SearchNode tableNodes={this.diagram.getModel().getNodesDict()} onClose={closeModal} scrollToNode={this.scrollToNode} />
+    ), {id: 'id-erd-search-node', showTitle: false, disableRestoreFocus: true});
+  }
+
   onAddNewNode() {
     this.addEditTable();
   }
diff --git a/web/pgadmin/tools/erd/static/js/erd_tool/components/FloatingNote.jsx b/web/pgadmin/tools/erd/static/js/erd_tool/components/FloatingNote.jsx
@@ -62,8 +62,7 @@ export default function FloatingNote({open, onClose, anchorEl, rows, noteNode})
 
   const header = useMemo(()=>{
     if(noteNode) {
-      let [schema, name] = noteNode.getSchemaTableName();
-      return `${name} (${schema})`;
+      return noteNode.getDisplayName();
     }
     return '';
   }, [open]);
diff --git a/web/pgadmin/tools/erd/static/js/erd_tool/components/MainToolBar.jsx b/web/pgadmin/tools/erd/static/js/erd_tool/components/MainToolBar.jsx
@@ -28,6 +28,7 @@ import ImageRoundedIcon from '@mui/icons-material/ImageRounded';
 import FormatColorFillRoundedIcon from '@mui/icons-material/FormatColorFillRounded';
 import FormatColorTextRoundedIcon from '@mui/icons-material/FormatColorTextRounded';
 import AccountTreeOutlinedIcon from '@mui/icons-material/AccountTreeOutlined';
+import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';
 
 import { PgMenu, PgMenuItem, usePgMenuGroup } from '../../../../../../static/js/components/Menu';
 import gettext from 'sources/gettext';
@@ -201,6 +202,11 @@ export function MainToolBar({preferences, eventBus, fillColor, textColor, notati
             }} />
         </PgButtonGroup>
         <PgButtonGroup size="small">
+          <PgIconButton title={gettext('Search Table')} icon={<SearchOutlinedIcon />}
+            shortcut={preferences.search_table}
+            onClick={()=>{
+              eventBus.fireEvent(ERD_EVENTS.SEARCH_NODE);
+            }} />
           <PgIconButton title={gettext('Add Table')} icon={<AddBoxIcon />}
             shortcut={preferences.add_table}
             onClick={()=>{
diff --git a/web/pgadmin/tools/erd/static/js/erd_tool/components/SearchNode.jsx b/web/pgadmin/tools/erd/static/js/erd_tool/components/SearchNode.jsx
@@ -0,0 +1,40 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2025, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+
+import PropTypes from 'prop-types';
+import { InputSelect } from '../../../../../../static/js/components/FormComponents';
+
+
+export default function SearchNode({tableNodes, onClose, scrollToNode}) {
+  const onSelectChange = (val) => {
+    let node = tableNodes[val];
+    if(node) {
+      scrollToNode(node);
+    }
+    onClose();
+  };
+
+  return (
+    <InputSelect
+      options={Object.values(tableNodes).map(node => ({
+        value: node.getID(),
+        label: node.getDisplayName(),
+      }))}
+      onChange={onSelectChange}
+      autoFocus
+      placeholder="Select a table"
+      openMenuOnFocus
+    />
+  );
+}
+
+SearchNode.propTypes = {
+  tableNodes: PropTypes.object.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
diff --git a/web/pgadmin/tools/erd/static/js/erd_tool/dialogs/ManyToManyDialog.js b/web/pgadmin/tools/erd/static/js/erd_tool/dialogs/ManyToManyDialog.js
@@ -50,8 +50,7 @@ class ManyToManySchema extends BaseUISchema {
 export function getManyToManyDialogSchema(attributes, tableNodesDict) {
   let tablesData = [];
   _.forEach(tableNodesDict, (node, uid)=>{
-    let [schema, name] = node.getSchemaTableName();
-    tablesData.push({value: uid, label: `(${schema}) ${name}`, image: 'icon-table'});
+    tablesData.push({value: uid, label: node.getDisplayName(), image: 'icon-table'});
   });
 
   return new ManyToManySchema({
diff --git a/web/pgadmin/tools/erd/static/js/erd_tool/dialogs/OneToManyDialog.js b/web/pgadmin/tools/erd/static/js/erd_tool/dialogs/OneToManyDialog.js
@@ -50,8 +50,7 @@ class OneToManySchema extends BaseUISchema {
 export function getOneToManyDialogSchema(attributes, tableNodesDict) {
   let tablesData = [];
   _.forEach(tableNodesDict, (node, uid)=>{
-    let [schema, name] = node.getSchemaTableName();
-    tablesData.push({value: uid, label: `(${schema}) ${name}`, image: 'icon-table'});
+    tablesData.push({value: uid, label: node.getDisplayName(), image: 'icon-table'});
   });
 
   return new OneToManySchema({
diff --git a/web/pgadmin/tools/erd/static/js/erd_tool/dialogs/OneToOneDialog.js b/web/pgadmin/tools/erd/static/js/erd_tool/dialogs/OneToOneDialog.js
@@ -83,8 +83,7 @@ class OneToOneSchema extends BaseUISchema {
 export function getOneToOneDialogSchema(attributes, tableNodesDict) {
   let tablesData = [];
   _.forEach(tableNodesDict, (node, uid)=>{
-    let [schema, name] = node.getSchemaTableName();
-    tablesData.push({value: uid, label: `(${schema}) ${name}`, image: 'icon-table'});
+    tablesData.push({value: uid, label: node.getDisplayName(), image: 'icon-table'});
   });
 
   return new OneToOneSchema({
diff --git a/web/pgadmin/tools/erd/static/js/erd_tool/dialogs/TableDialog.js b/web/pgadmin/tools/erd/static/js/erd_tool/dialogs/TableDialog.js
@@ -61,8 +61,7 @@ export function getTableDialogSchema(attributes, isNew, tableNodesDict, colTypes
           references: ()=>{
             let retOpts = [];
             _.forEach(tableNodesDict, (node, uid)=>{
-              let [schema, name] = node.getSchemaTableName();
-              retOpts.push({value: uid, label: `(${schema}) ${name}`});
+              retOpts.push({value: uid, label: node.getDisplayName()});
             });
             return retOpts;
           }
diff --git a/web/pgadmin/tools/erd/static/js/erd_tool/nodes/TableNode.jsx b/web/pgadmin/tools/erd/static/js/erd_tool/nodes/TableNode.jsx
@@ -147,6 +147,10 @@ export class TableNodeModel extends DefaultNodeModel {
     return [this._data.schema, this._data.name];
   }
 
+  getDisplayName() {
+    return `(${this._data.schema}) ${this._data.name}`;
+  }
+
   remove() {
     Object.values(this.getPorts()).forEach((port)=>{
       port.removeAllLinks();
@@ -221,6 +225,18 @@ const StyledDiv = styled('div')(({theme})=>({
     position: 'relative',
     width: `${TABLE_WIDTH}px`,
     fontSize: '0.8em',
+
+    '&.flash': {
+      animation: 'flash 2s ease-in-out',
+    },
+    '@keyframes flash': {
+      '0%': {
+        boxShadow: `0 0 10px 5px ${theme.palette.primary.main}`,
+      },
+      '100%': {
+        boxShadow: 'none',
+      },
+    },
     '& div:last-child': {
       borderBottomLeftRadius: 'inherit',
       borderBottomRightRadius: 'inherit',
@@ -271,6 +287,7 @@ export class TableNodeWidget extends React.Component {
 
     this.state = {
       show_details: true,
+      flash: false,
     };
 
     this.tableNodeEventListener = this.props.node.registerListener({
@@ -286,6 +303,12 @@ export class TableNodeWidget extends React.Component {
       dataAvaiable: ()=>{
         /* Just re-render */
         this.setState({});
+      },
+      highlightFlash: ()=>{
+        this.setState({flash: true});
+        setTimeout(()=>{
+          this.setState({flash: false});
+        }, 2000);
       }
     });
   }
@@ -367,8 +390,16 @@ export class TableNodeWidget extends React.Component {
       backgroundColor: tableMetaData.fillColor,
       color: tableMetaData.textColor,
     };
+
+    let classList = ['TableNode-tableNode'];
+    if(this.props.node.isSelected()) {
+      classList.push('TableNode-tableNodeSelected');
+    }
+    if(this.state.flash) {
+      classList.push('flash');
+    }
     return (
-      <StyledDiv className={['TableNode-tableNode', (this.props.node.isSelected() ? 'TableNode-tableNodeSelected': '')].join(' ')}
+      <StyledDiv className={classList.join(' ')}
         onDoubleClick={()=>{this.props.node.fireEvent({}, 'editTable');}} style={styles}>
         <div className={'TableNode-tableSection TableNode-tableToolbar'}>
           <PgIconButton size="xs" title={gettext('Show Details')} icon={this.state.show_details ? <VisibilityRoundedIcon /> : <VisibilityOffRoundedIcon />}
diff --git a/web/regression/javascript/SchemaView/SchemaDialogView.spec.js b/web/regression/javascript/SchemaView/SchemaDialogView.spec.js
diff --git a/web/regression/javascript/erd/fake_item.js b/web/regression/javascript/erd/fake_item.js
diff --git a/web/regression/javascript/erd/ui_components/FloatingNote.spec.js b/web/regression/javascript/erd/ui_components/FloatingNote.spec.js

Original file line number	Diff line number	Diff line change
`@@ -62,8 +62,7 @@ export default function FloatingNote({open, onClose, anchorEl, rows, noteNode})`
`62`	`62`
`63`	`63`	`const header = useMemo(()=>{`
`64`	`64`	`if(noteNode) {`
`65`		`- let [schema, name] = noteNode.getSchemaTableName();`
`66`		- return `${name} (${schema})`;
	`65`	`+ return noteNode.getDisplayName();`
`67`	`66`	`}`
`68`	`67`	`return '';`
`69`	`68`	`}, [open]);`