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

79 lines
5.0 KiB
HTML
Executable File

<div class="uk-grid-collapse uk-child-width-expand uk-text-middle" uk-grid>
<h4 class="cm-margin-medium">Test area</h4>
<div class="uk-text-right">
<button id="next-button" class="uk-button cm-button-primary uk-margin-small-top" (click)="saveProfile()">Continue</button>
</div>
</div>
<div class="cm-results-section">
<header id="cm-results-section-header" class="uk-container uk-container-expand">
<div class="cm-results-controls">
<div class="uk-margin">
<p>Select or upload a dataset to test the mining algorithm. Each dataset contains documents from various sources according to its title.</p>
<div class="uk-grid-collapse uk-child-width-expand" uk-grid>
<!--<form class="uk-search uk-search-default uk-width-1-5@m">-->
<!--<span class="uk-search-icon-flip" uk-search-icon></span>-->
<!--<input class="uk-search-input" type="search" placeholder="Search..." style="background-color: white;">-->
<!--</form>-->
<button *ngIf="documentsLoaded>0" class="uk-button cm-button-primary uk-width-auto cm-doc-selected">{{docNameLoaded}}<span uk-icon="icon: check; ratio: 1"></span></button>
<div class="uk-width-expand" uk-slider>
<div class="uk-position-relative">
<div class="uk-slider-container">
<ul class="uk-slider-items uk-grid-small">
<li *ngFor="let doc of docSamples">
<button class="uk-button cm-button-examples" (click)="chooseSample(doc.name)">{{doc.name}}</button>
</li>
</ul>
</div>
<div >
<a class="uk-position-center-left uk-position-small cm-slidenav cm-slidenav-left" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small cm-slidenav cm-slidenav-right" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
</div>
</div>
</div>
<div class="uk-grid-collapse uk-child-width-expand" uk-grid>
<span *ngIf="documentsLoaded>0" class="uk-text uk-text-success" style="margin-top: 12px">{{documentsLoaded}} document{{documentsLoaded===1?'':'s'}} loaded</span>
<span *ngIf="documentsLoaded<1" class="uk-text uk-text-danger" style="margin-top: 12px">No documents selected</span>
<div class="uk-text-right uk-margin-small-top">
<span class="uk-text-middle">or</span>
<div uk-form-custom>
<input #docupload type="file" (change)="fileChangeUpload($event);docupload.value=''" accept=".txt,.pdf">
<span class="uk-link">Upload your documents</span>
</div>
<span class="cm-tooltip" uk-icon="icon: info" title="<span class='cm-label cm-label-docs'>PDF</span><span class='cm-label cm-label-docs'>TXT</span><span class='cm-label cm-label-docs'>JSON</span><span class='uk-text uk-text-small cm-coloured-text-meta'><br>maximum 1MB</span><br><br>Upload either a <b>PDF</b> or a <b>TXT</b> file. For <b>multiple documents</b> use valid <b>JSON file with two keys (id, text)</b>" uk-tooltip="pos: right"></span>
</div>
</div>
</div>
</div>
</header>
<div id="cm-run-test-section">
<div class="uk-display-inline">
<button id="run-mining-btn" class="uk-button cm-run-test-button" [disabled]="documentsLoaded<1" (click)="runMining()">Run rules test</button>
<span *ngIf="matches_number !== ''" id="results-number" class="cm-coloured-text uk-margin-left uk-text-bottom">{{matches_number}} matche{{matches_number===1?'':'s'}} found</span>
<span *ngIf="prev_matches_number !== ''" id="results-number-previous" class="cm-text-muted uk-text-bottom">, {{prev_matches_number}} matche{{prev_matches_number===1?'':'s'}} found previously</span>
</div>
</div>
<div id="results-section" class="cm-results-rows">
<ul id="docs-results" uk-accordion="multiple: true">
<li *ngFor="let result of resultsArray;" class="uk-card uk-card-default uk-card-small uk-card-body uk-open">
<h3 class="uk-accordion-title"><span class="uk-text-meta">document:</span> {{result.docTitle}}</h3>
<div class="uk-accordion-content" aria-hidden="false">
<div *ngFor="let match of result.matches">
<div class="match"><span class="uk-text-meta">match #{{match.matchcounter}}:</span> {{match.match}}</div>
<p class="cm-document-result">
{{match.extraprev}} <span class="textwindow" [innerHTML]="match.context"></span> {{match.extranext}}
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div id="wait-spinner-modal-center" class="uk-flex-top" esc-close="false" bg-close="false" uk-modal [ngClass]="{'uk-open':runingMining}" [style.display]="runingMining ? 'flex' : 'none'">
<div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
<p class="uk-text-center uk-text-middle uk-text-large">Working on it, please wait... <span uk-spinner></span></p>
</div>
</div>