diff --git a/ChangeLog.md b/ChangeLog.md --- a/ChangeLog.md +++ b/ChangeLog.md @@ -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 diff --git a/app/Main.hs b/app/Main.hs --- a/app/Main.hs +++ b/app/Main.hs @@ -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" diff --git a/vega-view.cabal b/vega-view.cabal --- a/vega-view.cabal +++ b/vega-view.cabal @@ -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