Browse Source

HUE-9381 [ui] Table ERD - Better CSS class support in entities

sreenaths 5 years ago
parent
commit
30b70b4dbc

+ 7 - 6
desktop/core/src/desktop/js/apps/tableBrowser/propsMappers.ts

@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+import { Dictionary } from 'lodash';
 import { Table, Column } from '../../components/er-diagram/lib/entities';
 import { IEntity, IRelation } from '../../components/er-diagram/lib/interfaces';
 
@@ -51,7 +52,7 @@ const createTable = (database: string, fromDB: string, name: string, columnNames
   });
   const table = new Table(database, name, columns);
   if (database === fromDB) {
-    table.className = 'hide-db';
+    table.cssClassName = 'hide-db';
   }
   return table;
 };
@@ -61,11 +62,11 @@ const reorderBasedOnKeys = (
   primaryKeys: IPrimaryKey[],
   foreignKeys: IForeignKey[]
 ): string[] => {
-  const keyWeight = {};
+  const keyWeight: Dictionary<number> = {};
 
   columnNames.forEach((key: string) => (keyWeight[key] = 0));
-  foreignKeys.forEach((key: IPrimaryKey) => (keyWeight[key.name] = 1));
-  primaryKeys.forEach((key: IForeignKey) => (keyWeight[key.name] = 2));
+  foreignKeys.forEach((key: IForeignKey) => (keyWeight[key.name] = 1));
+  primaryKeys.forEach((key: IPrimaryKey) => (keyWeight[key.name] = 2));
 
   columnNames.sort((a, b) => keyWeight[b] - keyWeight[a]);
 
@@ -100,9 +101,9 @@ const getForeignKeyRelations = (
   fromDB: string,
   fromTableName: string,
   foreignKeys: IForeignKey[]
-) => {
+): IRelation[] => {
   const fromTableId = Table.buildId(fromDB, fromTableName);
-  return foreignKeys.map(key => {
+  return foreignKeys.map((key: IForeignKey) => {
     const toPath = key.to.split('.');
     return {
       desc: 'Foreign Key',

+ 3 - 2
desktop/core/src/desktop/js/components/er-diagram/comps/literal-entity.vue

@@ -17,7 +17,7 @@
 -->
 
 <template>
-  <div :class="`literal-entity ${entity.className || ''}`" @click="$emit('click', entity)">
+  <div :class="`literal-entity ${entity.cssClassName || ''}`" @click="$emit('click', entity)">
     <div class="left-point" />
     <div class="right-point" />
     <div class="literal-value">
@@ -34,6 +34,7 @@
 
   @Component
   export default class LiteralEntity extends Vue {
-    @Prop() entity: Literal;
+    @Prop()
+    entity!: Literal;
   }
 </script>

+ 2 - 2
desktop/core/src/desktop/js/components/er-diagram/comps/table-entity.vue

@@ -17,7 +17,7 @@
 -->
 
 <template>
-  <div :class="`table-entity ${entity.className || ''}`">
+  <div :class="`table-entity ${entity.cssClassName || ''}`">
     <div :title="entity.database" class="db-name">
       {{ entity.database }}
     </div>
@@ -32,7 +32,7 @@
         :key="column.id"
         :data-entity-id="column.id"
         :title="column.name"
-        :class="`column-entity ${column.className || ''}`"
+        :class="`column-entity ${column.cssClassName || ''}`"
         @click="$emit('click', column)"
       >
         <div class="left-point" />

+ 13 - 9
desktop/core/src/desktop/js/components/er-diagram/index.vue

@@ -50,7 +50,7 @@
             :key="index"
             :data-entity-id-left="relation.left.id"
             :data-entity-id-right="relation.right.id"
-            class="relation-path"
+            :class="`relation-path ${relation.cssClassName || ''}`"
           />
         </svg>
       </div>
@@ -74,6 +74,11 @@
 
   const CURVATURE = 40;
 
+  interface IPos {
+    x: number;
+    y: number;
+  }
+
   @Component({
     components: {
       TableEntity,
@@ -82,9 +87,9 @@
   })
   export default class ERDiagram extends Vue {
     @Prop()
-    entities: IEntity[];
+    entities!: IEntity[];
     @Prop()
-    relations: IRelation[];
+    relations!: IRelation[];
 
     EntityTypes = EntityTypes;
 
@@ -94,10 +99,7 @@
       }
     }
 
-    getSelectorPosition(
-      selector: string,
-      offset: { x: number; y: number }
-    ): { x: number; y: number } {
+    getSelectorPosition(selector: string, offset: IPos | undefined = undefined): IPos | undefined {
       const element = this.$el.querySelector(selector);
       if (element) {
         const rect = element.getBoundingClientRect();
@@ -114,8 +116,10 @@
     }
 
     plotRelations(): void {
-      const relationPaths: HTMLElement[] = this.$el.querySelectorAll<HTMLElement>('.relation-path');
-      const offset = this.getSelectorPosition('.erd-relations');
+      const relationPaths: NodeListOf<HTMLElement> = this.$el.querySelectorAll<HTMLElement>(
+        '.relation-path'
+      );
+      const offset: IPos | undefined = this.getSelectorPosition('.erd-relations');
 
       relationPaths.forEach(element => {
         const leftPos = this.getSelectorPosition(

+ 3 - 3
desktop/core/src/desktop/js/components/er-diagram/lib/entities.ts

@@ -27,7 +27,7 @@ export class Table implements IEntity {
   name: string;
   columns: Column[];
 
-  className: string;
+  cssClassName = '';
 
   constructor(database: string, name: string, columns: Array<Column>) {
     this.id = Table.buildId(database, name);
@@ -48,7 +48,7 @@ export class Column implements IEntity {
   tableId: string;
   name: string;
 
-  className: string;
+  cssClassName = '';
 
   constructor(tableId: string, name: string) {
     this.id = Column.buildId(tableId, name);
@@ -67,7 +67,7 @@ export class Literal implements IEntity {
 
   value: string;
 
-  className: string;
+  cssClassName = '';
 
   constructor(value: string) {
     this.id = value;

+ 3 - 1
desktop/core/src/desktop/js/components/er-diagram/lib/interfaces.ts

@@ -22,11 +22,13 @@ export interface IEntity {
   readonly id: string;
   readonly type: EntityTypes;
 
-  className: string;
+  cssClassName: string;
 }
 
 export interface IRelation {
   desc: string;
   left: IEntity;
   right: IEntity;
+
+  cssClassName: string;
 }