Skip to content

Commit

Permalink
patches specific to Rhizome ArtBase
Browse files Browse the repository at this point in the history
  • Loading branch information
@despens
despens committed May 19, 2021
1 parent fa96147 commit 29ce17b
Show file tree
Hide file tree
Showing 19 changed files with 465 additions and 128 deletions.
17 changes: 17 additions & 0 deletions Dockerfile
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
FROM node:12 as builder

WORKDIR /src/app

COPY package.json package-lock.json ./

RUN npm install --force && npm cache clean --force

COPY . .

RUN npm run-script build

FROM nginx:1-alpine
LABEL org.opencontainers.image.source="https://github.com/rhizomedotorg/artbase-query-gui/"

ADD ./docker/nginx.default.conf /etc/nginx/conf.d/default.conf
COPY --from=builder --chown=nginx:nginx /src/app/build /usr/share/nginx/html

This comment has been minimized.

Sign in to view

Copy link
@despens

despens May 19, 2021

Author Member

Adding a Dockerfile that builds the query service GUI and puts it into an nginx container. Reverse proxy settings in the nginx configuration point to other services defined in the overall Wikibase docker-compose file.
18 changes: 17 additions & 1 deletion Gruntfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ module.exports = function( grunt ) {
cwd: './',
src: [
'*.html',
'logo.svg', 'logo-embed.svg', 'robots.txt', 'favicon.*'
'robots.txt', 'favicon.*'

This comment has been minimized.

Sign in to view

Copy link
@despens

despens May 19, 2021

Author Member

Gruntfile.js defines which source files should be included into the build.
Adding robots.txt and favicon.
],
dest: buildFolder
},{
Expand Down Expand Up @@ -179,6 +179,22 @@ module.exports = function( grunt ) {
],
dest: buildFolder + '/default-config.json',
filter: 'isFile'
},
{// json custom config
expand: false,
src: [
'custom-config.json'

This comment has been minimized.

Sign in to view

Copy link
@despens

despens May 19, 2021

Author Member

Gruntfile.js defines which source files should be included into the build.
custom-config.js is usually not part of the build, but added manually later. Since this instance of the query GUI is supposed to be just for ArtBase, the config options are included, and consequently end up in the docker container.
],
dest: buildFolder + '/custom-config.json',
filter: 'isFile'
},
{// extra assets
expand: true,
cwd: './',
src: [
'Rhizome-Logo-R.svg'

This comment has been minimized.

Sign in to view

Copy link
@despens

despens May 19, 2021

Author Member

Gruntfile.js defines which source files should be included into the build.
Adding a nice Rhizome R logo to the build to display for query result embeds.
],
dest: buildFolder
}
]
}
Expand Down
61 changes: 61 additions & 0 deletions Rhizome-Logo-R.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
31 changes: 31 additions & 0 deletions custom-config.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
{
"api": {
"sparql": {
"uri": "https://query.artbase.rhizome.org/proxy/wdqs/bigdata/namespace/wdq/sparql"

This comment has been minimized.

Sign in to view

Copy link
@despens

despens May 19, 2021

Author Member

custom-config.js is loaded by the query GUI web app and merged with config.json.
This line defines the endpoint URL for Blazegraph. This URLs is reverse proxied via nginx to the appropriate docker service defined via the overall Wikibase docker-compose.
},
"wikibase": {
"uri": "https://query.artbase.rhizome.org/proxy/wikibase/w/api.php"

This comment has been minimized.

Sign in to view

Copy link
@despens

despens May 19, 2021

Author Member

custom-config.js is loaded by the query GUI web app and merged with config.json.
This line defines the endpoint URL for the local Mediawiki API. This is used launch search queries for certain Wikibase elements, and to load example queries. This URLs is reverse-proxied via nginx to the appropriate docker service defined via the overall Wikibase docker-compose.
},
"examples": {
"server": "https://query.artbase.rhizome.org/proxy/wikibase/",

This comment has been minimized.

Sign in to view

Copy link
@despens

despens May 19, 2021

Author Member

custom-config.js is loaded by the query GUI web app and merged with config.json.
This block defines a wikipage from which example queries will be loaded. For some reason, the API endpoint has to be declared once more, and separately. This URLs is reverse-proxied via nginx to the appropriate docker service defined via the overall Wikibase docker-compose.
"apiPath": "w/api.php",
"pageTitle": "Query/Examples",
"pagePathElement": "wiki/"
},
"urlShortener": "tinyurl",
"query-builder": {
"server": "https://query-builder-test.toolforge.org/"

This comment has been minimized.

Sign in to view

Copy link
@despens

despens May 19, 2021

Author Member

It is unclear why the query builder on toolforge.org. I wasn't able to observe any calls made to toolforge from the query GUI.
}
},
"brand": {
"title": "ArtBase Query",
"logo": "https://artbase.rhizome.org/w/resources/assets/artbase/Rhizome-Logo-Web.svg",
"favicon": "https://rhizome.global.ssl.fastly.net/static/favicon/favicon.ico?v=xQQqrB8XAN1",
"copyrightUrl": "https://artbase.rhizome.org/wiki/Copyright"

This comment has been minimized.

Sign in to view

Copy link
@despens

despens May 19, 2021

Author Member

custom-config.js is loaded by the query GUI web app and merged with config.json.
These are very basic branding options, largely assuming graphics dimensions as found in the original Wikidata brand assets. Actual visual tweaking has to be done via HTML and CSS files.
},
"location": {
"root": "./",
"index": "./"
},
"prefixes": {}

This comment has been minimized.

Sign in to view

Copy link
@despens

despens May 19, 2021

Author Member

custom-config.js is loaded by the query GUI web app and merged with config.json.
It would have been desirable to configure all custom rdf prefixes in this local config file, but documentation on how this sub-object is merged with the main config.json object is missing. So all prefix definitions are made in the main config.json file.
}
99 changes: 99 additions & 0 deletions custom-style.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
@font-face {

This comment has been minimized.

Sign in to view

Copy link
@despens

despens May 19, 2021

Author Member

custom-style.less was included into the CSS build process.
This section is loading Rhizome's custom font from the main Artbase site.
font-family: "HKGrotesk";
src: url("https://artbase.rhizome.org/w/resources/assets/artbase/HKGrotesk/HKGrotesk-Regular.ttf") format('truetype'),
url("https://artbase.rhizome.org/w/resources/assets/artbase/HKGrotesk/HKGrotesk-Regular.woff2") format("woff2"),
url("https://artbase.rhizome.org/w/resources/assets/artbase/HKGrotesk/HKGrotesk-Regular.woff") format("woff");
font-weight: normal;
}

@font-face {
font-family: "HKGrotesk";
src: url("https://artbase.rhizome.org/w/resources/assets/artbase/HKGrotesk/HKGrotesk-Bold.ttf") format('truetype'),
url("https://artbase.rhizome.org/w/resources/assets/artbase/HKGrotesk/HKGrotesk-Bold.woff2") format("woff2"),
url("https://artbase.rhizome.org/w/resources/assets/artbase/HKGrotesk/HKGrotesk-Bold.woff") format("woff");
font-weight: bold;
}

@font-face {
font-family: "HKGrotesk";
src: url("https://artbase.rhizome.org/w/resources/assets/artbase/HKGrotesk/HKGrotesk-BoldItalic.ttf") format('truetype'),
url("https://artbase.rhizome.org/w/resources/assets/artbase/HKGrotesk/HKGrotesk-BoldItalic.woff2") format("woff2"),
url("https://artbase.rhizome.org/w/resources/assets/artbase/HKGrotesk/HKGrotesk-BoldItalic.woff") format("woff");
font-weight: bold;
font-style: italic;
}

@font-face {
font-family: "HKGrotesk";
src: url("https://artbase.rhizome.org/w/resources/assets/artbase/HKGrotesk/HKGrotesk-LightItalic.ttf") format('truetype'),
url("https://artbase.rhizome.org/w/resources/assets/artbase/HKGrotesk/HKGrotesk-LightItalic.woff2") format("woff2"),
url("https://artbase.rhizome.org/w/resources/assets/artbase/HKGrotesk/HKGrotesk-LightItalic.woff") format("woff");
font-weight: 300;
font-style: italic;
}

@font-face {
font-family: "HKGrotesk";
src: url("https://artbase.rhizome.org/w/resources/assets/artbase/HKGrotesk/HKGrotesk-Light.ttf") format('truetype'),
url("https://artbase.rhizome.org/w/resources/assets/artbase/HKGrotesk/HKGrotesk-Light.woff2") format("woff2"),
url("https://artbase.rhizome.org/w/resources/assets/artbase/HKGrotesk/HKGrotesk-Light.woff") format("woff");
font-weight: 300;
}

@font-face {
font-family: "HKGrotesk";
src: url("https://artbase.rhizome.org/w/resources/assets/artbase/HKGrotesk/HKGrotesk-Italic.ttf") format('truetype'),
url("https://artbase.rhizome.org/w/resources/assets/artbase/HKGrotesk/HKGrotesk-Italic.woff2") format("woff2"),
url("https://artbase.rhizome.org/w/resources/assets/artbase/HKGrotesk/HKGrotesk-Italic.woff") format("woff");
font-style: italic;
}


body {
font-family: 'HK Grotesk';

This comment has been minimized.

Sign in to view

Copy link
@despens

despens May 19, 2021

Author Member

custom-style.less was included into the CSS build process.
Our nice font is used for everything.
color: #000;
font-size: 16px;
}

.CodeMirror {
font-size: 14px;
}



// remove inactive status bars below editor

This comment has been minimized.

Sign in to view

Copy link
@despens

despens May 19, 2021

Author Member

custom-style.less was included into the CSS build process.
The query GUI features some apparently empty "status bar". This style information hides them.
.query-helper-tag-cloud,
.status.navbar.navbar-default {
display: none;
}

.query-main {
border-bottom: 1px solid @border-color-base--disabled;

This comment has been minimized.

Sign in to view

Copy link
@despens

despens May 19, 2021

Author Member

custom-style.less was included into the CSS build process.
Since the empty status bars are removed, a line is added to separate the editing interface from the results pane.
}

.artbase-branding {

This comment has been minimized.

Sign in to view

Copy link
@despens

despens May 19, 2021

Author Member

custom-style.less was included into the CSS build process.
Tweaking the display of Rhizome's logo, since original stylesheet assumes the same dimensions as Wikidata branding assets.
padding: .5rem 15px 0;
.artbase-rhizome-logo {
position: relative;
top: -2px;
margin-right: 6px;
}
}


/* QUERY RESULTS */
#query-result {
font-size: 14px;

This comment has been minimized.

Sign in to view

Copy link
@despens

despens May 19, 2021

Author Member

custom-style.less was included into the CSS build process.
Normalize font sizes across parts of the interface, remove wasteful spacing.
.bootstrap-table {
padding: 0 !important;
}
}

button[name=paginationSwitch] {
display: none !important;

This comment has been minimized.

Sign in to view

Copy link
@despens

despens May 19, 2021

Author Member

custom-style.less was included into the CSS build process.
Hide the "pagination switch" button from result tables. Its position right after the "search" input field made it look like a "confirm" or "start search" button.
}

.fixed-table-pagination {
padding-left: 1rem;

This comment has been minimized.

Sign in to view

Copy link
@despens

despens May 19, 2021

Author Member

custom-style.less was included into the CSS build process.
Add some padding to pagination elements so they do not touch window borders.
padding-right: 1rem;
}
38 changes: 38 additions & 0 deletions docker/nginx.default.conf
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
server {

This comment has been minimized.

Sign in to view

Copy link
@despens

despens May 19, 2021

Author Member

This nginx configuration mainly proxies local URLs to Mediawiki and Blazegraph, defined via the overall Wikibase docker-compose. The query GUI then uses these URLs local to its own domain name to make API and query requests. Like this, CORS configuration can be skipped.
listen 80 default_server;
listen [::]:80 default_server;
server_name localhost;
charset utf-8;

# files transfer
client_body_in_file_only clean;
client_body_buffer_size 32K;
client_max_body_size 1026g;
sendfile on;
send_timeout 300s;

location /proxy/wikibase {
rewrite /proxy/wikibase/(.*) /$1 break;
proxy_pass http://wikibase.svc:80;
}

location /proxy/wdqs {
rewrite /proxy/wdqs/(.*) /$1 break;
proxy_pass http://wdqs-proxy.svc:80;
}

location / {
root /usr/share/nginx/html;
index index.html index.htm;
}

error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}

# deny access to hidden files (beginning with a period)
location ~ /\. {
access_log off; log_not_found off; deny all;
}
}
20 changes: 10 additions & 10 deletions embed.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,10 +55,9 @@
top: 0px;
height: 100%;
width: 100%;
background-size: 80% 80%;
background-image: url(logo-embed.svg);
background-image: url(Rhizome-Logo-R.svg);

This comment has been minimized.

Sign in to view

Copy link
@despens

despens May 19, 2021

Author Member

embed.html is used to display query results embedded on arbitrary pages via <iframe>.
This css code displays a nicely proportioned Rhizome R instead of the skewed Wikidata logo while a query result is loading.
background-repeat: no-repeat;
background-position: center;
background-position: 50% 50%;
z-index: -1;
}

Expand Down Expand Up @@ -121,7 +120,7 @@
.bootstrap-table {
width: 100%;
height: auto;
padding: 20px 50px;
/* padding: 20px 50px; */

This comment has been minimized.

Sign in to view

Copy link
@despens

despens May 19, 2021

Author Member

embed.html is used to display query results embedded on arbitrary pages via <iframe>.
Rhizome decided to remove the query rendering and editing tool icons that flicker in and out of visibility on mouse move, and give space to the results table.
}

#query-result .jstree {
Expand Down Expand Up @@ -252,7 +251,9 @@
}

.brand img {
padding: 0.1em;
height: 10px;
padding-bottom: 2px;
padding-right: 3px;

This comment has been minimized.

Sign in to view

Copy link
@despens

despens May 19, 2021

Author Member

embed.html is used to display query results embedded on arbitrary pages via <iframe>.
Tweaking small Rhizome Artbase logo at the bottom left.
}

@media only screen and (max-height: 285px) {
Expand Down Expand Up @@ -310,8 +311,6 @@
padding: 0px;
}

}

</style>
<style id="MJX-CHTML-styles">/* placeholder for MathJax */</style>
<body>
Expand All @@ -326,12 +325,12 @@
</div>
</noscript>

<a class="edit-link brand" _target="_self" rel="noopener" href="./"><img width="24" height="15" src=""><span></span></a>
<a class="edit-link brand" _target="_self" rel="noopener" href="./"><img src=""><span></span></a>

This comment has been minimized.

Sign in to view

Copy link
@despens

despens May 19, 2021

Author Member

embed.html is used to display query results embedded on arbitrary pages via <iframe>.
Removing hard-coded logo width, let it be handled by stylesheet instead.
<!--

This comment has been minimized.

Sign in to view

Copy link
@despens

despens May 19, 2021

Author Member

embed.html is used to display query results embedded on arbitrary pages via <iframe>.
Commenting out a huge section of the page that would provide rather annoying and confusing tools icons that would flicker in and out of visibility on mouse move.
<div class="header-toolbar">
<ul id="result-browser-menu">
</ul>
</div>

<div class="toolbar-right">
<ul id="embed-right-menu">
<li>
Expand Down Expand Up @@ -384,7 +383,8 @@
<span class="query-total"><span class="label label-default" id="response-summary"></span></span>
</li>
</ul>
</div>
</div>
-->

This comment has been minimized.

Sign in to view

Copy link
@despens

despens May 19, 2021

Author Member

embed.html is used to display query results embedded on arbitrary pages via <iframe>.
End of commenting out a huge section of the page that would provide rather annoying and confusing tools icons that would flicker in and out of visibility on mouse move.
<div class="action-bar">
<div class="message"></div>
</div>
Expand Down
11 changes: 9 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,13 @@
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-_target="#header-navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<div class="navbar-brand">
<a href="./"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA="><span></span></a>
<div class="h4 artbase-branding">
<a href="//rhizome.org/">
<img src="//artbase.rhizome.org/w/resources/assets/artbase/Rhizome-Logo-Web.svg" class="artbase-rhizome-logo" alt="RHIZOME" width="130" height="20"></a>
/
<a href="//artbase.rhizome.org">ArtBase</a>
/
<b>Query</b>

This comment has been minimized.

Sign in to view

Copy link
@despens

despens May 19, 2021

Author Member

index.html is the main page of this single page web application.
This HTML part inserts global Rhizome-specific navigation and branding.
</div>
</div>
<div class="collapse navbar-collapse in" id="header-navbar-collapse">
Expand All @@ -68,6 +73,7 @@
<span class="fa fa-folder-open-o"></span> <span data-i18n="wdqs-app-button-examples" id="examples-label"></span>
</button>
</li>
<!--

This comment has been minimized.

Sign in to view

Copy link
@despens

despens May 19, 2021

Author Member

index.html is the main page of this single page web application.
Start of commenting out a bigger section with buttons specific to Wikidata.
<li class="dropdown">
<div class="btn-group navbar-btn">
<a href="https://www.wikidata.org/wiki/Special:MyLanguage/Wikidata:SPARQL_query_service/Wikidata_Query_Help" _target="_self" class="btn btn-default">
Expand Down Expand Up @@ -112,6 +118,7 @@
</ul>
</div>
</li>
-->

This comment has been minimized.

Sign in to view

Copy link
@despens

despens May 19, 2021

Author Member

index.html is the main page of this single page web application.
End of commenting out a bigger section with buttons specific to Wikidata.
</ul>
<ul class="nav navbar-nav navbar-right" id="right-navbar">
<li>
Expand Down
Loading

0 comments on commit 29ce17b

Please sign in to comment.
  NODES
Community 1
Note 1
OOP 3
os 18
server 6
text 7
Users 1
visual 1
web 11