summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorDouglasBurke <>2019-09-10 23:02:00 (GMT)
committerhdiff <hdiff@hdiff.luite.com>2019-09-10 23:02:00 (GMT)
commit10b53c6c5d94310952d6a15916717d18f9a467b6 (patch)
tree405e1fe1c841b40a39291742a5714a2b88ff541c
parent06d5a69036a755d953639184c887a8243d408a1f (diff)
version 0.3.0.10.3.0.1
-rw-r--r--ChangeLog.md4
-rw-r--r--README.md10
-rw-r--r--app/Main.hs152
-rw-r--r--vega-view.cabal2
4 files changed, 105 insertions, 63 deletions
diff --git a/ChangeLog.md b/ChangeLog.md
index 404f085..e595429 100644
--- a/ChangeLog.md
+++ b/ChangeLog.md
@@ -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
diff --git a/README.md b/README.md
index 5dd6d5b..c0ccd3c 100644
--- a/README.md
+++ b/README.md
@@ -28,12 +28,16 @@ This is released under a BSD3 license.
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
diff --git a/app/Main.hs b/app/Main.hs
index 637907d..7ade955 100644
--- a/app/Main.hs
+++ b/app/Main.hs
@@ -54,7 +54,8 @@ data Spec = Spec {
}
--- Create HTML for the given specification
+-- Create HTML for the given specification; try to match embedSpec
+-- JS routines.
--
createView ::
Spec
@@ -80,14 +81,15 @@ createView spec specId =
, 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 @@ closeCSS = [ ".close { "
, "}"
]
-descriptionCSS = [ "p.decription { "
+descriptionCSS = [ "p.description { "
+ , "text-align: center; "
, "}"
]
@@ -271,27 +274,35 @@ locationCSS = [ "p.location { "
]
+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 @@ dragCSS =
, "} "
] ++ closeCSS ++ descriptionCSS ++ locationCSS
- in (H.style ! A.type_ "text/css") (mconcat cts)
+ in toCSS cts
indexPage :: H.Html
@@ -391,6 +402,11 @@ pageLink indir infile =
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 @@ embedLink indir infile =
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 @@ embedCSS =
, "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 @@ showDir indir (subdirs, files) =
embedCSS
H.body $ do
- H.h1 "Vega and Vega-Lite viewer"
- unless atTop (H.p (H.toHtml ("Directory: " ++ indir)))
-
- unless (null subdirs) $ do
- H.h2 "Sub-directories"
- H.ul $ do
- unless atTop (makeLi 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.th "View page"
- H.th "View inline"
- H.tbody $
- forM_ files $ \(f, _) ->
+ (H.div ! A.id "infobar") $ do
+ (H.span ! A.id "title") "Vega and Vega-Lite viewer"
+
+ (H.div ! A.id "mainbar") $ do
+ unless atTop (H.p (H.toHtml ("Directory: " ++ indir)))
+
+ 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 @@ showPage infile = do
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"
diff --git a/vega-view.cabal b/vega-view.cabal
index ac7502d..c7c970e 100644
--- a/vega-view.cabal
+++ b/vega-view.cabal
@@ -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