vega-view 0.3.1.1 → 0.3.1.2
raw patch · 3 files changed
+91/−23 lines, 3 files
Files
- ChangeLog.md +7/−0
- app/Main.hs +83/−22
- vega-view.cabal +1/−1
ChangeLog.md view
@@ -1,5 +1,12 @@ # Changelog for vega-view +## 0.3.1.2++The "view a visualization" page - i.e. /display/..path-to-spec - now+adds a horizontal scroll bar if the visualization is too wide for the+page. Unfortunately this doesn't happen on the drag-and-drop or inline+views.+ ## 0.3.1.1 Change the styling of the "frame" used to contain a Vega or Vega-Lite
app/Main.hs view
@@ -69,6 +69,11 @@ homeLink = (H.a ! A.id "homeLink" ! A.href "/") "Home" +toCSS, toJS :: [H.Html] -> H.Html+toCSS = (H.style ! A.type_ "text/css") . mconcat+toJS = (H.script ! A.type_ "text/javascript") . mconcat++ -- Represent a Vega or Vega-Lite sepcification, which has -- to be a Javascript object. Other than checking that we -- have an object, there is no other validation of the@@ -109,7 +114,10 @@ , "' }; " , "vegaEmbed(vdiv, " , H.toHtml (LB8.unpack (encode vis))- , ", vopts).catch((err) => { "+ , ", vopts).then((result) => { "+ -- it's almost like I'm making this up as I go along+ , "resetLocationWidth(vdiv.parentElement.parentElement); "+ , "}).catch((err) => { " , "vdiv.appendChild(document.createTextNode(err)); " , "vdiv.setAttribute('class', 'vega-error'); " , "});"@@ -412,15 +420,31 @@ , "background-color: white; " , "border: 2px solid rgba(0, 0, 0, 0.4); " , "border-radius: 0.5em; "- , "box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2); " , "padding: 1em; " , "} " , ".vizview:hover { " , "border-color: rgba(0, 0, 0, 0.8); "+ , "box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2); " , "} " ] +-- Handle header / main areas of the page+sectionsCSS :: [H.Html]+sectionsCSS = [ "#infobar label { "+ , "margin-right: 0.5em; "+ , "}"+ , "#mainbar { "+ , "padding: 1em; "+ , "} "+ , "#mainbar #swoosh svg { "+ , "fill: rgba(120, 120, 200, 0.2); "+ , "height: 200px; "+ , "width: 200px; "+ , "} "+ ]++ dragCSS :: H.Html dragCSS = let cts = pageSetupCSS ++@@ -428,23 +452,12 @@ , "float: left; " , "margin: 0.5em; " , "} "- , "#infobar label { "- , "margin-right: 0.5em; "- , "}"- , "#mainbar { "- , "padding: 1em; "- , "} "- , "#mainbar #swoosh svg { "- , "fill: rgba(120, 120, 200, 0.2); "- , "height: 200px; "- , "width: 200px; "- , "} " ] ++ closeCSS ++ hideCSS ++ descriptionCSS ++- locationCSS ++ vegaErrorCSS ++ vizCSS+ locationCSS ++ vegaErrorCSS ++ sectionsCSS ++ vizCSS in toCSS cts - + indexPage :: H.Html indexPage = H.docTypeHtml ! A.lang "en-US" $ do@@ -553,10 +566,6 @@ in (H.a ! A.href "#" ! A.onclick hdlr) toText -toCSS :: [H.Html] -> H.Html-toCSS = (H.style ! A.type_ "text/css") . mconcat-- -- Nothing to see here; slightly different if base directory or not emptyDir :: FilePath -> ActionM () emptyDir indir =@@ -634,7 +643,7 @@ let cts = [ ".vizview { " , "display: none; " , "left: 2em; "- , "overflow: hidden; "+ -- , "overflow: hidden; " why did I add this? , "position: fixed; " , "top: 2em; " , "} "@@ -717,6 +726,57 @@ load "vega-embed@4" "" +{-+try +align-items or align-self from+https://stackoverflow.com/questions/40141163/make-flex-items-take-content-width-not-width-of-parent-container++want to get title of block the full container width, and also get things working for inline/drag+drop++how about adding a resize handler on the window to adjust all the+vizview.location widths, and then trigger this on creation too++-}++pageCSS :: H.Html+pageCSS =+ let cts = pageSetupCSS +++ [ ".vizview { "+ , "overflow: auto; "+ , "} "+ , ".vizlist { "+ , "display: flex; "+ , "justify-content: space-around; " -- not convinced about this+ , "} "+ ] ++ descriptionCSS +++ locationCSS ++ vegaErrorCSS ++ sectionsCSS ++ vizCSS++ in toCSS cts+++-- change the "title" bar, containing the loction, but not any description,+-- as want that to stay bouded by the starting bounding box, I think+-- (so that it doesn't appear off-screen initially for a short-enough+-- description, if centered).+--+-- I had originally thought I would have to call resetLocationWidth on+-- a page resize, but it doesn't need to be, since the title is never+-- going to need to be larger than the value the scrollWidth of the+-- visualization.+--+pageJS :: H.Html+pageJS =+ let cts = [ "function resetLocationWidth(div) { "+ , "const locs = div.getElementsByClassName('location'); "+ , "if (locs.length === 0) { console.log('DBG: no location'); console.log({div}); return; } "+ , "const loc = locs[0]; "+ , "loc.style.width = div.scrollWidth + 'px'; "+ , "} "+ ]++ in toJS cts++ showPage :: FilePath -> ActionM () showPage infile = do espec <- liftIO (readSpec infile)@@ -736,7 +796,8 @@ H.head $ do H.title "View a spec" vegaEmbed- dragCSS -- don't need closeCSS, but near enough+ pageCSS+ pageJS H.body $ do (H.div ! A.id "infobar") $ do@@ -745,7 +806,7 @@ (H.div ! A.id "mainbar") $ do H.p $ H.toHtml (mconcat ["Go to ", parentLink])- contents+ (H.div ! A.class_ "vizlist") contents dirName = H.toValue ("/display" </> takeDirectory infile) parentLink = (H.a ! A.href dirName) "parent directory"
vega-view.cabal view
@@ -1,5 +1,5 @@ name: vega-view-version: 0.3.1.1+version: 0.3.1.2 synopsis: Easily view Vega or Vega-Lite visualizations. description: A web server that is used to view all the Vega and Vega-Lite specifications in a directory, or sub-directory. It is similar