joshua/dash-visualizer
1
0
Fork 0
mirror of https://github.com/seigler/dash-visualizer synced 2025-07-28 10:16:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

publish: Visualize Dash blocks as Jackson Polluck style paintings

Browse source 
generated from commit 34dabd963c
This commit is contained in:
Joshua Seigler 2019-04-04 03:54:31 -04:00
parent 8a558586dd
commit a0b9b6ab66
52 changed files with 2152 additions and 245 deletions
Download patch file Download diff file Expand all files Collapse all files

2
bundle.css.map
View file

@ -1 +1 @@
{"version":3,"sources":["app/styles/main.less"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"public/bundle.css","sourcesContent":["body {\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n font-family: sans-serif;\n font-size: 140%;\n background-image: url('assets/Dash-logo.svg'), linear-gradient(to bottom right, #1e73be, #073a66);\n background-size: 50vmin auto, cover;\n background-position: center;\n background-attachment: fixed;\n background-repeat: no-repeat;\n background-color: #1e73be;\n color: white;\n min-height: 100vh;\n}\n* {\n box-sizing: inherit;\n}\na {\n color: inherit;\n text-decoration: none;\n}\n#transactionList {\n padding: 1em 0 0;\n mix-blend-mode: screen;\n opacity: 0.75;\n height: 100vh;\n overflow: hidden;\n}\n#transactionList:after {\n content: '';\n position: fixed;\n bottom: 0;\n height: 8em;\n left: 0;\n right: 0;\n background-image: linear-gradient(to top, #1e73be 0%, rgba(30, 115, 190, 0.987) 8.1%, rgba(30, 115, 190, 0.951) 15.5%, rgba(30, 115, 190, 0.896) 22.5%, rgba(30, 115, 190, 0.825) 29%, rgba(30, 115, 190, 0.741) 35.3%, rgba(30, 115, 190, 0.648) 41.2%, rgba(30, 115, 190, 0.55) 47.1%, rgba(30, 115, 190, 0.45) 52.9%, rgba(30, 115, 190, 0.352) 58.8%, rgba(30, 115, 190, 0.259) 64.7%, rgba(30, 115, 190, 0.175) 71%, rgba(30, 115, 190, 0.104) 77.5%, rgba(30, 115, 190, 0.049) 84.5%, rgba(30, 115, 190, 0.013) 91.9%, rgba(30, 115, 190, 0) 100%);\n z-index: 2;\n pointer-events: none;\n}\n#connectionStatus.is-connected ~ #transactionList:empty:before {\n content: 'Waiting for first transaction...';\n display: block;\n text-align: center;\n font-size: 2em;\n opacity: 0.5;\n}\n.tx {\n position: relative;\n margin: 3px auto;\n width: 20em;\n min-width: 80%;\n max-width: 100%;\n z-index: 1;\n}\n.txValue {\n display: none;\n flex: 0 0 auto;\n line-height: 1.25;\n}\n.txOutputs {\n display: flex;\n flex-wrap: nowrap;\n flex-direction: row;\n align-content: stretch;\n}\n.txOut {\n position: relative;\n flex: 1 1 auto;\n background-color: white;\n}\n.txOut:first {\n border-left: 3px solid black;\n}\n.txOut:after {\n content: '';\n width: 3px;\n background: black;\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n}\n.blockDivider {\n display: block;\n margin: 1em -1em -1.5em;\n background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.125));\n padding: 0.125em 1em 1.5em;\n color: rgba(0, 0, 0, 0);\n text-align: center;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.blockDivider:hover,\n.blockDivider:focus {\n color: inherit;\n}\n#muteToggle,\n#connectionStatus {\n position: fixed;\n top: 0;\n width: 8em;\n background: white;\n border: solid black;\n padding: 0.5em;\n font-size: 0.8em;\n text-transform: uppercase;\n font-weight: bold;\n text-align: center;\n color: black;\n}\n#muteToggle {\n left: 0;\n border-radius: 0 0 0.5em 0;\n border-width: 0 0.1em 0.1em 0;\n transition: opacity 0.5s;\n transition-delay: 1s;\n opacity: 0;\n cursor: pointer;\n z-index: 100;\n}\n#muteToggle:hover {\n opacity: 1;\n transition-delay: 0s;\n}\n#muteToggle:before {\n content: 'Mute';\n}\n#muteToggle.is-muted:before {\n content: 'Un-mute';\n}\n#connectionStatus {\n right: 0;\n border-radius: 0 0 0 0.5em;\n border-width: 0 0 0.1em 0.1em;\n transition: transform 0.5s;\n transform: none;\n}\n#connectionStatus.is-disconnected:before {\n content: 'Disconnected';\n color: red;\n}\n#connectionStatus.is-connecting:before {\n content: 'Connecting...';\n color: black;\n}\n#connectionStatus.is-connected:before {\n content: 'Connected';\n color: green;\n}\n#connectionStatus.is-connected {\n transition: transform 0.5s;\n transition-delay: 2s;\n transform: translate3d(0, -100%, 0);\n}\n"]}
{"version":3,"sources":["app/styles/main.css"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"public/bundle.css","sourcesContent":["body {\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n font-family: sans-serif;\n font-size: 140%;\n background-image: url('assets/Dash-logo.svg');\n background-size: 50vmin auto, cover;\n background-position: center;\n background-attachment: fixed;\n background-repeat: no-repeat;\n background-color: #bbb;\n color: black;\n height: 100vh;\n overflow: hidden;\n}\n* {\n box-sizing: inherit;\n}\na {\n color: inherit;\n text-decoration: none;\n}\n#connectionStatus.is-connected ~ #transactionList:empty:before {\n content: 'Waiting for first transaction...';\n display: block;\n text-align: center;\n font-size: 2em;\n opacity: 0.5;\n}\n#blockList {\n margin-left: 80vw;\n padding-top: 2.5vw;\n}\n.block:first-child {\n position: absolute;\n left: 41.125%;\n top: 50%;\n width: 77.5vw;\n height: 77.5vw;\n transform: translate(-50%,-50%);\n}\n@media (max-height: 77.5vw) {\n .block:first-child {\n width: calc(100vh - 5vw);\n height: calc(100vh - 5vw);\n }\n}\n.block {\n width: 15vw;\n height: 15vw;\n box-shadow: 0.1em 0.1em 1em hsla(0, 0%, 0%, 0.5);\n background-color: #eee;\n margin: 0 auto 1em;\n position: relative;\n overflow: hidden;\n}\n.explorer-link {\n display: none;\n position: absolute;\n z-index: 1;\n font-size: 1.9vmin;\n text-align: center;\n background-color: hsla(0, 0%, 100%, 0.5);\n color: transparent;\n height: 100%;\n width: 100%;\n}\n.block:hover .explorer-link {\n display: block;\n}\n.paint {\n position: absolute;\n left: calc(var(--x) * 90% + 5%);\n top: calc(var(--y) * 90% + 5%);\n transform: translate(-50%, -50%) rotate(var(--rotation));\n height: calc(var(--size) * 20% + 20%);\n width: calc(var(--size) * 20% + 20%);\n mask-size: contain;\n mask-repeat: no-repeat;\n mask-position: center;\n}\n\n#muteToggle, #connectionStatus {\n position: fixed;\n top: 0;\n width: 8em;\n background: white;\n border: solid black;\n padding: 0.5em;\n font-size: 0.8em;\n text-transform: uppercase;\n font-weight: bold;\n text-align: center;\n color: black;\n}\n\n#connectionStatus {\n right: 0;\n border-radius: 0 0 0 0.5em;\n border-width: 0 0 0.1em 0.1em;\n transition: transform 0.5s;\n transform: none;\n}\n#connectionStatus.is-disconnected:before {\n content: 'Disconnected';\n color: red;\n}\n#connectionStatus.is-connecting:before {\n content: 'Connecting...';\n color: black;\n}\n#connectionStatus.is-connected:before {\n content: 'Connected';\n color: green;\n}\n#connectionStatus.is-connected {\n transition: transform 0.5s;\n transition-delay: 2s;\n transform: translate3d(0, -100%, 0);\n}\n"]}