Merge pull request #328 from Ontotext-AD/gdb-5254

GDB-5254: Solves a general problem with HTML/CSS/JS/image files and browser cache
Ontotext-AD · Nov 26, 2020 · 47bc696 · 47bc696
2 parents 546ec7b + 0b22676
commit 47bc696
Show file tree

Hide file tree

Showing 31 changed files with 151 additions and 105 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
     "description": "The web application for GraphDB APIs",
     "scripts": {
         "build": "webpack --config=webpack.config.prod.js",
+        "build-dev": "webpack --config=webpack.config.dev.js",
         "start": "webpack-dev-server --config=webpack.config.dev.js --open",
         "lint": "eslint ./src",
         "test": "karma start",
@@ -65,6 +66,7 @@
         "style-loader": "^0.23.1",
         "url-loader": "^2.3.0",
         "webpack": "^4.41.2",
+        "webpack-auto-inject-version": "^1.2.2",
         "webpack-cli": "^3.3.10",
         "webpack-dev-server": "^3.11.0",
         "webpack-merge": "^4.2.1",

diff --git a/src/app.js b/src/app.js
@@ -16,8 +16,8 @@ const modules = [
 const moduleDefinition = function (productInfo) {
     const workbench = angular.module('graphdb.workbench', modules);
 
-    workbench.config(['$routeProvider', '$locationProvider', '$menuItemsProvider', 'toastrConfig', 'localStorageServiceProvider', '$tooltipProvider', '$httpProvider',
-        function ($routeProvider, $locationProvider, $menuItemsProvider, toastrConfig, localStorageServiceProvider, $tooltipProvider, $httpProvider) {
+    workbench.config(['$routeProvider', '$locationProvider', '$menuItemsProvider', 'toastrConfig', 'localStorageServiceProvider', '$tooltipProvider', '$httpProvider', '$templateRequestProvider',
+        function ($routeProvider, $locationProvider, $menuItemsProvider, toastrConfig, localStorageServiceProvider, $tooltipProvider, $httpProvider, $templateRequestProvider) {
 
             angular.extend(toastrConfig, {
                 timeOut: 5000,
@@ -91,6 +91,24 @@ const moduleDefinition = function (productInfo) {
             });
 
             $httpProvider.interceptors.push('$unauthorizedInterceptor');
+
+            // Hack the template request provider to add a version parameter to templates that
+            // are fetched via HTTP to avoid cache issues. Those that are in the templateCache
+            // already aren't actually fetched via HTTP so we don't want to add the parameter there.
+            const originalTemplateProviderFn = $templateRequestProvider.$get[3];
+            if (typeof originalTemplateProviderFn === 'function') {
+                $templateRequestProvider.$get[3] = function (templateCache, http, q) {
+                    const originalHandleRequestFn = originalTemplateProviderFn(templateCache, http, q);
+                    return function handleRequestFn(tpl, ignoreRequestError) {
+                        if (!templateCache.get(tpl)) {
+                            // The AIV tag will be replaced by the actual version by the
+                            // webpack-auto-inject-version plugin, e.g. it will become v=1.5.0
+                            tpl = tpl + '?v=[AIV]{version}[/AIV]';
+                        }
+                        return originalHandleRequestFn(tpl, ignoreRequestError);
+                    }
+                };
+            }
         }]);
 
     workbench.constant('isEnterprise', productInfo.productType === 'enterprise');

diff --git a/src/js/angular/core/directives.js b/src/js/angular/core/directives.js
@@ -16,7 +16,7 @@ ontoLoader.$inject = [];
 function ontoLoader() {
     return {
         template: function (elem, attr) {
-            return '<object width="' + attr.size + '" height="' + attr.size + '" data="js/angular/templates/loader/ot-loader.svg">Loading...</object>';
+            return '<object width="' + attr.size + '" height="' + attr.size + '" data="js/angular/templates/loader/ot-loader.svg?v=[AIV]{version}[/AIV]">Loading...</object>';
         }
     };
 }
@@ -26,7 +26,7 @@ ontoLoaderFancy.$inject = [];
 function ontoLoaderFancy() {
     return {
         template: function (elem, attr) {
-            return '<object width="' + attr.size + '" height="' + attr.size + '" data="js/angular/templates/loader/ot-loader.svg"></object>'
+            return '<object width="' + attr.size + '" height="' + attr.size + '" data="js/angular/templates/loader/ot-loader.svg?v=[AIV]{version}[/AIV]"></object>'
                 + '<div>Loading...<div>';
         }
     };
@@ -108,7 +108,7 @@ function ontoLoaderNew($timeout) {
             });
         },
         template: '<div class="ot-loader-new-content">'
-        + '<img width="{{size}}" height="{{size}}" src="js/angular/templates/loader/ot-loader.svg"/>'
+        + '<img width="{{size}}" height="{{size}}" src="js/angular/templates/loader/ot-loader.svg?v=[AIV]{version}[/AIV]"/>'
         + '<div style="font-size: {{size/4}}px">{{currentMessage}}<div>'
         + '</div>'
     };

diff --git a/src/js/angular/graphexplore/controllers/graphs-visualizations.controller.js b/src/js/angular/graphexplore/controllers/graphs-visualizations.controller.js
@@ -2024,7 +2024,7 @@ function GraphsVisualizationsCtrl($scope, $rootScope, $repositories, toastr, $ti
                 .style("opacity", "0.7");
 
             d3.select(parentNode).append("image")
-                .attr("xlink:href", "js/angular/templates/loader/ot-loader.svg")
+                .attr("xlink:href", "js/angular/templates/loader/ot-loader.svg?v=[AIV]{version}[/AIV]")
                 .attr("x", function () {
                     return node.x - node.size + 5;
                 })

diff --git a/src/js/angular/import/directives.js b/src/js/angular/import/directives.js
@@ -38,7 +38,7 @@ importDirectives.directive('filesOntoLoader', function () {
             scope.$watch('file.status', function () {
                 if (scope.file.status === 'IMPORTING' || scope.file.status === 'UPLOADING') {
                     if (!$(element).has('object').length > 0) {
-                        $(element).append('<object width="' + attr.size + '" height="' + attr.size + '" data="js/angular/templates/loader/ot-loader.svg">Loading...</object>');
+                        $(element).append('<object width="' + attr.size + '" height="' + attr.size + '" data="js/angular/templates/loader/ot-loader.svg?v=[AIV]{version}[/AIV]">Loading...</object>');
                     }
                 }
             });

diff --git a/src/pages/autocomplete.html b/src/pages/autocomplete.html
@@ -1,4 +1,4 @@
-<link href="css/autocomplete.css" rel="stylesheet">
+<link href="css/autocomplete.css?v=[AIV]{version}[/AIV]" rel="stylesheet">
 <div id="autocomplete" class="page">
 	<h1>
 		{{title}}

diff --git a/src/pages/clusterInfo.html b/src/pages/clusterInfo.html
@@ -1,5 +1,5 @@
 
-<link href="css/clustermanagement.css" rel="stylesheet" />
+<link href="css/clustermanagement.css?v=[AIV]{version}[/AIV]" rel="stylesheet" />
 <title>Cluster Management</title>
 
 <h1>

diff --git a/src/pages/create-index.html b/src/pages/create-index.html
@@ -1,10 +1,10 @@
-<link href="css/lib/angular-xeditable/xeditable.min.css" rel="stylesheet">
+<link href="css/lib/angular-xeditable/xeditable.min.css?v=[AIV]{version}[/AIV]" rel="stylesheet">
 
-<link href="css/lib/yasqe.min.css" rel="stylesheet"/>
+<link href="css/lib/yasqe.min.css?v=[AIV]{version}[/AIV]" rel="stylesheet"/>
 
-<link href="css/new-sparql.css" rel="stylesheet"/>
+<link href="css/new-sparql.css?v=[AIV]{version}[/AIV]" rel="stylesheet"/>
 
-<link href="css/graphs-config.css" rel="stylesheet"/>
+<link href="css/graphs-config.css?v=[AIV]{version}[/AIV]" rel="stylesheet"/>
 
 
 <div class="container-fluid">

diff --git a/src/pages/dependencies.html b/src/pages/dependencies.html
@@ -1,4 +1,4 @@
-<link href="css/dependencies.css" rel="stylesheet">
+<link href="css/dependencies.css?v=[AIV]{version}[/AIV]" rel="stylesheet">
 
 
 <title>Explore Class Dependencies</title>

diff --git a/src/pages/domainRangeInfo.html b/src/pages/domainRangeInfo.html
@@ -1,5 +1,5 @@
-<link href="css/domain-range-graph.css" rel="stylesheet"/>
-<link href="css/rdf-details-side-panel.css" rel="stylesheet"/>
+<link href="css/domain-range-graph.css?v=[AIV]{version}[/AIV]" rel="stylesheet"/>
+<link href="css/rdf-details-side-panel.css?v=[AIV]{version}[/AIV]" rel="stylesheet"/>
 
 <title>Explore Data Graph</title>
 

diff --git a/src/pages/edit.html b/src/pages/edit.html
@@ -1,4 +1,4 @@
-<link href="css/lib/angular-xeditable/xeditable.min.css" rel="stylesheet">
+<link href="css/lib/angular-xeditable/xeditable.min.css?v=[AIV]{version}[/AIV]" rel="stylesheet">
 
 <div core-errors></div>
 <div class="page" ng-show="getActiveRepository()">

diff --git a/src/pages/explore.html b/src/pages/explore.html
@@ -1,4 +1,4 @@
-<link href="css/explore.css" rel="stylesheet"/>
+<link href="css/explore.css?v=[AIV]{version}[/AIV]" rel="stylesheet"/>
 <div core-errors></div>
 <div class="page" ng-show="getActiveRepository()">
     <div class="resource-info" ng-if="!isTripleResource()">

diff --git a/src/pages/export.html b/src/pages/export.html
@@ -1,4 +1,4 @@
-<link href="css/export.css" rel="stylesheet">
+<link href="css/export.css?v=[AIV]{version}[/AIV]" rel="stylesheet">
 
 <div id="wb-export">
 

diff --git a/src/pages/find.html b/src/pages/find.html
@@ -1,4 +1,4 @@
-<link href="css/find.css" rel="stylesheet"/>
+<link href="css/find.css?v=[AIV]{version}[/AIV]" rel="stylesheet"/>
 
 <div class="page">
 	<h1>
@@ -37,4 +37,4 @@ <h1>
 			</div>
 		</div>
     </form>
-</div>
+</div>
diff --git a/src/pages/graph-config/saveGraphConfig.html b/src/pages/graph-config/saveGraphConfig.html
@@ -1,10 +1,10 @@
-<link href="css/lib/angular-xeditable/xeditable.min.css" rel="stylesheet">
+<link href="css/lib/angular-xeditable/xeditable.min.css?v=[AIV]{version}[/AIV]" rel="stylesheet">
 
-<link href="css/lib/yasqe.min.css" rel="stylesheet"/>
+<link href="css/lib/yasqe.min.css?v=[AIV]{version}[/AIV]" rel="stylesheet"/>
 
-<link href="css/new-sparql.css" rel="stylesheet"/>
+<link href="css/new-sparql.css?v=[AIV]{version}[/AIV]" rel="stylesheet"/>
 
-<link href="css/graphs-config.css" rel="stylesheet"/>
+<link href="css/graphs-config.css?v=[AIV]{version}[/AIV]" rel="stylesheet"/>
 
 <h1>
     {{title}}
@@ -67,7 +67,7 @@ <h1>
                 <div class="image-label-container mb-3" ng-show="page == 1">
                     <label class="image-label d-flex" ng-class="{'active': newConfig.startMode == 'search'}">
                         <input type="radio" class="form-check-input" id="checkboxSuccess" ng-model="newConfig.startMode" value="search">
-                        <img class="image-label-image" src="css/images/search.png" alt="search image" width="100%">
+                        <img class="image-label-image" src="css/images/search.png?v=[AIV]{version}[/AIV]" alt="search image" width="100%">
                         <div class="image-label-content">
                             <h5>Start with a search box</h5>
                             <div>Choose the starting point of your visual graph every time</div>
@@ -76,7 +76,7 @@ <h5>Start with a search box</h5>
 
                     <label class="image-label d-flex" ng-class="{'active': newConfig.startMode == 'node'}">
                         <input type="radio" class="form-check-input" id="checkboxSuccess" ng-model="newConfig.startMode" value="node">
-                        <img class="image-label-image" src="css/images/node.png" alt="node image" width="100%">
+                        <img class="image-label-image" src="css/images/node.png?v=[AIV]{version}[/AIV]" alt="node image" width="100%">
                         <div class="image-label-content">
                             <h5>Start with a fixed node</h5>
                             <div>The visual graph will always start from the chosen node.</div>
@@ -85,7 +85,7 @@ <h5>Start with a fixed node</h5>
 
                     <label class="image-label d-flex" ng-class="{'active': newConfig.startMode == 'query'}">
                         <input type="radio" class="form-check-input" id="checkboxSuccess" ng-model="newConfig.startMode" value="query">
-                        <img class="image-label-image" src="css/images/query.png" alt="query image" width="100%">
+                        <img class="image-label-image" src="css/images/query.png?v=[AIV]{version}[/AIV]" alt="query image" width="100%">
                         <div class="image-label-content">
                             <h5>Start with graph query results</h5>
                             <div>The results from your query will be the starting point of the visual graph.</div>
@@ -126,7 +126,7 @@ <h5>Start with graph query results</h5>
                             <p>This query is optional. If empty, the <em>{{getSampleName(samples[0], 'expandQuery')}}</em> sample query will be used.</p>
                         </div>
                         <div>
-                            <img src="css/images/expand.png" class="info-box-img" height="220" alt="expand image">
+                            <img src="css/images/expand.png?v=[AIV]{version}[/AIV]" class="info-box-img" height="220" alt="expand image">
                         </div>
                     </div>
 
@@ -153,7 +153,7 @@ <h5>Start with graph query results</h5>
                             <p>This query is optional. If empty, the <em>{{getSampleName(samples[0], 'resourceQuery')}}</em> sample query will be used.</p>
                         </div>
                         <div>
-                            <img src="css/images/labels-size.png" class="info-box-img" height="220" alt="labels size image">
+                            <img src="css/images/labels-size.png?v=[AIV]{version}[/AIV]" class="info-box-img" height="220" alt="labels size image">
                         </div>
                     </div>
 
@@ -172,7 +172,7 @@ <h5>Start with graph query results</h5>
                             <p>This query is optional. If empty, the edge IRI's local name is used.</p>
                         </div>
                         <div>
-                            <img src="css/images/predicates.png" class="info-box-img" height="220" alt="predicates image">
+                            <img src="css/images/predicates.png?v=[AIV]{version}[/AIV]" class="info-box-img" height="220" alt="predicates image">
                         </div>
                     </div>
 
@@ -197,7 +197,7 @@ <h5>Start with graph query results</h5>
                             <p>This query is optional. If empty, the <em>{{getSampleName(samples[0], 'resourcePropertiesQuery')}}</em> sample query will be used.</p>
                         </div>
                         <div>
-                            <img src="css/images/side-panel.png" class="info-box-img" height="220" alt="side panel image">
+                            <img src="css/images/side-panel.png?v=[AIV]{version}[/AIV]" class="info-box-img" height="220" alt="side panel image">
                         </div>
                     </div>
 

diff --git a/src/pages/graphs-visualizations.html b/src/pages/graphs-visualizations.html
@@ -1,7 +1,7 @@
-<link href="css/graphs-vizualizations.css" rel="stylesheet"/>
-<link href="css/rdf-details-side-panel.css" rel="stylesheet"/>
-<link href="css/lib/ng-tags-input/ng-tags-input.min.css" rel="stylesheet"/>
-<link href="js/lib/d3-tip/d3-tip.css" rel="stylesheet"/>
+<link href="css/graphs-vizualizations.css?v=[AIV]{version}[/AIV]" rel="stylesheet"/>
+<link href="css/rdf-details-side-panel.css?v=[AIV]{version}[/AIV]" rel="stylesheet"/>
+<link href="css/lib/ng-tags-input/ng-tags-input.min.css?v=[AIV]{version}[/AIV]" rel="stylesheet"/>
+<link href="js/lib/d3-tip/d3-tip.css?v=[AIV]{version}[/AIV]" rel="stylesheet"/>
 
 <div class="container-fluid">
 
@@ -134,9 +134,9 @@ <h3>Advanced graph configurations</h3>
                             <tr ng-repeat="config in graphConfigs">
                                 <td width="20">
                                     <a href ng-click="goToGraphConfig(config)">
-                                        <img ng-if="config.startMode == 'search'" src="css/images/search.png" alt="" width="64" popover="Starting point - Search box" popover-trigger="mouseenter">
-                                        <img ng-if="config.startMode == 'node'" src="css/images/node.png" alt="" width="64" popover="Starting point - Fixed resource" popover-trigger="mouseenter">
-                                        <img ng-if="config.startMode == 'query'" src="css/images/query.png" alt="" width="64" popover="Starting point - Query results" popover-trigger="mouseenter">
+                                        <img ng-if="config.startMode == 'search'" src="css/images/search.png?v=[AIV]{version}[/AIV]" alt="" width="64" popover="Starting point - Search box" popover-trigger="mouseenter">
+                                        <img ng-if="config.startMode == 'node'" src="css/images/node.png?v=[AIV]{version}[/AIV]" alt="" width="64" popover="Starting point - Fixed resource" popover-trigger="mouseenter">
+                                        <img ng-if="config.startMode == 'query'" src="css/images/query.png?v=[AIV]{version}[/AIV]" alt="" width="64" popover="Starting point - Query results" popover-trigger="mouseenter">
                                     </a>
                                 </td>
                                 <td>

diff --git a/src/pages/import.html b/src/pages/import.html
@@ -1,4 +1,4 @@
-<link rel="stylesheet" type="text/css" href="css/import.css">
+<link rel="stylesheet" type="text/css" href="css/import.css?v=[AIV]{version}[/AIV]">
 
 <div id="wb-import">
     <h1>