From 83fef35c594a09bb707c6d469dc3a35cea2ef248 Mon Sep 17 00:00:00 2001 From: dave Date: Sat, 1 Jun 2019 22:19:47 -0700 Subject: [PATCH] css cleanup and flashing hover feature --- Dockerfile | 6 --- assets/js/app.js | 33 ++++++++++----- dirview/__init__.py | 8 +--- package.json | 1 + static/style.css | 56 ++++++++++++++++++++++++ templates/page.html | 101 ++------------------------------------------ yarn.lock | 5 +++ 7 files changed, 90 insertions(+), 120 deletions(-) create mode 100644 static/style.css diff --git a/Dockerfile b/Dockerfile index 5dcaa52..dfe89c0 100644 --- a/Dockerfile +++ b/Dockerfile @@ -15,12 +15,6 @@ RUN sed -i -E 's/(archive|security).ubuntu.com/192.168.1.142/' /etc/apt/sources. apt-get autoremove -y && \ rm -rf /var/lib/{apt,dpkg,cache,log}/ -# RUN apt-get update && \ -# apt-get install -y python3 git wget && \ -# wget -q -O /tmp/get-pip.py https://bootstrap.pypa.io/get-pip.py && \ -# python3 /tmp/get-pip.py && \ -# rm /tmp/get-pip.py - ADD . /tmp/code RUN cd /tmp/code && \ diff --git a/assets/js/app.js b/assets/js/app.js index c735494..12d80d5 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -1,3 +1,4 @@ +import $ from "jquery" import * as d3 from 'd3' import treemap from 'd3-hierarchy' import randomColor from 'randomcolor' @@ -18,15 +19,28 @@ cellColors[ROOT] = randomColor(); cellColors[LINK] = randomColor(); cellColors[SPECIAL] = randomColor(); -function boot() { - prep_graph(); -} - export default { boot: function(){boot();} } +function boot() { + winsize = { + w: $("#svg-container").width(), + h: window.innerHeight * 0.5 + } + prep_graph(); +} + +var winsize = null + function prep_graph() { + d3.select('svg') + .attr('width', winsize.w) + .attr('height', winsize.h) + .append("text") + .attr('dy', "1em") + .text("loading chart..."); + d3.json("/chart.json?n=" + _node + "&depth=" + _graph_depth).then(draw_graph); } @@ -35,21 +49,18 @@ function can_click(d) { } function draw_graph(data) { - var chart_width = document.getElementsByTagName("body")[0].clientWidth; - var chart_height = window.innerHeight * 0.5; - + console.log("data fetched in: " + data.render_time + "s") + d3.select('svg text').remove() var treemapLayout = d3.treemap().tile(d3.treemapBinary); // treemapBinary, treemapSquarify treemapLayout - .size([chart_width, chart_height]) + .size([winsize.w, winsize.h]) .paddingTop(25) .paddingRight(6) .paddingBottom(6) .paddingLeft(6) - d3.select('svg').attr('width', chart_width).attr('height', chart_height); - var root = d3.hierarchy(data); treemapLayout(root); @@ -69,7 +80,7 @@ function draw_graph(data) { // Create the colored rectangles nodes .append('rect') - // .attr('fill', function(d){return randomColor()}) + .attr('fill', function(d){return randomColor()}) .attr('width', function(d) { return d.x1 - d.x0; }) .attr('height', function(d) { return d.y1 - d.y0; }) .attr('id', function(d) {return "node-" + d.data.id;}) diff --git a/dirview/__init__.py b/dirview/__init__.py index 2b0e855..4bf8d7e 100644 --- a/dirview/__init__.py +++ b/dirview/__init__.py @@ -175,13 +175,10 @@ def main(): cherrypy.config.update({ 'tools.sessions.on': False, - 'request.show_tracebacks': True, #?? - 'server.show_tracebacks': True, #?? - 'server.socket_port': args.port, 'server.socket_host': '0.0.0.0', + 'server.socket_port': args.port, 'server.thread_pool': 5, - 'engine.autoreload.on': args.debug, - 'log.screen': False, #?? + 'engine.autoreload.on': args.debug }) def signal_handler(signum, stack): @@ -198,7 +195,6 @@ def main(): cherrypy.engine.start() cherrypy.engine.block() finally: - logging.info("API has shut down") cherrypy.engine.exit() diff --git a/package.json b/package.json index 744677b..949eca3 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "d3": "^5.9.2", "d3-hierarchy": "^1.1.8", "filesize": "^4.1.2", + "jquery": "^3.4.1", "randomcolor": "^0.5.4" }, "scripts": {}, diff --git a/static/style.css b/static/style.css new file mode 100644 index 0000000..ecfb4ec --- /dev/null +++ b/static/style.css @@ -0,0 +1,56 @@ +* { + box-sizing: border-box; +} +h1 { + word-wrap: break-word; +} +div.children > div { + padding: 0px 15px; +} +div.dirs { + float: left; + width: 50%; +} +div.files { + float: right; + width: 50%; +} +svg { + max-width: 100%; + color: #fff; + font-size: 10px; + font-family: arial, sans-serif; +} +svg rect { + fill: cadetblue; + opacity: 0.5; + stroke: white; +} +svg g.chart>g.can-navigate:hover { + cursor: pointer; +} +svg g.chart>g.can-navigate:hover a { + text-decoration: underline; +} +@keyframes hoverfade { + 0% { + opacity: 0.5; + stroke: white; + } + 50% { + opacity: 0.2; + stroke: black; + } + 100% { + opacity: 0.5; + stroke: white; + } +} + +svg g.chart>g.can-navigate:hover rect { + animation: hoverfade 0.5s infinite; + stroke: black; +} +svg a:hover { + +} diff --git a/templates/page.html b/templates/page.html index 9011122..b31058e 100644 --- a/templates/page.html +++ b/templates/page.html @@ -8,105 +8,12 @@ var _graph_depth = 2; - + - +
+ +

{{ node.path|pathjoin }}

diff --git a/yarn.lock b/yarn.lock index c8e75d4..e08f4fb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2188,6 +2188,11 @@ isobject@^3.0.0, isobject@^3.0.1: resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df" integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8= +jquery@^3.4.1: + version "3.4.1" + resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.1.tgz#714f1f8d9dde4bdfa55764ba37ef214630d80ef2" + integrity sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw== + js-tokens@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"