mirror of
https://github.com/featurebasedb/featurebase.git
synced 2026-10-06 19:07:50 +00:00
Merge pull request #537 from alanbernstein/webui-help
Add syntax hints tooltip to WebUI
This commit is contained in:
commit
5d603f623b
3 changed files with 90 additions and 14 deletions
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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(<BITMAP_CALL>)<br />
|
||||
TopN([BITMAP_CALL], frame=foo, n=20)<br />
|
||||
Union([BITMAP_CALL, ...])<br />
|
||||
Intersect(<BITMAP_CALL>, [BITMAP_CALL, ...])<br />
|
||||
Difference(<BITMAP_CALL>, <BITMAP_CALL>)
|
||||
</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 />
|
||||
<tab>: autocomplete<br />
|
||||
<up>/<down>: 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>
|
||||
|
||||
<button id='query-btn'>Run Query</button>
|
||||
<div class="input-hints">
|
||||
<select class="" name="" id="index-dropdown">
|
||||
<option value="0">Select index</option>
|
||||
</select>
|
||||
|
||||
<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">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue