Rdf ontology graph

ida-chatbot/src/app/app.component.html

@@ -4,9 +4,12 @@
                [activeItem]="getActiveItem()"></app-sidebar>
   <!-- </div>-->
   <div fxFlex="100%" id="mainView">
+
+
     <app-intro [ngClass]="{'hidden-cls': activeItem!==0 }"></app-intro>
+    <!--<app-rdf-ontology-view [hidden]='activeItem !== 1'></app-rdf-ontology-view> -->
     <ng-container *ngFor="let mvw of getMainviewItems()" >
-    <app-data-view-container [item]="mvw" [ngClass]="{'hidden-cls': activeItem!==mvw.id }"></app-data-view-container>
+      <app-data-view-container [item]="mvw" [ngClass]="{'hidden-cls': activeItem!==mvw.id }"></app-data-view-container>
     </ng-container>
   </div>
   <app-chatbox id="chatBox" fxFlexAlign="end" fxFlex="auto" (actnEmitter)="addNewUserMessage($event)"></app-chatbox>

ida-chatbot/src/app/app.component.ts

@@ -21,7 +21,9 @@ export class AppComponent {
   idCount = 1;
   title = 'app';
   public introSideItem = new SidebarElement(0, 'Introduction', 'intro');
+  //public ontologySideItem = new SidebarElement(1, 'Ontology Explorer', 'ontology');
   public activeItem = 0;
+  //private sidebarItems: SidebarElement[] = [this.introSideItem, this.ontologySideItem];
   private sidebarItems: SidebarElement[] = [this.introSideItem];
   private mainViewItems: MainviewElement[] = [];
 
@@ -78,6 +80,9 @@ export class AppComponent {
       // Open new tab with DataTable
       const newTab = new TabElement(this.uis.getUniqueId(), resp.payload.actvTbl, TabType.SSB, resp.payload.ssbDiagramData, true, true);
       this.addNewTab(newTab, resp);
+    }else if (resp.actnCode === 11) { 
+      const newTab = new TabElement(this.uis.getUniqueId(), "Ontology Explorer", TabType.OE, resp.payload, true, true);
+      this.addNewTab(newTab, resp);
     }
   }
 

ida-chatbot/src/app/app.module.ts

@@ -59,6 +59,7 @@ import {RestService} from './service/rest/rest.service';
 import {DatatableDetailComponent} from './components/datatable-detail/datatable-detail.component';
 import { SsbViewComponent } from './components/ssb-view/ssb-view.component';
 import { VennViewComponent } from './components/venn-view/venn-view.component';
+import { RdfOntologyViewComponent } from './components/rdf-ontology-view/rdf-ontology-view.component'
 import { DeckglHexViewComponent } from './components/deckgl-hex-view/deckgl-hex-view.component';
 import { SpeechInputComponent } from './components/speech-input/speech-input.component';
 import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@@ -73,6 +74,7 @@ import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
     DataViewContainerComponent,
     DatatableViewComponent,
     FdgViewComponent,
+    RdfOntologyViewComponent,
     BargraphViewComponent,
     IntroComponent,
     ClickStopPropagationDirective,

ida-chatbot/src/app/components/rdf-ontology-view/rdf-ontology-view.component.css

@@ -0,0 +1,47 @@
+.rightSideContainer{
+  width: 30%;
+}
+.mat-toolbar.mat-primary {
+  background: #f7f7f8;
+  color: #0b0b0b;
+}
+.labelClass { 
+  padding-left: 20px;
+  text-indent: -15px;
+  padding-top: 7px;
+  font-size: 19px;
+  padding-right: 5px;
+}
+.checkboxClass {
+  width: 20px; 
+  height: 20px;
+  padding-top: 10px;
+  margin:0;
+  vertical-align: bottom;
+  position: relative;
+  top: -8px;
+  *overflow: hidden;
+}
+
+.inputTextClass {
+  border-radius: 8px;
+  width: 33%;
+  padding-left: 3px;
+}
+
+.nodeInfoDivClass {
+  float: left;
+}
+
+.nodeInfoDiv {
+  position: relative;
+  bottom: 34px;
+  left: 80px;
+  font-size: 18px;
+  width:275px;
+}
+
+:host ::ng-deep mat-toolbar-row.primary{
+  background: #673ab7;
+  color: #FFF;
+}

ida-chatbot/src/app/components/rdf-ontology-view/rdf-ontology-view.component.html

@@ -0,0 +1,175 @@
+  <mat-toolbar>
+      <mat-toolbar-row class="primary">
+        <div style="width: 100%; height: 60%;">
+          <h1 align='center'>{{title}} Ontology Graph</h1>
+        </div>
+      </mat-toolbar-row>
+
+      <mat-toolbar-row class="filtersRowID">
+        <div id="filtersId" style="width: 99%;height: 40px;border-radius: 8px;background-color: #b7cad7;">
+          <mat-label class="labelClass">
+            Filters:
+          </mat-label>
+
+          <mat-label class="labelClass">Display in Deutsch</mat-label>
+          <input class="checkboxClass" type="checkbox" [(ngModel)]="languageCheked"
+              (change)="checkboxValuesChanged(isChecked)" />
+
+          <mat-label class="labelClass">Include Class Hierarchy</mat-label>
+          <input class="checkboxClass" type="checkbox" [(ngModel)]="classHeirarchyChecked" value="1"
+              (change)="checkboxValuesChanged(isChecked)" />
+
+          <mat-label class="labelClass">Include All Properties</mat-label>
+          <input class="checkboxClass" type="checkbox" [(ngModel)]="allPropChecked"
+              (change)="checkboxValuesChanged(isChecked)" />
+
+
+          <mat-label class="labelClass">Bounded Graph</mat-label>
+          <input class="checkboxClass" type="checkbox" [(ngModel)]="allNodesInBoundClicked"
+              (change)="checkboxValuesChanged(isChecked)" />
+
+          <mat-label class="labelClass">Disable Zoom</mat-label>
+            <input class="checkboxClass" type="checkbox" [(ngModel)]="disableZoomClicked"
+              (change)="checkboxValuesChanged(isChecked)" />
+
+          <mat-label class="labelClass">
+            <button mat-raised-button #graphReset (click)="graphResetChanged($event)"
+              style="border-radius: 8px;padding-top: 3px;">
+              Reset Graph
+            </button>
+          </mat-label>
+        </div>
+      </mat-toolbar-row>
+    </mat-toolbar>
+
+    <!--START :: main container grid -->
+    <mat-drawer-container class="ontologyMainContainer" autosize>
+      <mat-drawer #drawer class="rightSideContainer" mode="side" position="end">
+        <mat-card>
+
+          <div id="nodeInformationId" style="border-radius: 8px;padding-top: 9px;">
+            <mat-card-title>Node Information</mat-card-title>
+          </div>
+
+
+          <div id="nodeInfoTagesId" style=" text-align: justify;overflow: auto;display: block;border-radius: 8px;">
+
+            <div class="nodeInfoDivClass">
+              <mat-card-subtitle>Node:</mat-card-subtitle>
+              <div class="nodeInfoDiv" [attr.id]="nodeId"> </div>
+            </div>
+
+            <div class="nodeInfoDivClass">
+              <mat-card-subtitle>Label:</mat-card-subtitle>
+              <div class="nodeInfoDiv" [attr.id]="nodeLabelId"></div>
+            </div>
+
+            <div class="nodeInfoDivClass">
+              <mat-card-subtitle>ID:</mat-card-subtitle>
+              <div class="nodeInfoDiv" [attr.id]="nodeIdsId"></div>
+            </div>
+
+            <div class="nodeInfoDivClass">
+              <mat-card-subtitle>Type:</mat-card-subtitle>
+              <div class="nodeInfoDiv" [attr.id]="nodeTypeId"> </div>
+            </div>
+
+            <div class="nodeInfoDivClass">
+              <mat-card-subtitle>Description:</mat-card-subtitle>
+              <div class="nodeInfoDiv" [attr.id]="nodeDescripId"> </div>
+            </div>
+
+            <div class="nodeInfoDivClass">
+              <mat-card-subtitle>SubClassOf:</mat-card-subtitle>
+              <div class="nodeInfoDiv" style="width: 309px;" [attr.id]="nodeSubClassId"> </div>
+            </div>
+
+            <div class="nodeInfoDivClass">
+              <mat-card-subtitle>Domain:</mat-card-subtitle>
+              <div class="nodeInfoDiv" [attr.id]="nodeDomainId"> </div>
+            </div>
+
+            <div class="nodeInfoDivClass">
+              <mat-card-subtitle>Range:</mat-card-subtitle>
+              <div class="nodeInfoDiv" [attr.id]="nodeRangeId"> </div>
+            </div>
+
+            <div class="nodeInfoDivClass">
+              <mat-card-subtitle>Comment:</mat-card-subtitle>
+              <div class="nodeInfoDiv" [attr.id]="nodeCommentId"> </div>
+            </div>
+
+          </div>
+        </mat-card>
+
+        <mat-card>
+          <div id="graphConfigId" style="border-radius: 8px;padding-top: 9px;">
+
+            <mat-card-title>Customize Graph</mat-card-title>
+          </div>
+
+          <div id="graphConfigInputsId" style="border-radius: 8px; padding-top: 10px;">
+
+            <mat-card-subtitle>Edge Size:
+              <input type="text" class="inputTextClass" [(ngModel)]="edgeSize" placeholder=" 50">
+            </mat-card-subtitle>
+
+            <mat-card-subtitle> Graph Charge/Depth :
+              <input type="text" class="inputTextClass" [(ngModel)]="graphCharge" placeholder=" 1000">
+            </mat-card-subtitle>
+
+            <mat-card-subtitle> Resource Node Radius:
+              <input type="text" class="inputTextClass" [(ngModel)]="resourceRadius" placeholder=" 10">
+            </mat-card-subtitle>
+
+            <mat-card-subtitle> Literal Node Radius:
+              <input type="text" class="inputTextClass" [(ngModel)]="literalRadius" placeholder=" 6">
+            </mat-card-subtitle>
+
+            <mat-card-subtitle>Resource Node Color:
+              <input type="text" class="inputTextClass" [(ngModel)]="resourceNodeColor" placeholder=" #311B92">
+            </mat-card-subtitle>
+
+              <mat-card-subtitle>Resource Node Text Color:
+                <input type="text" class="inputTextClass" [(ngModel)]="resourceNodeTextColor" placeholder=" #311B92">
+              </mat-card-subtitle>
+
+              <mat-card-subtitle>Literal Node Color:
+                 <input type="text" class="inputTextClass" [(ngModel)]="literalNodeColor" placeholder=" #FF9800">
+              </mat-card-subtitle>
+
+              <mat-card-subtitle>Literal node text color:
+                <input type="text" class="inputTextClass" [(ngModel)]="literalNodeTextColor" placeholder=" #FF9800">
+              </mat-card-subtitle>
+
+            <mat-card-subtitle> Sub Class Label:
+              <input type="text" class="inputTextClass" [(ngModel)]="subClassLabel" placeholder=" --subClassOf--">
+              </mat-card-subtitle>
+
+              <mat-card-subtitle>Sub Class Label Color:
+                <input type="text" class="inputTextClass" [(ngModel)]="subClassLabelColor" placeholder=" #3498DB">
+              </mat-card-subtitle>
+
+              <mat-card-subtitle> Property Text Color:
+                <input type="text" class="inputTextClass" [(ngModel)]="propertyTextColor"placeholder=" #28B463">
+              </mat-card-subtitle>
+
+              <mat-card-actions>
+                  <button mat-raised-button #applyConfigBtn (click)="applyConfigClicked($event)">
+                  Apply Changes
+                </button>
+              </mat-card-actions>
+
+          </div>
+        </mat-card>
+      </mat-drawer>
+
+      <div class="leftSideContainer">
+       <div align="end">
+          <mat-button-toggle mat-icon-button (click)="drawer.toggle()"> <mat-icon>code</mat-icon> </mat-button-toggle>
+        </div>
+        <div [attr.id]="ontologyId" style="background-color: #F8F9F9;border-radius: 8px;"></div>
+      </div>
+
+    </mat-drawer-container>    
+    <!--END :: main container grid -->

ida-chatbot/src/app/components/rdf-ontology-view/rdf-ontology-view.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RdfOntologyViewComponent } from './rdf-ontology-view.component';
+
+describe('RdfOntologyViewComponent', () => {
+  let component: RdfOntologyViewComponent;
+  let fixture: ComponentFixture<RdfOntologyViewComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RdfOntologyViewComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RdfOntologyViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});