Visualizations Registry: default to on

config/plugins/visualizations/scatterplot/config/scatterplot.xml

@@ -7,9 +7,15 @@
             <test type="isinstance" test_attr="datatype" result_type="datatype">tabular.Tabular</test>
             <to_param param_attr="id">dataset_id</to_param>
         </data_source>
+        <data_source>
+            <model_class>Visualization</model_class>
+            <test test_attr="type">scatterplot</test>
+            <to_param param_attr="id">visualization_id</to_param>
+        </data_source>
     </data_sources>
     <params>
         <param type="dataset" var_name_in_template="hda" required="true">dataset_id</param>
+        <param type="visualization" var_name_in_template="visualization">visualization_id</param>
     </params>
     <template>scatterplot.mako</template>
 </visualization>

config/plugins/visualizations/scatterplot/src/scatterplot-config-editor.js

@@ -10,6 +10,7 @@ todo:
     Allow setting perPage of config
     Auto render if given data and/or config
     Allow option to auto set width/height based on screen real estate avail.
+    Handle large number of pages better (Known genes hg19)
     Use d3.nest to allow grouping, pagination/filtration by group (e.g. chromCol)
     Semantic HTML (figure, caption)
     Save as visualization, load from visualization
@@ -29,26 +30,28 @@ todo:
  *          configuring which data will be used
  *          configuring the plot display
  */
-var ScatterplotConfigEditor = BaseView.extend( LoggableMixin ).extend({
+var ScatterplotConfigEditor = Backbone.View.extend( LoggableMixin ).extend({
     //TODO: !should be a view on a visualization model
     //logger      : console,
     className   : 'scatterplot-control-form',
     
     /** initialize requires a configuration Object containing a dataset Object */
     initialize : function( attributes ){
-        //console.log( this + '.initialize, attributes:', attributes );
-        if( !attributes || !attributes.config || !attributes.dataset ){
-            throw new Error( "ScatterplotView requires a configuration and dataset" );
+        if( !this.model ){
+            this.model = new Visualization({ type: 'scatterplot' });
         }
-        //console.log( 'config:', attributes.config );
+        console.log( this + '.initialize, attributes:', attributes );
 
+        if( !attributes || !attributes.dataset ){
+            throw new Error( "ScatterplotConfigEditor requires a dataset" );
+        }
         this.dataset = attributes.dataset;
-        //console.log( 'dataset:', this.dataset );
+        console.log( 'dataset:', this.dataset );
 
 //TODO: ScatterplotView -> ScatterplotDisplay, this.plotView -> this.display
         this.plotView = new ScatterplotView({
             dataset : attributes.dataset,
-            config  : attributes.config
+            model   : this.model
 //TODO: if data
         });
     },
@@ -58,8 +61,7 @@ var ScatterplotConfigEditor = BaseView.extend( LoggableMixin ).extend({
         //console.log( this + '.render' );
 
         // render the tab controls, areas and loading indicator
-        this.$el.append( ScatterplotConfigEditor.templates.mainLayout({
-        }));
+        this.$el.append( ScatterplotConfigEditor.templates.mainLayout({}));
 
         // render the tab content
         this.$el.find( '#data-control'  ).append( this._render_dataControl() );

config/plugins/visualizations/scatterplot/templates/scatterplot.mako

@@ -1,3 +1,24 @@
+<%
+    hda_dict = trans.security.encode_dict_ids( hda.to_dict() )
+
+    config = query_args
+    title  = "Scatterplot of '" + hda.name + "'"
+    info   = hda.info
+
+    visualization = context.get( 'visualization' )
+    if visualization is not None:
+        config = visualization.latest_revision.config
+        config.update( query_args )
+        title  = visualization.title
+        info   = config.get( 'description', info )
+
+    config[ 'type' ] = 'scatterplot'
+
+    # optionally bootstrap data from dprov
+    ##data = list( hda.datatype.dataset_column_dataprovider( hda, limit=10000 ) )
+%>
+## ----------------------------------------------------------------------------
+
 <!DOCTYPE HTML>
 <html>
 <head>
@@ -13,14 +34,15 @@
 ## ----------------------------------------------------------------------------
 <script type="text/javascript" src="/static/scripts/libs/jquery/jquery.js"></script>
 <script type="text/javascript" src="/static/scripts/libs/jquery/jquery.migrate.js"></script>
+<script type="text/javascript" src="/static/scripts/libs/jquery/jquery-ui.js"></script>
+<script type="text/javascript" src="/static/scripts/libs/bootstrap.js"></script>
 <script type="text/javascript" src="/static/scripts/libs/underscore.js"></script>
 <script type="text/javascript" src="/static/scripts/libs/backbone/backbone.js"></script>
 <script type="text/javascript" src="/static/scripts/libs/handlebars.runtime.js"></script>
 <script type="text/javascript" src="/static/scripts/libs/d3.js"></script>
-<script type="text/javascript" src="/static/scripts/libs/bootstrap.js"></script>
-<script type="text/javascript" src="/static/scripts/libs/jquery/jquery-ui.js"></script>
-<script type="text/javascript" src="/static/scripts/utils/LazyDataLoader.js"></script>
+
 <script type="text/javascript" src="/static/scripts/mvc/base-mvc.js"></script>
+<script type="text/javascript" src="/static/scripts/mvc/visualization/visualization-model.js"></script>
 
 <script type="text/javascript" src="/plugins/visualizations/scatterplot/static/scatterplot-edit.js"></script>
 </head>
@@ -30,25 +52,20 @@
 %if not embedded:
 ## dataset info: only show if on own page
 <div class="chart-header">
-    <h2>Scatterplot of '${hda.name}'</h2>
-    <p>${hda.info}</p>
+    <h2>${title}</h2>
+    <p>${info}</p>
 </div>
 
 <div class="scatterplot-editor"></div>
 <script type="text/javascript">
 $(function(){
-    <%
-        # optionally, bootstrap data from dprov
-        data = None
-        ##data = list( hda.datatype.dataset_column_dataprovider( hda, limit=10000 ) )
-    %>
-    var hda             = ${h.to_json_string( trans.security.encode_dict_ids( hda.to_dict() ) )};
-
-    var editor = new ScatterplotConfigEditor({
-        el      : $( '.scatterplot-editor' ).attr( 'id', 'scatterplot-editor-hda-' + hda.id ),
-        config  : ${h.to_json_string( query_args )},
-        dataset : ${h.to_json_string( trans.security.encode_dict_ids( hda.to_dict() ) )}
-    }).render();
+    var model   = new ScatterplotModel( ${h.to_json_string( config )} ),
+        hdaJson = ${h.to_json_string( hda_dict )},
+        editor  = new ScatterplotConfigEditor({
+            el      : $( '.scatterplot-editor' ).attr( 'id', 'scatterplot-editor-hda-' + hdaJson.id ),
+            model   : model,
+            dataset : hdaJson
+        }).render();
     window.editor = editor;
     // uncomment to auto render for development
     //$( '.render-button:visible' ).click();