interactive-mining/interactive-mining-angular-.../src/app/configuration/settings/settings.component.html

168 lines
12 KiB
HTML
Executable File
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<div id="child1-inner" >
<div class="cm-easy-config-section">
<h4>Default rules <span class="cm-tooltip" uk-icon="icon: info" title="An initial set of <b>default mining rules</b>. Such rules include text preprocessing, length of mining area etc.<br>You can <b>edit these rules</b> by selecting <b>Custom rules</b>." uk-tooltip="pos: right"></span></h4>
<p class="uk-text-small">Select your mining strategy. Choose between high recall or high precision.</p>
<div class="uk-text-center uk-flex-middle" uk-grid>
<div class="uk-width-auto uk-grid-item-match">
<span>High<br>recall</span>
</div>
<div class="uk-width-expand@m">
<nouislider [config]="sliderConfig" [(ngModel)]="settings.wordssplitnum" (ngModelChange)="onSliderChange($event)"></nouislider>
</div>
<div class="uk-width-auto uk-grid-item-match">
<span>Hight<br>precision</span>
</div>
</div>
</div>
<div class="cm-advanced-tools-section">
<!--<label class="uk-form-label cm-advaned-tools-label" for="advaned-tools-label">-->
<!--<input [checked]="customRulesOpen===true" (click)="advancedCheckboxChange()" id="advaned-tools-label" class="uk-checkbox" type="checkbox"> Custom rules-->
<!--</label>-->
<h4>Custom rules</h4>
<div id="advaned-tools" style="margin-top: 20px;">
<ul uk-accordion="multiple: true">
<li>
<div class="uk-accordion-title">
<span class="uk-text-bold uk-text-uppercase">Positive phrases</span>
<span *ngIf="positivePhrasesArray.length > 0" class="uk-text-small uk-margin-small-left">{{positivePhrasesArray.length}} phrase{{positivePhrasesArray.length===1?'':'s'}}</span>
</div>
<div class="uk-accordion-content">
<p class="uk-text-small">Add phrases that are very likely to be near a match. You can use different weights to divide between important and less important phrases.</p>
<div class="cm-phrases-container">
<header>
<form [formGroup]="positivePhraseForm" id="word-form-pos" class="uk-grid-collapse uk-child-width-expand@s uk-text-center" uk-grid (ngSubmit)="phraseSubmit(true)">
<!-- <div class="cm-number-space uk-width-1-5@m">#</div> -->
<input class="uk-width-expand uk-text-left cm-text-input cm-text-input-phrase" type="text" id="text-pos" placeholder="Phrase" formControlName="phrase"/>
<input class="uk-width-1-5@m uk-text-left cm-text-input cm-text-input-weight" type="number" name="weight" min="0" max="100" id="weight-pos" placeholder="Weight" formControlName="weight"/>
<input type="submit" class="btn uk-width-1-4@m cm-main-button cm-phrases-button" value="Add" [disabled]="!positivePhraseForm.valid"/>
</form>
<div class="scroll_holder">
<div class="scroller"></div>
</div>
</header>
<div style="position: relative;"><!--
<div style="position: absolute; left: 0; top: 0; height: 100%; width: 40px; background-color: #fafafa; border-right: 1px solid #e8e8e8;"></div> -->
<ul id="word-pos">
<li class="uk-grid-collapse uk-child-width-expand@s" uk-grid *ngFor="let phrase of positivePhrasesArray; let i = index" [ngClass]="{'editing':i===positiveSelectedRow}">
<div class="uk-width-expand uk-text-left cm-text-input phrase">
<input class="uk-textarea" style="word-break: break-word; width:100%" type="text" [(ngModel)]="phrase.phrase" (change)="phrasesChanged(true)" (focus)="selectPhraseRow(i, true)" (focusout)="unselectPhraseRow(true)">
</div>
<div class="uk-width-1-4@m uk-text-left cm-text-input weight">
<input style="width:100%" type="number" min="0" max="100" [(ngModel)]="phrase.weight" (change)="phrasesChanged(true)" (focus)="selectPhraseRow(i, true)" (focusout)="unselectPhraseRow(true)">
</div>
<div class="uk-width-1-4@m uk-text-center erase"><a class="uk-icon-link" uk-icon="icon: trash" contenteditable="false" (click)="deletePhrase(i,true)"></a></div>
</li>
</ul>
</div>
<footer class="positive">
<div class="uk-grid-collapse uk-child-width-expand@s" uk-grid>
<div>
<span class="count uk-text-middle" id="count-pos">{{positivePhrasesArray.length}}</span>
<span class="uk-text-middle"> positive word{{positivePhrasesArray.length!==1 ? 's' : ''}}</span>
</div>
</div>
</footer>
</div>
</div>
</li>
<li>
<div class="uk-accordion-title">
<span class="uk-text-bold uk-text-uppercase">Negative phrases</span>
<span *ngIf="negativePhrasesArray.length > 0" class="uk-text-small uk-margin-small-left">{{negativePhrasesArray.length}} phrase{{negativePhrasesArray.length===1?'':'s'}}</span>
</div>
<div class="uk-accordion-content">
<p class="uk-text-small">Add negative phrases that reduce the possibility for a match to be a match. You can use different weights to divide between important and less important phrases.</p>
<div class="word-container">
<div class="cm-phrases-container">
<header>
<form [formGroup]="negativePhraseForm" class="uk-grid-collapse uk-child-width-expand@s uk-text-center" id="word-form-neg" uk-grid (ngSubmit)="phraseSubmit(false)">
<!-- <div class="cm-number-space uk-width-1-5@m">#</div> -->
<input class="uk-width-expand uk-text-left cm-text-input cm-text-input-phrase" type="text" id="text-neg" placeholder="Phrase" formControlName="phrase"/>
<input class="uk-width-1-5@m uk-text-left cm-text-input cm-text-input-weight" type="number" name="weight" min="0" max="100" id="weight-neg" placeholder="Weight" formControlName="weight"/>
<input type="submit" class="btn uk-width-1-4@m cm-main-button cm-phrases-button" value="Add" [disabled]="!negativePhraseForm.valid"/>
</form>
<div class="scroll_holder">
<div class="scroller"></div>
</div>
</header>
<div style="position: relative;">
<!-- <div style="position: absolute; left: 0; top: 0; height: 100%; width: 40px; background-color: #fafafa; border-right: 1px solid #e8e8e8;"></div> -->
<ul id="word-neg">
<li class="uk-grid-collapse uk-child-width-expand@s" uk-grid *ngFor="let phrase of negativePhrasesArray; let i = index" [ngClass]="{'editing':i===negativeSelectedRow}">
<div class="uk-width-expand uk-text-left cm-text-input phrase">
<input class="uk-textarea" style="word-break: break-word; width:100%" type="text" [(ngModel)]="phrase.phrase" (change)="phrasesChanged(false)" (focus)="selectPhraseRow(i, false)" (focusout)="unselectPhraseRow(false)">
</div>
<div class="uk-width-1-4@m uk-text-left cm-text-input weight">
<input style="width:100%" type="number" min="0" max="100" [(ngModel)]="phrase.weight" (change)="phrasesChanged(false)" (focus)="selectPhraseRow(i, false)" (focusout)="unselectPhraseRow(false)">
</div>
<div class="uk-width-1-4@m uk-text-center erase"><a class="uk-icon-link" uk-icon="icon: trash" contenteditable="false" (click)="deletePhrase(i,false)"></a></div>
</li>
</ul>
</div>
<footer class="negative">
<div class="uk-grid-collapse uk-child-width-expand@s" uk-grid>
<div>
<span class="count uk-text-middle" id="count-neg">{{negativePhrasesArray.length}}</span>
<span class="uk-text-middle"> negative word{{negativePhrasesArray.length!==1 ? 's' : ''}}</span>
</div>
</div>
</footer>
</div>
</div>
</div>
</li>
<li>
<div class="uk-accordion-title">
<span class="uk-text-bold uk-text-uppercase">Mining area size</span>
<span class="uk-text-small uk-margin-small-left">before: {{settings.contextprev}}</span>
<span class="uk-text-small uk-margin-small-left">after: {{settings.contextnext}}</span>
</div>
<div class="uk-accordion-content">
<p class="uk-text-small">You may edit the length of the text area that the algorithm uses to decide if a match is a true positive.<br>This is mainly for advanced users, so you ll rarely need to change these values.</p>
<form class="">
<div class="cm-match-area left">
<label class="uk-form-label" for="context-prev-words">Number of words before the match</label>
<div class="uk-form-controls">
<input class="uk-input" type="number" name="context-prev-words" min="0" max="20" id="context-prev-words" placeholder="Before match, words" value="10" [value]="settings.contextprev" (change)="contextprevChange($event.target.value)"/>
</div>
</div>
<div class="cm-match-area right cm-margin-medium-bottom">
<label class="uk-form-label" for="context-next-words">Number of words after the match</label>
<div class="uk-form-controls">
<input class="uk-input" type="number" name="context-next-words" min="0" max="20" id="context-next-words" placeholder="After match, words" value="5" [value]="settings.contextnext" (change)="contextnextChange($event.target.value)"/>
</div>
</div>
</form>
</div>
</li>
<li>
<div class="uk-accordion-title">
<span class="uk-text-bold uk-text-uppercase">Text preprocessing</span>
<!--<span *ngIf="settings.stopwords===1" class="uk-text-small uk-margin-small-left">stopwords</span>-->
<!--<span *ngIf="settings.punctuation===1" class="uk-text-small uk-margin-small-left">punctuation</span>-->
</div>
<div class="uk-accordion-content">
<p class="uk-text-small">Select among the following text preprocessing steps.</p>
<form class="uk-form-stacked">
<div class="uk-margin">
<label class="uk-form-label" for="stop-words-filter"><input id="stop-words-filter" class="uk-checkbox" type="checkbox" [checked]="settings.stopwords===1" (change)="stopwordsCheckBoxChange($event.target.checked)"> Stopword removal</label>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="punctuation-filter"><input id="punctuation-filter" class="uk-checkbox" type="checkbox" [checked]="settings.punctuation===1" (change)="punctuationCheckBoxChange($event.target.checked)"> Punctuation removal</label>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="lowercase-filter"><input id="lowercase-filter" class="uk-checkbox" type="checkbox" [checked]="settings.lowercase===1" (change)="lowercaseCheckBoxChange($event.target.checked)"> Convert to lower case</label>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="stemming-filter"><input id="stemming-filter" class="uk-checkbox" type="checkbox" [checked]="settings.stemming===1" (change)="stemmingCheckBoxChange($event.target.checked)"> Word stemming <span class="cm-tooltip" uk-icon="icon: info" title="Stemming is a process of text normalisation, in which the <b>variant forms of a word are reduced to a common form</b>, for <b>example</b>:<br>connection, connections, connective, connected, connecting<br><b>are reduced to connect</b>." uk-tooltip="pos: right"></span></label>
</div>
</form>
</div>
</li>
</ul>
</div>
</div>
<!--<hr>-->
<!--<button id="next-button" class="uk-button cm-button-primary uk-margin-small-top" (click)="saveProfile()">Save this profile</button>-->
</div>