vega-view 0.3.0.0 → 0.3.0.1
raw patch · 4 files changed
+103/−61 lines, 4 files
Files
- ChangeLog.md +4/−0
- README.md +7/−3
- app/Main.hs +91/−57
- vega-view.cabal +1/−1
ChangeLog.md view
@@ -1,5 +1,9 @@ # Changelog for vega-view +## 0.3.0.1++Tweak the styling on some of the pages to use the "new look"™.+ ## 0.3.0.0 Add drag-and-drop support to the main page. You can now drag in a file
README.md view
@@ -28,12 +28,16 @@ The server - called `vega-view` - should be run from the directory containing the specifications to view. It then provides a web server-on port 8082 that can be used to view them at the URL+on port 8082 that can be used to view them at the URLs + http://localhost:8082/ http://localhost:8082/display/ -Visualizations can either be viewed as their own "page", or inline,-which may be more useful when you have multiple plots to view.+The first page lets you drag-and-drop files onto the page to view+them. Thse second lets you browse the visualizations that are present+in the diectory where you started the application. Thse can either be+viewed as their own "page", or inline, which may be more useful when+you have multiple plots to view. The aim is to be run in a a directory structure where most, if not all, the files are Vega or Vega-Lite specifications. This means that
app/Main.hs view
@@ -54,7 +54,8 @@ } --- Create HTML for the given specification+-- Create HTML for the given specification; try to match embedSpec+-- JS routines. -- createView :: Spec@@ -80,14 +81,15 @@ , H.toHtml (LB8.unpack (encode vis)) , ");"] - in (H.div ! A.class_ "spec") $ do- (H.p ! A.class_ "location") (H.toHtml (specPath spec))+ in (H.div ! A.class_ "vizview") $ do+ -- unlike embedSpec JS routines, do not add a close button+ (H.p ! A.class_ "location") (H.toHtml ("File: " ++ specPath spec)) case mDesc of Just desc -> (H.p ! A.class_ "description") (H.toHtml desc) Nothing -> pure () - (H.div ! A.class_ "embed" ! A.id (H.toValue specId)) ""+ (H.div ! A.id (H.toValue specId)) "" (H.script ! A.type_ "text/javascript") jsCts @@ -257,7 +259,8 @@ , "}" ] -descriptionCSS = [ "p.decription { "+descriptionCSS = [ "p.description { "+ , "text-align: center; " , "}" ] @@ -271,27 +274,35 @@ ] +pageSetupCSS :: [H.Html]+pageSetupCSS = [ "body { margin: 0; } "+ , "#infobar { "+ , "background: rgb(120, 120, 200); "+ , "color: white; "+ , "font-family: sans-serif; "+ , "padding: 0.5em; "+ , "} "+ , "#infobar #title { "+ , "font-size: 150%; "+ , "font-variant-caps: small-caps; "+ , "margin-right: 2em; "+ , "} "+ , "#mainbar { "+ , "padding: 1em; "+ , "} "+ ]++ dragCSS :: H.Html dragCSS =- let cts = [ "body { margin: 0; } "- , ".vizview { "+ let cts = pageSetupCSS +++ [ ".vizview { " , "background: white; " , "border: 2px solid rgba(0, 0, 0, 0.6); " , "margin: 0.5em; " , "float: left; " , "padding: 1em; " , "} "- , "#infobar { "- , "background: rgb(120, 120, 200); "- , "color: white; "- , "font-family: sans-serif; "- , "padding: 0.5em; "- , "} "- , "#infobar #title { "- , "font-size: 150%; "- , "font-variant-caps: small-caps; "- , "margin-right: 2em; "- , "} " , "#infobar label { " , "margin-right: 0.5em; " , "}"@@ -300,7 +311,7 @@ , "} " ] ++ closeCSS ++ descriptionCSS ++ locationCSS - in (H.style ! A.type_ "text/css") (mconcat cts)+ in toCSS cts indexPage :: H.Html@@ -391,6 +402,11 @@ makeLi :: FilePath -> FilePath -> H.Html makeLi indir infile = H.li (pageLink indir infile) +makeParentLi :: FilePath -> H.Html+makeParentLi indir =+ let toHref = H.toValue ("/display" </> indir </> "..")+ in H.li ((H.a ! A.href toHref) "parent directory")+ embedLink :: FilePath -> FilePath -> H.Html embedLink indir infile = let toHref = H.toValue ("/embed" </> indir </> infile)@@ -398,20 +414,30 @@ in (H.a ! A.href "#" ! A.onclick hdlr) (H.toHtml infile) ++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 = let page = (H.docTypeHtml ! A.lang "en-US") $ do- H.head (H.title (H.toHtml ("Files to view: " ++ indir)))+ H.head $ do+ H.title (H.toHtml ("Files to view: " ++ indir))+ toCSS pageSetupCSS+ H.body $ do- H.h1 "Vega and Vega-Lite viewer"+ (H.div ! A.id "infobar") $ do+ (H.span ! A.id "title") "Vega and Vega-Lite viewer" - if indir == "."- then H.p "There is nothing to see in the base directory!"- else do- H.p (H.toHtml ("Directory: " ++ indir))- H.p "There is nothing to see here!"- H.ul (makeLi indir "..")+ (H.div ! A.id "mainbar") $+ if indir == "."+ then H.p "There is nothing to see in the base directory!"+ else do+ H.p (H.toHtml ("Directory: " ++ indir))+ H.p "There is nothing to see here!"+ H.ul (makeParentLi indir) in html (renderHtml page) @@ -469,9 +495,9 @@ , "position: fixed; " , "top: 2em; " , "} "- ] ++ closeCSS ++ descriptionCSS ++ locationCSS+ ] ++ closeCSS ++ descriptionCSS ++ locationCSS ++ pageSetupCSS - in (H.style ! A.type_ "text/css") (mconcat cts)+ in toCSS cts showDir ::@@ -489,34 +515,37 @@ embedCSS H.body $ do- H.h1 "Vega and Vega-Lite viewer"- unless atTop (H.p (H.toHtml ("Directory: " ++ indir)))+ (H.div ! A.id "infobar") $ do+ (H.span ! A.id "title") "Vega and Vega-Lite viewer" - unless (null subdirs) $ do- H.h2 "Sub-directories"- H.ul $ do- unless atTop (makeLi indir "..")- forM_ subdirs (makeLi indir)+ (H.div ! A.id "mainbar") $ do+ unless atTop (H.p (H.toHtml ("Directory: " ++ indir))) - -- let's see how this basic setup works- --- -- TODO: might be nice to let users easily skip to next or- -- previous visualization when viewing one.- --- unless (null files) $ do- (H.div ! A.id "vizview") ""- (H.div ! A.id "vizlist") $ do- H.h2 "Visualizations"- H.table $ do- H.thead $- H.tr $ do- H.th "View page"- H.th "View inline"- H.tbody $- forM_ files $ \(f, _) ->+ unless (null subdirs) $ do+ H.h2 "Sub-directories"+ H.ul $ do+ unless atTop (makeParentLi indir)+ forM_ subdirs (makeLi indir)++ -- let's see how this basic setup works+ --+ -- TODO: might be nice to let users easily skip to next or+ -- previous visualization when viewing one.+ --+ unless (null files) $ do+ (H.div ! A.id "vizview") ""+ (H.div ! A.id "vizlist") $ do+ H.h2 "Visualizations"+ H.table $ do+ H.thead $ H.tr $ do- H.td (pageLink indir f)- H.td (embedLink indir f)+ H.th "View page"+ H.th "View inline"+ H.tbody $+ forM_ files $ \(f, _) ->+ H.tr $ do+ H.td (pageLink indir f)+ H.td (embedLink indir f) in html (renderHtml page) @@ -561,10 +590,15 @@ H.head $ do H.title "View a spec" vegaEmbed+ dragCSS -- don't need closeCSS, but near enough+ H.body $ do- H.h1 "View Vega or Vega-Lite with Vega Embed"- H.p $ H.toHtml (mconcat ["Go to ", parentLink])- contents+ (H.div ! A.id "infobar") $ do+ (H.span ! A.id "title") "Vega and Vega-Lite viewer"++ (H.div ! A.id "mainbar") $ do+ H.p $ H.toHtml (mconcat ["Go to ", parentLink])+ 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.0.0+version: 0.3.0.1 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