interactive-mining/interactive-mining-madoap/madoap/src/templates/configure_profile2.html

308 lines
23 KiB
HTML

{% extends "base_v2.html" %}
{% block configure_profile %} class="current" {% end %}
{% block content %}
<title>Configure profile</title>
<link rel="stylesheet" href="/static/animations.css"/>
<div class="uk-flex-inline cm-nav-container">
<div class="cm-left-box"><a href="/"><button id="cancel-main-btn" class="uk-close-large cm-close-btn" type="button" uk-close></button></a></div>
<div class="cm-navigation cm-nav-toolbar">
<ul class="uk-subnav uk-subnav-line">
<li class="cm-nav-li">
<a class="cm-nav-a" href="upload-codes">
<div class="cm-nav-number-container"><span class="cm-nav-number uk-text-middle">1</span></div>
<span class="cm-nav-title uk-text-middle">Matching context<br>definition</span>
</a>
</li>
<li class="cm-nav-li cm-nav-active">
<a class="cm-nav-a">
<div class="cm-nav-number-container"><span class="cm-nav-number uk-text-middle">2</span></div>
<span class="cm-nav-title uk-text-middle">Matching proccess<br>configuration</span>
</a>
</li>
<li class="cm-nav-li cm-nav-disabled">
<a class="cm-nav-a" id="save-profile-option">
<div class="cm-nav-number-container"><span class="cm-nav-number uk-text-middle">3</span></div>
<span class="cm-nav-title uk-text-middle">Save your<br>matching profile</span>
</a>
</li>
</ul>
</div>
</div>
<div id="parent">
<div id="child1" class="cm-config-settings-section">
<div id="child1-inner" >
<div class="cm-easy-config-section">
<h4>Preconfigured rules <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></h4>
<div class="cm-config-options-container">
<div class="cm-config-options-connect-line"></div>
<div class="uk-child-width-expand@s uk-text-center" uk-grid uk-switcher="animation: uk-animation-fade">
<div>
<a class="cm-config-option cm-config-light" id="1-level">
<div class="cm-outer-circle-button">
<div class="cm-circle-button">
<div class="cm-circle-button-fill"><span uk-icon="icon: check" class="cm-config-option-check"></span></div>
</div>
</div>
<span>Loose</span>
</a>
</div>
<div>
<a class="cm-config-option cm-config-medium" id="2-level">
<div class="cm-outer-circle-button">
<div class="cm-circle-button">
<div class="cm-circle-button-fill"><span uk-icon="icon: check" class="cm-config-option-check"></span></div>
</div>
</div>
<span>Medium</span>
</a>
</div>
<div>
<a class="cm-config-option cm-config-hard" id="3-level">
<div class="cm-outer-circle-button">
<div class="cm-circle-button">
<div class="cm-circle-button-fill"><span uk-icon="icon: check" class="cm-config-option-check"></span></div>
</div>
</div>
<span>Tight</span>
</a>
</div>
<!-- <div>
<a class="cm-config-option cm-config-advance" id="c-level">
<div class="cm-circle-button">
<div class="cm-circle-button-fill"></div>
</div>
<span>Advanced</span>
</a>
</div> -->
</div>
<ul class="uk-switcher uk-margin-small-top uk-text-small">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
<li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</li>
</ul>
</div>
</div>
<hr>
<div class="cm-advanced-tools-section">
<label class="uk-form-label cm-advaned-tools-label" for="advaned-tools-label"><input id="advaned-tools-label" class="uk-checkbox" type="checkbox"> Customized rules <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></label>
<div id="advaned-tools" style="display: none; margin-top: 20px;">
<ul uk-accordion="multiple: true">
<li>
<h6 class="uk-accordion-title">Positive phrases</h6>
<div class="uk-accordion-content">
<p class="uk-text-small">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="cm-phrases-container">
<header>
<form id="word-form-pos" class="uk-grid-collapse uk-child-width-expand@s uk-text-center" uk-grid>
<!-- <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"/>
<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"/>
<input type="submit" class="btn uk-width-1-4@m cm-main-button cm-phrases-button" value="Add"/>
</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" class="uk-list uk-list-striped">
</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">0</span>
<span class="uk-text-middle"> positive word(s)</span>
</div>
<div>
<button class="cm-white-button cm-phrases-button uk-float-right uk-button uk-button-default" disabled id="clear-all-pos">Delete All</button>
</div>
</div>
</footer>
</div>
</div>
</li>
<li>
<h6 class="uk-accordion-title">Negative phrases</h6>
<div class="uk-accordion-content">
<p class="uk-text-small">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="word-container">
<div class="cm-phrases-container">
<header>
<form class="uk-grid-collapse uk-child-width-expand@s uk-text-center" id="word-form-neg" uk-grid>
<!-- <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"/>
<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"/>
<input type="submit" class="btn uk-width-1-4@m cm-main-button cm-phrases-button" value="Add"/>
</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" class="uk-list uk-list-striped">
</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">0</span>
<span class="uk-text-middle"> negative word(s)</span>
</div>
<div>
<button class="cm-white-button cm-phrases-button uk-float-right uk-button uk-button-default" disabled id="clear-all-neg">Delete All</button>
</div>
</div>
</footer>
</div>
</div>
</div>
</li>
<li>
<h6 class="uk-accordion-title">Acknowledgement statement proccess</h6>
<div class="uk-accordion-content">
<p class="uk-text-small">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<form class="uk-form-horizontal">
<div>
<label class="uk-form-label" for="word-split">Length of N-grams <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></label>
<div class="uk-form-controls">
<input class="uk-input" type="number" name="word-split" min="0" max="10" id="word-split" placeholder="Word pairs" value="2"/>
</div>
</div>
</form>
</div>
</li>
<li>
<h6 class="uk-accordion-title">Matching area size</h6>
<div class="uk-accordion-content">
<p class="uk-text-small">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<form class="uk-form-horizontal">
<div class="cm-match-area left">
<label class="uk-form-label" for="context-prev-words">Words left of the match <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></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="Prev words number" value="10"/>
</div>
</div>
<div class="cm-match-area right">
<label class="uk-form-label" for="context-next-words">Words right of the match <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></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="Next words number" value="5"/>
</div>
</div>
</form>
</div>
</li>
<li>
<h6 class="uk-accordion-title">Text proccess</h6>
<div class="uk-accordion-content">
<p class="uk-text-small">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</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"> Remove stop words <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></label>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="punctuation-filter"><input id="punctuation-filter" class="uk-checkbox" type="checkbox"> Remove punctuation <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></label>
</div>
</form>
</div>
</li>
<li>
<h6 class="uk-accordion-title">Letter case</h6>
<div class="uk-accordion-content">
<p class="uk-text-small">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="uk-form-controls" id="letter-case-radio">
<label><input class="uk-radio none" type="radio" name="letter-case" value="none" checked="checked"> As it is</label><br>
<label><input class="uk-radio uppercase" type="radio" name="letter-case" value="uppercase"> UPPERCASE</label><br>
<label><input class="uk-radio lowercase" type="radio" name="letter-case" value="lowercase"> lowercase</label>
</div>
</div>
</li>
</ul>
</div>
</div>
<hr>
<div class="uk-flex uk-flex-center@m uk-flex-right@l uk-margin-top uk-margin-right cm-save-profile-step">
<span class="uk-text-primary uk-text-middle uk-text-middle">Satisfied with the results?</span>
<button id="next-button" class="uk-button uk-button-primary uk-margin-left">Save your profile</button>
</div>
</div>
</div>
<div id="child2">
<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-grid-collapse uk-child-width-expand@s" uk-grid>
<div>
<h4>Matching results <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></h4>
</div>
<div id="documents-section" class="uk-inline">
<div id="documents-change-btn" class="uk-float-right" style="padding: 0;">
<span id="docs-number" class="uk-text">0 documents uploaded</span>
<span id="docs-more-btn" class="uk-margin-small-left" uk-icon="icon: more" style="display: none;"></span>
</div>
</div>
</div>
<button id="run-mining-btn" class="uk-button uk-button-primary" disabled>Apply rules</button>
</div>
<div class="cm-results-count-section">
<div id="results-count">
<span id="results-number" class="uk-text-primary uk-margin-right"></span>
<span id="results-number-previous" class="cm-text-muted"></span>
</div>
</div>
<div class="cm-header-hide-pannel"></div>
</header>
<div id="initial-docs-upload-form" class="cm-docs-selection-form uk-container uk-container-small">
<h4>Load test documents <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></h4>
<div class="uk-container uk-container-small uk-margin-medium-top">
<div class="uk-text-center">
<button id="egi-sample" class="uk-button uk-width-extend cm-main-button uk-margin-small">test1 documents</button>
<button id="rcuk-sample" class="uk-button uk-width-extend cm-main-button uk-margin-small">test2 documents</button>
<button id="arxiv-sample" class="uk-button uk-width-extend cm-main-button uk-margin-small">test3 documents</button>
</div>
<div class="uk-heading-line uk-text-center uk-margin-small-top uk-margin-small-bottom"><span>or</span></div>
<div class="js-upload uk-placeholder cm-file-drop-area">
<div class="uk-flex uk-flex-middle uk-grid-collapse uk-child-width-expand@s" uk-grid>
<div>
<div class="cm-coloured-text">
<span uk-icon="icon: cloud-upload"></span>
<span class="uk-text-middle">Upload your documents</span>
<span class="cm-tooltip" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom" uk-icon="icon: info"></span>
</div>
<div>
<span class="cm-label">JSON</span><span class="cm-label">PDF</span><span class="cm-label">TXT</span>
<span class="uk-text uk-text-small">file types, maximum 10MB</span>
</div>
</div>
<div uk-form-custom>
<input type="file" name="upload" id="docs-file-input" class="inputfile">
<button class="uk-button uk-button-default cm-main-button" type="button" tabindex="-1" style="margin-left: 20px;">Choose file</button>
</div>
</div>
</div>
<progress id="js-progressbar" class="uk-progress" value="0" max="100" hidden></progress>
</div>
</div>
<div id="results-section" class="cm-results-rows" style="display: none;">
<ul id="docs-results" uk-accordion="multiple: true">
</ul>
</div>
<div class="cm-results-hide-pannel"></div>
</div>
</div>
<div style="clear: both;"></div>
</div>
<div id="wait-spinner-modal-center" class="uk-flex-top" esc-close="false" bg-close="false" uk-modal>
<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>
<script src="/static/configure-profile.js" type="text/javascript"></script>
{% end %}