Skip to content

Instantly share code, notes, and snippets.

@mnemnion
Last active October 17, 2023 20:44
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mnemnion/68d1c114a9de7f65fb8b009a45168b81 to your computer and use it in GitHub Desktop.
Save mnemnion/68d1c114a9de7f65fb8b009a45168b81 to your computer and use it in GitHub Desktop.
HTML wrapper for class-enhanced create-table

Hover Over Me

SVG sharing sites (there's really only one) strip all script elements including CSS, so open this locally to see the effect.

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>PIKCHR Test</title>
<style>
.hidden {
position: absolute !important;
opacity: 0 !important;
pointer-events: none !important;
display: none !important;
}
</style>
<script>
function toggleHidden(id){
for(var c of document.getElementById(id).children){
c.classList.toggle('hidden');
}
}
</script>
<meta charset="utf-8">
</head>
<body>
<h1>File try.pik</h1>
<div id="svg-3" onclick="toggleHidden('svg-3')">
<div style='border:3px solid lightgray;max-width:718px;'>
<svg xmlns='http://www.w3.org/2000/svg' class="pikchr" viewBox="0 0 718.33 315.792">
<style type="text/css"><![CDATA[
text {
pointer-events: none;
}
path.optional:hover{
fill: powderblue !important;
}
path.optional:hover ~ text{
fill: darkorange !important;
}
path.always:hover{
fill: orchid !important;
}
path.always:hover ~ text{
fill: lemonchiffon !important;
}
path.choice-of:hover{
fill: lightgreen !important;
}
path.choice-of:hover ~ text{
fill: red !important;
}
]]></style>
<circle cx="5" cy="17" r="3.6" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<path d="M9,17L32,17" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<polygon points="32,17 20,21 20,12" style="fill:rgb(0,0,0)"/>
<g class="keyword token always" id="CR">
<path class="keyword token always" d="M47,32L100,32A15 15 0 0 0 116 17A15 15 0 0 0 100 2L47,2A15 15 0 0 0 32 17A15 15 0 0 0 47 32Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<text class="keyword token always" x="74" y="17" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">CREATE</text>
</g>
<g class="keyword token optional" id="T1">
<path class="keyword token optional" d="M167,56L199,56A15 15 0 0 0 214 41A15 15 0 0 0 199 26L167,26A15 15 0 0 0 152 41A15 15 0 0 0 167 56Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<text class="keyword token optional" x="183" y="41" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">TEMP</text>
</g>
<g class="keyword token optional" id="T2">
<path class="keyword token optional" d="M167,94L259,94A15 15 0 0 0 274 79A15 15 0 0 0 259 64L167,64A15 15 0 0 0 152 79A15 15 0 0 0 167 94Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<text class="keyword token optional" x="213" y="79" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">TEMPORARY</text>
</g>
<g class="keyword token always" id="TBL">
<path class="keyword token always" d="M325,32L365,32A15 15 0 0 0 380 17A15 15 0 0 0 365 2L325,2A15 15 0 0 0 310 17A15 15 0 0 0 325 32Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<text class="keyword token always" x="345" y="17" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">TABLE</text>
</g>
<g >
<path d="M116,17L213,17" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<polygon points="213,17 201,21 201,12" style="fill:rgb(0,0,0)"/>
</g>
<g >
<path d="M213,17L310,17" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<polygon points="310,17 299,21 299,12" style="fill:rgb(0,0,0)"/>
</g>
<g >
<path d="M116,17 L 123,17 Q 131,17 131,29 Q 131,41 141,41 L 152,41" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<polygon points="152,41 140,45 140,37" style="fill:rgb(0,0,0)"/>
</g>
<g >
<path d="M116,17 L 123,17 Q 131,17 131,32 L 131,64 Q 131,79 141,79 L 152,79" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<polygon points="152,79 140,83 140,74" style="fill:rgb(0,0,0)"/>
</g>
<path d="M274,79 L 282,79 Q 289,79 289,64 L 289,32 Q 289,17 294,17 L 299,17" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<path d="M214,41 L 274,41 Q 289,41 289,33 L 289,26" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<g >
<path d="M380,17L416,17" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<polygon points="416,17 404,21 404,12" style="fill:rgb(0,0,0)"/>
</g>
<g class="keyword token optional" >
<path class="keyword token optional" d="M431,32A15 15 0 0 0 446 17A15 15 0 0 0 431 2A15 15 0 0 0 416 17A15 15 0 0 0 431 32Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<text class="keyword token optional" x="431" y="17" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">IF</text>
</g>
<g >
<path d="M446,17L469,17" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<polygon points="469,17 458,21 458,12" style="fill:rgb(0,0,0)"/>
</g>
<g class="keyword token optional" >
<path class="keyword token optional" d="M484,32L504,32A15 15 0 0 0 520 17A15 15 0 0 0 504 2L484,2A15 15 0 0 0 469 17A15 15 0 0 0 484 32Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<text class="keyword token optional" x="494" y="17" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">NOT</text>
</g>
<g >
<path d="M520,17L543,17" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<polygon points="543,17 531,21 531,12" style="fill:rgb(0,0,0)"/>
</g>
<g class="keyword token optional" id="ETS">
<path class="keyword token optional" d="M558,32L602,32A15 15 0 0 0 617 17A15 15 0 0 0 602 2L558,2A15 15 0 0 0 543 17A15 15 0 0 0 558 32Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<text class="keyword token optional" x="580" y="17" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">EXISTS</text>
</g>
<g class="bypass" >
<path class="bypass" d="M380,17 L 387,17 Q 395,17 395,32 L 395,94 Q 395,109 380,109 L 228,109 L 213,109" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<polygon class="bypass" points="213,109 224,105 224,113" style="fill:rgb(0,0,0)"/>
</g>
<g class="bypass" >
<path class="bypass" d="M617,17 L 625,17 Q 632,17 632,32 L 632,94 Q 632,109 617,109 L 558,109 L 543,109" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<polygon class="bypass" points="543,109 554,105 554,113" style="fill:rgb(0,0,0)"/>
</g>
<path d="M543,109L310,109" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<g >
<path d="M310,109 L 20,109 Q 5,109 5,124 L 5,132 Q 5,147 17,147 L 28,147" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<polygon points="28,147 17,151 17,142" style="fill:rgb(0,0,0)"/>
</g>
<g class="rule optional literal identifier" id="SN">
<path class="rule optional literal identifier" d="M43,162L140,162A15 15 0 0 0 155 147A15 15 0 0 0 140 132L43,132A15 15 0 0 0 28 147A15 15 0 0 0 43 162Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<text class="rule optional literal identifier" x="92" y="147" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">schema-name</text>
</g>
<g >
<path d="M155,147L178,147" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<polygon points="178,147 166,151 166,142" style="fill:rgb(0,0,0)"/>
</g>
<g class="token glyph optional" id="DOT">
<path class="token glyph optional" d="M193,162A15 15 0 0 0 208 147A15 15 0 0 0 193 132A15 15 0 0 0 178 147A15 15 0 0 0 193 162Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<text class="token glyph optional" x="193" y="147" text-anchor="middle" font-weight="bold" fill="rgb(0,0,0)" dominant-baseline="central">.</text>
</g>
<g >
<path d="M208,147L244,147" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<polygon points="244,147 233,151 233,142" style="fill:rgb(0,0,0)"/>
</g>
<g class="rule literal identifier always" id="TN">
<path class="rule literal identifier always" d="M259,162L334,162A15 15 0 0 0 350 147A15 15 0 0 0 334 132L259,132A15 15 0 0 0 244 147A15 15 0 0 0 259 162Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<text class="rule literal identifier always" x="297" y="147" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">table-name</text>
</g>
<g class="bypass" >
<path class="bypass" d="M5,132 L 5,162 Q 5,177 20,177 L 77,177 L 92,177" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<polygon class="bypass" points="92,177 80,181 80,173" style="fill:rgb(0,0,0)"/>
</g>
<path d="M92,177 L 205,177 Q 220,177 220,162 L 220,162 Q 220,147 227,147 L 235,147" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<g >
<path d="M350,147 L 357,147 Q 365,147 365,162 L 365,207 Q 365,222 350,222 L 208,222 L 193,222" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<polygon points="193,222 205,218 205,227" style="fill:rgb(0,0,0)"/>
</g>
<g >
<path d="M193,222 L 20,222 Q 5,222 5,237 L 5,245 Q 5,260 17,260 L 28,260" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<polygon points="28,260 17,265 17,256" style="fill:rgb(0,0,0)"/>
</g>
<g class="token glyph choice-of always" id="LP">
<path class="token glyph choice-of always" d="M43,275A15 15 0 0 0 59 260A15 15 0 0 0 43 245A15 15 0 0 0 28 260A15 15 0 0 0 43 275Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<text class="token glyph choice-of always" x="43" y="260" text-anchor="middle" font-weight="bold" fill="rgb(0,0,0)" dominant-baseline="central">(</text>
</g>
<g >
<path d="M59,260L95,260" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<polygon points="95,260 83,265 83,256" style="fill:rgb(0,0,0)"/>
</g>
<g class="rule always" id="CD">
<path class="rule always" d="M95,275L199,275L199,245L95,245Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<text class="rule always" x="147" y="260" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">column-def</text>
</g>
<g class="rule optional" id="TC">
<path class="rule optional" d="M253,313L399,313L399,283L253,283Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<text class="rule optional" x="326" y="298" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">table-constraint</text>
</g>
<g >
<path d="M399,298L416,298" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<polygon points="399,298 410,294 410,302" style="fill:rgb(0,0,0)"/>
</g>
<g class="token glyph optional" id="C2">
<path class="token glyph optional" d="M431,313A15 15 0 0 0 446 298A15 15 0 0 0 431 283A15 15 0 0 0 416 298A15 15 0 0 0 431 313Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<text class="token glyph optional" x="431" y="298" text-anchor="middle" font-weight="bold" fill="rgb(0,0,0)" dominant-baseline="central">,</text>
</g>
<g class="token glyph always" id="RP">
<path class="token glyph always" d="M503,275A15 15 0 0 0 518 260A15 15 0 0 0 503 245A15 15 0 0 0 488 260A15 15 0 0 0 503 275Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<text class="token glyph always" x="503" y="260" text-anchor="middle" font-weight="bold" fill="rgb(0,0,0)" dominant-baseline="central">)</text>
</g>
<g >
<path d="M518,260L553,260" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<polygon points="553,260 541,265 541,256" style="fill:rgb(0,0,0)"/>
</g>
<g class="rule optional" id="TO">
<path class="rule optional" d="M553,275L674,275L674,245L553,245Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<text class="rule optional" x="613" y="260" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">table-options</text>
</g>
<g class="token glyph optional" id="C1">
<path class="token glyph optional" d="M147,313A15 15 0 0 0 162 298A15 15 0 0 0 147 283A15 15 0 0 0 132 298A15 15 0 0 0 147 313Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<text class="token glyph optional" x="147" y="298" text-anchor="middle" font-weight="bold" fill="rgb(0,0,0)" dominant-baseline="central">,</text>
</g>
<g >
<path d="M199,260 L 207,260 Q 214,260 214,275 L 214,283 Q 214,298 199,298 L 177,298 L 162,298" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<polygon points="162,298 174,294 174,302" style="fill:rgb(0,0,0)"/>
</g>
<path d="M132,298 L 87,298 Q 71,298 71,283 L 71,275 Q 71,260 77,260 L 83,260" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<g >
<path d="M199,260L235,260" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<polygon points="235,260 224,265 224,256" style="fill:rgb(0,0,0)"/>
</g>
<g class="bypass" >
<path class="bypass" d="M235,260L488,260" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<polygon class="bypass" points="488,260 476,265 476,256" style="fill:rgb(0,0,0)"/>
</g>
<g >
<path d="M446,260 L 458,260 Q 469,260 469,275 L 469,283 Q 469,298 458,298 L 446,298" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<polygon points="446,298 458,294 458,302" style="fill:rgb(0,0,0)"/>
</g>
<path d="M253,298 L 246,298 Q 238,298 238,283 L 238,275 Q 238,260 250,260 L 261,260" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<g >
<path d="M518,260 L 526,260 Q 533,260 533,245 L 533,230 Q 533,215 548,215 L 598,215 L 613,215" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<polygon points="613,215 602,219 602,211" style="fill:rgb(0,0,0)"/>
</g>
<g >
<path d="M613,215 L 659,215 Q 674,215 689,215 L 693,215 L 708,215" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<polygon points="708,215 697,219 697,211" style="fill:rgb(0,0,0)"/>
</g>
<circle cx="712" cy="215" r="3.6" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<g >
<path d="M674,260 L 681,260 Q 689,260 689,245 L 689,230 Q 689,215 699,215 L 708,215" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<polygon points="708,215 697,219 697,211" style="fill:rgb(0,0,0)"/>
</g>
<g >
<path d="M350,147L440,147" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<polygon points="440,147 428,151 428,142" style="fill:rgb(0,0,0)"/>
</g>
<g class="choice-of always" id="AS">
<path class="choice-of always" d="M455,162L459,162A15 15 0 0 0 474 147A15 15 0 0 0 459 132L455,132A15 15 0 0 0 440 147A15 15 0 0 0 455 162Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<text class="choice-of always" x="457" y="147" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">AS</text>
</g>
<g >
<path d="M474,147L497,147" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<polygon points="497,147 485,151 485,142" style="fill:rgb(0,0,0)"/>
</g>
<g class="rule always" >
<path class="rule always" d="M497,162L601,162L601,132L497,132Z" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<text class="rule always" x="549" y="147" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">select-stmt</text>
</g>
<g >
<path d="M601,147L637,147" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
<polygon points="637,147 626,151 626,142" style="fill:rgb(0,0,0)"/>
</g>
<path d="M637,147 L 674,147 Q 689,147 689,162 L 689,200 Q 689,215 696,215 L 704,215" fill="none" style="stroke-width:2.16;stroke:rgb(0,0,0);" />
</svg>
</div>
<pre class='hidden'> linerad = 10px
linewid *= 0.5
$h = 0.21
circle radius 10%
A0: arrow 2*arrowht
CR: ~keyword ~token ~always [oval "CREATE" fit]
T1: ~keyword ~token ~optional [oval "TEMP" fit] with .w at (linewid right of CR.e,.8*$h below CR)
T2: ~keyword ~token ~optional [oval "TEMPORARY" fit] with .w at 1.25*$h below T1.w
TBL: ~keyword ~token ~always [oval "TABLE" fit] with .w at (linewid right of T2.e,CR)
arrow from CR.e right even with T2; arrow to TBL.w
arrow from CR.e right linerad then down even with T1 then to T1.w
arrow from CR.e right linerad then down even with T2 then to T2.w
line from T2.e right linerad then up even with TBL \
then to arrowht left of TBL.w
line from T1.e right even with linerad right of T2.e then up linerad
arrow from TBL.e right
~keyword ~token ~optional [oval "IF" fit]
arrow right 2*arrowht
~keyword ~token ~optional [oval "NOT" fit]
arrow 2*arrowht
ETS: ~keyword ~token ~optional [oval "EXISTS" fit]
# IF NOT EXISTS bypass
Y1: .5*$h below T2.s # vertical position of back-arrow
~bypass arrow from TBL.e right linerad then down even with Y1 then left even with T2
~bypass arrow from ETS.e right linerad then down even with Y1 \
then left even with ETS.w
line left even with TBL.w
# second row
arrow left even with first circle then down $h*1.25 then right 2*arrowht
SN: ~rule ~optional ~literal ~identifier [oval "schema-name" fit]
arrow 2*arrowht
DOT: ~token ~glyph ~optional [oval "." bold fit]
arrow
TN: ~rule ~literal ~identifier ~always [oval "table-name" fit]
# schema-name bypass
~bypass arrow from (first circle,SN.n) down even with $h below SN \
then right even with SN
line right even with arrowht right of DOT.e then up even with DOT \
then right linerad
# Loop back from table-name
arrow from TN.e right linerad then down even with DOT.s-(0,2*$h) \
then left even with DOT
# third row
arrow left even with first circle then down $h*1.25 then right 2*arrowht
LP: ~token ~glyph ~choice-of ~always [oval "(" bold fit]
arrow
CD: ~rule ~always [box "column-def" fit]
TC: ~rule ~optional [box "table-constraint" fit] with .w at CD.e+(1.5*linewid,-1.25*$h)
arrow &lt;- from TC.e right 1.5*arrowht
C2: ~token ~glyph ~optional [oval "," bold fit]
RP: ~token ~glyph ~always [oval ")" bold fit] at (2*linewid right of C2,LP)
arrow from RP.e right 3*arrowht
TO: ~rule ~optional [box "table-options" fit]
# column-def loop
C1: ~token ~glyph ~optional [oval "," bold fit] at 1.25*$h below CD
arrow from CD.e right linerad then down even with C1 then to C1.e
line from C1.w left even with 2*arrowht left of CD.w then up even with CD \
then to arrowht left of CD.w
# table-constraint bypass
arrow from CD.e right
~bypass arrow to RP.w
# table-constraint loop
arrow from (C2.e,RP) right 2*arrowht then down even with C2 then to C2.e
line from TC.w left linerad then up even with RP then right 2*arrowht
# exit circle and table-options bypass
arrow from RP.e right linerad then up 1.5*$h then right even with TO.n
arrow right even with TO.e then right 3*arrowht
EC: circle same
# table-options exit
arrow from TO.e right linerad then up 1.5*$h then right even with EC.w
# AS select clause
arrow from TN.e right 250%
AS: ~choice-of ~always [oval "AS" fit]
arrow 2*arrowht
~rule ~always [box "select-stmt" fit]
arrow right
line right even with linerad right of TO.e then down even with last circle \
then right linerad
</pre>
</div>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment