--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/light9/web/edit-choice.coffee	Wed Jun 08 07:04:16 2016 +0000
@@ -0,0 +1,34 @@
+RDFS = 'http://www.w3.org/2000/01/rdf-schema#'
+Polymer
+    is: "edit-choice",
+    properties:
+        graph: {type: Object, notify: true},
+        uri: {type: String, notify: true},
+        label: {type: String, notify: true}
+
+    observers: [
+      'gotGraph(graph, uri)'
+      ]
+
+    dragover: (event) ->
+      event.preventDefault()
+      event.dataTransfer.dropEffect = 'copy'
+      @$.box.classList.add('over')
+
+    dragleave: (event) ->
+      @$.box.classList.remove('over')
+
+    drop: (event) ->
+      event.preventDefault()
+      @uri = event.dataTransfer.getData('text/uri-list')
+      @updateLabel()
+      
+    gotGraph: ->
+      @graph.runHandler(@updateLabel.bind(@))
+        
+    updateLabel: ->
+      @label = try
+          @graph.stringValue(@uri, RDFS + 'label')
+        catch
+          @uri
+

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/light9/web/edit-choice.html	Wed Jun 08 07:04:16 2016 +0000
@@ -0,0 +1,32 @@
+<link rel="import" href="/lib/polymer/polymer.html">
+
+<!-- see light9/editchoice.py for gtk version -->
+<dom-module id="edit-choice">
+  <template>
+    <style>
+     #box {
+         display: inline-block;
+         background: #141448;
+     }
+     #box.over {
+ background: red;
+         }
+     a {
+         color: #5555e0;
+         padding: 3px;
+         display: inline-block;
+     }
+     
+    </style>
+    <div id="box"
+         on-dragenter="dragover"
+         on-dragover="dragover"
+         on-dragend="dragleave"
+         on-dragleave="dragleave"
+         on-drop="drop">
+      <a href="{{uri}}"><!-- type icon goes here -->{{label}}</a>
+      <!-- <button on-click="unlink">Unlink</button>  -->
+    </div>
+  </template>
+  <script src="edit-choice.js"></script>
+</dom-module>