Commit 022f2821 authored by Gabriel Gutu-Robu's avatar Gabriel Gutu-Robu

CSCL Component Now Supports All Functionalities

parent 3512d879
.dropzone.dropzone-default.dropzone-success {
border-color: #0abb87;
}
.dropzone.dropzone-default {
/* min-height: 350px; */
padding: 20px;
......@@ -9,15 +10,59 @@
border: 2px dashed #ebedf2;
border-radius: 4px;
}
.dropzone {
min-height: 150px;
border: 2px solid rgba(0,0,0,0.3);
border: 2px solid rgba(0, 0, 0, 0.3);
background: white;
padding: 20px 20px;
}
.dropzone, .dropzone * {
.dropzone,
.dropzone * {
box-sizing: border-box;
}
.dropzone {
min-height: auto;
}
.contributions-indices td,
.contributions-indices th {
font-size: 12px;
padding: 0 5px;
}
.contributions-indices>thead th,
.contributions-indices>tbody td.contribution-id {
color: #43b9c7;
}
.contributions-indices td.value {
text-align: right;
}
#cscl-tabs ul {
display: inline-block;
list-style-type: none;
}
#cscl-tabs ul li {
display: inline-block;
}
#cscl-tabs ul li a {
cursor: pointer;
}
#cscl-tabs ul li a span {
vertical-align: middle;
display: inline-block;
padding: 10px 25px;
color: #43b9c7;
font-size: 12px;
line-height: 1em;
font-weight: 400;
letter-spacing: 0.2em;
text-transform: uppercase;
}
......@@ -58,16 +58,59 @@
</div>
</div>
<div id="results">
<div class="row" *ngIf="loading">
<div class="col-xs-12 col-md-12">
<img src="../../../../assets/img/loading.gif" alt="Loading..." />
</div>
</div>
<div *ngIf="showResults === true">
<nav class="row" id="cscl-tabs">
<ul>
<li>
<a title="Participant Interaction" (click)="switchTo('#participant-interaction')">
<span>Participant Interaction</span>
</a>
</li>
<li>
<a title="CSCL Indices" (click)="switchTo('#cscl-indices')">
<span>CSCL Indices</span>
</a>
</li>
<li>
<a title="Participant Evolution" (click)="switchTo('#participant-evolution')">
<span>Participant Evolution</span>
</a>
</li>
<li>
<a title="Social KB" (click)="switchTo('#social-kb')">
<span>Social KB</span>
</a>
</li>
<li>
<a title="Contribution Indices" (click)="switchTo('#contribution-indices')">
<span>Contribution Indices</span>
</a>
</li>
<ng-repeat *ngFor="let conceptMap of response.data.conceptMaps | keyvalue">
<ng-container *ngIf="conceptMap.value != null">
<li>
<a title="Concept Graph {{conceptMap.key}}"
(click)="switchTo('#concept-graph-' + conceptMap.key)">
<span>Concept Graph {{conceptMap.key}}</span>
</a>
</li>
</ng-container>
</ng-repeat>
</ul>
</nav>
<div class="row response-zone" id="participant-interaction" style="display: none;">
<div class="col-xs-12 col-md-3">
<h4>Participant Interaction</h4>
<ul class="course-description-list">
<li class="lesson" *ngFor="let participant of participants">
<li class="lesson" *ngFor="let participant of response.data.participantInteractionGraph.nodeList">
<div class="heading">
<span class="lesson-nr no-select"></span>
</div>
......@@ -77,11 +120,12 @@
</li>
</ul>
</div>
<!-- <div class="col-xs-12 col-md-9">
<div class="col-xs-12 col-md-9">
<two-mode-graph [graph]="participantInteractionGraph"></two-mode-graph>
</div> -->
<div class="col-xs-12 col-md-9" id="participantInteractionMap"></div> -->
</div>
</div>
<div class="row response-zone" id="cscl-indices" style="display: none;">
<div class="col-xs-12 col-md-12">
<h4>CSCL Indices</h4>
<table class="cscl-indices">
......@@ -89,7 +133,7 @@
<tr class="entry" *ngFor="let csclIndex of csclIndices | keyvalue">
<td class="participant">{{csclIndex.key}}</td>
<td class="value" *ngFor="let csclIndexInner of csclIndex.value | keyvalue">
{{csclIndexInner.value}}
{{csclIndexInner.value | number:'1.3-3'}}
</td>
</tr>
</tbody>
......@@ -119,15 +163,18 @@
</li>
</ul>
</div>
</div>
<div class="row response-zone" id="participant-evolution" style="display: none;">
<div class="col-xs-12 col-md-12">
<h4>Participant evolution</h4>
</div>
<div class="col-xs-12 col-md-12">
<svg id="participantEvolution" width="100%" height="300"></svg>
</div>
</div>
<div class="row">
<div class="row response-zone" id="social-kb" style="display: none;">
<div class="col-xs-12 col-md-12">
<h4>Collaboration - Social Knowledge Building</h4>
</div>
......@@ -135,19 +182,41 @@
<svg id="collaborationSocialKB" width="100%" height="300"></svg>
</div>
</div>
<div class="row" style="display: none;">
<div class="row response-zone" id="contribution-indices" style="display: none;">
<div class="col-xs-12 col-md-12">
<h4>Collaboration - Voice Overlap</h4>
<h4>Contributions Indices</h4>
</div>
<div class="col-xs-12 col-md-12">
<svg id="collaborationVoiceOverlap" width="100%" height="300"></svg>
<table class="contributions-indices">
<thead>
<tr class="entry">
<th>Contribution ID</th>
<th>Social KB</th>
<th>Local Importance</th>
<th>Total Importance</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let contribution of response.data.contributionsIndices; let i = index"
class="entry">
<td class="contribution-id">{{i}}</td>
<td class="value">{{contribution.SOCIAL_KB | number:'1.3-3'}}</td>
<td class="value">{{contribution.LOCAL_IMPORTANCE | number:'1.3-3'}}</td>
<td class="value">{{contribution.TOTAL_IMPORTANCE | number:'1.3-3'}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<ng-repeat *ngFor="let conceptMap of response.data.conceptMaps | keyvalue">
<div class="row response-zone" id="concept-graph-{{conceptMap.key}}" style="display: none;">
<ng-container *ngIf="conceptMap.value != null">
<div class="col-xs-12 col-md-3">
<h4>Concept Map</h4>
<h4>Concept Map ({{conceptMap.key}})</h4>
<ul class="course-description-list">
<li class="lesson" *ngFor="let topic of topics">
<li class="lesson" *ngFor="let topic of conceptMap.value.nodeList">
<div class="heading">
<span class="lesson-nr no-select">{{topic.degree | number}}</span>
</div>
......@@ -158,7 +227,19 @@
</ul>
</div>
<div class="col-xs-12 col-md-9">
<two-mode-graph [graph]="conceptMap"></two-mode-graph>
<two-mode-graph [graph]="conceptGraphs[conceptMap.key]"></two-mode-graph>
</div>
</ng-container>
</div>
</ng-repeat>
<div class="row" id="voice-overlap" class="response-zone" style="display: none;">
<div class="col-xs-12 col-md-12">
<h4>Collaboration - Voice Overlap</h4>
</div>
<div class="col-xs-12 col-md-12">
<svg id="collaborationVoiceOverlap" width="100%" height="300"></svg>
</div>
</div>
</div>
</div>
......
......@@ -42,7 +42,8 @@ export class CsclNewComponent implements OnInit {
// voiceOverlapNodes: any;
csclIndices: any;
csclIndicesDescriptions: any;
conceptMap: any;
conceptMaps: any;
conceptGraphs: any;
error: string;
participantInteractionGraph: any;
......@@ -50,7 +51,7 @@ export class CsclNewComponent implements OnInit {
noFilesToUpload: number;
noUploadedFiles: number;
@ViewChild(DropzoneModule, { }) componentRef?: DropzoneModule;
@ViewChild(DropzoneModule, {}) componentRef?: DropzoneModule;
@ViewChild(DropzoneDirective, {}) directiveRef?: DropzoneDirective;
constructor(
......@@ -78,6 +79,38 @@ export class CsclNewComponent implements OnInit {
this.noFilesToUpload = 0;
this.noUploadedFiles = 0;
this.conceptMaps = {
'LSA': null,
'LDA': null,
'WORD2VEC': null
};
this.conceptGraphs = {
'LSA': null,
'LDA': null,
'WORD2VEC': null
};
}
switchTo(zoneSelector = '') {
jQuery('.response-zone').hide();
console.log('activating ' + zoneSelector);
if (zoneSelector) {
jQuery(zoneSelector).show();
switch (zoneSelector) {
case '#participant-interaction':
this.drawParticipantInteractionGraph(this.response.data.participantInteractionGraph);
break;
case '#concept-graph-LSA':
this.drawConceptGraph(this.response.data.conceptMaps.LSA, 'LSA');
break;
case '#concept-graph-LDA':
this.drawConceptGraph(this.response.data.conceptMaps.LDA, 'LDA');
break;
case '#concept-graph-WORD2VEC':
this.drawConceptGraph(this.response.data.conceptMaps.WORD2VEC, 'WORD2VEC');
break;
}
}
}
loadSemanticModels() {
......@@ -96,6 +129,35 @@ export class CsclNewComponent implements OnInit {
this.loadSemanticModels();
}
drawConceptGraph(conceptMapData = null, key = null) {
if (conceptMapData == null || key == null) { return; }
console.log('drawing concept map ' + key, conceptMapData);
const conceptGraph = {
nodeList: conceptMapData.nodeList,
edgeList: conceptMapData.edgeList,
};
this.twoModeGraphService.getGraph(conceptGraph).subscribe(
graph => { this.conceptGraphs[key] = graph; },
error => { this.error = error.message; },
() => {
}
);
}
drawParticipantInteractionGraph(participantInteractionData = null) {
if (participantInteractionData == null) { return; }
const participantInteractionObj = {
'nodeList': participantInteractionData.nodeList,
'edgeList': participantInteractionData.edgeList
};
this.twoModeGraphService.getGraph(participantInteractionObj).subscribe(
graph => { this.participantInteractionGraph = graph; },
error => { this.error = error.message; },
() => { }
);
}
process() {
this.apiRequestService.setApiService(CsclData.serviceName);
this.apiRequestService.setHeaders(this.apiRequestService.HEADERS_TYPE_COMMON_REQUEST);
......@@ -120,8 +182,8 @@ export class CsclNewComponent implements OnInit {
this.loading = false;
if (response.success !== true) {
if (!isNil(response.data.errorMsg)) {
alert(response.data.errorMsg);
if (!isNil(response.errorMsg)) {
alert(response.errorMsg);
} else {
alert('Server error occured!');
}
......@@ -129,48 +191,6 @@ export class CsclNewComponent implements OnInit {
}
this.showResults = true;
// build concept map
this.topics = response.data.conceptMap.nodeList;
const conceptGraph = {
nodeList: response.data.conceptMap.nodeList,
edgeList: response.data.conceptMap.edgeList,
};
this.twoModeGraphService.getGraph(conceptGraph).subscribe(
graph => { this.conceptMap = graph; },
error => { this.error = error.message; },
() => {
}
);
// participant interaction graph
// this.participantInteractionGraph = {
// 'nodeList': response.data.participantInteractionGraph.nodeList,
// 'edgeList': response.data.participantInteractionGraph.edgeList
// };
// this.twoModeGraphService.getGraph(this.participantInteractionGraph).subscribe(
// graph => { this.participantInteractionGraph = graph; },
// error => { this.error = error.message; },
// () => { }
// );
this.participants = response.data.participantInteractionGraph.nodeList;
this.participantEdges = response.data.participantInteractionGraph.edgeList;
const intervalParticipantInteraction = setInterval(function () {
if (_this.participantEdges.count === response.data.participantInteractionGraph.edgeList.count) {
clearInterval(intervalParticipantInteraction);
const participantInteractionGraph = {
'nodes': response.data.participantInteractionGraph.nodeList,
'links': response.data.participantInteractionGraph.edgeList
};
_this.readerbenchService.d3jsForTopics(
participantInteractionGraph,
'#participantInteractionMap',
false
);
}
}, 1000);
// build participant evolution graph
this.participantEvolution = response.data.participantEvolution;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment