replace sliders with html5 range elements

[alexkalderimis]

Limits us to ie10, but degrades gracefully to input:text

[firshta2016]

I am interested in working on this issue, but could you elaborate more on this please.

[heralden]

@yochannah are you aware of any sliders in im-tables? I can't find any.

[yochannah]

Yes, I am! In FlyMine, clock on the Show Results button for this tempalte

https://www.flymine.org/flymine/template.do?name=ChromLocation_TFBindingSiteLocationGeneFactor&scope=all

The summary (bar chart icon) for chromosome location (or probably any numeric column type) has sliders.

@firshta2016 - if you inspect the source code you can see that these sliders are built from divs, because it was built in the dark ages before HTML 5 was fully supported by modern browsers. We can probably remove a lot of coffeescript behaviour (or js slider library, not sure which) and simplify the HTML by using an HTML 5 element instead. Let me know if you struggle to find the right files to edit!

[firshta2016]

@yochannah when I try to test my code locally, my local table doesnt have the same content as you showed above on flymine.com. Do you have any suggestions on where I would find the same slider from flymine.com locally?

[heralden]

@firshta2016 You can recreate the same table by replacing the contents of im-tables/index.html with the following code

<!-- The Element we will target -->
<div id="some-elem"></div>
<!-- The imtables source -->
<script src="https://cdn.intermine.org/js/intermine/im-tables/2.0.0-beta/imtables.js" charset="UTF-8"></script>
<link rel="stylesheet" href="https://cdn.intermine.org/js/intermine/im-tables/2.0.0-beta/main.sandboxed.css">
<script>

var selector = '#some-elem';
var service  = {root: 'https://www.flymine.org/flymine/service/'};
var query    = {
  "name": "ChromLocation_TFBindingSiteLocationGeneFactor",
  "title": "Chromosomal location -->  TF binding sites",
  "description": "For a particular D. melanogaster chromosomal location, show all REDfly TF binding sites with their locations and associated genes and transcription factors. (Data Source: REDfly).",
  "constraintLogic": "A and C and B and D",
  "from": "TFBindingSite",
  "select": [
    "chromosome.primaryIdentifier",
    "chromosomeLocation.start",
    "chromosomeLocation.end",
    "primaryIdentifier",
    "gene.primaryIdentifier",
    "gene.name",
    "factor.primaryIdentifier",
    "factor.name",
    "gene.regulatoryRegions.dataSets.dataSource.name"
  ],
  "orderBy": [
    {
      "path": "chromosome.primaryIdentifier",
      "direction": "ASC"
    }
  ],
  "where": [
    {
      "path": "gene.regulatoryRegions",
      "type": "TFBindingSite"
    },
    {
      "path": "gene.regulatoryRegions.dataSets.name",
      "op": "=",
      "value": "REDfly Drosophila transcription factor binding sites",
      "code": "D",
      "editable": false,
      "switched": "LOCKED",
      "switchable": false
    },
    {
      "path": "chromosome.primaryIdentifier",
      "op": "=",
      "value": "3R",
      "code": "A",
      "editable": true,
      "switched": "LOCKED",
      "switchable": false
    },
    {
      "path": "chromosomeLocation.start",
      "op": ">",
      "value": "9000000",
      "code": "B",
      "editable": true,
      "switched": "LOCKED",
      "switchable": false
    },
    {
      "path": "chromosomeLocation.end",
      "op": "<",
      "value": "10000000",
      "code": "C",
      "editable": true,
      "switched": "LOCKED",
      "switchable": false
    }
  ]
};

imtables.loadTable(
  selector, // Can also be an element, or a jQuery object.
  {"start":0,"size":25}, // May be null
  {service: service, query: query} // May be an imjs.Query
).then(
  function (table) { console.log('Table loaded', table); },
  function (error) { console.error('Could not load table', error); }
);

</script>

You can acquire this snippet with any im-table by clicking Generate code, select JavaScript, then check As HTML page.