Interactive row selection prototype with Datasette#

I added a new llms tag to my blog, for my content about Large Language Models.

I wanted to quickly populate it with content. I decided to run some SQL queries to find likely candidates using the Datasette backup of my blog’s content.

But… I didn’t just want to add anything that mentioned “LLM” - I wanted to have a step where I curated the selected items and picked just the ones that were a good fit.

What I really needed was a UI that could let me select items from a Datasette list.

So I built one with ChatGPT. The sequence of prompts I used was:

JavaScript to prepend a <input type="checkbox"> to the first table cell in each row of a table
Only output the JavaScript code. Add code that sets it up to holding shift and clicking a box selects all other boxes between the clicked box and the previously selected one
Make it so the very first checkbox behaves differently: when checked, it checks ALL other boxes - when unchecked it unchecks them all

Here’s the full ChatGPT transcript.

This gave me the exact code I was looking for. I made a couple of tiny tweaks (adding some margin next to the checkboxes and updating the CSS selector to grab the table), then pasted that modified code back in and said:

Modify the above code to also add a textarea to the page directly above the table. The textarea should display a JSON array of values corresponding to the checked checkboxes - those values are the innerText content of the table cell each checkbox is contained within

The resulting code looked like this:

1
const table = document.querySelector('table');
2
const rows = table.getElementsByTagName('tr');
3
let lastChecked = null;
4

5
function prependCheckboxes() {
6
  for (let i = 0; i < rows.length; i++) {
7
    const checkbox = document.createElement('input');
8
    checkbox.type = 'checkbox';
9
    checkbox.style.marginRight = '8px';
10

11
    if (i === 0) {
12
      checkbox.addEventListener('click', handleFirstCheckboxClick);
13
    } else {
14
      checkbox.addEventListener('click', handleCheckboxClick);
15
    }
16

17
    const firstCell = rows[i].cells[0];
18
    firstCell.insertBefore(checkbox, firstCell.firstChild);
19
  }
20
}
21

22
function handleFirstCheckboxClick(e) {
23
  const mainCheckbox = e.target;
24
  const checkAll = mainCheckbox.checked;
25

26
  for (let i = 1; i < rows.length; i++) {
27
    const row = rows[i];
28
    const currentCheckbox = row.cells[0].querySelector('input[type="checkbox"]');
29
    currentCheckbox.checked = checkAll;
30
  }
31

32
  updateTextarea();
33
}
34

35
function handleCheckboxClick(e) {
36
  const checkbox = e.target;
37
  let inBetween = false;
38

39
  if (e.shiftKey && checkbox.checked && lastChecked) {
40
    for (let i = 0; i < rows.length; i++) {
41
      const row = rows[i];
42
      const currentCheckbox = row.cells[0].querySelector('input[type="checkbox"]');
43

44
      if (currentCheckbox === checkbox || currentCheckbox === lastChecked) {
45
        inBetween = !inBetween;
46
      }
47

48
      if (inBetween) {
49
        currentCheckbox.checked = true;
50
      }
51
    }
52
  }
53

54
  if (checkbox.checked) {
55
    lastChecked = checkbox;
56
  } else if (lastChecked === checkbox) {
57
    lastChecked = null;
58
  }
59

60
  updateTextarea();
61
}
62

63
function createTextarea() {
64
  const textarea = document.createElement('textarea');
65
  textarea.rows = 5;
66
  textarea.style.width = '100%';
67
  textarea.style.marginBottom = '16px';
68
  table.parentNode.insertBefore(textarea, table);
69
  return textarea;
70
}
71

72
function updateTextarea() {
73
  const checkedValues = [];
74

75
  for (let i = 1; i < rows.length; i++) {
76
    const row = rows[i];
77
    const currentCheckbox = row.cells[0].querySelector('input[type="checkbox"]');
78
    if (currentCheckbox.checked) {
79
      checkedValues.push(row.cells[0].innerText);
80
    }
81
  }
82

83
  textarea.value = JSON.stringify(checkedValues);
84
}
85

86
const textarea = createTextarea();
87
prependCheckboxes();

I constructed the following SQL query:

1
select id, link_title, link_url, commentary
2
from blog_blogmark
3
where id in (
4
  select blogmark_id from blog_blogmark_tags where tag_id in (
5
    select id from blog_tag where tag in (
6
      'generativeai', 'ai', 'gpt3', 'promptengineering'
7
    )
8
  )
9
)

Here’s that in Datasette.

Then I opened up the Firefox console and pasted in that JavaScript. Here’s the result:

Animated GIF showing a table with a checkbox for each row. Checking the checkboxes updates a JSON array of IDs in a textarea at the top of the table. Shift clicking selects a range of checkboxes. A checkbox at the top can be checked to select all or deselect all.

I used this query, and two others like it, to create an array of IDs of entries, blogmarks and quotations that I wanted to add the llms tag to.

Having generated those arrays, I applied the tag using the /manage.py shell Django command running in Heroku:

1
heroku run bash -a simonwillisonblog

Then in Heroku:

1
./manage.py shell

And in the Python console:

1
>>> from blog.models import Blogmark, Tag, Entry, Quotation
2
>>> tag = Tag.objects.get(tag='llms')
3
>>> tag
4
<Tag: llms>
5
>>> blogmark_ids = ["6301","6310","6815","6850","6853","6869","6876","6929","6940","6967","6969","6980","6981","6993","7018","7021","7025","7027","7029","7030","7031","7032","7036","7037","7038","7039","7040","7041","7045","7046","7047","7048","7049","7050","7052","7053","7054","7056","7057","7058","7061","7062","7063","7070","7071","7075","7076","7077","7079"]
6
>>> Blogmark.objects.filter(id__in=blogmark_ids)
7
<QuerySet [<Blogmark: gpt4all>, <Blogmark: Cerebras-GPT: A Family of Open, Compute-efficient, Large Language Models>...']>
8
>>> blogmarks = list(_)
9
>>> len(blogmarks)
10
49
11
>>> for b in blogmarks:
12
...     b.tags.add(tag)
13
>>> entry_ids = ["8169","8170","8171","8178","8189","8191","8192","8197","8214","8215","8217","8222","8223","8227","8229","8230","8231","8232","8233","8234","8236","8237","8238","8239","8240","8241","8242"]
14
>>> quotation_ids = ["767","890","893","929","933","936","937","941","942","946","947","948","950","951","952","954","955","956","957","958","959","960","961","962","963","964","965","966","968","969","970","971","972"]
15
>>> entries = list(Entry.objects.filter(id__in=entry_ids))
16
>>> quotations = list(Quotation.objects.filter(id__in=quotation_ids))
17
>>> for e in entries:
18
...     e.tags.add(tag)
19
>>> for q in quotations:
20
...     q.tags.add(tag)

And that’s how I populated the https://simonwillison.net/tags/llms/ page on my blog!

At some point I plan to turn this JavaScript code into a Datasette plugin.