Better handle json in explain (#497)

* copy the JSON output as json keys * sort the json keys! * refactoring to clean up the qode! * jshint Co-authored-by: [email protected] <>
o19s · Apr 21, 2022 · 8c40168 · 8c40168
1 parent 4efe49d
commit 8c40168
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/app/assets/javascripts/components/query_explain/_modal.html b/app/assets/javascripts/components/query_explain/_modal.html
@@ -7,20 +7,20 @@ <h3 class="modal-title">Explain Query Parsing</h3>
   <p>These are details returned from the search engine on how it processed the input query</p>
 
   <uib-tabset active="active">
-    <uib-tab index="0" heading="Params">
+    <uib-tab index="0" heading="Params" ng-click="ctrl.toggleParams = true">
       <p class='bg-warning text-warning padded-text' ng-show="ctrl.queryDetailsMessage">
         <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
         {{ctrl.queryDetailsMessage}}
       </p>
       <span ng-show="!ctrl.queryDetailsMessage">
-        <p>These are the query parameters sent to the search engine.</p>
+        <p>These are the query parameters processed by the search engine.</p>
         <json-explorer
           json-data="ctrl.queryDetails"
           collapsed="false">
         </json-explorer>
       </span>
     </uib-tab>
-    <uib-tab index="1" heading="Parsing" disable="false">
+    <uib-tab index="1" heading="Parsing" disable="false"  ng-click="ctrl.toggleParams = false">
       <p>This is how the search engine parsed the query.</p>
       <json-explorer
         json-data="ctrl.parsedQueryDetails"
@@ -31,5 +31,7 @@ <h3 class="modal-title">Explain Query Parsing</h3>
 </div>
 
 <div class="modal-footer">
-  <button class="btn btn-default" ng-click="ctrl.cancel()">Close</button>
+  <button class="btn btn-default float-left" ng-show="ctrl.toggleParams === true" ng-click="ctrl.cancel()" ngclipboard data-clipboard-text="{{ctrl.queryDetails}}"><i class="glyphicon glyphicon-copy"></i> Copy</button>
+  <button class="btn btn-default float-left" ng-show="ctrl.toggleParams === false" ng-click="ctrl.cancel()" ngclipboard data-clipboard-text="{{ctrl.parsedQueryDetails}}"><i class="glyphicon glyphicon-copy"></i> Copy</button>
+  <button class="btn btn-default btn-primary" ng-click="ctrl.cancel()">Close</button>
 </div>
diff --git a/app/assets/javascripts/components/query_explain/query_explain_modal_instance_controller.js b/app/assets/javascripts/components/query_explain/query_explain_modal_instance_controller.js
@@ -10,9 +10,19 @@ angular.module('QuepidApp')
     ) {
       var ctrl = this;
 
+      // default to showing the params toggle.
+      ctrl.toggleParams = true;
+
       ctrl.query = query;
 
-      ctrl.parsedQueryDetails = angular.toJson(query.searcher.parsedQueryDetails, true);
+      ctrl.sortJsonByKeys = function (obj) {
+        var sortedJsonKeys = Object.keys(obj).sort();
+        var tempObj = {};
+        sortedJsonKeys.map(key => tempObj[key] = obj[key]);
+        return angular.toJson(tempObj, true);
+      };
+
+      ctrl.parsedQueryDetails = ctrl.sortJsonByKeys(query.searcher.parsedQueryDetails);
 
       ctrl.queryDetailsMessage = null;
       // Only solr has this, not ES.  So a check if it exists.  It may just be empty {}.
@@ -21,7 +31,7 @@ angular.module('QuepidApp')
           ctrl.queryDetailsMessage = 'The list of query parameters used to construct the query was not returned by Solr.';
         }
         else {
-          ctrl.queryDetails = angular.toJson(query.searcher.queryDetails, true);
+          ctrl.queryDetails = ctrl.sortJsonByKeys(query.searcher.queryDetails);
         }
       }
       else {