diff --git a/ChangeLog.md b/ChangeLog.md --- a/ChangeLog.md +++ b/ChangeLog.md @@ -1,5 +1,20 @@ # Changelog for vega-view +## 0.3.0.5 + +Improved error handling when displaying Vega or Vega-Lite specifications, +in that the error message from vega-embed is now shown to the viewer rather +than hidden away in the console log. It is not clear to me how useful these +error messages are, other than just to say "hey, something went wrong". + +The filenames for the export-to-svg/png options now uses the specification +file name rather than the default "visualization". There is no attempt to +remove any suffixes from the file name, so "foo.vg.json" will end up as +"foo.vg.json.svg" (or .png). + +Removed paths from file names in the directory listings, and also stopped +dropping their suffixes. + ## 0.3.0.4 Fixed directory browsing: previously things didn't work out so well if diff --git a/app/Main.hs b/app/Main.hs --- a/app/Main.hs +++ b/app/Main.hs @@ -9,7 +9,7 @@ A drag-and-drop page could be added, as could and endpoint to which you post a specification. -The code could be refactored to be a SPA. +The code could be refactored to be a SPA, but does it need to be? -} module Main where @@ -33,7 +33,7 @@ import Data.Version (showVersion) import Network.HTTP.Types (status404) import System.Directory (doesDirectoryExist, listDirectory) -import System.FilePath ((), takeBaseName, takeDirectory) +import System.FilePath ((), takeDirectory, takeFileName) import Text.Blaze.Html5 ((!)) import Text.Blaze.Html.Renderer.Text (renderHtml) import Web.Scotty (ScottyM, ActionM @@ -84,11 +84,18 @@ Just (String d) -> Just d _ -> Nothing - jsCts = mconcat [ "vegaEmbed('#" + jsCts = mconcat [ "const vdiv = document.getElementById('" , H.toHtml specId - , "', " + , "'); " + , "const vopts = { downloadFileName: '" + , H.toHtml (specPath spec) + , "' }; " + , "vegaEmbed(vdiv, " , H.toHtml (LB8.unpack (encode vis)) - , ");"] + , ", vopts).catch((err) => { " + , "vdiv.appendChild(document.createTextNode(err)); " + , "vdiv.setAttribute('class', 'vega-error'); " + , "});"] in (H.div ! A.class_ "vizview") $ do -- unlike embedSpec JS routines, do not add a close button @@ -141,7 +148,7 @@ espec <- readSpec infile case espec of Left _ -> pure Nothing - Right s -> pure (Just (createView s (takeBaseName infile))) + Right s -> pure (Just (createView s infile)) addTextJS, addTitleJS, addDescriptionJS :: [H.Html] @@ -229,7 +236,11 @@ , "addDescription(div, spec); " , "const vdiv = document.createElement('div'); " , "div.appendChild(vdiv); " - , "vegaEmbed(vdiv, spec); " + , "const vopts = { downloadFileName: filename }; " + , "vegaEmbed(vdiv, spec, vopts).catch((err) => { " + , "vdiv.appendChild(document.createTextNode(err)); " + , "vdiv.setAttribute('class', 'vega-error'); " + , "}); " , "div.style.display = 'block';" , "} " , "var addMode = 'top'; " -- should read from HTML or set HTML @@ -311,6 +322,21 @@ ] +-- not convinced using the header color is a good thing to indicate +-- an error; should be visually distinct +-- +vegaErrorCSS :: [H.Html] +vegaErrorCSS = [ ".vega-error { " + , "background: rgba(120, 120, 200); " + , "color: white; " + , "font-family: monospace; " + , "font-size: 150%; " + , "font-weight: bold; " + , "padding: 0.5em; " + , "} " + ] + + dragCSS :: H.Html dragCSS = let cts = pageSetupCSS ++ @@ -332,7 +358,7 @@ , "height: 200px; " , "width: 200px; " , "} " - ] ++ closeCSS ++ descriptionCSS ++ locationCSS + ] ++ closeCSS ++ descriptionCSS ++ locationCSS ++ vegaErrorCSS in toCSS cts @@ -424,7 +450,8 @@ pageLink :: FilePath -> H.Html pageLink infile = let toHref = H.toValue ("/display" infile) - in (H.a ! A.href toHref) (H.toHtml infile) + toText = H.toHtml (takeFileName infile) + in (H.a ! A.href toHref) toText makeLi :: FilePath -> H.Html makeLi infile = H.li (pageLink infile) @@ -438,9 +465,10 @@ embedLink :: FilePath -> H.Html embedLink infile = let toHref = H.toValue ("/embed" infile) + toText = H.toHtml (takeFileName infile) hdlr = mconcat [ "embed('", toHref, "');" ] - in (H.a ! A.href "#" ! A.onclick hdlr) (H.toHtml infile) + in (H.a ! A.href "#" ! A.onclick hdlr) toText toCSS :: [H.Html] -> H.Html @@ -473,7 +501,7 @@ -- Code to display a specification inline -- --- Would be a lot nicer to embed the code from a file at build time +-- Would be a lot nicer to embed the JS code from a file at build time -- or to load at run time. -- -- TODO: set max width/height of the visualization window so that @@ -497,11 +525,15 @@ , "} " , "const tgt = e.target; " , "if (tgt.status == 200) { " + , "const vopts = { downloadFileName: tgt.response.infile }; " , "addTitle(div, tgt.response.infile); " , "addDescription(div, tgt.response.spec); " , "const vdiv = document.createElement('div'); " , "div.appendChild(vdiv); " - , "vegaEmbed(vdiv, tgt.response.spec); " + , "vegaEmbed(vdiv, tgt.response.spec, vopts).catch((err) => { " + , "vdiv.appendChild(document.createTextNode(err)); " + , "vdiv.setAttribute('class', 'vega-error'); " + , "}); " , "} else { " , "addText(div, 'Unable to load specification'); " , "} " @@ -524,7 +556,8 @@ , "position: fixed; " , "top: 2em; " , "} " - ] ++ closeCSS ++ descriptionCSS ++ locationCSS ++ pageSetupCSS + ] ++ closeCSS ++ descriptionCSS ++ + locationCSS ++ pageSetupCSS ++ vegaErrorCSS in toCSS cts @@ -539,8 +572,9 @@ page = (H.docTypeHtml ! A.lang "en-US") $ do H.head $ do H.title (H.toHtml ("Files to view: " ++ indir)) - vegaEmbed - embedJS + unless (null files) $ do + vegaEmbed + embedJS embedCSS H.body $ do 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.0.4 +version: 0.3.0.5 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