@pie-api/pie-api-live-components - npm Package Compare versions

Comparing version 1.18.3 to 1.19.0

CHANGELOG.md

@@ -0,1 +1,8 @@
+# [1.19.0](https://github.com/key-data-systems/pie-api-live-components/compare/v1.18.3...v1.19.0) (2020-11-06)
+
+
+### Features
+
+* lazy load for subscriptions ([67474f4](https://github.com/key-data-systems/pie-api-live-components/commit/67474f45be5f4bffd2a0f84376fe9f1ae0071902))
+
 ## [1.18.3](https://github.com/key-data-systems/pie-api-live-components/compare/v1.18.2...v1.18.3) (2020-10-27)
@@ -2,0 +9,0 @@

dist/cjs/item-metadata.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-27b55761.js');
+const index = require('./index-c3188cb5.js');
 
@@ -8,0 +8,0 @@ class ItemMetadata {

dist/cjs/loader.cjs.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-27b55761.js');
+const index = require('./index-c3188cb5.js');
 
@@ -11,3 +11,3 @@ const defineCustomElements = (win, options) => {
   return index.patchEsm().then(() => {
-  return index.bootstrapLazy([["pie-live-session.cjs",[[1,"pie-live-session",{"sessionId":[513,"session-id"],"token":[1],"client":[16],"apiUrl":[1,"api-url"],"metadata":[16],"lazyLoad":[4,"lazy-load"],"loadingIndicator":[4,"loading-indicator"],"sessionData":[32],"lazyItemsCanBeLoaded":[32]}]]],["item-metadata.cjs",[[0,"item-metadata",{"_key":[1,"key"],"attribute":[1]}]]],["pie-api-live.cjs",[[0,"pie-api-live",{"metadata":[16],"token":[1],"host":[1],"apiUrl":[1,"api-url"],"liveUrl":[1,"live-url"],"hostUrl":[1,"host-url"],"lazyLoad":[4,"lazy-load"],"loadingIndicator":[4,"loading-indicator"]},[[0,"attachSession","handleLiveSessionAdded"]]]]],["pie-response.cjs",[[1,"pie-response",{"sessionData":[8,"session-data"],"multiPart":[4,"multi-part"]}]]],["pie-response-cell.cjs",[[1,"pie-response-cell",{"sessionData":[8,"session-data"],"multiPart":[4,"multi-part"]}]]],["loading-indicator.cjs",[[1,"loading-indicator",{"progressAmount":[1,"progress-amount"],"progressColor":[1,"progress-color"]}]]]], options);
+  return index.bootstrapLazy([["pie-live-session.cjs",[[1,"pie-live-session",{"token":[1],"flags":[16],"sessionId":[513,"session-id"],"apiUrl":[1,"api-url"],"client":[16],"lazyLoad":[4,"lazy-load"],"loadingIndicator":[4,"loading-indicator"],"metadata":[16],"sessionData":[32],"flagValues":[32],"loadSessionContentEnabled":[32],"lazyItemsCanBeLoaded":[32]}]]],["item-metadata.cjs",[[0,"item-metadata",{"_key":[1,"key"],"attribute":[1]}]]],["pie-api-live.cjs",[[0,"pie-api-live",{"flags":[16],"token":[1],"host":[1],"apiUrl":[1,"api-url"],"hostUrl":[1,"host-url"],"liveUrl":[1,"live-url"],"lazyLoad":[4,"lazy-load"],"loadingIndicator":[4,"loading-indicator"],"metadata":[16]},[[0,"attachSession","handleLiveSessionAdded"]]]]],["pie-response.cjs",[[1,"pie-response",{"sessionData":[8,"session-data"],"multiPart":[4,"multi-part"]}]]],["pie-response-cell.cjs",[[1,"pie-response-cell",{"sessionData":[8,"session-data"],"multiPart":[4,"multi-part"]}]]],["loading-indicator.cjs",[[1,"loading-indicator",{"progressAmount":[1,"progress-amount"],"progressColor":[1,"progress-color"]}]]]], options);
   });
@@ -14,0 +14,0 @@ };

dist/cjs/loading-indicator.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-27b55761.js');
+const index = require('./index-c3188cb5.js');
 
@@ -8,0 +8,0 @@ const loadingIndicatorCss = ".lds-ring{display:inline-block;position:relative;width:var(--pie-live-session-cell-height, 40px);height:var(--pie-live-session-cell-height, 40px);margin:8px}.lds-ring div{box-sizing:border-box;display:block;position:absolute;width:calc(var(--pie-live-session-cell-height, 40px) * 0.8);height:calc(var(--pie-live-session-cell-height, 40px) * 0.8);margin:calc(var(--pie-live-session-cell-height, 40px) * 0.1);border:calc(var(--pie-live-session-cell-height, 40px) * 0.1) solid var(--pie-live-session-background-color, grey);border-radius:50%;animation:lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;border-color:var(--pie-live-session-background-color, grey) transparent transparent transparent}.lds-ring div:nth-child(1){animation-delay:-0.45s}.lds-ring div:nth-child(2){animation-delay:-0.3s}.lds-ring div:nth-child(3){animation-delay:-0.15s}@keyframes lds-ring{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";

dist/cjs/pie-api-live.cjs.js

 'use strict';
 
-const index = require('./index-27b55761.js');
+const index = require('./index-c3188cb5.js');
 
 index.patchBrowser().then(options => {
-  return index.bootstrapLazy([["pie-live-session.cjs",[[1,"pie-live-session",{"sessionId":[513,"session-id"],"token":[1],"client":[16],"apiUrl":[1,"api-url"],"metadata":[16],"lazyLoad":[4,"lazy-load"],"loadingIndicator":[4,"loading-indicator"],"sessionData":[32],"lazyItemsCanBeLoaded":[32]}]]],["item-metadata.cjs",[[0,"item-metadata",{"_key":[1,"key"],"attribute":[1]}]]],["pie-api-live.cjs",[[0,"pie-api-live",{"metadata":[16],"token":[1],"host":[1],"apiUrl":[1,"api-url"],"liveUrl":[1,"live-url"],"hostUrl":[1,"host-url"],"lazyLoad":[4,"lazy-load"],"loadingIndicator":[4,"loading-indicator"]},[[0,"attachSession","handleLiveSessionAdded"]]]]],["pie-response.cjs",[[1,"pie-response",{"sessionData":[8,"session-data"],"multiPart":[4,"multi-part"]}]]],["pie-response-cell.cjs",[[1,"pie-response-cell",{"sessionData":[8,"session-data"],"multiPart":[4,"multi-part"]}]]],["loading-indicator.cjs",[[1,"loading-indicator",{"progressAmount":[1,"progress-amount"],"progressColor":[1,"progress-color"]}]]]], options);
+  return index.bootstrapLazy([["pie-live-session.cjs",[[1,"pie-live-session",{"token":[1],"flags":[16],"sessionId":[513,"session-id"],"apiUrl":[1,"api-url"],"client":[16],"lazyLoad":[4,"lazy-load"],"loadingIndicator":[4,"loading-indicator"],"metadata":[16],"sessionData":[32],"flagValues":[32],"loadSessionContentEnabled":[32],"lazyItemsCanBeLoaded":[32]}]]],["item-metadata.cjs",[[0,"item-metadata",{"_key":[1,"key"],"attribute":[1]}]]],["pie-api-live.cjs",[[0,"pie-api-live",{"flags":[16],"token":[1],"host":[1],"apiUrl":[1,"api-url"],"hostUrl":[1,"host-url"],"liveUrl":[1,"live-url"],"lazyLoad":[4,"lazy-load"],"loadingIndicator":[4,"loading-indicator"],"metadata":[16]},[[0,"attachSession","handleLiveSessionAdded"]]]]],["pie-response.cjs",[[1,"pie-response",{"sessionData":[8,"session-data"],"multiPart":[4,"multi-part"]}]]],["pie-response-cell.cjs",[[1,"pie-response-cell",{"sessionData":[8,"session-data"],"multiPart":[4,"multi-part"]}]]],["loading-indicator.cjs",[[1,"loading-indicator",{"progressAmount":[1,"progress-amount"],"progressColor":[1,"progress-color"]}]]]], options);
 });

dist/cjs/pie-response-cell.cjs.entry.js

@@ -5,4 +5,4 @@ 'use strict';
 
-const index = require('./index-27b55761.js');
-const responseLoader = require('./response-loader-ac72ae32.js');
+const index = require('./index-c3188cb5.js');
+const responseLoader = require('./response-loader-7436ab7a.js');
 
@@ -9,0 +9,0 @@ /**

dist/cjs/pie-response.cjs.entry.js

@@ -5,4 +5,4 @@ 'use strict';
 
-const index = require('./index-27b55761.js');
-const responseLoader = require('./response-loader-ac72ae32.js');
+const index = require('./index-c3188cb5.js');
+const responseLoader = require('./response-loader-7436ab7a.js');
 
@@ -9,0 +9,0 @@ /**

dist/collection/components/pie-api-live/pie-api-live.js

@@ -12,61 +12,55 @@ import { Component, Prop, h, Watch, Host, Listen, Event, } from "@stencil/core";
 };
-const mainGQLHOST = {
-    dev: process.env.GQL_DEV,
-    qa: process.env.GQL_QA,
-    stage: process.env.GQL_STAGE,
-    prod: process.env.GQL_PROD,
-};
 export class PieApiLive {
     constructor() {
         /**
-         * If pie-live-session items should be lazy loaded
+         * String with an array of flags to be used, delimited by ";"
+         *
+         * e.g.: flags="enable-watch-session;another-flag;"
          */
+        this.flags = '';
+        /**
+         * If pie-live-session items should be lazy loaded.
+         */
         this.lazyLoad = true;
         /**
-         * If loading indicator should show up while the item is loading
+         * If loading indicator should show up while the item is loading.
          */
         this.loadingIndicator = true;
     }
-    getLiveHost() {
-        // host for live server
-        // default is production
-        let host = environmentVariables.prod;
-        if (this.host) {
-            host = environmentVariables[this.host];
-        }
-        return host;
+    watchChange() {
+        this.initClient();
     }
-    getGQLHost() {
-        // host for main gql server
-        // default is production
-        let host = mainGQLHOST.prod;
-        if (this.host) {
-            host = mainGQLHOST[this.host];
-        }
-        return host;
+    watchFlags() {
     }
+    handleLiveSessionAdded(ev) {
+        // do not change the order of the assignations
+        // these are important as how they are used in pie-live-session @watch
+        ev.target.flags = this.flags;
+        ev.target.lazyLoad = this.lazyLoad;
+        ev.target.loadingIndicator = this.loadingIndicator;
+        ev.target.token = this.token;
+        ev.target.metadata = this.metadata;
+        ev.target.client = this.gqlClient;
+        ev.target.apiUrl = this.apiUrl;
+    }
     initClient() {
-        const liveHost = this.getLiveHost();
-        const gqlHost = this.getGQLHost();
-        // set live server host
-        let liveUri = `wss://${liveHost}`;
-        if (this.liveUrl) {
-            liveUri = this.liveUrl;
-        }
-        // set main gql host
-        if (this.hostUrl) {
-            this.apiUrl = this.hostUrl;
-        }
-        else {
-            this.apiUrl = `https://${gqlHost}/services/graphql?token=${this.token}`;
-        }
-        // set gql client
-        // TODO handle token
-        if (!this.gqlClient && liveUri && this.token) {
+        // set LIVE SERVER HOST (for subscriptions)
+        if (!this.gqlClient && this.token) {
+            // default is production
+            let liveUri = `wss://${environmentVariables.prod}`;
+            // if host property is defined, determine live server using that value
+            if (this.host) {
+                liveUri = `wss://${environmentVariables[this.host]}`;
+            }
+            // if live server CUSTOM host property is defined, use that value
+            if (this.liveUrl) {
+                liveUri = this.liveUrl;
+            }
+            // set GQL CLIENT
             const wsLink = new WebSocketLink({
                 uri: `${liveUri}?token=${this.token}`,
+                webSocketImpl: WebSocket,
                 options: {
                     reconnect: true,
-                },
-                webSocketImpl: WebSocket,
+                }
             });
@@ -78,2 +72,19 @@ this.gqlClient = new ApolloClient({
         }
+        // set MAIN GQL HOST (non-subscription requests; used to load items)
+        if (this.hostUrl) {
+            this.apiUrl = this.hostUrl;
+        }
+        else {
+            const mainGQLHOST = {
+                dev: process.env.GQL_DEV,
+                qa: process.env.GQL_QA,
+                stage: process.env.GQL_STAGE,
+                prod: process.env.GQL_PROD,
+            };
+            let host = mainGQLHOST.prod;
+            if (this.host) {
+                host = mainGQLHOST[this.host];
+            }
+            this.apiUrl = `https://${host}/services/graphql?token=${this.token}`;
+        }
     }
@@ -83,3 +94,3 @@ componentWillLoad() {
     }
-    connectedCallBack() {
+    connectedCallback() {
         this.initClient();
@@ -90,4 +101,3 @@ }
             await this.gqlClient.stop();
-            const sc = this.gqlClient.link
-                .subscriptionClient;
+            const sc = this.gqlClient.link.subscriptionClient;
             sc.close(true);
@@ -97,22 +107,2 @@ this.gqlClient = null;
     }
-    watchToken() {
-        this.initClient();
-    }
-    watchHost() {
-        this.initClient();
-    }
-    watchLiveUrl() {
-        this.initClient();
-    }
-    watchHostUrl() {
-        this.initClient();
-    }
-    handleLiveSessionAdded(ev) {
-        ev.target.token = this.token;
-        ev.target.client = this.gqlClient;
-        ev.target.apiUrl = this.apiUrl;
-        ev.target.metadata = this.metadata;
-        ev.target.lazyLoad = this.lazyLoad;
-        ev.target.loadingIndicator = this.loadingIndicator;
-    }
     render() {
@@ -129,12 +119,11 @@ return h(Host, { connected: this.gqlClient ? "true" : "false" });
     static get properties() { return {
-        "metadata": {
+        "flags": {
             "type": "unknown",
             "mutable": false,
             "complexType": {
-                "original": "MetadataProperty[]",
-                "resolved": "MetadataProperty[]",
+                "original": "String",
+                "resolved": "String",
                 "references": {
-                    "MetadataProperty": {
-                        "location": "import",
-                        "path": "../../types"
+                    "String": {
+                        "location": "global"
                     }
@@ -147,4 +136,5 @@ }
                 "tags": [],
-                "text": "An array of MetadataProperties to be extracted from Item and added to `pie-live-session` elements as attributes.\n\nIf no value is found for the provided key on an item, the attribute will not be set.\n\nThis property must be set before adding any child `<pie-live-session>` elements.\n\n```\n[\n   {\n     key:\"metadata_key\",\n     attribute: \"attribute-name\"\n   }\n]\n```\n\nThis property can alternatively be set declaritively in html using `<item-metadata key=\"foo\" attribute-name=\"foo-value\">` as a child\nelement of `<pie-api-live>` before any `<pie-live-session>` elements."
-            }
+                "text": "String with an array of flags to be used, delimited by \";\"\n\ne.g.: flags=\"enable-watch-session;another-flag;\""
+            },
+            "defaultValue": "''"
         },
@@ -163,3 +153,3 @@ "token": {
                 "tags": [],
-                "text": "The api token for pie-api\nThe token must have the `live` scope"
+                "text": "The api token for pie-api.\nThe token must have the `live` scope."
             },
@@ -181,3 +171,3 @@ "attribute": "token",
                 "tags": [],
-                "text": "The pie-api-live host.\ne.g. `qa`, `dev`, `prod`, `stage`"
+                "text": "The pie-api-live host (environment) - used to determine both graphql (non-subscriptions) and live (subscriptions) hosts.\nOne of: `qa`, `dev`, `prod`, `stage`.\n\ne.g.: if host = 'qa' => apiUrl = https://qa.pie-api.io/services/graphql?token=..., webSocket connection to wss://qa-live.pie-api.com/"
             },
@@ -202,3 +192,3 @@ "attribute": "host",
                     }],
-                "text": "The main graphql host."
+                "text": "The main graphql url for non-subscription requests. Used to load items.\n\ne.g.: if host = 'qa' => apiUrl = https://qa.pie-api.io/services/graphql?token=..."
             },
@@ -208,3 +198,3 @@ "attribute": "api-url",
         },
-        "liveUrl": {
+        "hostUrl": {
             "type": "string",
@@ -224,8 +214,8 @@ "mutable": false,
                     }],
-                "text": "The live server CUSTOM host. If present, overrides the live server host.\ne.g.: `wss://qa-live.pie-api.com/`"
+                "text": "The main graphql CUSTOM host. If present, overrides the main graphql server host.\n\ne.g.: `https://qa.pie-api.io/services/graphql`"
             },
-            "attribute": "live-url",
+            "attribute": "host-url",
             "reflect": false
         },
-        "hostUrl": {
+        "liveUrl": {
             "type": "string",
@@ -245,5 +235,5 @@ "mutable": false,
                     }],
-                "text": "The main graphql CUSTOM host. If present, overrides the main gql server host.\ne.g.: `https://qa.pie-api.io/services/graphql`"
+                "text": "The live server CUSTOM host. If present, overrides the live (subscriptions) server host.\n\ne.g.: `wss://qa-live.pie-api.com/`"
             },
-            "attribute": "host-url",
+            "attribute": "live-url",
             "reflect": false
@@ -263,3 +253,3 @@ },
                 "tags": [],
-                "text": "If pie-live-session items should be lazy loaded"
+                "text": "If pie-live-session items should be lazy loaded."
             },
@@ -282,3 +272,3 @@ "attribute": "lazy-load",
                 "tags": [],
-                "text": "If loading indicator should show up while the item is loading"
+                "text": "If loading indicator should show up while the item is loading."
             },
@@ -288,2 +278,22 @@ "attribute": "loading-indicator",
             "defaultValue": "true"
+        },
+        "metadata": {
+            "type": "unknown",
+            "mutable": false,
+            "complexType": {
+                "original": "MetadataProperty[]",
+                "resolved": "MetadataProperty[]",
+                "references": {
+                    "MetadataProperty": {
+                        "location": "import",
+                        "path": "../../types"
+                    }
+                }
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": "An array of MetadataProperties to be extracted from Item and added to `pie-live-session` elements as attributes.\n\nIf no value is found for the provided key on an item, the attribute will not be set.\n\nThis property must be set before adding any child `<pie-live-session>` elements.\n\n```\n[\n   {\n     key:\"metadata_key\",\n     attribute: \"attribute-name\"\n   }\n]\n```\n\nThis property can alternatively be set declaritively in html using `<item-metadata key=\"foo\" attribute-name=\"foo-value\">` as a child\nelement of `<pie-api-live>` before any `<pie-live-session>` elements."
+            }
         }
@@ -309,12 +319,15 @@ }; }
             "propName": "token",
-            "methodName": "watchToken"
+            "methodName": "watchChange"
         }, {
-            "propName": "token",
-            "methodName": "watchHost"
+            "propName": "host",
+            "methodName": "watchChange"
         }, {
             "propName": "liveUrl",
-            "methodName": "watchLiveUrl"
+            "methodName": "watchChange"
         }, {
             "propName": "hostUrl",
-            "methodName": "watchHostUrl"
+            "methodName": "watchChange"
+        }, {
+            "propName": "flags",
+            "methodName": "watchFlags"
         }]; }
@@ -321,0 +334,0 @@ static get listeners() { return [{

dist/collection/components/pie-live-session/pie-live-session.js

 import { Component, Prop, h, Watch, Event, State, Host, Element } from '@stencil/core';
 import gql from 'graphql-tag';
 import { loadSessionContentItem } from '../../load-config';
+const watchSessionFlag = 'enable-watch-session';
+const watchSessionSubscriptionQuery = gql `
+        subscription watchSession($id: ID! ) {
+            watchSession(id:$id) {
+                item {
+                    id
+                    config
+		            metadata
+                }
+                firstLoad
+                session {
+                    data
+                    autoScore
+                    manualScore
+                    mode
+                    id
+                    contentItemId
+                    createdAt
+                }
+            }               
+        }
+    `;
+const onLatestSaveEventSubscriptionQuery = gql `
+        subscription onLatestSaveEvent($ids: [ID]!, $virtualController: String) {
+            onLatestSave(ids:$ids, virtualController: $virtualController) {
+                data
+                autoScore
+                manualScore
+                mode
+                id
+                contentItemId
+                createdAt
+            }
+        }
+    `;
 export class PieLiveSession {
     constructor() {
         this.sessionEvents = [];
-        this.subscriptionQuery = gql `subscription onLatestSaveEvent($ids: [ID]!, $virtualController: String) {
-    onLatestSave(ids:$ids, virtualController: $virtualController) {
-      data
-      autoScore
-      manualScore
-      mode
-      id
-      contentItemId
-      createdAt
-    }               
-  }`;
-        this.sessionData = {
-            loaded: false,
-        };
-        this.onIntersection = async (entries) => {
-            for (const entry of entries) {
-                if (entry.isIntersecting) {
-                    if (this.observer) {
-                        this.observer.disconnect();
-                    }
-                    this.lazyItemsCanBeLoaded = this.lazyLoad;
-                    this.updateItemInfo();
-                }
-            }
-        };
+        this.sessionData = { loaded: false };
+        this.loadSessionContentEnabled = true;
+        /**
+         * String with an array of flags to be used, delimited by ";"
+         */
+        this.flags = '';
     }
-    watchSessionId(newVal, oldVal) {
-        newVal && this.attachSession.emit(this.sessionId);
-        if (newVal && (newVal !== oldVal)) {
+    watchSessionId(newSessionId, oldSessionId) {
+        if (newSessionId && (newSessionId !== oldSessionId)) {
+            this.attachSession.emit(this.sessionId);
             this.itemConfig = null;
-            this.loadItemContent();
+            // re-load item
+            if (this.loadSessionContentEnabled) {
+                this.loadItemContent();
+            }
+            // re-start subscriptions
             if (this.client) {
-                this.stopSubscription();
-                this.startSubscription();
+                this.restartSubscription();
             }
         }
     }
-    async updateItemInfo() {
-        if (this.token && this.sessionId && this.apiUrl && !this.updateItemInfoInProgress && this.lazyLoad !== undefined) {
-            if (!this.lazyLoad || (this.lazyLoad && this.lazyItemsCanBeLoaded)) {
+    watchFlags(newFlags, oldFlags) {
+        var _a;
+        if (newFlags && newFlags !== oldFlags) {
+            this.flagValues = newFlags.split(";");
+            this.loadSessionContentEnabled = !((_a = this.flagValues) === null || _a === void 0 ? void 0 : _a.includes(watchSessionFlag));
+        }
+    }
+    watchMetadataAndToken(newVal, oldVal) {
+        if (newVal && newVal !== oldVal) {
+            this.updateItemInfo();
+            if (this._subscription) {
+                this.restartSubscription();
+            }
+        }
+    }
+    watchClient() {
+        if (this.canLoadItems()) {
+            this.restartSubscription();
+        }
+    }
+    updateItemInfo() {
+        if (this.loadSessionContentEnabled) {
+            const allRequiredData = this.token && this.sessionId && this.apiUrl;
+            const isLoading = this.updateItemInfoInProgress;
+            if (allRequiredData && !isLoading && this.canLoadItems()) {
                 this.loadItemContent();
@@ -51,4 +92,20 @@ }
     }
-    async watchLazyLoad() {
+    restartSubscription() {
+        this.stopSubscription();
+        this.startSubscription();
     }
+    canLoadItems() {
+        if (this.lazyLoad !== undefined) {
+            if (this.lazyLoad === false) {
+                return true;
+            }
+            if (this.lazyLoad === true) {
+                return this.lazyItemsCanBeLoaded;
+            }
+        }
+        else {
+            return true;
+        }
+        return false;
+    }
     async loadItemContent() {
@@ -58,10 +115,5 @@ this.updateItemInfoInProgress = true;
             const result = await loadSessionContentItem(this.token, this.sessionId, this.apiUrl, this.metadata);
-            this.itemConfig = result.config;
-            this.metadataValues = result.metadata;
-            this.sessionData.data = result.data;
-            this.sessionData.timestamp = result.timestamp;
-            this.sessionData = Object.assign(Object.assign({}, this.sessionData), { itemConfig: this.itemConfig });
-            if (this.sessionData.data && this.sessionData.data.length > 0) {
-                this.sessionData.score = result.score;
-            }
+            this.setItemConfig(result === null || result === void 0 ? void 0 : result.config);
+            this.setMetadata(result === null || result === void 0 ? void 0 : result.metadata);
+            this.setSessionData(result === null || result === void 0 ? void 0 : result.data, result === null || result === void 0 ? void 0 : result.timestamp, result === null || result === void 0 ? void 0 : result.score);
         }
@@ -73,37 +125,82 @@ catch (e) {
     }
-    onPropsChange() {
-        this.stopSubscription();
-        this.startSubscription();
+    setItemConfig(config) {
+        this.itemConfig = config;
     }
+    setMetadata(metadata) {
+        this.metadataValues = metadata;
+    }
+    setSessionData(data, timestamp, score) {
+        this.sessionData.data = data;
+        this.sessionData.timestamp = timestamp;
+        this.sessionData = Object.assign(Object.assign({}, this.sessionData), { itemConfig: this.itemConfig });
+        if (this.sessionData.data && this.sessionData.data.length > 0) {
+            this.sessionData.score = score;
+        }
+    }
+    setLastSessionEvent(session, createdAt) {
+        this.lastSessionEvent = session;
+        this.lastSessionEvent.timestamp = createdAt;
+        this.lastSessionEvent.score = session.manualScore || session.autoScore;
+        this.lastSessionEvent.sessionId = session.id;
+    }
+    sessionDataIsValid(timestamp, data) {
+        var _a;
+        if (!timestamp) {
+            console.error(`no createdAt returned for event`);
+            return false;
+        }
+        if (this.lastSessionEvent && (new Date(timestamp) < new Date((_a = this.lastSessionEvent) === null || _a === void 0 ? void 0 : _a.timestamp))) {
+            return false;
+        }
+        return (data === null || data === void 0 ? void 0 : data.length) !== 0;
+    }
     startSubscription() {
         if (this.client) {
-            this._subscription = this.client.subscribe({
-                query: this.subscriptionQuery,
-                variables: { ids: [this.sessionId], virtualController: 'version:2' },
-            }).subscribe(result => {
-                var _a, _b, _c;
-                const resultDataLatestSave = (_a = result === null || result === void 0 ? void 0 : result.data) === null || _a === void 0 ? void 0 : _a.onLatestSave;
-                const createdAt = resultDataLatestSave === null || resultDataLatestSave === void 0 ? void 0 : resultDataLatestSave.createdAt;
-                if (!createdAt) {
-                    console.error(`no timestamp returned for event`);
-                    return;
-                }
-                if (this.lastSessionEvent && (new Date(createdAt) < new Date((_b = this.lastSessionEvent) === null || _b === void 0 ? void 0 : _b.timestamp))) {
-                    return;
-                }
-                if (((_c = resultDataLatestSave === null || resultDataLatestSave === void 0 ? void 0 : resultDataLatestSave.data) === null || _c === void 0 ? void 0 : _c.length) === 0) {
-                    return;
-                }
-                this.lastSessionEvent = resultDataLatestSave;
-                this.lastSessionEvent.timestamp = createdAt;
-                this.lastSessionEvent.score = resultDataLatestSave.manualScore || resultDataLatestSave.autoScore;
-                this.lastSessionEvent.sessionId = resultDataLatestSave.id;
-                this.sessionData.loaded = true;
-                if (!this.itemConfig) {
-                    this.updateItemInfo();
-                }
-                this.sessionData = Object.assign(Object.assign({}, this.sessionData), this.lastSessionEvent);
-                this.sessionEvents.push(this.lastSessionEvent);
-                this.eventReceived.emit(this.lastSessionEvent);
-            });
+            if (this.loadSessionContentEnabled) {
+                this._subscription = this.client.subscribe({
+                    query: onLatestSaveEventSubscriptionQuery,
+                    variables: { ids: [this.sessionId], virtualController: 'version:2' },
+                }).subscribe(result => {
+                    var _a;
+                    const resultDataLatestSave = (_a = result === null || result === void 0 ? void 0 : result.data) === null || _a === void 0 ? void 0 : _a.onLatestSave;
+                    const createdAt = resultDataLatestSave === null || resultDataLatestSave === void 0 ? void 0 : resultDataLatestSave.createdAt;
+                    if (!this.sessionDataIsValid(createdAt, resultDataLatestSave === null || resultDataLatestSave === void 0 ? void 0 : resultDataLatestSave.data)) {
+                        return;
+                    }
+                    this.setLastSessionEvent(resultDataLatestSave, createdAt);
+                    if (!this.itemConfig) {
+                        this.updateItemInfo();
+                    }
+                    this.sessionData = Object.assign(Object.assign({}, this.sessionData), this.lastSessionEvent);
+                    this.sessionData.loaded = true;
+                    this.sessionEvents.push(this.lastSessionEvent);
+                    this.eventReceived.emit(this.lastSessionEvent);
+                });
+            }
+            else {
+                this.updateItemInfoInProgress = true;
+                this._subscription = this.client.subscribe({
+                    query: watchSessionSubscriptionQuery,
+                    variables: { id: this.sessionId },
+                }).subscribe(result => {
+                    var _a;
+                    const watchSessionData = (_a = result === null || result === void 0 ? void 0 : result.data) === null || _a === void 0 ? void 0 : _a.watchSession;
+                    const { firstLoad, item, session } = watchSessionData || {};
+                    const { createdAt, data } = session || {};
+                    if (firstLoad) {
+                        this.setItemConfig(item === null || item === void 0 ? void 0 : item.config);
+                        this.setMetadata(item === null || item === void 0 ? void 0 : item.metadata);
+                        this.setSessionData(session === null || session === void 0 ? void 0 : session.data, createdAt, session === null || session === void 0 ? void 0 : session.score);
+                        this.updateItemInfoInProgress = false;
+                    }
+                    if (!this.sessionDataIsValid(createdAt, data)) {
+                        return;
+                    }
+                    this.setLastSessionEvent(session, createdAt);
+                    this.sessionData = Object.assign(Object.assign(Object.assign({}, this.sessionData), this.lastSessionEvent), { itemConfig: this.itemConfig });
+                    this.sessionData.loaded = true;
+                    this.sessionEvents.push(this.lastSessionEvent);
+                    this.eventReceived.emit(this.lastSessionEvent);
+                });
+            }
         }
@@ -120,9 +217,37 @@ else {
     async componentWillLoad() {
-        this.sessionId && this.attachSession.emit(this.sessionId);
-        this.sessionId && this.updateItemInfo();
+        var _a;
+        if (this.flags) {
+            this.flagValues = this.flags.split(";");
+            this.loadSessionContentEnabled = !((_a = this.flagValues) === null || _a === void 0 ? void 0 : _a.includes(watchSessionFlag));
+        }
+        if (this.sessionId) {
+            this.attachSession.emit(this.sessionId);
+            if (this.loadSessionContentEnabled) {
+                this.updateItemInfo();
+            }
+        }
     }
     componentDidLoad() {
+        const onIntersection = async (entries) => {
+            for (const entry of entries) {
+                if (entry.isIntersecting) {
+                    if (this.observer) {
+                        this.observer.disconnect();
+                    }
+                    this.lazyItemsCanBeLoaded = this.lazyLoad;
+                    if (this.lazyLoad) {
+                        if (!this._subscription && !this.loadSessionContentEnabled) {
+                            this.updateItemInfoInProgress = true;
+                        }
+                        if (this.loadSessionContentEnabled && this.sessionId) {
+                            this.updateItemInfo();
+                        }
+                        this.restartSubscription();
+                    }
+                }
+            }
+        };
         const element = this.el;
         if (element) {
-            this.observer = new window.IntersectionObserver(this.onIntersection);
+            this.observer = new window.IntersectionObserver(onIntersection);
             this.observer.observe(element);
@@ -132,39 +257,33 @@ }
     getCorrectness(points, maxPoints) {
-        if (!maxPoints) {
+        if (!maxPoints)
             return null;
-        }
-        if (points === maxPoints) {
+        if (points === maxPoints)
             return 'correct';
-        }
-        if (points === 0) {
+        if (points === 0)
             return 'incorrect';
-        }
-        if (points > 0 && points < maxPoints) {
+        if (points > 0 && points < maxPoints)
             return 'partial';
-        }
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
         const cells = this.el.querySelectorAll('pie-response-cell');
-        if ((cells === null || cells === void 0 ? void 0 : cells.length) > 1) {
-            // TODO this is temporary, until multi-part is figured out
-            throw (new Error('only one pie-response-cell may be included within a pie-live-session element'));
-        }
+        const responses = this.el.querySelectorAll('pie-response');
         const cell = cells[0];
+        const response = responses[0];
+        const metadataAttributes = {};
         cell && (cell.sessionData = this.sessionData);
-        const responses = this.el.querySelectorAll('pie-response');
-        if ((cells === null || cells === void 0 ? void 0 : cells.length) > 1) {
+        response && (response.sessionData = this.sessionData);
+        if ((cells === null || cells === void 0 ? void 0 : cells.length) > 1 || (responses === null || responses === void 0 ? void 0 : responses.length) > 1) {
             // TODO this is temporary, until multi-part is figured out
-            throw (new Error('only one pie-response-cell may be included within a pie-live-session element'));
+            throw (new Error('only one pie-response / pie-response-cell may be included within a pie-live-session element'));
         }
-        const response = responses[0];
-        response && (response.sessionData = this.sessionData);
-        const metadataAttributes = {};
-        this.metadataValues && this.metadata.forEach(m => {
-            metadataAttributes[m.attribute] = this.metadataValues[m.key];
-        });
+        if (this.metadataValues) {
+            (_a = this.metadata) === null || _a === void 0 ? void 0 : _a.forEach(m => {
+                metadataAttributes[m.attribute] = this.metadataValues[m.key];
+            });
+        }
         if (this.updateItemInfoInProgress && this.loadingIndicator) {
             return h("loading-indicator", null);
         }
-        return (h(Host, Object.assign({ loaded: ((_a = this.sessionData) === null || _a === void 0 ? void 0 : _a.loaded) ? 'true' : 'false', "updated-at": (_b = this.sessionData) === null || _b === void 0 ? void 0 : _b.timestamp, "session-id": this.sessionId, "score-type": (_d = (_c = this.sessionData) === null || _c === void 0 ? void 0 : _c.score) === null || _d === void 0 ? void 0 : _d.type, points: (_f = (_e = this.sessionData) === null || _e === void 0 ? void 0 : _e.score) === null || _f === void 0 ? void 0 : _f.points, max: (_h = (_g = this.sessionData) === null || _g === void 0 ? void 0 : _g.score) === null || _h === void 0 ? void 0 : _h.max, "partial-scoring": String((_k = (_j = this.sessionData) === null || _j === void 0 ? void 0 : _j.score) === null || _k === void 0 ? void 0 : _k.partialScoring), correctness: this.getCorrectness((_m = (_l = this.sessionData) === null || _l === void 0 ? void 0 : _l.score) === null || _m === void 0 ? void 0 : _m.points, (_p = (_o = this.sessionData) === null || _o === void 0 ? void 0 : _o.score) === null || _p === void 0 ? void 0 : _p.max) }, metadataAttributes),
+        return (h(Host, Object.assign({ loaded: ((_b = this.sessionData) === null || _b === void 0 ? void 0 : _b.loaded) ? 'true' : 'false', "updated-at": (_c = this.sessionData) === null || _c === void 0 ? void 0 : _c.timestamp, "session-id": this.sessionId, "score-type": (_e = (_d = this.sessionData) === null || _d === void 0 ? void 0 : _d.score) === null || _e === void 0 ? void 0 : _e.type, points: (_g = (_f = this.sessionData) === null || _f === void 0 ? void 0 : _f.score) === null || _g === void 0 ? void 0 : _g.points, max: (_j = (_h = this.sessionData) === null || _h === void 0 ? void 0 : _h.score) === null || _j === void 0 ? void 0 : _j.max, "partial-scoring": String((_l = (_k = this.sessionData) === null || _k === void 0 ? void 0 : _k.score) === null || _l === void 0 ? void 0 : _l.partialScoring), correctness: this.getCorrectness((_o = (_m = this.sessionData) === null || _m === void 0 ? void 0 : _m.score) === null || _o === void 0 ? void 0 : _o.points, (_q = (_p = this.sessionData) === null || _p === void 0 ? void 0 : _p.score) === null || _q === void 0 ? void 0 : _q.max) }, metadataAttributes),
             h("slot", null)));
@@ -175,19 +294,2 @@ }
     static get properties() { return {
-        "sessionId": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "The Item Session Id to watch"
-            },
-            "attribute": "session-id",
-            "reflect": true
-        },
         "token": {
@@ -213,12 +315,11 @@ "type": "string",
         },
-        "client": {
+        "flags": {
             "type": "unknown",
             "mutable": false,
             "complexType": {
-                "original": "ApolloClient<any>",
-                "resolved": "ApolloClient<any>",
+                "original": "String",
+                "resolved": "String",
                 "references": {
-                    "ApolloClient": {
-                        "location": "import",
-                        "path": "apollo-client"
+                    "String": {
+                        "location": "global"
                     }
@@ -230,9 +331,24 @@ }
             "docs": {
-                "tags": [{
-                        "text": undefined,
-                        "name": "internal"
-                    }],
-                "text": "The network client instance for connecting to the subscription api.\nDeveloper to not need to set this property, it is automatically set when this element\nis nested in a `pie-api-live` element."
-            }
+                "tags": [],
+                "text": "String with an array of flags to be used, delimited by \";\""
+            },
+            "defaultValue": "''"
         },
+        "sessionId": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": "The Item Session Id to watch"
+            },
+            "attribute": "session-id",
+            "reflect": true
+        },
         "apiUrl": {
@@ -253,3 +369,3 @@ "type": "string",
                     }],
-                "text": "The graphql url for non-subscripton requests - to get content item.\nThese are handled not with subscription apollo client, but directly with fetch api."
+                "text": "The graphql url for non-subscription requests - to get (load) content item.\nThese are handled not with subscription apollo client, but directly with fetch api."
             },
@@ -259,12 +375,12 @@ "attribute": "api-url",
         },
-        "metadata": {
+        "client": {
             "type": "unknown",
             "mutable": false,
             "complexType": {
-                "original": "MetadataProperty[]",
-                "resolved": "MetadataProperty[]",
+                "original": "ApolloClient<any>",
+                "resolved": "ApolloClient<any>",
                 "references": {
-                    "MetadataProperty": {
+                    "ApolloClient": {
                         "location": "import",
-                        "path": "../../types"
+                        "path": "apollo-client"
                     }
@@ -280,3 +396,3 @@ }
                     }],
-                "text": "An array of MetadataProperties to be extracted from Item and added to `pie-live-session` elements as attributes.\n\nIf no value is found for the provided key on an item, the attribute will not be set.\n\nThis property should be set before adding any `pie-live-session` children\n\n```\n[\n   {\n     key:\"metadata_key\",\n     attribute: \"attribute-name\"\n   }\n]\n```"
+                "text": "The network client instance for connecting to the subscription api.\nDeveloper to not need to set this property, it is automatically set when this element\nis nested in a `pie-api-live` element."
             }
@@ -317,2 +433,25 @@ },
             "reflect": false
+        },
+        "metadata": {
+            "type": "unknown",
+            "mutable": false,
+            "complexType": {
+                "original": "MetadataProperty[]",
+                "resolved": "MetadataProperty[]",
+                "references": {
+                    "MetadataProperty": {
+                        "location": "import",
+                        "path": "../../types"
+                    }
+                }
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [{
+                        "text": undefined,
+                        "name": "internal"
+                    }],
+                "text": "An array of MetadataProperties to be extracted from Item and added to `pie-live-session` elements as attributes.\n\nIf no value is found for the provided key on an item, the attribute will not be set.\n\nThis property should be set before adding any `pie-live-session` children\n\n```\n[\n   {\n     key:\"metadata_key\",\n     attribute: \"attribute-name\"\n   }\n]\n```"
+            }
         }
@@ -322,2 +461,4 @@ }; }
         "sessionData": {},
+        "flagValues": {},
+        "loadSessionContentEnabled": {},
         "lazyItemsCanBeLoaded": {}
@@ -361,14 +502,14 @@ }; }
         }, {
+            "propName": "flags",
+            "methodName": "watchFlags"
+        }, {
             "propName": "metadata",
-            "methodName": "updateItemInfo"
+            "methodName": "watchMetadataAndToken"
         }, {
             "propName": "token",
-            "methodName": "updateItemInfo"
+            "methodName": "watchMetadataAndToken"
         }, {
-            "propName": "lazyLoad",
-            "methodName": "watchLazyLoad"
-        }, {
             "propName": "client",
-            "methodName": "onPropsChange"
+            "methodName": "watchClient"
         }]; }
 }

dist/collection/demo/end-to-end/gql.js

@@ -28,3 +28,3 @@ export class Api {
     const query = `
-    mutation createSession($itemId: VersionedID!) {  
+    mutation createSession($itemId: ID!) {  
       createSession(itemId: $itemId){ 
@@ -57,3 +57,3 @@ id
     return res?.data?.saveSessionResponse;
-  } 
+  }
 
@@ -60,0 +60,0 @@ async executeGql(token, query, variables, apiUrl) {

dist/collection/demo/end-to-end/index.js

@@ -26,3 +26,2 @@ import { Api } from './gql.js';
     // host=dev&
-    // token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhY2kiOiIzNmNlOGJlZi02MzA3LTQ1MjAtYjI4OC02YmQyNTZjODIwY2UiLCJqdGkiOiI4OGRkMWQ1MC1iNGE0LTExZWEtYTdiNi0yZjkxMDg4MTdhN2MiLCJpYXQiOjE1OTI4NDI5MzUsImV4cCI6MTY5MjkyOTMzNSwic2NvcGVzIjp7ImxpdmUiOnRydWV9fQ.TM4tyq9DP-8ICBq2AFN2B8rOlDF_BQxfZqbJ62_TnSA&
     // liveUrl=wss://qa-live.pie-api.com/&
@@ -29,0 +28,0 @@ // hostUrl=https://qa.pie-api.io/services/graphql

dist/collection/demo/end-to-end/utils.js

@@ -41,3 +41,44 @@ export const students = [
     name: 'Student 10'
+  },
+  {
+    id: 'stud11',
+    name: 'Student 11'
+  },
+  {
+    id: 'stud12',
+    name: 'Student 12'
+  },
+  {
+    id: 'stud13',
+    name: 'Student 13'
+  },
+  {
+    id: 'stud14',
+    name: 'Student 14'
+  },
+  {
+    id: 'stud15',
+    name: 'Student 15'
+  },
+  {
+    id: 'stud16',
+    name: 'Student 16'
+  },
+  {
+    id: 'stud17',
+    name: 'Student 17'
+  },
+  {
+    id: 'stud18',
+    name: 'Student 18'
+  },
+  {
+    id: 'stud19',
+    name: 'Student 19'
+  },
+  {
+    id: 'stud20',
+    name: 'Student 20'
   }
+
 ];
@@ -44,0 +85,0 @@ export const questions = [

dist/collection/load-config.js

 export const loadSessionContentItem = async (token, id, apiUrl, metadata) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     const output = {};
     const query = `
-    query sessionItem($id: ID!) {  
+    query sessionItem($id: ID!) {
         contentItemSession(id: $id) {
@@ -37,3 +37,3 @@ contentItem {
             const mdRes = await executeGql(token, mdQuery, { id: itemId }, apiUrl);
-            if (mdRes === null || mdRes === void 0 ? void 0 : mdRes.data.contentItemMetaData) {
+            if ((_m = mdRes === null || mdRes === void 0 ? void 0 : mdRes.data) === null || _m === void 0 ? void 0 : _m.contentItemMetaData) {
                 output.metadata = mdRes.data.contentItemMetaData;
@@ -49,14 +49,14 @@ }
         const res = await fetch(graphQlApi, {
-            method: 'POST',
-            mode: 'cors',
+            method: "POST",
+            mode: "cors",
             headers: {
-                'Content-Type': 'application/json',
-                'Accept-Encoding': 'gzip, deflate, br',
+                "Content-Type": "application/json",
+                "Accept-Encoding": "gzip, deflate, br",
                 Authorization: `Bearer ${token}`,
-                Accept: 'application/json'
+                Accept: "application/json",
             },
             body: JSON.stringify({
                 query,
-                variables
-            })
+                variables,
+            }),
         });
@@ -67,4 +67,4 @@ const jsonBody = await res.json();
     catch (err) {
-        throw (new Error('error with server request'));
+        throw new Error("error with server request");
     }
 };

dist/collection/mock-server/server.js

@@ -82,5 +82,12 @@ const { ApolloServer, gql, PubSub, withFilter, } = require("apollo-server-express");
   }
+  
+  type SessionEventNew {
+    item: JSON
+    firstLoad: Boolean
+    session: JSON
+  }
 
   type Subscription {
     sessionEvents(sessions: [ID]!): SessionEvent
+    watchSessions(ids: [ID]): SessionEventNew
   }
@@ -87,0 +94,0 @@

dist/collection/response-loader/response-loader.js

@@ -28,5 +28,7 @@ const tagMap = {
         responseCell: "https://unpkg.com/@pie-api/pie-element-extensions@1.9.0/dist/pies/CategorizeCell.js",
+        response: "https://unpkg.com/@pie-api/pie-element-extensions@1.9.0/dist/pies/CategorizeResponse.js"
     },
     "@pie-element/charting": {
         responseCell: "https://unpkg.com/@pie-api/pie-element-extensions@1.9.0/dist/pies/ChartingCell.js",
+        response: "https://unpkg.com/@pie-api/pie-element-extensions@1.9.0/dist/pies/ChartingResponse.js"
     },
@@ -59,2 +61,3 @@ "@pie-element/explicit-constructed-response": {
         responseCell: "https://unpkg.com/@pie-api/pie-element-extensions@1.9.0/dist/pies/HotspotCell.js",
+        response: "https://unpkg.com/@pie-api/pie-element-extensions@1.9.0/dist/pies/HotspotResponse.js"
     },
@@ -71,2 +74,3 @@ "@pie-element/inline-dropdown": {
         responseCell: "https://unpkg.com/@pie-api/pie-element-extensions@1.9.0/dist/pies/MatchListCell.js",
+        response: "https://unpkg.com/@pie-api/pie-element-extensions@1.9.0/dist/pies/MatchListResponse.js"
     },
@@ -83,5 +87,7 @@ "@pie-element/math-inline": {
         responseCell: "https://unpkg.com/@pie-api/pie-element-extensions@1.9.0/dist/pies/NumberLineCell.js",
+        response: "https://unpkg.com/@pie-api/pie-element-extensions@1.9.0/dist/pies/NumberLineResponse.js"
     },
     "@pie-element/placement-ordering": {
         responseCell: "https://unpkg.com/@pie-api/pie-element-extensions@1.9.0/dist/pies/OrderingCell.js",
+        response: "https://unpkg.com/@pie-api/pie-element-extensions@1.9.0/dist/pies/OrderingResponse.js"
     },
@@ -88,0 +94,0 @@ "@pie-element/select-text": {

dist/esm/item-metadata.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, g as getElement } from './index-2b42758a.js';
+import { r as registerInstance, g as getElement } from './index-de48886a.js';
 
@@ -3,0 +3,0 @@ class ItemMetadata {

dist/esm/loading-indicator.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h } from './index-2b42758a.js';
+import { r as registerInstance, h } from './index-de48886a.js';
 
@@ -3,0 +3,0 @@ const loadingIndicatorCss = ".lds-ring{display:inline-block;position:relative;width:var(--pie-live-session-cell-height, 40px);height:var(--pie-live-session-cell-height, 40px);margin:8px}.lds-ring div{box-sizing:border-box;display:block;position:absolute;width:calc(var(--pie-live-session-cell-height, 40px) * 0.8);height:calc(var(--pie-live-session-cell-height, 40px) * 0.8);margin:calc(var(--pie-live-session-cell-height, 40px) * 0.1);border:calc(var(--pie-live-session-cell-height, 40px) * 0.1) solid var(--pie-live-session-background-color, grey);border-radius:50%;animation:lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;border-color:var(--pie-live-session-background-color, grey) transparent transparent transparent}.lds-ring div:nth-child(1){animation-delay:-0.45s}.lds-ring div:nth-child(2){animation-delay:-0.3s}.lds-ring div:nth-child(3){animation-delay:-0.15s}@keyframes lds-ring{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";

dist/esm/pie-response-cell.entry.js

@@ -1,3 +0,3 @@
-import { r as registerInstance, d as getContext, h, g as getElement } from './index-2b42758a.js';
-import { l as loadResponseElement } from './response-loader-8b728465.js';
+import { r as registerInstance, d as getContext, h, g as getElement } from './index-de48886a.js';
+import { l as loadResponseElement } from './response-loader-79d60882.js';
 
@@ -4,0 +4,0 @@ /**

dist/esm/pie-response.entry.js

@@ -1,3 +0,3 @@
-import { r as registerInstance, d as getContext, h, g as getElement } from './index-2b42758a.js';
-import { l as loadResponseElement } from './response-loader-8b728465.js';
+import { r as registerInstance, d as getContext, h, g as getElement } from './index-de48886a.js';
+import { l as loadResponseElement } from './response-loader-79d60882.js';
 
@@ -4,0 +4,0 @@ /**

dist/pie-api-live/pie-api-live.esm.js

@@ -1,1 +0,1 @@
-import{p as a,b as s}from"./p-c882172c.js";a().then(a=>s([["p-0614b8d4",[[1,"pie-live-session",{sessionId:[513,"session-id"],token:[1],client:[16],apiUrl:[1,"api-url"],metadata:[16],lazyLoad:[4,"lazy-load"],loadingIndicator:[4,"loading-indicator"],sessionData:[32],lazyItemsCanBeLoaded:[32]}]]],["p-42580642",[[0,"item-metadata",{_key:[1,"key"],attribute:[1]}]]],["p-9adc2946",[[0,"pie-api-live",{metadata:[16],token:[1],host:[1],apiUrl:[1,"api-url"],liveUrl:[1,"live-url"],hostUrl:[1,"host-url"],lazyLoad:[4,"lazy-load"],loadingIndicator:[4,"loading-indicator"]},[[0,"attachSession","handleLiveSessionAdded"]]]]],["p-960c065c",[[1,"pie-response",{sessionData:[8,"session-data"],multiPart:[4,"multi-part"]}]]],["p-a1ec6889",[[1,"pie-response-cell",{sessionData:[8,"session-data"],multiPart:[4,"multi-part"]}]]],["p-9131d7b5",[[1,"loading-indicator",{progressAmount:[1,"progress-amount"],progressColor:[1,"progress-color"]}]]]],a));
+import{p as a,b as s}from"./p-c6bcc435.js";a().then(a=>s([["p-6be6b35a",[[1,"pie-live-session",{token:[1],flags:[16],sessionId:[513,"session-id"],apiUrl:[1,"api-url"],client:[16],lazyLoad:[4,"lazy-load"],loadingIndicator:[4,"loading-indicator"],metadata:[16],sessionData:[32],flagValues:[32],loadSessionContentEnabled:[32],lazyItemsCanBeLoaded:[32]}]]],["p-b9516d2a",[[0,"item-metadata",{_key:[1,"key"],attribute:[1]}]]],["p-78caebe1",[[0,"pie-api-live",{flags:[16],token:[1],host:[1],apiUrl:[1,"api-url"],hostUrl:[1,"host-url"],liveUrl:[1,"live-url"],lazyLoad:[4,"lazy-load"],loadingIndicator:[4,"loading-indicator"],metadata:[16]},[[0,"attachSession","handleLiveSessionAdded"]]]]],["p-69da1cb1",[[1,"pie-response",{sessionData:[8,"session-data"],multiPart:[4,"multi-part"]}]]],["p-1dbd4135",[[1,"pie-response-cell",{sessionData:[8,"session-data"],multiPart:[4,"multi-part"]}]]],["p-2af1f874",[[1,"loading-indicator",{progressAmount:[1,"progress-amount"],progressColor:[1,"progress-color"]}]]]],a));

dist/types/components.d.ts

@@ -27,23 +27,27 @@ /* eslint-disable */
         /**
-          * The main graphql host.
+          * The main graphql url for non-subscription requests. Used to load items.  e.g.: if host = 'qa' => apiUrl = https://qa.pie-api.io/services/graphql?token=...
          */
         "apiUrl": string;
         /**
-          * The pie-api-live host. e.g. `qa`, `dev`, `prod`, `stage`
+          * String with an array of flags to be used, delimited by ";"  e.g.: flags="enable-watch-session;another-flag;"
          */
+        "flags": String;
+        /**
+          * The pie-api-live host (environment) - used to determine both graphql (non-subscriptions) and live (subscriptions) hosts. One of: `qa`, `dev`, `prod`, `stage`.  e.g.: if host = 'qa' => apiUrl = https://qa.pie-api.io/services/graphql?token=..., webSocket connection to wss://qa-live.pie-api.com/
+         */
         "host": string;
         /**
-          * The main graphql CUSTOM host. If present, overrides the main gql server host. e.g.: `https://qa.pie-api.io/services/graphql`
+          * The main graphql CUSTOM host. If present, overrides the main graphql server host.  e.g.: `https://qa.pie-api.io/services/graphql`
          */
         "hostUrl": string;
         /**
-          * If pie-live-session items should be lazy loaded
+          * If pie-live-session items should be lazy loaded.
          */
         "lazyLoad": boolean;
         /**
-          * The live server CUSTOM host. If present, overrides the live server host. e.g.: `wss://qa-live.pie-api.com/`
+          * The live server CUSTOM host. If present, overrides the live (subscriptions) server host.  e.g.: `wss://qa-live.pie-api.com/`
          */
         "liveUrl": string;
         /**
-          * If loading indicator should show up while the item is loading
+          * If loading indicator should show up while the item is loading.
          */
@@ -56,3 +60,3 @@ "loadingIndicator": boolean;
         /**
-          * The api token for pie-api The token must have the `live` scope
+          * The api token for pie-api. The token must have the `live` scope.
          */
@@ -63,3 +67,3 @@ "token": string;
         /**
-          * The graphql url for non-subscripton requests - to get content item. These are handled not with subscription apollo client, but directly with fetch api.
+          * The graphql url for non-subscription requests - to get (load) content item. These are handled not with subscription apollo client, but directly with fetch api.
          */
@@ -72,2 +76,6 @@ "apiUrl": string;
         /**
+          * String with an array of flags to be used, delimited by ";"
+         */
+        "flags": String;
+        /**
           * If items should be lazy loaded (load only after they're visible)
@@ -177,11 +185,15 @@ */
         /**
-          * The pie-api-live host. e.g. `qa`, `dev`, `prod`, `stage`
+          * String with an array of flags to be used, delimited by ";"  e.g.: flags="enable-watch-session;another-flag;"
          */
+        "flags"?: String;
+        /**
+          * The pie-api-live host (environment) - used to determine both graphql (non-subscriptions) and live (subscriptions) hosts. One of: `qa`, `dev`, `prod`, `stage`.  e.g.: if host = 'qa' => apiUrl = https://qa.pie-api.io/services/graphql?token=..., webSocket connection to wss://qa-live.pie-api.com/
+         */
         "host"?: string;
         /**
-          * If pie-live-session items should be lazy loaded
+          * If pie-live-session items should be lazy loaded.
          */
         "lazyLoad"?: boolean;
         /**
-          * If loading indicator should show up while the item is loading
+          * If loading indicator should show up while the item is loading.
          */
@@ -195,3 +207,3 @@ "loadingIndicator"?: boolean;
         /**
-          * The api token for pie-api The token must have the `live` scope
+          * The api token for pie-api. The token must have the `live` scope.
          */
@@ -202,2 +214,6 @@ "token"?: string;
         /**
+          * String with an array of flags to be used, delimited by ";"
+         */
+        "flags"?: String;
+        /**
           * If items should be lazy loaded (load only after they're visible)
@@ -204,0 +220,0 @@ */

dist/types/components/pie-api-live/pie-api-live.d.ts

@@ -6,44 +6,25 @@ import { EventEmitter } from "../../stencil-public-runtime";
     gqlClient: ApolloClient<any>;
-    connectedToServer: EventEmitter;
-    getLiveHost(): string;
-    getGQLHost(): string;
-    initClient(): void;
-    componentWillLoad(): void;
-    connectedCallBack(): void;
-    disconnectedCallback(): Promise<void>;
     /**
-     * An array of MetadataProperties to be extracted from Item and added to `pie-live-session` elements as attributes.
+     * String with an array of flags to be used, delimited by ";"
      *
-     * If no value is found for the provided key on an item, the attribute will not be set.
-     *
-     * This property must be set before adding any child `<pie-live-session>` elements.
-     *
-     * ```
-     * [
-     *   {
-     *     key:"metadata_key",
-     *     attribute: "attribute-name"
-     *   }
-     * ]
-     * ```
-     *
-     * This property can alternatively be set declaritively in html using `<item-metadata key="foo" attribute-name="foo-value">` as a child
-     * element of `<pie-api-live>` before any `<pie-live-session>` elements.
-     *
+     * e.g.: flags="enable-watch-session;another-flag;"
      */
-    metadata: MetadataProperty[];
+    flags: String;
     /**
-     * The api token for pie-api
-     * The token must have the `live` scope
+     * The api token for pie-api.
+     * The token must have the `live` scope.
      */
     token: string;
-    watchToken(): void;
     /**
-     * The pie-api-live host.
-     * e.g. `qa`, `dev`, `prod`, `stage`
+     * The pie-api-live host (environment) - used to determine both graphql (non-subscriptions) and live (subscriptions) hosts.
+     * One of: `qa`, `dev`, `prod`, `stage`.
+     *
+     * e.g.: if host = 'qa' => apiUrl = https://qa.pie-api.io/services/graphql?token=..., webSocket connection to wss://qa-live.pie-api.com/
      */
     host: string;
-    watchHost(): void;
     /**
-     * The main graphql host.
+     * The main graphql url for non-subscription requests. Used to load items.
+     *
+     * e.g.: if host = 'qa' => apiUrl = https://qa.pie-api.io/services/graphql?token=...
+     *
      * @internal
@@ -53,25 +34,55 @@ */
     /**
-     * The live server CUSTOM host. If present, overrides the live server host.
-     * e.g.: `wss://qa-live.pie-api.com/`
+     * The main graphql CUSTOM host. If present, overrides the main graphql server host.
+     *
+     * e.g.: `https://qa.pie-api.io/services/graphql`
+     *
      * @internal
      */
-    liveUrl: string;
-    watchLiveUrl(): void;
+    hostUrl: string;
     /**
-     * The main graphql CUSTOM host. If present, overrides the main gql server host.
-     * e.g.: `https://qa.pie-api.io/services/graphql`
+     * The live server CUSTOM host. If present, overrides the live (subscriptions) server host.
+     *
+     * e.g.: `wss://qa-live.pie-api.com/`
+     *
      * @internal
      */
-    hostUrl: string;
-    watchHostUrl(): void;
+    liveUrl: string;
     /**
-     * If pie-live-session items should be lazy loaded
+     * If pie-live-session items should be lazy loaded.
      */
     lazyLoad: boolean;
     /**
-     * If loading indicator should show up while the item is loading
+     * If loading indicator should show up while the item is loading.
      */
     loadingIndicator: boolean;
+    /**
+     * An array of MetadataProperties to be extracted from Item and added to `pie-live-session` elements as attributes.
+     *
+     * If no value is found for the provided key on an item, the attribute will not be set.
+     *
+     * This property must be set before adding any child `<pie-live-session>` elements.
+     *
+     * ```
+     * [
+     *   {
+     *     key:"metadata_key",
+     *     attribute: "attribute-name"
+     *   }
+     * ]
+     * ```
+     *
+     * This property can alternatively be set declaritively in html using `<item-metadata key="foo" attribute-name="foo-value">` as a child
+     * element of `<pie-api-live>` before any `<pie-live-session>` elements.
+     *
+     */
+    metadata: MetadataProperty[];
+    connectedToServer: EventEmitter;
+    watchChange(): void;
+    watchFlags(): void;
     handleLiveSessionAdded(ev: Event): void;
+    initClient(): void;
+    componentWillLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): Promise<void>;
     render(): any;
 }

dist/types/components/pie-live-session/pie-live-session.d.ts

@@ -14,28 +14,38 @@ /// <reference types="zen-observable" />
 export declare class PieLiveSession {
+    itemConfig: Object;
+    lastSessionEvent: any;
+    metadataValues: any;
     sessionEvents: Object[];
-    lastSessionEvent: any;
-    itemConfig: Object;
     _subscription: ZenObservable.Subscription;
+    updateItemInfoInProgress: boolean;
     private observer;
     el: HTMLElement;
-    subscriptionQuery: import("graphql").DocumentNode;
     sessionData: SessionData;
+    flagValues: string[];
+    loadSessionContentEnabled: boolean;
     /**
-     * Emitted when the element is first connected to the DOM.
+     * If lazy items can be loaded
      */
-    attachSession: EventEmitter;
+    lazyItemsCanBeLoaded: boolean;
     /**
-     * Emitted when an event has been received for this session.
+     * Api token - set by outer pie-api-live element.
+     *
+     * @internal
      */
-    eventReceived: EventEmitter;
+    token: string;
     /**
+     * String with an array of flags to be used, delimited by ";"
+     */
+    flags: String;
+    /**
      * The Item Session Id to watch
      */
     sessionId: string;
-    watchSessionId(newVal: any, oldVal: any): void;
     /**
-     * Api token - set by outer pie-api-live element.
+     * The graphql url for non-subscription requests - to get (load) content item.
+     * These are handled not with subscription apollo client, but directly with fetch api.
+     *
      * @internal
      */
-    token: string;
+    apiUrl: string;
     /**
@@ -45,2 +55,3 @@ * The network client instance for connecting to the subscription api.
      * is nested in a `pie-api-live` element.
+     *
      * @internal
@@ -50,8 +61,10 @@ */
     /**
-     * The graphql url for non-subscripton requests - to get content item.
-     * These are handled not with subscription apollo client, but directly with fetch api.
-     * @internal
+     * If items should be lazy loaded (load only after they're visible)
      */
-    apiUrl: string;
+    lazyLoad: boolean;
     /**
+     * If loading indicator should show up while the item is loading
+     */
+    loadingIndicator: boolean;
+    /**
      * An array of MetadataProperties to be extracted from Item and added to `pie-live-session` elements as attributes.
@@ -74,20 +87,23 @@ *
     metadata: MetadataProperty[];
-    metadataValues: any;
-    updateItemInfoInProgress: boolean;
-    updateItemInfo(): Promise<void>;
     /**
-     * If items should be lazy loaded (load only after they're visible)
+     * Emitted when the element is first connected to the DOM.
      */
-    lazyLoad: boolean;
-    watchLazyLoad(): Promise<void>;
+    attachSession: EventEmitter;
     /**
-     * If lazy items can be loaded
+     * Emitted when an event has been received for this session.
      */
-    lazyItemsCanBeLoaded: boolean;
-    /**
-     * If loading indicator should show up while the item is loading
-     */
-    loadingIndicator: boolean;
+    eventReceived: EventEmitter;
+    watchSessionId(newSessionId: any, oldSessionId: any): void;
+    watchFlags(newFlags: any, oldFlags: any): void;
+    watchMetadataAndToken(newVal: any, oldVal: any): void;
+    watchClient(): void;
+    updateItemInfo(): void;
+    restartSubscription(): void;
+    canLoadItems(): boolean;
     loadItemContent(): Promise<void>;
-    onPropsChange(): void;
+    setItemConfig(config: any): void;
+    setMetadata(metadata: any): void;
+    setSessionData(data: any, timestamp: any, score: any): void;
+    setLastSessionEvent(session: any, createdAt: any): void;
+    sessionDataIsValid(timestamp: any, data: any): boolean;
     startSubscription(): void;
@@ -97,3 +113,2 @@ stopSubscription(): void;
     componentDidLoad(): void;
-    private onIntersection;
     getCorrectness(points: any, maxPoints: any): "correct" | "incorrect" | "partial";
@@ -100,0 +115,0 @@ render(): any;

dist/types/load-config.d.ts

@@ -1,2 +0,2 @@
-import { MetadataProperty } from './types';
+import { MetadataProperty } from "./types";
 export declare const loadSessionContentItem: (token: string, id: string, apiUrl: any, metadata?: MetadataProperty[]) => Promise<any>;

package.json

 {
   "name": "@pie-api/pie-api-live-components",
-  "version": "1.18.3",
+  "version": "1.19.0",
   "description": "Custom Elements that work with PIE Api Live services",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

1850947

increased by4.27%

Number of package files

99

increased by1.02%

Lines of code

41185

increased by4.16%

No dependency changes