Upgrade grakn client and implement explanation (#389)

## What is the goal of this PR?

Upgrade grakn client and implement explanation.

## What are the changes implemented in this PR?

- Upgrade grakn client
- Implement explanation.

VERSION

@@ -1 +1 @@
-2.0.0-alpha-3
+2.0.0

package.json

@@ -20,7 +20,7 @@
     "codemirror": "^5.59.4",
     "core-js": "^3.6.5",
     "electron-store": "^7.0.2",
-    "grakn-client": "https://repo.grakn.ai/repository/npm-snapshot/grakn-client/-/grakn-client-0.0.0-d985f5d5ec89719b69c66e6832633bae4ffaacac.tgz",
+    "grakn-client": "2.0.0",
     "jquery": "^3.6.0",
     "underscore": "^1.12.0",
     "vis": "^4.21.0-EOL",
@@ -58,5 +58,5 @@
     "type": "git",
     "url": "https://github.com/graknlabs/workbase.git"
   },
-  "version": "2.0.0"
+  "version": "2.0.0-alpha-3"
 }

src/components/SchemaDesign/LeftBar/NewAttributePanel.vue

@@ -430,7 +430,7 @@
           const superType = await tx.concepts().getAttributeType(val);
           this.valueType = superType.getValueType().toLowerCase();
           this.showDataTypeList = false;
-          this.supAttributes = await superType.asRemote(tx).getOwns().map(x => x.getLabel()).collect();
+          this.supAttributes = await superType.asRemote(tx).getOwns().map(x => x.getLabel().name()).collect();
           this.hasAttributes = this.hasAttributes.filter(x => !this.supAttributes.includes(x));
           tx.close();
         } else {

src/components/SchemaDesign/LeftBar/NewEntityPanel.vue

@@ -357,7 +357,7 @@
         if (val !== 'entity') { // if sup-typing an entity do not show inherited attributes in has panel to avoid duplicated attributes
           const tx = await this[OPEN_GRAKN_TX]();
           const superType = await tx.concepts().getEntityType(val);
-          this.supAttributes = await superType.asRemote(tx).getOwns().map(x => x.getLabel()).collect();
+          this.supAttributes = await superType.asRemote(tx).getOwns().map(x => x.getLabel().name()).collect();
           this.hasAttributes = this.hasAttributes.filter(x => !this.supAttributes.includes(x));
           tx.close();
         } else {

src/components/SchemaDesign/LeftBar/NewRelationPanel.vue

@@ -475,10 +475,10 @@
           const tx = await this[OPEN_GRAKN_TX]();
           const superType = await tx.concepts().getRelationType(val);
 
-          this.superRelatipnshipTypeRoles = await superType.asRemote(tx).getRelates().map(role => role.getLabel()).collect();
+          this.superRelatipnshipTypeRoles = await superType.asRemote(tx).getRelates().map(role => role.getLabel().name()).collect();
           this.overridenRoles.push(...this.superRelatipnshipTypeRoles.map(role => ({ label: role, override: false })));
 
-          this.supAttributes = await superType.asRemote(tx).getOwns().map(x => x.getLabel()).collect();
+          this.supAttributes = await superType.asRemote(tx).getOwns().map(x => x.getLabel().name()).collect();
           this.hasAttributes = this.hasAttributes.filter(x => !this.supAttributes.includes(x));
           tx.close();
         } else {

src/components/SchemaDesign/SchemaHandler.js

@@ -16,7 +16,7 @@
  *
  */
 
-import { AttributeType } from "grakn-client/concept/type/AttributeType";
+import { AttributeType } from "grakn-client/api/concept/type/AttributeType";
 const { ValueType } = AttributeType;
 
 let tx;
@@ -62,7 +62,7 @@ SchemaHandler.prototype.defineRule = async function define(ruleLabel, when, then
 SchemaHandler.prototype.deleteType = async function deleteType(schemaLabel) {
   const type = await tx.concepts().getThingType(schemaLabel);
   await type.asRemote(tx).delete();
-  return type.getLabel();
+  return type.getLabel().name();
 };
 
 SchemaHandler.prototype.addAttribute = async function addAttribute(schemaLabel, attributeLabel) {

src/components/SchemaDesign/SchemaUtils.js

@@ -41,19 +41,19 @@ export async function loadMetaTypeInstances(graknTx) {
 
   // Get types labels
   const metaTypeInstances = {};
-  metaTypeInstances.entities = await Promise.all(entities.map(type => type.getLabel()))
+  metaTypeInstances.entities = await Promise.all(entities.map(type => type.getLabel().name()))
     .then(labels => labels.filter(l => l !== 'entity')
       .concat()
       .sort());
-  metaTypeInstances.relations = await Promise.all(rels.map(async type => type.getLabel()))
+  metaTypeInstances.relations = await Promise.all(rels.map(async type => type.getLabel().name()))
     .then(labels => labels.filter(l => l && l !== 'relation')
       .concat()
       .sort());
-  metaTypeInstances.attributes = await Promise.all(attributes.map(type => type.getLabel()))
+  metaTypeInstances.attributes = await Promise.all(attributes.map(type => type.getLabel().name()))
     .then(labels => labels.filter(l => l !== 'attribute')
       .concat()
       .sort());
-  metaTypeInstances.roles = await Promise.all(roles.map(async type => type.getScopedLabel()))
+  metaTypeInstances.roles = await Promise.all(roles.map(async type => type.getLabel().scopedName()))
     .then(labels => labels.filter(l => l && l !== 'relation:role')
       .concat()
       .sort());
@@ -65,7 +65,7 @@ export async function computeAttributes(nodes, tx) {
   return Promise.all(nodes.map(async (node) => {
     const concept = await tx.concepts().getThingType(node.typeLabel);
     const attributes = await concept.asRemote(tx).getOwns().collect();
-    node.attributes = await Promise.all(attributes.map(async concept => ({ type: await concept.getLabel(), valueType: await concept.getValueType() })));
+    node.attributes = await Promise.all(attributes.map(async concept => ({ type: await concept.getLabel().name(), valueType: await concept.getValueType() })));
     return node;
   }));
 }
@@ -75,7 +75,7 @@ export async function computeRoles(nodes, tx) {
   return Promise.all(nodes.map(async (node) => {
     const concept = await tx.concepts().getThingType(node.typeLabel);
     const roles = await concept.asRemote(tx).getPlays().collect();
-    node.roles = await Promise.all(roles.map(concept => concept.getScopedLabel()));
+    node.roles = await Promise.all(roles.map(concept => concept.getLabel().scopedName()));
     return node;
   }));
 }

src/components/SchemaDesign/store/actions.js

@@ -41,7 +41,8 @@ import SchemaHandler from '../SchemaHandler';
 import { computeAttributes, computeRoles, loadMetaTypeInstances, updateNodePositions, } from '../SchemaUtils';
 import SchemaCanvasEventsHandler from '../SchemaCanvasEventsHandler';
 import CDB from '../../shared/CanvasDataBuilder';
-import { SessionType, TransactionType } from "grakn-client/GraknClient";
+import { SessionType } from "grakn-client/api/GraknSession";
+import { TransactionType } from "grakn-client/api/GraknTransaction";
 
 export default {
   async [OPEN_GRAKN_TX]({ commit }) {
@@ -373,10 +374,10 @@ export default {
         const rolePlayers = await role.asRemote(tx).getPlayers().collect();
 
         await Promise.all(rolePlayers.map(async (player) => {
-          await state.schemaHandler.deletePlaysRole(player.getLabel(), type.getLabel(), role.getLabel());
+          await state.schemaHandler.deletePlaysRole(player.getLabel().name(), type.getLabel().name(), role.getLabel().name());
         }));
 
-        await state.schemaHandler.deleteRelatesRole(type.getLabel(), role.getLabel());
+        await state.schemaHandler.deleteRelatesRole(type.getLabel().name(), role.getLabel().name());
       }));
     } else if (payload.baseType === 'ATTRIBUTE_TYPE') {
       const nodes = state.visFacade.getAllNodes();

src/components/Visualiser/ContextMenu.vue

@@ -18,7 +18,7 @@
 <template>
     <div v-show="contextMenu.show" ref="contextMenu" id="context-menu" class="z-depth-2">
         <li @click="(enableDelete) ? deleteNode() : false" class="context-action delete-nodes" :class="{'disabled':!enableDelete}">Hide</li>
-<!--        <li @click="(enableExplain) ? explainNode() : false" class="context-action explain-node" :class="{'disabled':!enableExplain}">Explain</li>-->
+        <li @click="(enableExplain) ? explainNode() : false" class="context-action explain-node" :class="{'disabled':!enableExplain}">Explain</li>
 <!--        <li @click="(enableShortestPath) ? computeShortestPath() : false" class="context-action compute-shortest-path" :class="{'disabled':!enableShortestPath}">Shortest Path</li>-->
     </div>
 </template>
@@ -51,7 +51,7 @@
         return (this.selectedNodes);
       },
       enableExplain() {
-        return (this.selectedNodes && this.selectedNodes[0].isInferred === true);
+        return (this.selectedNodes && this.selectedNodes[0].explainable && !this.selectedNodes[0].explanationExhausted);
       },
       enableShortestPath() {
         return (this.selectedNodes && this.selectedNodes.length === 2);

src/components/Visualiser/RightBar/ConceptInfoTab/RelationsPanel.vue

@@ -168,7 +168,7 @@
           let roles;
           if (node.iid) {
               const thing = await tx.concepts().getThing(node.iid);
-              roles = await thing.asRemote(tx).getPlays().collect();
+              roles = await thing.asRemote(tx).getPlaying().collect();
           } else if (node.typeLabel) {
               const thingType = await tx.concepts().getThingType(node.typeLabel);
               roles = await thingType.asRemote(tx).getPlays().collect();
@@ -178,11 +178,11 @@
           // Map roles to their respective relations and an empty array of other role players in that relation
           // Role => { relation, otherRolePlayers = [] }
           for (const role of roles) {
-              const roleLabel = role.getScopedLabel();
+              const roleLabel = role.getLabel().scopedName();
               if (!(roleLabel in this.relations)) {
                   this.relations.set(roleLabel, new Map());
                   (await role.asRemote(tx).getRelationTypes().collect()).forEach((x) => {
-                      this.relations.set(roleLabel, { relation: x.getLabel(), otherRolePlayers: [] });
+                      this.relations.set(roleLabel, { relation: x.getLabel().name(), otherRolePlayers: [] });
                   });
               }
           }
@@ -200,7 +200,7 @@
 
           if (node.iid) {
             concept = await tx.concepts().getThing(node.iid);
-            roles = await concept.asRemote(tx).getPlays().collect();
+            roles = await concept.asRemote(tx).getPlaying().collect();
           } else if (node.typeLabel) {
             concept = await tx.concepts().getThingType(node.typeLabel);
             roles = await concept.asRemote(tx).getPlays().collect();
@@ -209,7 +209,7 @@
           }
 
           // Get role concept of selected current role
-          const role = roles.find(r => r.getScopedLabel() === this.currentRole);
+          const role = roles.find(r => r.getLabel().scopedName() === this.currentRole);
 
           // For every relation, map relations to their respective rolePlayer and the role it plays
           if (node.iid) {
@@ -219,9 +219,9 @@
                   const rolePlayers = Array.from((await relation.asRemote(tx).getPlayersByRoleType()).entries());
                   await Promise.all(Array.from(rolePlayers, async ([role, setOfThings]) => {
                       // Do not include the current role
-                      if (role.getScopedLabel() !== this.currentRole) {
+                      if (role.getLabel().scopedName() !== this.currentRole) {
                           Array.from(setOfThings.values()).forEach((thing) => {
-                              this.relations.get(this.currentRole).otherRolePlayers.push({ role: role.getLabel(), player: `${thing.getType().getLabel()}: ${thing.getIID()}` });
+                              this.relations.get(this.currentRole).otherRolePlayers.push({ role: role.getLabel().name(), player: `${thing.getType().getLabel()}: ${thing.getIID()}` });
                           });
                       }
                   }));
@@ -231,10 +231,10 @@
               const roles = await relationType.asRemote(tx).getRelates().collect();
               roles[0].asRemote(tx).getPlayers();
               await Promise.all(roles.map(async role => {
-                  if (role.getScopedLabel() !== this.currentRole) {
+                  if (role.getLabel().scopedName() !== this.currentRole) {
                       const thingTypes = await role.asRemote(tx).getPlayers().collect();
                       thingTypes.forEach(thingType => {
-                          this.relations.get(this.currentRole).otherRolePlayers.push({ role: role.getLabel(), player: `${thingType.getLabel()}` });
+                          this.relations.get(this.currentRole).otherRolePlayers.push({ role: role.getLabel().name(), player: `${thingType.getLabel()}` });
                       });
                   }
               }));

src/components/Visualiser/RightBar/SettingsTab/DisplaySettingsPanel.vue

@@ -154,7 +154,7 @@
 
         const type = await tx.concepts().getThingType(this.currentType);
 
-        this.nodeAttributes = await Promise.all((await type.asRemote(tx).getOwns().collect()).map(type => type.getLabel()));
+        this.nodeAttributes = await Promise.all((await type.asRemote(tx).getOwns().collect()).map(type => type.getLabel().name()));
         this.nodeAttributes.sort();
         this.currentTypeSavedAttributes = DisplaySettings.getTypeLabels(this.currentType);
 

src/components/Visualiser/RightBar/SettingsTab/QuerySettings.js

@@ -39,6 +39,7 @@ function setQueryLimit(value) {
 // -------------- Relation Settings ------------ //
 
 const DEFAULT_ROLE_PLAYERS = true;
+const DEFAULT_REASONING = false;
 
 function setRolePlayersStatus(status) {
   storage.set('load_role_players', status);
@@ -53,6 +54,19 @@ function getRolePlayersStatus() {
   return rolePlayers;
 }
 
+function setReasoning(status) {
+  storage.set('reasoning', status);
+}
+
+function getReasoning() {
+  const reasoning = storage.get('reasoning');
+  if (reasoning == null) {
+    this.setReasoning(DEFAULT_REASONING);
+    return DEFAULT_REASONING;
+  }
+  return reasoning;
+}
+
 // -------------- Neighbor Settings ------------ //
 
 const DEFAULT_NEIGHBOUR_LIMIT = 20;
@@ -79,4 +93,6 @@ export default {
   getRolePlayersStatus,
   setNeighboursLimit,
   getNeighboursLimit,
+  setReasoning,
+  getReasoning,
 };

src/components/Visualiser/RightBar/SettingsTab/QuerySettingsPanel.vue

@@ -36,6 +36,10 @@
                 <h1 class="panel-label">Load Roleplayers:</h1>
                 <div class="panel-value load-roleplayers-switch"><vue-switch :isToggled="loadRolePlayers" v-on:toggled="updateLoadRoleplayers"></vue-switch></div>
             </div>
+            <div class="panel-content-item">
+                <h1 class="panel-label">Reasoning:</h1>
+                <div class="panel-value reasoning-switch"><vue-switch :isToggled="reasoning" v-on:toggled="updateReasoning"></vue-switch></div>
+            </div>
         </div>
         </div>
     </div>
@@ -44,6 +48,12 @@
 <script>
 
   import QueryUtils from './QuerySettings';
+  import { REOPEN_GLOBAL_GRAKN_TX } from '@/components/shared/StoresActions';
+  import { createNamespacedHelpers } from 'vuex';
+  import getters from "../../../Visualiser/store/getters";
+  import state from "../../../Visualiser/store/tabState";
+  import mutations from "../../../Visualiser/store/mutations";
+  import actions from "../../../Visualiser/store/actions";
 
   export default {
 
@@ -54,6 +64,19 @@
         queryLimit: QueryUtils.getQueryLimit(),
         neighboursLimit: QueryUtils.getNeighboursLimit(),
         loadRolePlayers: QueryUtils.getRolePlayersStatus(),
+        reasoning: QueryUtils.getReasoning(),
+      };
+    },
+    beforeCreate() {
+      if (!this.$store.state.hasOwnProperty('query-settings')) {
+        this.$store.registerModule('query-settings', { namespaced: true, getters, state, mutations, actions });
+      }
+      const { mapActions } = createNamespacedHelpers('query-settings');
+
+      // methods
+      this.$options.methods = {
+          ...(this.$options.methods || {}),
+          ...mapActions([REOPEN_GLOBAL_GRAKN_TX]),
       };
     },
     watch: {
@@ -71,6 +94,10 @@
       updateLoadRoleplayers(newVal) {
         QueryUtils.setRolePlayersStatus(newVal);
       },
+      updateReasoning(newVal) {
+        QueryUtils.setReasoning(newVal);
+        this[REOPEN_GLOBAL_GRAKN_TX]().catch((err) => { this.$notifyError(err, 'Failed to reopen transaction'); });
+      },
     },
   };
 </script>

src/components/Visualiser/TopBar/GraqlEditor/GraqlEditor.vue

@@ -181,7 +181,8 @@ import TypesContainer from '../TypesContainer';
 import ErrorContainer from '../ErrorContainer';
 import AddFavQuery from '../FavQueries/AddFavQuery';
 import ToolTip from '../../../UIElements/ToolTip';
-import { TransactionType } from "grakn-client/GraknClient";
+import { TransactionType } from "grakn-client/api/GraknTransaction";
+import { getTransactionOptions } from "../../../shared/SharedUtils";
 
 
 export default {
@@ -314,7 +315,7 @@ export default {
       else if (this.showSpinner) this.$notifyInfo('Please wait for action to complete');
       else {
         this[CANVAS_RESET]();
-        global.graknTx[this.$store.getters.activeTab] = await global.graknSession.transaction(TransactionType.READ);
+        global.graknTx[this.$store.getters.activeTab] = await global.graknSession.transaction(TransactionType.READ, getTransactionOptions());
       }
     },
     toggleAddFavQuery() {