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

191 lines
15 KiB
HTML
Executable File

<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>High<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 <b>likely to be near a match</b>. You can use different <b>weights</b> to divide between <b>important</b> and less important phrases. Phrase can be a valid <b>Regular expression</b></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. If these phrases are found around the match, this is possibly a <b>false possitive</b>. You can use different <b>weights</b> to assign <b>importance</b>. Phrase can be a valid <b>Regular expression</b></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">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 <span class="cm-tooltip" uk-icon="icon: info" title="<b>Remove</b> common words (e.g., <b>articles</b> like an, the etc., <b>prepositions</b> like after, to etc.)" uk-tooltip="pos: right"></span></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>
<li>
<div class="uk-accordion-title">
<span class="uk-text-bold uk-text-uppercase">Document section</span>
<span *ngIf="settings.documentarea==='acknowledgment'" class="uk-text-small uk-margin-small-left">acknowledgment</span>
<span *ngIf="settings.documentarea==='citations'" class="uk-text-small uk-margin-small-left">citations</span>
</div>
<div class="uk-accordion-content">
<p class="uk-text-small">Select the part of the document that will be processed.</p>
<form class="uk-form-stacked">
<div class="uk-form-controls">
<div class="uk-margin-small">
<label class="uk-form-label"><input class="uk-radio" type="radio" name="documentarea" [checked]="settings.documentarea==='full'" (click)="documentAreaChange('full')"> Full document <span class="cm-tooltip" uk-icon="icon: info" title="The <b>full document</b> is processed" uk-tooltip="pos: right"></span></label>
</div>
<div class="uk-margin-small">
<label class="uk-form-label"><input class="uk-radio" type="radio" name="documentarea" [checked]="settings.documentarea==='acknowledgment'" (click)="documentAreaChange('acknowledgment')"> Acknowledgement section <span class="cm-tooltip" uk-icon="icon: info" title="Only the <b>acknowledgment</b> section is processed<br><span class='uk-text-danger'>Experimental feature</span>" uk-tooltip="pos: right"></span></label>
</div>
<div class="uk-margin-small">
<label class="uk-form-label"><input class="uk-radio" type="radio" name="documentarea" [checked]="settings.documentarea==='citations'" (click)="documentAreaChange('citations')"> Citations section <span class="cm-tooltip" uk-icon="icon: info" title="Only the <b>citations</b> section is processed<br><span class='uk-text-danger'>Experimental feature</span>" uk-tooltip="pos: right"></span></label>
</div>
</div>
</form>
</div>
</li>
<li>
<div class="uk-accordion-title">
<span class="uk-text-bold uk-text-uppercase">Mining area size</span>
<!--<span *ngIf="settings.contextprev !== 20" class="uk-text-small uk-margin-small-left">before: {{settings.contextprev}}</span>-->
<!--<span *ngIf="settings.contextnext !== 10" 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><span class="uk-text-danger">For advanced users only</span></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="50" id="context-prev-words" placeholder="Before match, words" value="20" [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="50" id="context-next-words" placeholder="After match, words" value="10" [value]="settings.contextnext" (change)="contextnextChange($event.target.value)"/>
</div>
</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>