Skip to content

Add a "Copy link" button to resultset headers #99

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
audiodude wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Add a "Copy link" button to resultset headers #99

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1b9d993
Add a "Copy link" button to resultset headers
audiodude Aug 13, 2026
b6bc40e
Put "Copy link" left of "Download data" and style it as secondary
audiodude Aug 13, 2026
32f64df
auto update of tag
Aug 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions helm-quarry/values.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
web:
repository: 'quay.io/wikimedia-quarry/quarry'
tag: pr-96 # web tag managed by github actions
tag: pr-99 # web tag managed by github actions
resources:
requests:
memory: "300Mi"
Expand All @@ -11,7 +11,7 @@ web:

worker:
repository: 'quay.io/wikimedia-quarry/quarry'
tag: pr-96 # worker tag managed by github actions
tag: pr-99 # worker tag managed by github actions
resources:
requests:
memory: "400Mi"
Expand Down
16 changes: 16 additions & 0 deletions quarry/web/static/css/query/view.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,22 @@ table#query-results-sampled {
margin-bottom: 12px;
}

.copy-link-status {
float: left;
margin-right: 8px;
line-height: 22px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
transition: opacity 1.5s ease-out;
}

.copy-link-status.copy-link-status-shown {
opacity: 1;
/* Appear at once, fade away slowly. */
transition: none;
}

div.dataTables_info {
margin: 0 0 10.5px;
}
Expand Down
16 changes: 16 additions & 0 deletions quarry/web/static/js/query/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,22 @@ $( () => {
} );
}

/* Copy an absolute result URL to the clipboard instead of downloading it. */
$( '#query-result' ).on( 'click', '.copy-link-menu a', function ( event ) {
event.preventDefault();
const $status = $( this ).closest( '.btn-toolbar' ).find( '.copy-link-status' );
navigator.clipboard.writeText( this.href ).then( () => {
$status.text( ' ✅️ Copied to clipboard' ).addClass( 'copy-link-status-shown' );
setTimeout( () => {
// Empty it once faded, so it stops taking up room in the header.
$status.one( 'transitionend', () => $status.text( '' ) )
.removeClass( 'copy-link-status-shown' );
}, 3000 );
}, ( err ) => {
console.log( 'Could not copy result link to clipboard', err );
} );
} );

$( '#togglehl' ).on( 'click', () => {
if ( editor === null ) {
editor = makeEditor();
Expand Down
90 changes: 74 additions & 16 deletions quarry/web/static/templates/compiled.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ output += "\n ";
}
output += "\n (";
output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "rowcount"), env.opts.autoescape);
output += " rows)\n </div>\n <div class='col-md-4'>\n <div class=\"btn-group pull-right\">\n <button type=\"button\" class=\"btn btn-info btn-xs dropdown-toggle\" data-toggle=\"dropdown\">\n Download data <span class=\"caret\"></span>\n </button>\n <ul class=\"dropdown-menu\" role=\"menu\">\n ";
output += " rows)\n </div>\n <div class='col-md-4'>\n <div class=\"btn-toolbar pull-right\">\n <span class=\"copy-link-status\" role=\"status\" aria-live=\"polite\"></span>\n <div class=\"btn-group\">\n <button type=\"button\" class=\"btn btn-default btn-xs dropdown-toggle\" data-toggle=\"dropdown\">\n Copy link <span class=\"caret\"></span>\n </button>\n <ul class=\"dropdown-menu copy-link-menu\" role=\"menu\">\n ";
frame = frame.push();
var t_3 = {"tsv": "TSV","json": "JSON","json-lines": "JSON Lines","csv": "CSV","wikitable": "Wikitable","html": "HTML"};
if(t_3) {var t_1;
Expand All @@ -36,23 +36,15 @@ frame.set("loop.revindex0", t_2 - t_1 - 1);
frame.set("loop.first", t_1 === 0);
frame.set("loop.last", t_1 === t_2 - 1);
frame.set("loop.length", t_2);
output += "\n <li><a href=\"/run/";
output += "\n <li><a href=\"/run/";
output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "run_id"), env.opts.autoescape);
output += "/output/";
output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "resultset_id"), env.opts.autoescape);
output += "/";
output += runtime.suppressValue(t_4, env.opts.autoescape);
output += "\" download=\"quarry-";
output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "query_id"), env.opts.autoescape);
output += "-";
output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "slugify_title"), env.opts.autoescape);
output += "-run";
output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "run_id"), env.opts.autoescape);
output += ".";
output += runtime.suppressValue(t_4, env.opts.autoescape);
output += "\">";
output += runtime.suppressValue(t_5, env.opts.autoescape);
output += "</a></li>\n ";
output += "</a></li>\n ";
;
}
} else {
Expand All @@ -70,29 +62,95 @@ frame.set("loop.revindex0", t_2 - t_1 - 1);
frame.set("loop.first", t_1 === 0);
frame.set("loop.last", t_1 === t_2 - 1);
frame.set("loop.length", t_2);
output += "\n <li><a href=\"/run/";
output += "\n <li><a href=\"/run/";
output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "run_id"), env.opts.autoescape);
output += "/output/";
output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "resultset_id"), env.opts.autoescape);
output += "/";
output += runtime.suppressValue(t_6, env.opts.autoescape);
output += "\">";
output += runtime.suppressValue(t_7, env.opts.autoescape);
output += "</a></li>\n ";
;
}
}
}
frame = frame.pop();
output += "\n </ul>\n </div>\n <div class=\"btn-group\">\n <button type=\"button\" class=\"btn btn-info btn-xs dropdown-toggle\" data-toggle=\"dropdown\">\n Download data <span class=\"caret\"></span>\n </button>\n <ul class=\"dropdown-menu dropdown-menu-right\" role=\"menu\">\n ";
frame = frame.push();
var t_10 = {"tsv": "TSV","json": "JSON","json-lines": "JSON Lines","csv": "CSV","wikitable": "Wikitable","html": "HTML"};
if(t_10) {var t_8;
if(runtime.isArray(t_10)) {
var t_9 = t_10.length;
for(t_8=0; t_8 < t_10.length; t_8++) {
var t_11 = t_10[t_8][0]
frame.set("format", t_10[t_8][0]);
var t_12 = t_10[t_8][1]
frame.set("formatname", t_10[t_8][1]);
frame.set("loop.index", t_8 + 1);
frame.set("loop.index0", t_8);
frame.set("loop.revindex", t_9 - t_8);
frame.set("loop.revindex0", t_9 - t_8 - 1);
frame.set("loop.first", t_8 === 0);
frame.set("loop.last", t_8 === t_9 - 1);
frame.set("loop.length", t_9);
output += "\n <li><a href=\"/run/";
output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "run_id"), env.opts.autoescape);
output += "/output/";
output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "resultset_id"), env.opts.autoescape);
output += "/";
output += runtime.suppressValue(t_11, env.opts.autoescape);
output += "\" download=\"quarry-";
output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "query_id"), env.opts.autoescape);
output += "-";
output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "slugify_title"), env.opts.autoescape);
output += "-run";
output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "run_id"), env.opts.autoescape);
output += ".";
output += runtime.suppressValue(t_6, env.opts.autoescape);
output += runtime.suppressValue(t_11, env.opts.autoescape);
output += "\">";
output += runtime.suppressValue(t_7, env.opts.autoescape);
output += "</a></li>\n ";
output += runtime.suppressValue(t_12, env.opts.autoescape);
output += "</a></li>\n ";
;
}
} else {
t_8 = -1;
var t_9 = runtime.keys(t_10).length;
for(var t_13 in t_10) {
t_8++;
var t_14 = t_10[t_13];
frame.set("format", t_13);
frame.set("formatname", t_14);
frame.set("loop.index", t_8 + 1);
frame.set("loop.index0", t_8);
frame.set("loop.revindex", t_9 - t_8);
frame.set("loop.revindex0", t_9 - t_8 - 1);
frame.set("loop.first", t_8 === 0);
frame.set("loop.last", t_8 === t_9 - 1);
frame.set("loop.length", t_9);
output += "\n <li><a href=\"/run/";
output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "run_id"), env.opts.autoescape);
output += "/output/";
output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "resultset_id"), env.opts.autoescape);
output += "/";
output += runtime.suppressValue(t_13, env.opts.autoescape);
output += "\" download=\"quarry-";
output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "query_id"), env.opts.autoescape);
output += "-";
output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "slugify_title"), env.opts.autoescape);
output += "-run";
output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "run_id"), env.opts.autoescape);
output += ".";
output += runtime.suppressValue(t_13, env.opts.autoescape);
output += "\">";
output += runtime.suppressValue(t_14, env.opts.autoescape);
output += "</a></li>\n ";
;
}
}
}
frame = frame.pop();
output += "\n </ul>\n </div>\n </div>\n </div>\n <table class='table'></table>\n</div>\n";
output += "\n </ul>\n </div>\n </div>\n </div>\n </div>\n <table class='table'></table>\n</div>\n";
if(parentTemplate) {
parentTemplate.rootRenderFunc(env, context, frame, runtime, cb);
} else {
Expand Down
52 changes: 36 additions & 16 deletions quarry/web/static/templates/query-resultset.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,42 @@
({{rowcount}} rows)
</div>
<div class='col-md-4'>
<div class="btn-group pull-right">
<button type="button" class="btn btn-info btn-xs dropdown-toggle" data-toggle="dropdown">
Download data <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
{% for format, formatname in {
'tsv': 'TSV',
'json': 'JSON',
'json-lines': 'JSON Lines',
'csv': 'CSV',
'wikitable': 'Wikitable',
'html': 'HTML'
} %}
<li><a href="/run/{{run_id}}/output/{{resultset_id}}/{{format}}" download="quarry-{{query_id}}-{{slugify_title}}-run{{run_id}}.{{format}}">{{formatname}}</a></li>
{% endfor %}
</ul>
<div class="btn-toolbar pull-right">
<span class="copy-link-status" role="status" aria-live="polite"></span>
<div class="btn-group">
<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
Copy link <span class="caret"></span>
</button>
<ul class="dropdown-menu copy-link-menu" role="menu">
{% for format, formatname in {
'tsv': 'TSV',
'json': 'JSON',
'json-lines': 'JSON Lines',
'csv': 'CSV',
'wikitable': 'Wikitable',
'html': 'HTML'
} %}
<li><a href="/run/{{run_id}}/output/{{resultset_id}}/{{format}}">{{formatname}}</a></li>
{% endfor %}
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-info btn-xs dropdown-toggle" data-toggle="dropdown">
Download data <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
{% for format, formatname in {
'tsv': 'TSV',
'json': 'JSON',
'json-lines': 'JSON Lines',
'csv': 'CSV',
'wikitable': 'Wikitable',
'html': 'HTML'
} %}
<li><a href="/run/{{run_id}}/output/{{resultset_id}}/{{format}}" download="quarry-{{query_id}}-{{slugify_title}}-run{{run_id}}.{{format}}">{{formatname}}</a></li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
Expand Down
Loading