Merge pull request #537 from alanbernstein/webui-help

Add syntax hints tooltip to WebUI
This commit is contained in:
alanbernstein 2017-05-12 16:33:16 -05:00 • committed by GitHub
commit 5d603f623b
3 changed files with 90 additions and 14 deletions

View file

@ -20,7 +20,8 @@ class REPL {
// keyword: length of substring that comes after cursor
"SetBit()": 1,
"ClearBit()": 1,
"SetBitmapAttrs()": 1,
"SetRowAttrs()": 1,
"SetColumnAttrs()": 1,
"Bitmap()": 1,
"Union()": 1,
"Intersect()": 1,

View file

@ -295,4 +295,47 @@ td{
.expand {
text-align: center;
}
}
.query h2 {
display: inline-block;
}
.query-tooltip {
position: relative;
display: inline;
color: #000;
margin-left: 5px;
}
.query-tooltip:hover {
color: #000;
}
.query-tooltip-content {
background-color: rgb(250, 250, 250);
border: solid 1.5px #e4eff4;
color: #102445;
border-radius: 2px;
padding: 15px;
margin-bottom: 15px;
position: absolute;
left: 80px;
top: -30px;
z-index: 1;
}
.query-tooltip-container {
position: relative;
visibility: hidden;
}
.query-tooltip:hover+.query-tooltip-container{
visibility: visible;
}
.code{
font-family: monospace;
}

View file

@ -35,28 +35,60 @@
<div class="query">
<h2>Query</h2>
<a class="query-tooltip" href="https://www.pilosa.com/docs/webui/" target="_blank"><sup>?</sup></a>
<div class="query-tooltip-container">
<div class='query-tooltip-content'>
<h5>PQL</h5>
<div class="code">
SetBit(frame=foo, rowID=0, columnID=0)<br />
ClearBit(frame=foo, rowID=0, columnID=0)<br />
SetRowAttrs(frame=foo, rowID=0, color="blue")<br />
SetColumnAttrs(frame=foo, columnID=0, shape="circle")<br />
Bitmap(frame=foo, rowID=0)<br />
Range(frame=foo, rowID=0, start="2010-01", end="2017-03")<br />
Count(&lt;BITMAP_CALL&gt;)<br />
TopN([BITMAP_CALL], frame=foo, n=20)<br />
Union([BITMAP_CALL, ...])<br />
Intersect(&lt;BITMAP_CALL&gt;, [BITMAP_CALL, ...])<br />
Difference(&lt;BITMAP_CALL&gt;, &lt;BITMAP_CALL&gt;)
</div>
<br />
<h5>Special commands</h5>
<div class="code">
:create index test [columnLabel=column]<br />
:use index test<br />
:create frame foo [rowLabel=row]<br />
:delete index test<br />
:delete frame foo
</div>
<br />
&lt;tab&gt;: autocomplete<br />
&lt;up&gt;/&lt;down&gt;: history<br />
</div>
</div>
<textarea name="name" id='query' rows="5" required></textarea>
<div class='input-controls'>
<select class="" name="" id="index-dropdown">
<option value="0">Select index</option>
</select>
&nbsp;&nbsp;&nbsp;
<button id='query-btn'>Run Query</button>
<div class="input-hints">
<select class="" name="" id="index-dropdown">
<option value="0">Select index</option>
</select>
&nbsp;&nbsp;&nbsp;
<button id='query-btn'>Run Query</button>
</div>
</div>
</div>
<div class="output-container">
<div class="output-container">
<h2>Output</h2>
<div id="outputs">
<h2>Output</h2>
<div id="outputs">
<!-- results -->
</div>
<!-- results -->
</div>
</div>
</div>
<div class="interface" id="interface-cluster">