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 { .dropzone.dropzone-default.dropzone-success {
border-color: #0abb87; border-color: #0abb87;
} }
.dropzone.dropzone-default { .dropzone.dropzone-default {
/* min-height: 350px; */ /* min-height: 350px; */
padding: 20px; padding: 20px;
...@@ -9,15 +10,59 @@ ...@@ -9,15 +10,59 @@
border: 2px dashed #ebedf2; border: 2px dashed #ebedf2;
border-radius: 4px; border-radius: 4px;
} }
.dropzone { .dropzone {
min-height: 150px; min-height: 150px;
border: 2px solid rgba(0,0,0,0.3); border: 2px solid rgba(0, 0, 0, 0.3);
background: white; background: white;
padding: 20px 20px; padding: 20px 20px;
} }
.dropzone, .dropzone * {
.dropzone,
.dropzone * {
box-sizing: border-box; box-sizing: border-box;
} }
.dropzone { .dropzone {
min-height: auto; 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;
}
...@@ -42,7 +42,8 @@ export class CsclNewComponent implements OnInit { ...@@ -42,7 +42,8 @@ export class CsclNewComponent implements OnInit {
// voiceOverlapNodes: any; // voiceOverlapNodes: any;
csclIndices: any; csclIndices: any;
csclIndicesDescriptions: any; csclIndicesDescriptions: any;
conceptMap: any; conceptMaps: any;
conceptGraphs: any;
error: string; error: string;
participantInteractionGraph: any; participantInteractionGraph: any;
...@@ -50,7 +51,7 @@ export class CsclNewComponent implements OnInit { ...@@ -50,7 +51,7 @@ export class CsclNewComponent implements OnInit {
noFilesToUpload: number; noFilesToUpload: number;
noUploadedFiles: number; noUploadedFiles: number;
@ViewChild(DropzoneModule, { }) componentRef?: DropzoneModule; @ViewChild(DropzoneModule, {}) componentRef?: DropzoneModule;
@ViewChild(DropzoneDirective, {}) directiveRef?: DropzoneDirective; @ViewChild(DropzoneDirective, {}) directiveRef?: DropzoneDirective;
constructor( constructor(
...@@ -78,6 +79,38 @@ export class CsclNewComponent implements OnInit { ...@@ -78,6 +79,38 @@ export class CsclNewComponent implements OnInit {
this.noFilesToUpload = 0; this.noFilesToUpload = 0;
this.noUploadedFiles = 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() { loadSemanticModels() {
...@@ -96,6 +129,35 @@ export class CsclNewComponent implements OnInit { ...@@ -96,6 +129,35 @@ export class CsclNewComponent implements OnInit {
this.loadSemanticModels(); 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() { process() {
this.apiRequestService.setApiService(CsclData.serviceName); this.apiRequestService.setApiService(CsclData.serviceName);
this.apiRequestService.setHeaders(this.apiRequestService.HEADERS_TYPE_COMMON_REQUEST); this.apiRequestService.setHeaders(this.apiRequestService.HEADERS_TYPE_COMMON_REQUEST);
...@@ -120,8 +182,8 @@ export class CsclNewComponent implements OnInit { ...@@ -120,8 +182,8 @@ export class CsclNewComponent implements OnInit {
this.loading = false; this.loading = false;
if (response.success !== true) { if (response.success !== true) {
if (!isNil(response.data.errorMsg)) { if (!isNil(response.errorMsg)) {
alert(response.data.errorMsg); alert(response.errorMsg);
} else { } else {
alert('Server error occured!'); alert('Server error occured!');
} }
...@@ -129,48 +191,6 @@ export class CsclNewComponent implements OnInit { ...@@ -129,48 +191,6 @@ export class CsclNewComponent implements OnInit {
} }
this.showResults = true; 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 // build participant evolution graph
this.participantEvolution = response.data.participantEvolution; 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