Skip to content

Commit

Permalink
fix layouting, add pattern graph button
Browse files Browse the repository at this point in the history
  • Loading branch information
@LaviniaStiliadou
LaviniaStiliadou committed Sep 30, 2024
1 parent c88637c commit 7ed8e69
Show file tree
Hide file tree
Showing 3 changed files with 3,704 additions and 92 deletions.
196 changes: 105 additions & 91 deletions src/app/core/component/textmatcher/textmatcher.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,103 +1,117 @@
<button mat-icon-button class="close-button" (click)="closeDialog2()">
<mat-icon class="close-icon">close</mat-icon>
<mat-icon class="close-icon">close</mat-icon>
</button>

<div mat-dialog-content>
<mat-form-field id="type-field" class="action-button-with-margin" [floatLabel]="'always'">
<mat-label>Input the known Information</mat-label>
<textarea matInput placeholder="Type in information" [formControl]="inputfield" cdkFocusInitial></textarea>
</mat-form-field>
</div>

<div mat-dialog-content *ngIf="showRephrasedInput">
<p>Rephrased input: {{rephrasedInput}}</p>
</div>

<div mat-dialog-content *ngIf="showMatchingResults">
<p>The best matching algorithm with cosine similarity is
<span class="resultLink" (click)="openLink()">{{resultAlgorithm.name}}</span>.
</p>
<p>The Cosine Similarity is
<span class="similarityvalue">{{resultAlgorithm.cosineSimilarity}}</span>
</p>
</div>

<div>
<mat-form-field *ngIf="showMatchingResults">
<mat-label>Number of displayed algorithms</mat-label>
<mat-select [(value)]="selectednumber" (selectionChange)="numberChanged()">
<mat-option *ngFor="let number of numbers" [value]="number">{{number}}</mat-option>
</mat-select>
</mat-form-field>
</div>

<div>
<mat-table #table [dataSource]="tabledata" *ngIf="showMatchingResults">
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let result">
<span class="resultLink" (click)="openLink2(result.name)">{{result.name}}</span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="cosineSimilarity">
<mat-header-cell *matHeaderCellDef> Cosine similarity </mat-header-cell>
<mat-cell *matCellDef="let result"> {{result.cosineSimilarity}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
<mat-row *matRowDef="let row; columns: columnsToDisplay"></mat-row>
</mat-table>
<mat-form-field id="type-field" class="action-button-with-margin" [floatLabel]="'always'">
<mat-label>Input the known Information</mat-label>
<textarea
matInput
placeholder="Type in information"
[formControl]="inputfield"
cdkFocusInitial
class="styled-textarea"></textarea>
</mat-form-field>

<div *ngIf="showRephrasedInput">
<p>Rephrased input: {{rephrasedInput}}</p>
</div>

<div *ngIf="showMatchingResults">
<p>The best matching algorithm with cosine similarity is
<span class="resultLink" (click)="openLink()">{{resultAlgorithm.name}}</span>.
</p>
<p>The Cosine Similarity is
<span class="similarityvalue">{{resultAlgorithm.cosineSimilarity}}</span>
</p>
</div>

<div *ngIf="showMatchingResults">
<mat-table #table [dataSource]="tabledata">
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let result">
<span class="resultLink" (click)="openLink2(result.name)">{{result.name}}</span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="cosineSimilarity">
<mat-header-cell *matHeaderCellDef> Cosine similarity </mat-header-cell>
<mat-cell *matCellDef="let result"> {{result.cosineSimilarity}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
<mat-row *matRowDef="let row; columns: columnsToDisplay"></mat-row>
</mat-table>
</div>

<!-- Progress bar for aggregation -->
<mat-progress-bar *ngIf="isAggregating" mode="determinate" [value]="progressValue"></mat-progress-bar>
<p *ngIf="isAggregating">Aggregation in progress... {{ progressValue }}%</p>
</div>

<div mat-dialog-actions>
<button class="action-button-with-margin" (click)="closeDialog2()" mat-raised-button>
<i class="material-icons"></i> close
</button>

<button class="action-button-with-margin" (click)="extractInformation(false)" mat-raised-button>
<i class="material-icons"></i> start textmatching
</button>

<button class="action-button-with-margin" (click)="extractInformation(true)" mat-raised-button>
<i class="material-icons"></i> start textmatching with rake
</button>

<section class="testsection">
<input type="checkbox" class="example-margin" [checked]="checked" (change)="checkboxClicked($event)">
rephrase Problem using OpenAI
</section>

<!-- New buttons for Aggregate and Deploy -->
<button class="action-button-with-margin" (click)="aggregateSolutions()" mat-raised-button>
Aggregate Solutions
</button>

<button class="action-button-with-margin" [disabled]="!isAggregationComplete" (click)="deploySolution()" mat-raised-button>
Deploy Solution
</button>
<button class="action-button-with-margin" (click)="extractInformation(false)" mat-raised-button>
<i class="material-icons"></i> Identify Patterns
</button>

<button class="action-button-with-margin" *ngIf="fulltabledata && fulltabledata.length > 0"
(click)="openGraphDialog()" mat-raised-button>
Show Pattern Graph
</button>

<button class="action-button-with-margin" *ngIf="fulltabledata && fulltabledata.length > 0" (click)="aggregateSolutions()" mat-raised-button>
Aggregate Solutions
</button>

<button class="action-button-with-margin" *ngIf="isAggregationComplete && (fulltabledata && fulltabledata.length > 0)" (click)="deploySolution()"
mat-raised-button>
Deploy Solution
</button>
</div>

<!-- Styling -->
<style>
.resultLink {
cursor: pointer;
color: blue;
}

.resultLink:hover {
opacity: 0.9;
color: pink;
text-decoration: underline;
}

.similarityvalue {
color: red;
}

.example-margin:hover {
color: blue;
}

.action-button-with-margin {
margin-right: 10px;
}
.resultLink {
cursor: pointer;
color: blue;
}

.resultLink:hover {
opacity: 0.9;
color: pink;
text-decoration: underline;
}

.similarityvalue {
color: red;
}

.example-margin:hover {
color: blue;
}

.action-button-with-margin {
margin-right: 10px;
}

.styled-textarea {
height: 100px;
border-radius: 5px;
padding: 10px;
border: 1px solid #ccc;
transition: border-color 0.3s;
}

.styled-textarea:focus {
border-color: #3f51b5;
outline: none;
}

.graph-container {
width: 100%;
height: 400px;
overflow: auto;
border: 1px solid #ccc;
margin-top: 20px;
padding: 10px;
}
</style>
2 changes: 1 addition & 1 deletion src/app/core/default-pl-renderer/default-pl-renderer.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
</button-->
<button class="action-button-with-margin" (click)="openTextmatcherDialog()" *ngIf="graphVisible && isQuantumComputingPatternLanguage"
color="accent" mat-raised-button>
<i class="material-icons">extension</i> Textmatcher
<i class="material-icons">extension</i> Pattern Matcher
</button>
<button class="action-button-with-margin" (click)="reloadGraph()" *ngIf="graphVisible"
color="accent" mat-raised-button>
Expand Down
Loading

0 comments on commit 7ed8e69

Please sign in to comment.