Skip to content

Commit d2e7692

Browse files
mbeiselLaviniaStiliadou
mbeisel
and
LaviniaStiliadou
authored
Feature/text matching (#180)
* add textmatching logic * add deployment logic * fix layouting, add pattern graph button * fix endpoints * linting * adapt linting rules --------- Co-authored-by: LaviniaStiliadou <[email protected]>
1 parent 4a145a8 commit d2e7692

File tree

13 files changed

+4977
-243
lines changed

13 files changed

+4977
-243
lines changed

‎.eslintrc.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ module.exports = {
8484
'max-classes-per-file': 'off',
8585

8686
// ORIGINAL tslint.json -> "max-line-length": [true, 140],
87-
'max-len': ['error', {code: 160}],
87+
// 'max-len': ['error', {code: 160}],
8888

8989
// ORIGINAL tslint.json -> "member-access": false,
9090
'@typescript-eslint/explicit-member-accessibility': 'off',

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
"core-js": "2.6.3",
3737
"d3": "^5.9.2",
3838
"file-saver": "^2.0.5",
39+
"jquery": "^3.6.1",
3940
"keyword-extractor": "0.0.25",
4041
"lodash": "^4.17.21",
4142
"madr": "2.1.2",
@@ -49,6 +50,7 @@
4950
"rxjs": "6.5.5",
5051
"simplemde": "1.11.2",
5152
"tslib": "^1.10.0",
53+
"whatwg-fetch": "^3.6.2",
5254
"zone.js": "~0.10.3"
5355
},
5456
"devDependencies": {

‎src/app/core/component/textmatcher/textmatcher.component.html‎

Lines changed: 104 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,117 @@
11
<button mat-icon-button class="close-button" (click)="closeDialog2()">
2-
<mat-icon class="close-icon" >close</mat-icon>
2+
<mat-icon class="close-icon">close</mat-icon>
33
</button>
4+
45
<div mat-dialog-content>
5-
<mat-form-field id="type-field" class="action-button-with-margin" [floatLabel]="'always'">
6-
<mat-label>Input the known Information</mat-label>
7-
<textarea matInput placeholder="Type in information" [formControl]="inputfield" cdkFocusInitial></textarea>
6+
<mat-form-field id="type-field" class="action-button-with-margin" [floatLabel]="'always'">
7+
<mat-label>Describe your context</mat-label>
8+
<textarea
9+
matInput
10+
placeholder="Type in information"
11+
[formControl]="inputfield"
12+
cdkFocusInitial
13+
class="styled-textarea"></textarea>
814
</mat-form-field>
15+
16+
<div *ngIf="showRephrasedInput">
17+
<p>Rephrased input: {{rephrasedInput}}</p>
18+
</div>
19+
20+
<div *ngIf="showMatchingResults">
21+
<p>The best matching algorithm with cosine similarity is
22+
<span class="resultLink" (click)="openLink()">{{resultAlgorithm.name}}</span>.
23+
</p>
24+
<p>The Cosine Similarity is
25+
<span class="similarityvalue">{{resultAlgorithm.cosineSimilarity}}</span>
26+
</p>
27+
</div>
28+
29+
<div *ngIf="showMatchingResults">
30+
<mat-table #table [dataSource]="tabledata">
31+
<ng-container matColumnDef="name">
32+
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
33+
<mat-cell *matCellDef="let result">
34+
<span class="resultLink" (click)="openLink2(result.name)">{{result.name}}</span>
35+
</mat-cell>
36+
</ng-container>
37+
<ng-container matColumnDef="cosineSimilarity">
38+
<mat-header-cell *matHeaderCellDef> Cosine similarity </mat-header-cell>
39+
<mat-cell *matCellDef="let result"> {{result.cosineSimilarity}} </mat-cell>
40+
</ng-container>
41+
<mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
42+
<mat-row *matRowDef="let row; columns: columnsToDisplay"></mat-row>
43+
</mat-table>
44+
</div>
45+
46+
<!-- Progress bar for aggregation -->
47+
<mat-progress-bar *ngIf="isAggregating" mode="determinate" [value]="progressValue"></mat-progress-bar>
48+
<p *ngIf="isAggregating">Aggregation in progress... {{ progressValue }}%</p>
949
</div>
10-
<div mat-dialog-content *ngIf="showRephrasedInput">
11-
<p>Rephrased input: {{rephrasedInput}} </p>
12-
</div>
13-
<div mat-dialog-content *ngIf="showMatchingResults">
14-
<p>The best matching algorithm with cosine similarity is <span class="resultLink"(click)="openLink()">{{resultAlgorithm.name}}</span>. </p>
15-
<p>The Cosine Similarity is <span class="similarityvalue">{{resultAlgorithm.cosineSimilarity}}</span> </p>
16-
</div>
17-
<div>
18-
<mat-form-field *ngIf="showMatchingResults">
19-
<mat-label>Number of displayed algorithms</mat-label>
20-
<mat-select [(value)]="selectednumber" (selectionChange)="numberChanged()">
21-
<mat-option *ngFor="let number of numbers" [value]="number">{{number}}</mat-option>
22-
</mat-select>
23-
</mat-form-field>
24-
</div>
25-
<div>
26-
<mat-table #table [dataSource]="tabledata" *ngIf="showMatchingResults">
27-
<ng-container matColumnDef="name">
28-
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
29-
<mat-cell *matCellDef="let result"> <span class="resultLink"(click)="openLink2(result.name)">{{result.name}}</span> </mat-cell>
30-
</ng-container>
31-
<ng-container matColumnDef="cosineSimilarity">
32-
<mat-header-cell *matHeaderCellDef> Cosine similarity </mat-header-cell>
33-
<mat-cell *matCellDef="let result"> {{result.cosineSimilarity}} </mat-cell>
34-
</ng-container>
35-
<mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
36-
<mat-row *matRowDef="let row; columns: columnsToDisplay"></mat-row>
37-
</mat-table>
38-
</div>
50+
3951
<div mat-dialog-actions>
40-
<button class="action-button-with-margin" (click)="closeDialog2()" mat-raised-button >
41-
<i class="material-icons"></i> close
42-
</button>
43-
<button class="action-button-with-margin" (click)="extractInformation(false) "mat-raised-button>
44-
<i class="material-icons"></i> start textmatching
45-
</button>
46-
<button class="action-button-with-margin" (click)="extractInformation(true) "mat-raised-button>
47-
<i class="material-icons"></i> start textmatching with rake
48-
</button>
49-
<section class="testsection">
50-
<input type="checkbox" class="example-margin" [checked]="checked" (change)="checkboxClicked($event)">rephrase Problem using OpenAI
51-
</section>
52+
<button class="action-button-with-margin" (click)="extractInformation(false)" mat-raised-button>
53+
<i class="material-icons"></i> Identify Patterns
54+
</button>
55+
56+
<button class="action-button-with-margin" *ngIf="fulltabledata && fulltabledata.length > 0"
57+
(click)="openGraphDialog()" mat-raised-button>
58+
Show Pattern Graph
59+
</button>
60+
61+
<button class="action-button-with-margin" *ngIf="fulltabledata && fulltabledata.length > 0" (click)="aggregateSolutions()" mat-raised-button>
62+
Aggregate Solutions
63+
</button>
64+
65+
<button class="action-button-with-margin" *ngIf="isAggregationComplete && (fulltabledata && fulltabledata.length > 0)" (click)="deploySolution()"
66+
mat-raised-button>
67+
Deploy Solution
68+
</button>
5269
</div>
70+
71+
<!-- Styling -->
5372
<style>
54-
.resultLink {
55-
cursor: pointer;
56-
color: blue;
57-
}
73+
.resultLink {
74+
cursor: pointer;
75+
color: blue;
76+
}
77+
78+
.resultLink:hover {
79+
opacity: 0.9;
80+
color: pink;
81+
text-decoration: underline;
82+
}
83+
84+
.similarityvalue {
85+
color: red;
86+
}
87+
88+
.example-margin:hover {
89+
color: blue;
90+
}
5891

59-
.resultLink:hover {
60-
opacity: 0.9;
61-
color: pink;
62-
text-decoration: underline;
63-
}
92+
.action-button-with-margin {
93+
margin-right: 10px;
94+
}
6495

65-
.similarityvalue {
66-
color: red;
67-
}
96+
.styled-textarea {
97+
height: 100px;
98+
border-radius: 5px;
99+
padding: 10px;
100+
border: 1px solid #ccc;
101+
transition: border-color 0.3s;
102+
}
68103

69-
.example-margin:hover {
70-
color: blue;
71-
}
104+
.styled-textarea:focus {
105+
border-color: #3f51b5;
106+
outline: none;
107+
}
72108

109+
.graph-container {
110+
width: 100%;
111+
height: 400px;
112+
overflow: auto;
113+
border: 1px solid #ccc;
114+
margin-top: 20px;
115+
padding: 10px;
116+
}
73117
</style>

0 commit comments

Comments
 (0)