also show proxied urls

app.js

@@ -19,7 +19,21 @@ app.use(cookieParser())
 app.use(require('stylus').middleware(path.join(__dirname, 'style')))
 app.use(express.static(path.join(__dirname, 'style')))
 app.use(express.static(path.join(__dirname, 'client')))
-app.use(express.static(path.join(__dirname, 'node_modules', 'jquery', 'dist')))
+app.get('/jquery.min.js', (req, res) => {
+  res.sendFile(path.join(__dirname, 'node_modules', 'jquery', 'dist', 'jquery.min.js'))
+})
+app.get('/jquery-ui.structure.min.css', (req, res) => {
+  res.sendFile(path.join(__dirname, 'node_modules', 'jqueryui', 'jquery-ui.structure.min.css'))
+})
+app.get('/jquery-ui.theme.min.css', (req, res) => {
+  res.sendFile(path.join(__dirname, 'node_modules', 'jqueryui', 'jquery-ui.theme.min.css'))
+})
+app.get('/jquery-ui.min.css', (req, res) => {
+  res.sendFile(path.join(__dirname, 'node_modules', 'jqueryui', 'jquery-ui.min.css'))
+})
+app.get('/jquery-ui.min.js', (req, res) => {
+  res.sendFile(path.join(__dirname, 'node_modules', 'jqueryui', 'jquery-ui.min.js'))
+})
 app.use(express.static(path.join(__dirname, 'node_modules', 'viz.js')))
 app.use(express.static(path.join(__dirname, 'node_modules', 'socket.io-client', 'dist')))
 app.use(express.static(path.join(__dirname, 'node_modules', 'docker.js')))

client/servicedock.js

@@ -10,14 +10,39 @@ function sigstack() {
   var dot = docker.graphics.stack()
   var svg = docker.graphics.viz(dot, error)
   $('#stacks').html(svg)
-  $('a#svgStacks').attr('href', 'data:image/svg;base64,'+btoa(svg))
+  $('a#svg').attr('href', 'data:image/svg;base64,'+btoa(svg))
                   .attr('target', '_blank')
                   .attr('download', window.location.hostname+'.svg')
-                  .show()
+  $('a#dot').attr('href', 'data:text/vnd.graphviz;base64,'+btoa(dot))
+                  .attr('target', '_blank')
+                  .attr('download', window.location.hostname+'.dot')
+
 }
 
 function init() {
   socket = io.connect()
   docker = new Docker(socket, error, sigstack)
+  $('header').attr('draggable', 'true')
+             .on('dragstart', (event) => {
+               event.originalEvent.dataTransfer.setData("text", event.originalEvent.target.id);
+             })
+  $('*').on('dragover', (event) => {
+    event.preventDefault()
+    var e = event.originalEvent
+    var obj = $('body')
+    var w = window.innerWidth
+    var h = window.innerHeight
+    if (e.clientY < h*.1) {
+      obj.removeClass('bottom').removeClass('left').removeClass('right').addClass('top')
+    } else if (e.clientY > h*.9) {
+      obj.addClass('bottom').removeClass('left').removeClass('right').removeClass('top')
+    } else if (e.clientX < w*.1) {
+      obj.removeClass('bottom').addClass('left').removeClass('right').removeClass('top')
+    } else if (e.clientX > w*.9) {
+      obj.removeClass('bottom').removeClass('left').addClass('right').removeClass('top')
+    }
+  }).on('drop', (event) => {
+    event.preventDefault()
+  })
 }
 $(init)

package.json

@@ -10,10 +10,11 @@
     "child_process": "^1.0.2",
     "cookie-parser": "*",
     "debug": "*",
-    "docker.js": "^1.4.0",
+    "docker.js": "^1.4.2",
     "dockerode": "^2.5.7",
     "express": "*",
     "jquery": "^3.1.1",
+    "jqueryui": "^1.11.1",
     "morgan": "*",
     "pty.js": "^0.3.1",
     "pug": "*",

style/style.styl

@@ -2,9 +2,95 @@ svg
   width: 100%
   height: auto
 
+header
+  display: flex
+  justify-content: space-between
+  background-color: blue
+  color: white
+  line-height: 1em
+  h1
+    font-size: 100%
+    a:link
+      color: white
+  #downloads
+    display: flex
+
+#info
+  display: none
+
 #error
   display: none
   background-color: red
 
-#svgStacks
+#svg, #dot
+  text-decoration: inherit
+  color: white
   display: none
+  &[href]
+    display: block
+
+.top
+  header
+    position: absolute
+    top: 0
+    left: 0
+    right: 0
+    height: 2em
+    overflow: hidden
+  main
+    position: absolute
+    top: 2em
+    left: 0
+    right: 0
+    bottom: 0
+    overflow: auto
+
+.bottom
+  header
+    position: absolute
+    bottom: 0
+    left: 0
+    right: 0
+    height: 2em
+    overflow: hidden
+  main
+    position: absolute
+    top: 0
+    left: 0
+    right: 0
+    bottom: 2em
+    overflow: auto
+
+.left
+  header
+    position: absolute
+    top: 0
+    right: 2em
+    left: 0
+    height: 2em
+    overflow: hidden
+    transform: translate(-50%) translate(1em) rotate(270deg) translate(-50%) translate(2em)
+  main
+    position: absolute
+    top: 0
+    left: 2em
+    right: 0
+    bottom: 0
+    overflow: auto
+
+.right
+  header
+    position: absolute
+    top: 0
+    right: 0
+    left: 3em
+    height: 2em
+    overflow: hidden
+    transform: translate(50%) translate(-1em) rotate(90deg) translate(50%) translate(-1em)
+  main
+    position: absolute
+    top: 0
+    left: 0
+    right: 2em
+    bottom: 0
+    overflow: auto

views/index.pug

@@ -2,4 +2,3 @@ extends layout
 
 block content
   div#stacks loading...
-  a#svgStacks download image

views/layout.pug

@@ -3,12 +3,23 @@ html
   head
     title= title
     link(rel='stylesheet', href='/style.css')
+    link(rel='stylesheet', href='/jquery-ui.structure.min.css')
+    link(rel='stylesheet', href='/jquery-ui.theme.min.css')
+    link(rel='stylesheet', href='/jquery-ui.min.css')
     script(type="text/javascript", src="/jquery.min.js")
+    script(type="text/javascript", src="/jquery-ui.min.js")
     script(type="text/javascript", src="/viz.js")
     script(type="text/javascript", src="/docker.js")
     script(type="text/javascript", src="/socket.io.js")
     script(type="text/javascript", src="/servicedock.js")
-  body
+  body.top
-    block content
+    header#header
-    footer
+      h1 ServiceDock
-      div#error
+      div#downloads
+        a#svg download image
+        a#dot download source
+    main
+      block content
+      footer
+        div#info
+        div#error