diff --git a/src/vue-poc/components/vue-ace.vue b/src/vue-poc/components/vue-ace.vue
index 2913eb2..d1dec4f 100644
--- a/src/vue-poc/components/vue-ace.vue
+++ b/src/vue-poc/components/vue-ace.vue
@@ -72,7 +72,6 @@ ace editor for vue.js
     },
     
     applySettings(aceSettings){
-      console.log("apply: ",aceSettings.theme)
       this.editor.setTheme(`ace/theme/${aceSettings.theme}`)
       //this.editor.setKeyboardHandler(`ace/keyboard//${aceSettings.keybinding}`)
       this.editor.setFontSize(parseInt(aceSettings.fontsize,10))
diff --git a/src/vue-poc/core.js b/src/vue-poc/core.js
index e549e87..4099fa3 100644
--- a/src/vue-poc/core.js
+++ b/src/vue-poc/core.js
@@ -52,7 +52,7 @@ var settings = {
       if (this.debug) console.log('getItem',key);
       return localforage.getItem(key)
         .then(value => {
-          console.log('GET setting', key,value);
+          //console.log('GET setting', key,value);
           return value;
      
         }).catch(err => {
@@ -64,7 +64,7 @@ var settings = {
       if (this.debug) console.log('setItem',key,value);
       return localforage.setItem(key, value) 
       .then(value => {
-        console.log('SET ',key, value);
+        //console.log('SET ',key, value);
         return value
         
       }).catch(err => {
diff --git a/src/vue-poc/features/images/images.vue b/src/vue-poc/features/images/images.vue
index 2db0db2..abe3c9e 100644
--- a/src/vue-poc/features/images/images.vue
+++ b/src/vue-poc/features/images/images.vue
@@ -40,16 +40,17 @@
               <v-card   class="grey lighten-2 pt-1">
                 <v-card-media :src="src(image)"  @dblclick="go(image)" 
                 height="80px" contain>
-                <v-layout :justify-end="true">
-                <v-flex>
+                <v-layout align-baseline align-end fill-height>
+                <v-flex >
                  <v-icon class="green--text">check_circle</v-icon>
                  </v-flex>
                  </v-layout>
                 </v-card-media>
                 
                  <v-card-actions  >
-                <span>#</span>
-                 <v-btn icon small>
+
+						      <span v-if="image.keywords >0 ">#{{image.keywords}}</span>
+                 <v-btn icon small v-if="image.geo">
                   <v-icon>place</v-icon>
                 </v-btn>
                 <v-spacer></v-spacer>
diff --git a/src/vue-poc/features/images/images.xqm b/src/vue-poc/features/images/images.xqm
index 95d9595..8d13cf4 100644
--- a/src/vue-poc/features/images/images.xqm
+++ b/src/vue-poc/features/images/images.xqm
@@ -142,11 +142,15 @@ as element(*)*
 let $id:=$vue-api:entity?access?id($image)
 let $path:=$vue-api:entity?access?path($image)
 let $name:=$vue-api:entity?access?name($image)
+let $geo:=$vue-api:entity?access?geo($image)
+let $keywords:=$vue-api:entity?access?keywords($image)
 let $thumb:= $cfg:THUMBDIR ||  $path
 let $thumb:=if(file:exists($thumb)) then $thumb else $cfg:THUMBDIR || "missing.jpg"
 return   ( <id>{$id}</id>
          ,<name>{$name}</name>
          ,<path>{$path}</path>
+         ,<geo>{$geo}</geo>
+         ,<keywords>{$keywords}</keywords>
          ,<data>{fetch:binary($thumb)}</data>
          ,<mime>{fetch:content-type($thumb)}</mime>)
 };
diff --git a/src/vue-poc/features/ping/ping.vue b/src/vue-poc/features/ping/ping.vue
index db07c71..9d46dab 100644
--- a/src/vue-poc/features/ping/ping.vue
+++ b/src/vue-poc/features/ping/ping.vue
@@ -31,7 +31,7 @@
               <td>Get</td>
               <td>
                <v-btn @click="get()" icon >
-                   <v-icon>cached</v-icon>
+                   <v-icon>radio_button_checked</v-icon>
                 </v-btn>
              
                </td>
@@ -65,7 +65,7 @@
              <td>Update</td>
           <td>
            <v-btn @click="update()" icon >
-                   <v-icon>cached</v-icon>
+                   <v-icon>radio_button_checked</v-icon>
             </v-btn>
           </td>
           
diff --git a/src/vue-poc/features/settings/acesettings.vue b/src/vue-poc/features/settings/acesettings.vue
index b6bfa2a..e3b8a1d 100644
--- a/src/vue-poc/features/settings/acesettings.vue
+++ b/src/vue-poc/features/settings/acesettings.vue
@@ -105,7 +105,7 @@
 			        fontsize: "14"
 			    },
 			    keybindings:[  'ace',  'vim', 'emacs', 'textarea', 'sublime' ],
-			    themes: [ "github", "chaos","tomorrow"]
+			    themes: [ "github","chrome" ,"tomorrow","-dark-","chaos","twilight"]
 			    }
   },
   methods:{
diff --git a/src/vue-poc/features/tabs.vue b/src/vue-poc/features/tabs.vue
index b4d45d3..f4bb95c 100644
--- a/src/vue-poc/features/tabs.vue
+++ b/src/vue-poc/features/tabs.vue
@@ -23,10 +23,10 @@
         :key="i"
         :href="'#mobile-tabs-6-' + i"
       >
-       <v-chip  close>
-       <v-avatar class="pink">
+       <v-chip label close>
+      
        <v-icon>favorite</v-icon>
-       </v-avatar>
+
        Item {{ i }} more
        </v-chip>
       </v-tabs-item>
diff --git a/src/vue-poc/features/validate/rq-validate.xqm b/src/vue-poc/features/validate/rq-validate.xqm
index da23bce..1a7a966 100644
--- a/src/vue-poc/features/validate/rq-validate.xqm
+++ b/src/vue-poc/features/validate/rq-validate.xqm
@@ -5,35 +5,32 @@
 :)
 
 module namespace tx = 'quodatum:vue.api.transform';
+import module namespace qv = 'quodatum.validate' at "validate.xqm";
 
-(:~
- : xslt
- :)
+declare namespace cnt="http://cambridge.org/core/content";
+(:~ location of schema to use :)
+declare variable $tx:nvdl:=resolve-uri("../static/consignment/nvdl/consignment.nvdl",static-base-uri());
+
+(:~ location of schema to use :)
+declare variable $tx:schematron:=resolve-uri("../static/consignment/nvdl/core-consignment.sch",static-base-uri());
+
+declare variable $tx:validators:=(qv:schematron(?,$tx:schematron)
+                                  ,qv:nvdl(?,$tx:nvdl)
+                                  );
+                                  
+(:~ run validation doc in db :)
 declare 
-%rest:POST %rest:path("/vue-poc/api/xslt")
-%rest:query-param("xml", "{$xml}") 
-%rest:query-param("xslt", "{$xslt}")   
-%output:method("json")
-%updating   
-function tx:xslt($xml,$xslt) {
+%rest:GET %rest:path("/vue-poc/api/validate")
+%rest:query-param("doc", "{$doc}") 
+%rest:query-param("schema", "{$schema}") 
+%rest:produces("text/xml")
+%output:method("xml") 
+function tx:validate-path($doc,$schema){
+    tx:validate(doc($doc))
+};
 
-   let $result:=try{
-                let $x:=fn:parse-xml($xml)
-                let $s:=fn:parse-xml($xslt)
-                let $t:=fn:trace($xml,"xml")
-                 let $t:=fn:trace($xslt,"xml")
-                let $r:=xslt:transform($x,$s)
-                return 
-                <json objects="json">
-                   <rc>0</rc>
-                   <result>{fn:serialize($r)}</result>
-                </json>
-                } 
-                catch *{
-                 <json objects="json">
-                   <rc>1</rc>
-                   <info>{$err:description}</info>
-                </json>
-                }
-   return db:output($result)
-};
\ No newline at end of file
+(:~ run validations add custom details - content-type:)
+declare function tx:validate($doc){
+  let $type:=$doc//cnt:*=>head()=>local-name()=>substring-after("content-")
+  return qv:validation($doc,$tx:validators,attribute type {$type})
+};
diff --git a/src/vue-poc/features/validate/validate.vue b/src/vue-poc/features/validate/validate.vue
index b99246b..80dc5d6 100644
--- a/src/vue-poc/features/validate/validate.vue
+++ b/src/vue-poc/features/validate/validate.vue
@@ -1,16 +1,71 @@
 <!DOCTYPE html>
 <template id="validate">
- <v-container fluid>
-validate
+  <v-container fluid v-resize="onResize">
+<v-card>
+     <v-toolbar class="orange">
+          <v-btn  @click="validate"   :loading="loading"
+      :disabled="loading"
+          ><v-icon>play_circle_outline</v-icon>Validate</v-btn>
+          <span v-text="elapsed"></span>ms. Height: 
+          <span v-text="height"></span>
+            <v-spacer></v-spacer>
+         
+              <v-menu offset-y left>
+             <v-btn icon dark slot="activator"><v-icon>settings</v-icon></v-btn>
+              <v-card >
+              <v-toolbar class="green">
+                  <v-card-title >Settings................</v-card-title>
+                  </v-toolbar>
+                <v-card-text>
+                stuff
+                </v-card-text>
+                </v-card>
+              </v-menu>
+          </v-toolbar>
+    <v-card-text >
+    here
+    </v-card-text>
+    </v-card>
  </v-container>
 </template>
 
 <script>{
   data:  function(){
     return {
-      message: 'bad route!'
+      loading: false,
+      elapsed: null,
+      height: null,
+      result: null,
+      doc: "c:/test.xml",
+      schema: "c:/schema.xsd"
       }
   },
+  methods:{
+    onResize(){
+      this.height = window.innerHeight 
+    },
+    validate(){
+    
+      this.loading=true
+      this.start = performance.now();
+      HTTPNE.get("validate",Qs.stringify({doc: this.doc, schema: this.schema}))
+      .then(r=>{
+       console.log(r)
+       this.elapsed=Math.floor(performance.now() - this.start);
+       this.loading=false
+       if(r.data.rc==0){
+         this.result=r.data.result
+       }else{
+         this.result=r.data.info
+       }
+      })
+      .catch(r=> {
+        console.log("error",r)
+        this.result=r.message + ": "+ r.config.url + "\n"+ r.response.data
+        this.loading=false
+      });
+    },
+  },
   created:function(){
     console.log("notfound",this.$route.query.q)
   }
diff --git a/src/vue-poc/features/validate/validate.xqm b/src/vue-poc/features/validate/validate.xqm
new file mode 100644
index 0000000..c1cd5bb
--- /dev/null
+++ b/src/vue-poc/features/validate/validate.xqm
@@ -0,0 +1,104 @@
+(:~
+ : general validation tools, apply sequence of validators
+ : schematron and nvdl msg handling
+ : format as json friendly
+ : @author andy bunce ,quodatum ltd
+ : @licence apache 2
+ :)
+
+module namespace qv = 'quodatum.validate';
+import module namespace sch="expkg-zone58.validation.schematron";
+declare namespace svrl = "http://purl.oclc.org/dsdl/svrl";
+
+
+(:~ generate validation report for $doc
+ : @param $validators sequence of functions to apply 
+ : @param $extras custom attributes and elements to include in response
+ :)
+declare function  qv:validation($doc ,$validators as function(*)*,$extras)
+as element(validation){
+  let $uri:=base-uri($doc)
+  let $results:=for-each($validators,function($f){$f($doc)})
+  return <validation location="{$uri}"   nodes="{count($doc//*)}">{ $extras,$results}</validation>
+};
+
+(:~ report as json
+ : @param $options can limit size eg {"limit":200}
+:)
+declare function  qv:json($d as element(validation),$options as item()) 
+as element(_){
+ let $limit:= if($options?limit) then $options?limit else 5000
+ let $type:=$d/@type/string()
+ let $uri:=$d/@location/string()
+ let $name:=tokenize($uri,"/")[last()]
+ let $nodes:=$d/@nodes/string()
+ let $fix:=function($r){element {name($r)}{attribute type {"array"},qv:msg-limit($r/_,$limit)}}
+ return <_ type="object">
+            <uri>{$uri}</uri>
+            <name>{$name}</name>
+            <type>{$type}</type>
+            <nodes type="number">{$nodes}</nodes>
+            
+            <msgcounts type="object">{
+            for $v in $d/* return element {name($v)}{attribute type {"number"},count($v/_)}
+            }</msgcounts>
+          
+           <reports type="object">{
+                $d/*!$fix(.)
+            }</reports> 
+            
+         </_>
+};
+
+(:~ restrict number of messages o/p :)
+declare function  qv:msg-limit($msgs as element(_)* ,$limit as xs:integer)
+as element(_)*{
+let $count:=count($msgs)
+return  if($count>$limit)
+        then (subsequence($msgs,1,$limit -1),<_ type="object"><text>Messages truncated, {1+ $count - $limit} not shown.</text></_>)
+        else $msgs
+};
+ 
+(:~ 
+ : run schematron on doc, returns two reports
+:)
+declare function qv:schematron($d,$sch as xs:anyURI)
+as element()*{
+let $report:= sch:validate-document($d,doc($sch))
+return ( 
+   qv:msgs("failed-assert",$report/svrl:schematron-output/svrl:failed-assert!qv:msg-from-svrl(.)),
+   qv:msgs("successful-report", $report/svrl:schematron-output/svrl:successful-report!qv:msg-from-svrl(.))
+ )
+};
+  
+(:~ convert svrl node to standard msg :)
+declare function qv:msg-from-svrl($svrl as element())
+as element(_){
+    <_ type="object">
+            <text>{$svrl/svrl:text/string()}</text>
+            <role>{$svrl/@role/string()}</role>
+            <location>{$svrl/@location/string()}</location>
+    </_>
+};
+
+(:~ create nvdl report :)
+declare function qv:nvdl($d,$nvdl as xs:anyURI){
+ let $report:= validate:rng-report($d, $nvdl)
+ return  qv:msgs("nvdl",$report/message!qv:msg-from-nvdl(.))
+};
+
+(:~ convert nvdl message to standard msg format :)
+declare function qv:msg-from-nvdl($message as element())
+as element(_){
+    <_ type="object">
+            <text>{$message/string()}</text>
+            <role>{$message/@level/lower-case(.)}</role>
+            <line type="number">{$message/@line/string()}</line>
+    </_>
+};
+
+declare %private function qv:msgs($type as xs:string,$msgs as element(_)*)
+as element(){
+     element {$type}  {attribute type {"array"},$msgs}
+ 
+};
\ No newline at end of file
diff --git a/src/vue-poc/features/xslt/rq-xslt.xqm b/src/vue-poc/features/xslt/rq-xslt.xqm
index 73d899d..9fd0532 100644
--- a/src/vue-poc/features/xslt/rq-xslt.xqm
+++ b/src/vue-poc/features/xslt/rq-xslt.xqm
@@ -1,22 +1,21 @@
 (:~ 
-: validation handler
+: basex web system info
 : @author andy bunce
-: @since oct 2017
+: @since oct 2012
 :)
 
-module namespace tx = 'quodatum:vue.api.validate';
+module namespace tx = 'quodatum:vue.api.transform';
 
 (:~
- : validate
+ : xslt
  :)
 declare 
-%rest:POST %rest:path("/vue-poc/api/validate")
+%rest:POST %rest:path("/vue-poc/api/xslt")
 %rest:query-param("xml", "{$xml}") 
-%rest:query-param("schema", "{$schema}")   
-%output:method("json")
-%updating   
-function tx:validate($xml,$schema) {
-   let $xslt:="fixme"
+%rest:query-param("xslt", "{$xslt}")   
+%output:method("json")  
+function tx:xslt($xml,$xslt) {
+
    let $result:=try{
                 let $x:=fn:parse-xml($xml)
                 let $s:=fn:parse-xml($xslt)
@@ -35,5 +34,5 @@ function tx:validate($xml,$schema) {
                    <info>{$err:description}</info>
                 </json>
                 }
-   return db:output($result)
+   return $result
 };
\ No newline at end of file
diff --git a/src/vue-poc/features/xslt/transform.vue b/src/vue-poc/features/xslt/transform.vue
index fa0e4f4..6d3cafd 100644
--- a/src/vue-poc/features/xslt/transform.vue
+++ b/src/vue-poc/features/xslt/transform.vue
@@ -1,12 +1,14 @@
 <!DOCTYPE html>
 <template id="transform">
- <v-container fluid>
+ <v-container fluid >
 <v-card>
-     <v-toolbar >
+     <v-toolbar class="orange">
           <v-btn  @click="transform"   :loading="loading"
       :disabled="loading"
           ><v-icon>play_circle_outline</v-icon>Run</v-btn>
-           <v-spacer></v-spacer>
+          <span v-text="elapsed"></span>ms. Height: 
+          <span v-text="height"></span>
+            <v-spacer></v-spacer>
            <v-btn-toggle v-model="showOptions" multiple>
            <v-icon>visibility</v-icon>
               <v-btn flat value="result" >
@@ -19,18 +21,28 @@
                  <span :class="xslValid?'':'red'">XSLT</span>
               </v-btn>
             </v-btn-toggle>
-             <v-btn icon><v-icon>settings</v-icon></v-btn>
+              <v-menu offset-y left>
+             <v-btn icon dark slot="activator"><v-icon>settings</v-icon></v-btn>
+              <v-card >
+              <v-toolbar class="green">
+				          <v-card-title >Settings................</v-card-title>
+				          </v-toolbar>
+				        <v-card-text>
+				        stuff
+				        </v-card-text>
+				        </v-card>
+				      </v-menu>
           </v-toolbar>
-    <v-card-text >
-     <v-card-text v-if="showOptions.includes('result')">
-       <v-layout style="height:200px"  fill-height >
-      <v-flex >
-        <vue-ace :content="result" mode="xml" wrap="true" :settings="aceSettings"></vue-ace>
-      </v-flex>
+    <v-card-text v-resize="onResize" style="height:400px; " class="amber" ref="page">
+
+       <v-layout  v-if="showOptions.includes('result')" style="height:100%"  fill-height >
+		      <v-flex >
+		        <vue-ace :content="result" mode="xml" wrap="true" :settings="aceSettings"></vue-ace>
+		      </v-flex>
        </v-layout>
-      </v-card-text>
-      <v-layout style="height:200px"  fill-height >
-      <v-flex v-if="showOptions.includes('xml')" class="pa-1">
+ 
+      <v-layout style="height:100%"  fill-height>
+      <v-flex v-if="showOptions.includes('xml')" class="pa-1"  >
 	      <vue-ace  :content="xml" mode="xml" wrap="true" 
 	      v-on:change-content="v => this.xml=v" v-on:annotation="a => this.xmlValid=a.error===0 && a.warning===0"
 	     :settings="aceSettings"></vue-ace>
@@ -40,8 +52,8 @@
 	       v-on:change-content="v => this.xslt=v"  v-on:annotation="a => this.xslValid=a.error===0 && a.warning===0"
 	      :settings="aceSettings"></vue-ace>
       </v-flex>
-     
       </v-layout>
+ 
       </v-card-text>
       
      
@@ -60,7 +72,10 @@
       result: "(result here)",
       resultValid: true,
       showOptions: ["xml","xslt"],
-      loading: false
+      loading: false,
+      start: null,
+      elapsed: "?",
+      height: "?"
       }
   },
   methods:{
@@ -71,9 +86,11 @@
       if(!this.showOptions.includes("result"))this.showOptions.push("result")
       this.loading=true
       this.resultValid=true
+      this.start = performance.now();
       HTTPNE.post("xslt",Qs.stringify({xml:this.xml,xslt:this.xslt}))
       .then(r=>{
        console.log(r)
+       this.elapsed=Math.floor(performance.now() - this.start);
        this.loading=false
        if(r.data.rc==0){
          this.result=r.data.result
@@ -84,9 +101,17 @@
       })
       .catch(r=> {
         console.log("error",r)
-        this.result=r.response.data.info
+        this.result=r.message + ": "+ r.config.url + "\n"+ r.response.data
         this.loading=false
       });
+    },
+    onResize(){
+      var el=this.$refs["page"]
+      console.log("top",el.offsetTop)
+      var h=Math.max(1,window.innerHeight - el.offsetTop) -100
+       console.log("h",h)
+      this.height = h
+      el.style.height=h +"px"
     }
   },
   beforeRouteEnter (to, from, next) {
diff --git a/src/vue-poc/models.gen.xqm b/src/vue-poc/models.gen.xqm
index 4ba92ad..7e50376 100644
--- a/src/vue-poc/models.gen.xqm
+++ b/src/vue-poc/models.gen.xqm
@@ -1,5 +1,5 @@
 (: entity access maps 
- : auto generated from xml files in entities folder at: 2017-10-06T15:21:02.917+01:00 
+ : auto generated from xml files in entities folder at: 2017-10-15T22:56:50.395+01:00 
  :)
 
 module namespace entity = 'quodatum.models.generated';
@@ -185,10 +185,10 @@ declare variable $entity:list:=map {
      "name": "thumbnail",
      "description": "an image.",
      "access": map{ 
-       "geo": function($_ as element()) as xs:boolean {$_/geo },
+       "geo": function($_ as element()) as xs:boolean {$_/boolean(geo) },
        "height": function($_ as element()) as xs:integer {$_/height },
        "id": function($_ as element()) as xs:integer {$_/db:node-id(.) },
-       "keywords": function($_ as element()) as xs:integer {$_/0 },
+       "keywords": function($_ as element()) as xs:integer {$_/count(keywords/keyword) },
        "name": function($_ as element()) as xs:string {$_/file/@name },
        "path": function($_ as element()) as xs:string {$_/file/@path },
        "size": function($_ as element()) as xs:integer {$_/0 },
@@ -201,7 +201,7 @@ declare variable $entity:list:=map {
        "json":   map{ 
            "geo": function($_ as element()) as element(geo)? {
             (: xs:boolean :)
-                        fn:data($_/geo)!element geo { attribute type {'boolean'}, .} 
+                        fn:data($_/boolean(geo))!element geo { attribute type {'boolean'}, .} 
                  },
            "height": function($_ as element()) as element(height)? {
             (: xs:integer :)
@@ -213,7 +213,7 @@ declare variable $entity:list:=map {
                  },
            "keywords": function($_ as element()) as element(keywords)? {
             (: xs:integer :)
-                        fn:data($_/0)!element keywords { attribute type {'number'}, .} 
+                        fn:data($_/count(keywords/keyword))!element keywords { attribute type {'number'}, .} 
                  },
            "name": function($_ as element()) as element(name)? {
             (: xs:string :)
diff --git a/src/vue-poc/models/thumbnail.xml b/src/vue-poc/models/thumbnail.xml
index 05c8bbd..11794d9 100644
--- a/src/vue-poc/models/thumbnail.xml
+++ b/src/vue-poc/models/thumbnail.xml
@@ -22,7 +22,7 @@
 		</field>
 		<field name="keywords" type="xs:integer">
       <description>Number of keywords</description>
-      <xpath>0</xpath>
+      <xpath>count(keywords/keyword)</xpath>
     </field>
     <field name="width" type="xs:integer">
       <description>width in pixels</description>
@@ -34,7 +34,7 @@
     </field>
     <field name="geo" type="xs:boolean">
       <description>has geo</description>
-      <xpath>geo</xpath>
+      <xpath>boolean(geo)</xpath>
     </field>
 	</fields>
 	
diff --git a/src/vue-poc/static/app-gen.js b/src/vue-poc/static/app-gen.js
index 715d63a..bf5c89b 100644
--- a/src/vue-poc/static/app-gen.js
+++ b/src/vue-poc/static/app-gen.js
@@ -1,4 +1,4 @@
-// generated 2017-10-11T22:21:45.072+01:00
+// generated 2017-10-15T22:47:08.186+01:00
 
Vue.component('qd-confirm',{template:` 
   <v-dialog v-model="value">
        <v-card>
@@ -230,7 +230,6 @@
     },
     
     applySettings(aceSettings){
-      console.log("apply: ",aceSettings.theme)
       this.editor.setTheme(`ace/theme/${aceSettings.theme}`)
       //this.editor.setKeyboardHandler(`ace/keyboard//${aceSettings.keybinding}`)
       this.editor.setFontSize(parseInt(aceSettings.fontsize,10))
@@ -1452,7 +1451,7 @@ Vue.filter('round', function(value, decimals) {
             <v-flex height="80px" xs2="" v-for="image in images" :key="image.name">
               <v-card class="grey lighten-2 pt-1">
                 <v-card-media :src="src(image)" @dblclick="go(image)" height="80px" contain="">
-                <v-layout :justify-end="true">
+                <v-layout align-baseline="" align-end="" fill-height="">
                 <v-flex>
                  <v-icon class="green--text">check_circle</v-icon>
                  </v-flex>
@@ -1460,8 +1459,9 @@ Vue.filter('round', function(value, decimals) {
                 </v-card-media>
                 
                  <v-card-actions>
-                <span>#</span>
-                 <v-btn icon="" small="">
+
+						      <span v-if="image.keywords >0 ">#{{image.keywords}}</span>
+                 <v-btn icon="" small="" v-if="image.geo">
                   <v-icon>place</v-icon>
                 </v-btn>
                 <v-spacer></v-spacer>
@@ -2057,7 +2057,7 @@ people
               <td>Get</td>
               <td>
                <v-btn @click="get()" icon="">
-                   <v-icon>cached</v-icon>
+                   <v-icon>radio_button_checked</v-icon>
                 </v-btn>
              
                </td>
@@ -2091,7 +2091,7 @@ people
              <td>Update</td>
           <td>
            <v-btn @click="update()" icon="">
-                   <v-icon>cached</v-icon>
+                   <v-icon>radio_button_checked</v-icon>
             </v-btn>
           </td>
           
@@ -2621,7 +2621,7 @@ people
 			        fontsize: "14"
 			    },
 			    keybindings:[  'ace',  'vim', 'emacs', 'textarea', 'sublime' ],
-			    themes: [ "github", "chaos","tomorrow"]
+			    themes: [ "github","chrome" ,"tomorrow","-dark-","chaos","twilight"]
 			    }
   },
   methods:{
@@ -2743,10 +2743,10 @@ svg
     
     <v-tabs-bar class="grey lighten-3">
       <v-tabs-item v-for="i in 13" :key="i" :href="'#mobile-tabs-6-' + i">
-       <v-chip close="">
-       <v-avatar class="pink">
+       <v-chip label="" close="">
+      
        <v-icon>favorite</v-icon>
-       </v-avatar>
+
        Item {{ i }} more
        </v-chip>
       </v-tabs-item>
@@ -3210,16 +3210,69 @@ created(){
 
       );
       const Validate=Vue.extend({template:` 
- <v-container fluid="">
-validate
+  <v-container fluid="" v-resize="onResize">
+<v-card>
+     <v-toolbar class="orange">
+          <v-btn @click="validate" :loading="loading" :disabled="loading"><v-icon>play_circle_outline</v-icon>Validate</v-btn>
+          <span v-text="elapsed"></span>ms. Height: 
+          <span v-text="height"></span>
+            <v-spacer></v-spacer>
+         
+              <v-menu offset-y="" left="">
+             <v-btn icon="" dark="" slot="activator"><v-icon>settings</v-icon></v-btn>
+              <v-card>
+              <v-toolbar class="green">
+                  <v-card-title>Settings................</v-card-title>
+                  </v-toolbar>
+                <v-card-text>
+                stuff
+                </v-card-text>
+                </v-card>
+              </v-menu>
+          </v-toolbar>
+    <v-card-text>
+    here
+    </v-card-text>
+    </v-card>
  </v-container>
  `,
       
   data:  function(){
     return {
-      message: 'bad route!'
+      loading: false,
+      elapsed: null,
+      height: null,
+      result: null,
+      doc: "c:/test.xml",
+      schema: "c:/schema.xsd"
       }
   },
+  methods:{
+    onResize(){
+      this.height = window.innerHeight 
+    },
+    validate(){
+    
+      this.loading=true
+      this.start = performance.now();
+      HTTPNE.get("validate",Qs.stringify({doc: this.doc, schema: this.schema}))
+      .then(r=>{
+       console.log(r)
+       this.elapsed=Math.floor(performance.now() - this.start);
+       this.loading=false
+       if(r.data.rc==0){
+         this.result=r.data.result
+       }else{
+         this.result=r.data.info
+       }
+      })
+      .catch(r=> {
+        console.log("error",r)
+        this.result=r.message + ": "+ r.config.url + "\n"+ r.response.data
+        this.loading=false
+      });
+    },
+  },
   created:function(){
     console.log("notfound",this.$route.query.q)
   }
@@ -3229,9 +3282,11 @@ validate
       const Transform=Vue.extend({template:` 
  <v-container fluid="">
 <v-card>
-     <v-toolbar>
+     <v-toolbar class="orange">
           <v-btn @click="transform" :loading="loading" :disabled="loading"><v-icon>play_circle_outline</v-icon>Run</v-btn>
-           <v-spacer></v-spacer>
+          <span v-text="elapsed"></span>ms. Height: 
+          <span v-text="height"></span>
+            <v-spacer></v-spacer>
            <v-btn-toggle v-model="showOptions" multiple="">
            <v-icon>visibility</v-icon>
               <v-btn flat="" value="result">
@@ -3244,25 +3299,35 @@ validate
                  <span :class="xslValid?'':'red'">XSLT</span>
               </v-btn>
             </v-btn-toggle>
-             <v-btn icon=""><v-icon>settings</v-icon></v-btn>
+              <v-menu offset-y="" left="">
+             <v-btn icon="" dark="" slot="activator"><v-icon>settings</v-icon></v-btn>
+              <v-card>
+              <v-toolbar class="green">
+				          <v-card-title>Settings................</v-card-title>
+				          </v-toolbar>
+				        <v-card-text>
+				        stuff
+				        </v-card-text>
+				        </v-card>
+				      </v-menu>
           </v-toolbar>
-    <v-card-text>
-     <v-card-text v-if="showOptions.includes('result')">
-       <v-layout style="height:200px" fill-height="">
-      <v-flex>
-        <vue-ace :content="result" mode="xml" wrap="true" :settings="aceSettings"></vue-ace>
-      </v-flex>
+    <v-card-text v-resize="onResize" style="height:400px; " class="amber" ref="page">
+
+       <v-layout v-if="showOptions.includes('result')" style="height:100%" fill-height="">
+		      <v-flex>
+		        <vue-ace :content="result" mode="xml" wrap="true" :settings="aceSettings"></vue-ace>
+		      </v-flex>
        </v-layout>
-      </v-card-text>
-      <v-layout style="height:200px" fill-height="">
+ 
+      <v-layout style="height:100%" fill-height="">
       <v-flex v-if="showOptions.includes('xml')" class="pa-1">
 	      <vue-ace :content="xml" mode="xml" wrap="true" v-on:change-content="v => this.xml=v" v-on:annotation="a => this.xmlValid=a.error===0 &amp;&amp; a.warning===0" :settings="aceSettings"></vue-ace>
      </v-flex>
        <v-flex v-if="showOptions.includes('xslt')" class="pa-1">
 	       <vue-ace :content="xslt" mode="xml" wrap="true" v-on:change-content="v => this.xslt=v" v-on:annotation="a => this.xslValid=a.error===0 &amp;&amp; a.warning===0" :settings="aceSettings"></vue-ace>
       </v-flex>
-     
       </v-layout>
+ 
       </v-card-text>
       
      
@@ -3280,7 +3345,10 @@ validate
       result: "(result here)",
       resultValid: true,
       showOptions: ["xml","xslt"],
-      loading: false
+      loading: false,
+      start: null,
+      elapsed: "?",
+      height: "?"
       }
   },
   methods:{
@@ -3291,9 +3359,11 @@ validate
       if(!this.showOptions.includes("result"))this.showOptions.push("result")
       this.loading=true
       this.resultValid=true
+      this.start = performance.now();
       HTTPNE.post("xslt",Qs.stringify({xml:this.xml,xslt:this.xslt}))
       .then(r=>{
        console.log(r)
+       this.elapsed=Math.floor(performance.now() - this.start);
        this.loading=false
        if(r.data.rc==0){
          this.result=r.data.result
@@ -3304,9 +3374,17 @@ validate
       })
       .catch(r=> {
         console.log("error",r)
-        this.result=r.response.data.info
+        this.result=r.message + ": "+ r.config.url + "\n"+ r.response.data
         this.loading=false
       });
+    },
+    onResize(){
+      var el=this.$refs["page"]
+      console.log("top",el.offsetTop)
+      var h=Math.max(1,window.innerHeight - el.offsetTop) -100
+       console.log("h",h)
+      this.height = h
+      el.style.height=h +"px"
     }
   },
   beforeRouteEnter (to, from, next) {
@@ -3432,11 +3510,27 @@ router.beforeEach((to, from, next) => {
  <v-toolbar class="indigo" app="" dark="">
   <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>  
   <v-toolbar-title class="hidden-sm-and-down">{{$route.meta.title}}</v-toolbar-title>
-  <v-spacer></v-spacer>
-  <v-btn @click="favorite" icon="" flat="" title="Save location">
-       <v-icon>favorite</v-icon>
+   <v-btn @click="frmFav = !frmFav" icon="" flat="" title="Bookmark this page">
+       <v-icon>star_border</v-icon>
    </v-btn>
-  
+   <v-dialog v-model="frmFav">
+            <v-card> 
+        <v-card-title>
+            Bookmark
+          </v-card-title>
+          
+         <v-card-text>
+         <h6>{{$route.meta.title}}</h6>
+            <v-select v-model="tags" label="tags" chips="" tags="" :items="taglist"></v-select>
+           </v-card-text>
+        <v-card-actions>
+            <v-btn color="primary" flat="" @click.stop="frmFav=false">Save</v-btn>
+            <v-btn color="primary" flat="" @click.stop="frmFav=false">Cancel</v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+  <v-spacer></v-spacer>
+ 
   <v-spacer></v-spacer>
    <v-text-field prepend-icon="search" label="Search..." v-model="q" hide-details="" single-line="" dark="" @keyup.enter="search"></v-text-field>
    <v-menu left="" transition="v-fade-transition">
@@ -3482,17 +3576,17 @@ router.beforeEach((to, from, next) => {
     mini: false,
     dark: false,
     alert: {show:false,msg:"Hello"},
+    frmFav: false,
+    tags: [],
+    taglist: [
+      'todo',
+      'find',
+      'some',
+      'good',
+      'tags'
+    ],
     items: [
-      {href: '/',text: 'Home', icon: 'home'    }, 
-      {
-        icon: 'folder_open',
-        text: 'Collections' ,
-        model: false,
-        children: [
-       {href: '/database', text: 'Databases',icon: 'developer_mode' },
-       {href: '/files', text: 'File system',icon: 'folder' },
-      {href: '/history',text: 'history',icon: 'history'}
-      ]},
+      {href: '/',text: 'Home', icon: 'home'    },
       {
         icon: 'directions_run',
         text: 'Actions' ,
@@ -3504,6 +3598,21 @@ router.beforeEach((to, from, next) => {
       {href: '/transform',text: 'XSLT Transform',icon: 'input'},
       {href: '/tasks',text: 'Tasks',icon: 'history'}
       ]},
+      {
+        icon: 'folder_open',
+        text: 'Collections' ,
+        model: false,
+        children: [
+       {href: '/database', text: 'Databases',icon: 'developer_mode' },
+       {href: '/files', text: 'File system',icon: 'folder' },
+      {href: '/history',text: 'history',icon: 'history'}
+      ]},
+      {
+        icon: 'memory',
+        text: 'Models' ,
+        model: false,
+        children: [
+      ]},
       {
         icon: 'cast_connected',
         text: 'Server' ,
@@ -3668,7 +3777,7 @@ var settings = {
       if (this.debug) console.log('getItem',key);
       return localforage.getItem(key)
         .then(value => {
-          console.log('GET setting', key,value);
+          //console.log('GET setting', key,value);
           return value;
      
         }).catch(err => {
@@ -3680,7 +3789,7 @@ var settings = {
       if (this.debug) console.log('setItem',key,value);
       return localforage.setItem(key, value) 
       .then(value => {
-        console.log('SET ',key, value);
+        //console.log('SET ',key, value);
         return value
         
       }).catch(err => {
diff --git a/src/vue-poc/static/app.html b/src/vue-poc/static/app.html
index 1561e36..4ada287 100644
--- a/src/vue-poc/static/app.html
+++ b/src/vue-poc/static/app.html
@@ -9,12 +9,13 @@
 <title>Vue Router Test</title>
 <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
 <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
-<link href="https://unpkg.com/vuetify@0.16.5/dist/vuetify.min.css" rel="stylesheet" type="text/css">
+<link href="https://unpkg.com/vuetify@0.16.6/dist/vuetify.min.css" rel="stylesheet" type="text/css">
 <link href="https://unpkg.com/vue-multiselect@2.0.0-beta.15/dist/vue-multiselect.min.css"  rel="stylesheet" type="text/css">
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
   integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
   crossorigin=""/>
 <link href="/vue-poc/ui/app.css" rel="stylesheet" type="text/css">
+<link href="/vue-poc/ui/svg-pan-zoom.css" rel="stylesheet" type="text/css">
 <link rel="shortcut icon" href="/vue-poc/ui/icon.png"/>
 
 
@@ -40,11 +41,11 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.7.0/vue-router.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.4.0/qs.js"></script>
-<script src="https://unpkg.com/vuetify@0.16.5/dist/vuetify.min.js"></script>
+<script src="https://unpkg.com/vuetify@0.16.6/dist/vuetify.min.js"></script>
 <script src="https://unpkg.com/vue-multiselect@2.0.0-beta.15/dist/vue-multiselect.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.7/ace.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.7/ext-language_tools.js"></script>
-
+<script src="https://d3js.org/d3.v3.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.12/beautify.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.12/beautify-css.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.12/beautify-html.js"></script>
@@ -55,6 +56,7 @@
   integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
   crossorigin=""></script>
 <script src="https://unpkg.com/vue2-leaflet@0.0.55/dist/vue2-leaflet.js"></script> 
+<script src="/vue-poc/ui/svg=pan-zoom.js"></script>
 <script src="/vue-poc/ui/perf-stat.js"></script>
 <script src="/vue-poc/ui/app-gen.js"></script>
 </body>
diff --git a/src/vue-poc/static/svg-pan-zoom.css b/src/vue-poc/static/svg-pan-zoom.css
new file mode 100644
index 0000000..612011b
--- /dev/null
+++ b/src/vue-poc/static/svg-pan-zoom.css
@@ -0,0 +1,36 @@
+html, body {
+  font-family: Arial, sans-serif;
+}
+
+.title {
+  font-size: 12px;
+}
+.canvas {
+  overflow: hidden;
+   fill: #808040;
+}
+.canvas .wrapper.outer > .background {
+  fill: #000000;
+}
+.canvas .wrapper.inner > .background {
+  fill: #CCCCCC;
+  cursor: move;
+}
+.canvas .background {
+  fill: #F6F6F6;
+  stroke: #333333;
+  cursor: move;
+}
+.canvas .panCanvas {
+  cursor: move;
+}
+
+.canvas .minimap .frame .background {
+  stroke: #111111;
+  stroke-width: 4px;
+  fill-opacity: 0.4;
+  fill: #000000;
+  fill: url(#minimapGradient_qwpyza);
+  xfilter: url(#minimapDropShadow_qwpyza);
+  cursor: move;
+}
\ No newline at end of file
diff --git a/src/vue-poc/static/svg-pan-zoom.js b/src/vue-poc/static/svg-pan-zoom.js
new file mode 100644
index 0000000..20c2e8c
--- /dev/null
+++ b/src/vue-poc/static/svg-pan-zoom.js
@@ -0,0 +1,436 @@
+// http://www.billdwhite.com/wordpress/2013/11/26/d3-minimap-pan-and-zoom-demo/ 
+d3.demo = {};
+
+    /** CANVAS **/
+    d3.demo.canvas = function() {
+
+        "use strict";
+
+        var width           = 500,
+            height          = 500,
+            zoomEnabled     = true,
+            dragEnabled     = true,
+            scale           = 1,
+            translation     = [0,0],
+            base            = null,
+            wrapperBorder   = 2,
+            minimap         = null,
+            minimapPadding  = 20,
+            minimapScale    = 0.25;
+
+        function canvas(selection) {
+
+            base = selection;
+
+            var xScale = d3.scale.linear()
+                .domain([-width / 2, width / 2])
+                .range([0, width]);
+
+            var yScale = d3.scale.linear()
+                .domain([-height / 2, height / 2])
+                .range([height, 0]);
+
+            var zoomHandler = function(newScale) {
+                if (!zoomEnabled) { return; }
+                if (d3.event) {
+                    scale = d3.event.scale;
+                } else {
+                    scale = newScale;
+                }
+                if (dragEnabled) {
+                    var tbound = -height * scale,
+                        bbound = height  * scale,
+                        lbound = -width  * scale,
+                        rbound = width   * scale;
+                    // limit translation to thresholds
+                    translation = d3.event ? d3.event.translate : [0, 0];
+                    translation = [
+                        Math.max(Math.min(translation[0], rbound), lbound),
+                        Math.max(Math.min(translation[1], bbound), tbound)
+                    ];
+                }
+
+                d3.select(".panCanvas, .panCanvas .bg")
+                    .attr("transform", "translate(" + translation + ")" + " scale(" + scale + ")");
+
+                minimap.scale(scale).render();
+            }; // startoff zoomed in a bit to show pan/zoom rectangle
+
+            var zoom = d3.behavior.zoom()
+                .x(xScale)
+                .y(yScale)
+                .scaleExtent([0.1, 10])
+                .on("zoom.canvas", zoomHandler);
+            var w=width  + (wrapperBorder*2) + minimapPadding*2 + (width*minimapScale);
+            var h=height + (wrapperBorder*2);
+            var svg = selection.append("svg")
+                .attr("class", "svg canvas")
+                   .attr("width",  "100%")
+                    .attr("height", "100%")
+                    .attr("viewBox", "0 0 "+w + " "+h) 
+                .attr("shape-rendering", "auto");
+
+            var svgDefs = svg.append("defs");
+
+            svgDefs.append("clipPath")
+                .attr("id", "wrapperClipPath_qwpyza")
+                .attr("class", "wrapper clipPath")
+                .append("rect")
+                .attr("class", "background")
+                .attr("width", width)
+                .attr("height", height);
+
+            svgDefs.append("clipPath")
+                .attr("id", "minimapClipPath_qwpyza")
+                .attr("class", "minimap clipPath")
+                .attr("width", width)
+                .attr("height", height)
+                //.attr("transform", "translate(" + (width + minimapPadding) + "," + (minimapPadding/2) + ")")
+                .append("rect")
+                .attr("class", "background")
+                .attr("width", width)
+                .attr("height", height);
+
+            var filter = svgDefs.append("svg:filter")
+                .attr("id", "minimapDropShadow_qwpyza")
+                .attr("x", "-20%")
+                .attr("y", "-20%")
+                .attr("width", "150%")
+                .attr("height", "150%");
+
+            filter.append("svg:feOffset")
+                .attr("result", "offOut")
+                .attr("in", "SourceGraphic")
+                .attr("dx", "1")
+                .attr("dy", "1");
+
+            filter.append("svg:feColorMatrix")
+                .attr("result", "matrixOut")
+                .attr("in", "offOut")
+                .attr("type", "matrix")
+                .attr("values", "0.1 0 0 0 0 0 0.1 0 0 0 0 0 0.1 0 0 0 0 0 0.5 0");
+
+            filter.append("svg:feGaussianBlur")
+                .attr("result", "blurOut")
+                .attr("in", "matrixOut")
+                .attr("stdDeviation", "10");
+
+            filter.append("svg:feBlend")
+                .attr("in", "SourceGraphic")
+                .attr("in2", "blurOut")
+                .attr("mode", "normal");
+
+            var minimapRadialFill = svgDefs.append("radialGradient")
+                .attr({
+                    id:"minimapGradient_qwpyza",
+                    gradientUnits:"userSpaceOnUse",
+                    cx:"500",
+                    cy:"500",
+                    r:"400",
+                    fx:"500",
+                    fy:"500"
+                });
+            minimapRadialFill.append("stop")
+                .attr("offset", "0%")
+                .attr("stop-color", "#FFFFFF");
+            minimapRadialFill.append("stop")
+                .attr("offset", "40%")
+                .attr("stop-color", "#EEEEEE");
+            minimapRadialFill.append("stop")
+                .attr("offset", "100%")
+                .attr("stop-color", "#E0E0E0");
+
+            var outerWrapper = svg.append("g")
+                .attr("class", "wrapper outer")
+                .attr("transform", "translate(0, " + minimapPadding + ")");
+
+            outerWrapper.append("rect")
+                .attr("class", "background")
+                .attr("width", width + wrapperBorder*2)
+                .attr("height", height + wrapperBorder*2);
+
+            var innerWrapper = outerWrapper.append("g")
+                .attr("class", "wrapper inner")
+                .attr("clip-path", "url(#wrapperClipPath_qwpyza)")
+                .attr("transform", "translate(" + (wrapperBorder) + "," + (wrapperBorder) + ")")
+                .call(zoom);
+
+            innerWrapper.append("rect")
+                .attr("class", "background")
+                .attr("width", width)
+                .attr("height", height);
+
+            var panCanvas = innerWrapper.append("g")
+                .attr("class", "panCanvas")
+                .attr("width", width)
+                .attr("height", height)
+                .attr("transform", "translate(0,0)");
+
+            panCanvas.append("rect")
+                .attr("class", "background")
+                .attr("width", width)
+                .attr("height", height);
+
+            minimap = d3.demo.minimap()
+                .zoom(zoom)
+                .target(panCanvas)
+                .minimapScale(minimapScale)
+                .x(width + minimapPadding)
+                .y(minimapPadding);
+
+            svg.call(minimap);
+
+            // startoff zoomed in a bit to show pan/zoom rectangle
+            zoom.scale(1.75);
+            zoomHandler(1.75);
+
+            /** ADD SHAPE **/
+            canvas.addItem = function(item) {
+                panCanvas.node().appendChild(item.node());
+                minimap.render();
+            };
+            canvas.clear = function() {
+              var node=panCanvas.node();
+              while (node.hasChildNodes()) {
+                node.removeChild(node.lastChild);
+               };
+          };
+            /** RENDER **/
+            canvas.render = function() {
+                svgDefs
+                    .select(".clipPath .background")
+                    .attr("width", width)
+                    .attr("height", height);
+                 var w=width  + (wrapperBorder*2) + minimapPadding*2 + (width*minimapScale);
+                 var h=height + (wrapperBorder*2);
+                svg
+                    .attr("width",  "100%")
+                    .attr("height", "100%")
+                    .attr("viewBox", "0 0 "+w + " "+h);
+                outerWrapper
+                    .select(".background")
+                    .attr("width", width + wrapperBorder*2)
+                    .attr("height", height + wrapperBorder*2);
+
+                innerWrapper
+                    .attr("transform", "translate(" + (wrapperBorder) + "," + (wrapperBorder) + ")")
+                    .select(".background")
+                    .attr("width", width)
+                    .attr("height", height);
+
+                panCanvas
+                    .attr("width", width)
+                    .attr("height", height)
+                    .select(".background")
+                    .attr("width", width)
+                    .attr("height", height);
+
+                minimap
+                    .x(width + minimapPadding)
+                    .y(minimapPadding)
+                    .render();
+            };
+
+            canvas.zoomEnabled = function(isEnabled) {
+                if (!arguments.length) { return zoomEnabled }
+                zoomEnabled = isEnabled;
+            };
+
+            canvas.dragEnabled = function(isEnabled) {
+                if (!arguments.length) { return dragEnabled }
+                dragEnabled = isEnabled;
+            };
+
+            canvas.reset = function() {
+                svg.call(zoom.event);
+                zoom.scale(1);
+                zoom.translate([0,0]);
+                svg.transition().duration(750).call(zoom.event);
+            };
+        }
+
+
+        //============================================================
+        // Accessors
+        //============================================================
+
+        canvas.width = function(value) {
+            if (!arguments.length) return width;
+            width = parseInt(value, 10);
+            return this;
+        };
+
+        canvas.height = function(value) {
+            if (!arguments.length) return height;
+            height = parseInt(value, 10);
+            return this;
+        };
+
+        canvas.scale = function(value) {
+            if (!arguments.length) { return scale; }
+            scale = value;
+            return this;
+        };
+
+        return canvas;
+    };
+
+
+
+    /** MINIMAP **/
+    d3.demo.minimap = function() {
+
+        "use strict";
+
+        var minimapScale    = 0.15,
+            scale           = 1,
+            zoom            = null,
+            base            = null,
+            target          = null,
+            width           = 0,
+            height          = 0,
+            x               = 0,
+            y               = 0,
+            frameX          = 0,
+            frameY          = 0;
+
+        function minimap(selection) {
+
+            base = selection;
+
+            var container = selection.append("g")
+                .attr("class", "minimap")
+                .call(zoom);
+
+            zoom.on("zoom.minimap", function() {
+                scale = d3.event.scale;
+            });
+
+
+            minimap.node = container.node();
+
+            var frame = container.append("g")
+                .attr("class", "frame")
+
+            frame.append("rect")
+                .attr("class", "background")
+                .attr("width", width)
+                .attr("height", height)
+                .attr("filter", "url(#minimapDropShadow_qwpyza)");
+
+            var drag = d3.behavior.drag()
+                .on("dragstart.minimap", function() {
+                    var frameTranslate = d3.demo.util.getXYFromTranslate(frame.attr("transform"));
+                    frameX = frameTranslate[0];
+                    frameY = frameTranslate[1];
+                })
+                .on("drag.minimap", function() {
+                    d3.event.sourceEvent.stopImmediatePropagation();
+                    frameX += d3.event.dx;
+                    frameY += d3.event.dy;
+                    frame.attr("transform", "translate(" + frameX + "," + frameY + ")");
+                    var translate =  [(-frameX*scale),(-frameY*scale)];
+                    target.attr("transform", "translate(" + translate + ")scale(" + scale + ")");
+                    zoom.translate(translate);
+                });
+
+            frame.call(drag);
+
+            /** RENDER **/
+            minimap.render = function() {
+                scale = zoom.scale();
+                container.attr("transform", "translate(" + x + "," + y + ")scale(" + minimapScale + ")");
+                var node = target.node().cloneNode(true);
+                node.removeAttribute("id");
+                base.selectAll(".minimap .panCanvas").remove();
+                minimap.node.appendChild(node);
+                var targetTransform = d3.demo.util.getXYFromTranslate(target.attr("transform"));
+                frame.attr("transform", "translate(" + (-targetTransform[0]/scale) + "," + (-targetTransform[1]/scale) + ")")
+                    .select(".background")
+                    .attr("width", width/scale)
+                    .attr("height", height/scale);
+                frame.node().parentNode.appendChild(frame.node());
+                d3.select(node).attr("transform", "translate(1,1)");
+            };
+        }
+
+
+        //============================================================
+        // Accessors
+        //============================================================
+
+
+        minimap.width = function(value) {
+            if (!arguments.length) return width;
+            width = parseInt(value, 10);
+            return this;
+        };
+
+
+        minimap.height = function(value) {
+            if (!arguments.length) return height;
+            height = parseInt(value, 10);
+            return this;
+        };
+
+
+        minimap.x = function(value) {
+            if (!arguments.length) return x;
+            x = parseInt(value, 10);
+            return this;
+        };
+
+
+        minimap.y = function(value) {
+            if (!arguments.length) return y;
+            y = parseInt(value, 10);
+            return this;
+        };
+
+
+        minimap.scale = function(value) {
+            if (!arguments.length) { return scale; }
+            scale = value;
+            return this;
+        };
+
+
+        minimap.minimapScale = function(value) {
+            if (!arguments.length) { return minimapScale; }
+            minimapScale = value;
+            return this;
+        };
+
+
+        minimap.zoom = function(value) {
+            if (!arguments.length) return zoom;
+            zoom = value;
+            return this;
+        };
+
+
+        minimap.target = function(value) {
+            if (!arguments.length) { return target; }
+            target = value;
+            width  = parseInt(target.attr("width"),  10);
+            height = parseInt(target.attr("height"), 10);
+            return this;
+        };
+
+        return minimap;
+    };
+
+
+    /** UTILS **/
+    d3.demo.util = {};
+    d3.demo.util.getXYFromTranslate = function(translateString) {
+        var currentTransform = d3.transform(translateString);
+        currentX = currentTransform.translate[0];
+        currentY = currentTransform.translate[1];
+        return [currentX, currentY];
+    };
+
+
+    /** RUN SCRIPT **/
+   
+   
\ No newline at end of file
diff --git a/src/vue-poc/vue-poc.vue b/src/vue-poc/vue-poc.vue
index f1db8a2..45469c8 100644
--- a/src/vue-poc/vue-poc.vue
+++ b/src/vue-poc/vue-poc.vue
@@ -47,11 +47,33 @@
  <v-toolbar class="indigo" app dark >
   <v-toolbar-side-icon @click.stop="drawer = !drawer"  ></v-toolbar-side-icon>  
   <v-toolbar-title class="hidden-sm-and-down" >{{$route.meta.title}}</v-toolbar-title>
-  <v-spacer></v-spacer>
-  <v-btn @click="favorite" icon flat title="Save location">
-       <v-icon>favorite</v-icon>
+   <v-btn @click="frmFav = !frmFav" icon flat title="Bookmark this page">
+       <v-icon>star_border</v-icon>
    </v-btn>
-  
+   <v-dialog v-model="frmFav">
+            <v-card> 
+        <v-card-title>
+            Bookmark
+          </v-card-title>
+          
+         <v-card-text>
+         <h6>{{$route.meta.title}}</h6>
+            <v-select
+              v-model="tags"
+              label="tags"
+              chips
+              tags
+              :items="taglist"
+            ></v-select>
+           </v-card-text>
+        <v-card-actions>
+            <v-btn color="primary" flat @click.stop="frmFav=false">Save</v-btn>
+            <v-btn color="primary" flat @click.stop="frmFav=false">Cancel</v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+  <v-spacer></v-spacer>
+ 
   <v-spacer></v-spacer>
    <v-text-field prepend-icon="search" label="Search..." v-model="q"
    hide-details single-line dark @keyup.enter="search"></v-text-field>
@@ -99,17 +121,17 @@
     mini: false,
     dark: false,
     alert: {show:false,msg:"Hello"},
+    frmFav: false,
+    tags: [],
+    taglist: [
+      'todo',
+      'find',
+      'some',
+      'good',
+      'tags'
+    ],
     items: [
-      {href: '/',text: 'Home', icon: 'home'    }, 
-      {
-        icon: 'folder_open',
-        text: 'Collections' ,
-        model: false,
-        children: [
-       {href: '/database', text: 'Databases',icon: 'developer_mode' },
-       {href: '/files', text: 'File system',icon: 'folder' },
-      {href: '/history',text: 'history',icon: 'history'}
-      ]},
+      {href: '/',text: 'Home', icon: 'home'    },
       {
         icon: 'directions_run',
         text: 'Actions' ,
@@ -121,6 +143,21 @@
       {href: '/transform',text: 'XSLT Transform',icon: 'input'},
       {href: '/tasks',text: 'Tasks',icon: 'history'}
       ]},
+      {
+        icon: 'folder_open',
+        text: 'Collections' ,
+        model: false,
+        children: [
+       {href: '/database', text: 'Databases',icon: 'developer_mode' },
+       {href: '/files', text: 'File system',icon: 'folder' },
+      {href: '/history',text: 'history',icon: 'history'}
+      ]},
+      {
+        icon: 'memory',
+        text: 'Models' ,
+        model: false,
+        children: [
+      ]},
       {
         icon: 'cast_connected',
         text: 'Server' ,