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

@@ -18,11 +18,12 @@ import {IdaEventService} from './service/event/ida-event.service';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  idCount = 1;
+  idCount = 2;
   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];
+  private sidebarItems: SidebarElement[] = [this.introSideItem, this.ontologySideItem];
   private mainViewItems: MainviewElement[] = [];
 
   @ViewChild(ChatboxComponent)

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

@@ -60,6 +60,7 @@ import {DatatableDetailComponent} from './components/datatable-detail/datatable-
 import { SsbViewComponent } from './components/ssb-view/ssb-view.component';
 import { VennViewComponent } from './components/venn-view/venn-view.component';
 import { DeckglHexViewComponent } from './components/deckgl-hex-view/deckgl-hex-view.component';
+import { RdfOntologyViewComponent } from './components/rdf-ontology-view/rdf-ontology-view.component';
 import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
 
 @NgModule({
@@ -80,7 +81,8 @@ import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
     DatatableDetailComponent,
     SsbViewComponent,
     VennViewComponent,
-    DeckglHexViewComponent
+    DeckglHexViewComponent,
+    RdfOntologyViewComponent
   ],
   imports: [
     BrowserModule,

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

@@ -0,0 +1,38 @@
+.labelClass {
+
+    padding-left: 20px;
+    text-indent: -15px;
+    padding-top: 7px;
+    font-size: 19px;
+  }
+.checkboxClass {
+    width: 20px; 
+    height: 20px;
+    padding-top: 10px;
+    margin:0;
+    vertical-align: bottom;
+    position: relative;
+    top: -8px;
+    *overflow: hidden;
+  }
+  .inputLabelClass {
+    padding-left: 10px;
+    font-size: 15px;
+    float: left;
+  }
+
+  .inputTextClass {
+    border-radius: 8px;
+    width: 33%;
+    padding-left: 3px;
+  }
+
+  .nodeInfoDivClass {
+    float: left;
+  }
+
+  .nodeInfoDiv {
+    padding-left: 35px;
+    font-size: 18px;
+    width:275px;
+  }

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

@@ -0,0 +1,191 @@
+<mat-tab-group style="min-width: 40vw;max-height: 100vh">
+  <mat-tab label="Ontology Explorer">
+    <div [attr.id]="fdgId1" fxFlexstyle="height: 150vh; margin: 20px;border-color: #eaeaea;border-style: solid">
+
+      <div style="width: 100%; height: 20%;">
+        <h1 align='center'>Historian Ontology Graph</h1>
+      </div>
+      <div id="filtersId"
+        style="width: 99%;height: 36px;margin-left: 3px;border-radius: 8px;background-color: #5DADE2;">
+        <label class="labelClass">
+          Filters:
+
+        </label>
+        <label class="labelClass">
+          Display in Deutsch
+          <input class="checkboxClass" type="checkbox" [(ngModel)]="languageCheked"
+            (change)="checkboxValuesChanged(isChecked)" />
+        </label>
+        <label class="labelClass">
+          Include Class Hierarchy
+          <input class="checkboxClass" type="checkbox" [(ngModel)]="classHeirarchyChecked" value="1"
+            (change)="checkboxValuesChanged(isChecked)" />
+        </label>
+        <label class="labelClass">
+          Include All Properties
+          <input class="checkboxClass" type="checkbox" [(ngModel)]="allPropChecked"
+            (change)="checkboxValuesChanged(isChecked)" />
+        </label>
+        <label class="labelClass">
+          Bounded Graph
+          <input class="checkboxClass" type="checkbox" [(ngModel)]="allNodesInBoundClicked"
+            (change)="checkboxValuesChanged(isChecked)" />
+        </label>
+        <label class="labelClass">
+          Disable Zoom
+          <input class="checkboxClass" type="checkbox" [(ngModel)]="disableZoomClicked"
+            (change)="checkboxValuesChanged(isChecked)" />
+        </label>
+        <label class="labelClass">
+          <button #graphReset (click)="graphResetChanged($event)"
+            style="width: 8%; height: 36px;margin-left: 3px;border-radius: 8px;background-color:whitesmoke;">
+            Reset Graph
+          </button>
+        </label>
+      </div>
+      <br />
+      <div id="filtersId"
+        style="display: block;float: right;width:24.5%; height: 1053px;background-color:#F2F3F4;border-radius: 8px;">
+
+        <div id="nodeInformationId"
+          style="display: block;height: 26px;background-color:#5DADE2;border-radius: 8px;padding-top: 9px;">
+          <label class="inputLabelClass">
+            Node Information:
+          </label>
+          <br />
+        </div>
+
+        <div id="nodeInfoTagesId" style=" text-align: justify;overflow: auto;display: block;background-color:#AED6F1;border-radius: 8px;
+                    padding-top: 10px;">
+          <div class="nodeInfoDivClass">
+            <label class="inputLabelClass">
+              Node:
+            </label>
+            <div class="nodeInfoDiv" [attr.id]="nodeId"> </div>
+            <br /><br />
+          </div>
+          <div class="nodeInfoDivClass">
+            <label class="inputLabelClass">
+              Label:
+            </label>
+            <div class="nodeInfoDiv" [attr.id]="nodeLabelId"></div>
+            <br /><br />
+          </div>
+          <div class="nodeInfoDivClass">
+            <label class="inputLabelClass">
+              Id:
+            </label>
+            <div class="nodeInfoDiv" [attr.id]="nodeIdsId"></div>
+            <br /><br />
+          </div>
+          <div class="nodeInfoDivClass">
+            <label class="inputLabelClass">
+              Type:
+            </label>
+            <div class="nodeInfoDiv" [attr.id]="nodeTypeId"> </div>
+            <br /><br />
+          </div>
+          <div class="nodeInfoDivClass">
+            <label class="inputLabelClass">
+              Description:
+            </label>
+            <div class="nodeInfoDiv" [attr.id]="nodeDescripId"> </div>
+            <br /><br />
+          </div>
+          <div class="nodeInfoDivClass">
+            <label class="inputLabelClass">
+              Sub Class Of:
+            </label>
+            <div class="nodeInfoDiv" style="width: 309px;" [attr.id]="nodeSubClassId"> </div>
+            <br /><br />
+          </div>
+          <div class="nodeInfoDivClass">
+            <label class="inputLabelClass">
+              Domain:
+            </label>
+            <div class="nodeInfoDiv" [attr.id]="nodeDomainId"> </div>
+            <br /><br />
+          </div>
+          <div class="nodeInfoDivClass">
+            <label class="inputLabelClass">
+              Range:
+            </label>
+            <div class="nodeInfoDiv" [attr.id]="nodeRangeId"> </div>
+            <br /><br />
+          </div>
+          <div class="nodeInfoDivClass">
+            <label class="inputLabelClass">
+              Comment:
+            </label>
+            <div class="nodeInfoDiv" [attr.id]="nodeCommentId"> </div>
+            <br /><br />
+          </div>
+        </div>
+
+        <div id="graphConfigId"
+          style="display: block;height: 26px;background-color:#5DADE2;border-radius: 8px;padding-top: 9px;">
+          <label class="inputLabelClass">
+            Customize Graph:
+          </label>
+          <br /><br />
+        </div>
+
+        <div id="graphConfigInputsId" style="display: block;background-color:#AED6F1;border-radius: 8px;height: 480px;
+                    padding-top: 10px;">
+          <label class="inputLabelClass">
+            Edge Size: <input type="text" class="inputTextClass" [(ngModel)]="edgeSize" placeholder=" 50">
+          </label><br />
+          <label class="inputLabelClass">
+            Graph Charge/Depth : <input type="text" class="inputTextClass" [(ngModel)]="graphCharge"
+              placeholder=" 1000">
+          </label><br />
+          <label class="inputLabelClass">
+            Resource Node Radius: <input type="text" class="inputTextClass" [(ngModel)]="resourceRadius"
+              placeholder=" 10">
+          </label><br />
+          <label class="inputLabelClass">
+            Literal Node Radius: <input type="text" class="inputTextClass" [(ngModel)]="literalRadius" placeholder=" 6">
+          </label><br />
+          <label class="inputLabelClass">
+            Resource Node Color: <input type="text" class="inputTextClass" [(ngModel)]="resourceNodeColor"
+              placeholder=" #311B92">
+          </label><br />
+          <label class="inputLabelClass">
+            Resource Node Text Color: <input type="text" class="inputTextClass" [(ngModel)]="resourceNodeTextColor"
+              placeholder=" #311B92">
+          </label><br />
+          <label class="inputLabelClass">
+            Literal Node Color: <input type="text" class="inputTextClass" [(ngModel)]="literalNodeColor"
+              placeholder=" #FF9800">
+          </label><br />
+          <label class="inputLabelClass">
+            Literal node text color: <input type="text" class="inputTextClass" [(ngModel)]="literalNodeTextColor"
+              placeholder=" #FF9800">
+          </label><br />
+          <label class="inputLabelClass">
+            Sub Class Label: <input type="text" class="inputTextClass" [(ngModel)]="subClassLabel"
+              placeholder=" --subClassOf--">
+          </label><br />
+          <label class="inputLabelClass">
+            Sub Class Label Color: <input type="text" class="inputTextClass" [(ngModel)]="subClassLabelColor"
+              placeholder=" #3498DB">
+          </label><br />
+          <label class="inputLabelClass">
+            Property Text Color: <input type="text" class="inputTextClass" [(ngModel)]="propertyTextColor"
+              placeholder=" #28B463">
+          </label><br />
+          <!--
+                <label class="inputLabelClass">
+                  On click node color: <input type="text" class="inputTextClass" [(ngModel)]="onClickNodeColor" placeholder=" red" >
+                </label>--><br /> <br /><br /> <br /> <br />
+
+          <button #applyConfigBtn (click)="applyConfigClicked($event)"
+            style="width: 33%; height: 36px;margin-left: 3px;border-radius: 8px;background-color:white;">
+            Apply Changes
+          </button>
+        </div>
+      </div>
+      <div [attr.id]="svgId" style="float: left; height: 140vh;background-color: #F8F9F9;border-radius: 8px;position: relative;left: 6px;"></div>
+    </div>
+  </mat-tab>
+</mat-tab-group>

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();
+  });
+});