feat(graph): show node and edge data (#65)

Co-authored-by: Armin <[email protected]>

src/app/components/graph-components/sigma/sigma/sigma.component.html

@@ -27,8 +27,40 @@
     >
       <span nz-icon nzType="zoom-out" nzTheme="outline"></span>
     </button>
+    <nz-drawer
+      [nzBodyStyle]="{ overflow: 'auto' }"
+      [nzMaskClosable]="false"
+      [nzWidth]="378"
+      [nzVisible]="visible"
+      nzTitle="Data Overview"
+      (nzOnClose)="close()"
+    >
+      <div *nzDrawerContent>
+        <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
+          <input type="text" nz-input placeholder="Search nodes" />
+        </nz-input-group>
+        <ng-template #suffixIconButton>
+          <button nz-button nzType="primary" nzSearch><span nz-icon nzType="search"></span></button>
+        </ng-template>
+        <nz-divider></nz-divider>
+        <div class="node-container">
+          @if(selectedNode){
+          <nz-badge nzStatus="processing" [nzText]="'Node ' + selectedNodeId"></nz-badge>
+          <div *ngFor="let entry of selectedNode | keyvalue" class="node-container__node-data">
+            <h3 class="node-container__node-data__header">{{ entry.key }}:</h3>
+            <h3 class="node-container__node-data__value">{{ entry.value }}</h3>
+          </div>
+          } @if (selectedEdge) {
+          <nz-badge nzStatus="processing" [nzText]="'Edge ' + selectedEdgeId"></nz-badge>
+          <div *ngFor="let entry of selectedEdge | keyvalue" class="node-container__node-data">
+            <h3 class="node-container__node-data__header">{{ entry.key }}:</h3>
+            <h3 class="node-container__node-data__value">{{ entry.value }}</h3>
+          </div>
+          }
+        </div>
+      </div>
+    </nz-drawer>
   </div>
-<app-graph-tool-bar></app-graph-tool-bar>
-
+  <app-graph-tool-bar (openDrawer)="open()"></app-graph-tool-bar>
   <div id="sigma-container"></div>
 </div>

src/app/components/graph-components/sigma/sigma/sigma.component.scss

@@ -5,6 +5,32 @@
   background-color: #f8f6f4;
 }
 
+::ng-deep {
+  .ant-drawer-mask {
+    display: none;
+  }
+
+  .ant-drawer-right > .ant-drawer-content-wrapper {
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
+  }
+
+  .ant-badge-status.ant-badge-not-a-wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .ant-badge-status-dot {
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+  }
+
+  .ant-badge-status-text {
+    font-size: 1.8rem;
+    font-weight: 600;
+  }
+}
+
 .sigma-container {
   flex-grow: 1;
   height: 100%;
@@ -31,3 +57,27 @@
     }
   }
 }
+
+.node-container {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+
+  &__node-data {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 1.5rem;
+
+    &__header {
+      font-size: 1.6rem;
+      font-weight: 500;
+    }
+
+    &__value {
+      font-size: 1.6rem;
+      align-self: flex-end;
+      direction: rtl;
+    }
+  }
+}

src/app/components/graph-components/sigma/sigma/sigma.component.spec.ts

@@ -2,7 +2,8 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { SigmaComponent } from './sigma.component';
 import { NZ_ICONS, NzIconService } from 'ng-zorro-antd/icon';
-import { CloudDownloadOutline, FilterOutline, FullscreenOutline, ImportOutline, SettingOutline } from '@ant-design/icons-angular/icons';
+import { CloudDownloadOutline, FilterOutline, FullscreenOutline, ImportOutline, MenuOutline, SettingOutline } from '@ant-design/icons-angular/icons';
+import { provideHttpClient } from '@angular/common/http';
 
 describe('SigmaComponent', () => {
   let component: SigmaComponent;
@@ -15,8 +16,9 @@ describe('SigmaComponent', () => {
         NzIconService,
         {
           provide: NZ_ICONS,
-          useValue: [FullscreenOutline,ImportOutline , FilterOutline , SettingOutline,CloudDownloadOutline],
+          useValue: [FullscreenOutline,ImportOutline , FilterOutline , SettingOutline,CloudDownloadOutline, MenuOutline],
         },
+        provideHttpClient()
       ],
     }).compileComponents();