tsviewer 1.0.24 → 1.0.26

package/README.md

@@ -1,33 +1,100 @@
 # tsviewer
 
-## Project setup
-```
-yarn install
-```
+tsviewer is a Vue 3 component library that provides an embeddable viewer component, backed by a Pinia store. This README will guide you through installation, setup, and usage.
 
-### Compiles and hot-reloads for development
-```
-yarn serve
+## **📦 Installation**
+
+Install the package via npm or yarn:
+
+```bash
+npm install tsviewer
+# or
+yarn add tsviewer
 ```
 
-### Compiles and minifies for production
+## **🚀 Usage**
+
+### **1. Import the Component and Styles**
+
+In your Vue 3 component or layout setup:
+
+```javascript
+import { useViewerStore, tsviewer } from 'tsviewer'
+import 'tsviewer/style'
 ```
-yarn build
+
+### **2. Initialize the Viewer Store**
+
+Before rendering `<tsviewer />`, you must initialize it by calling `fetchAndSetActiveViewer()` from the store. This ensures the viewer has the correct context.
+
+You need to provide two string parameters:
+- **packageId**: The unique identifier for the package to load.
+- **packageType**: The type or category of the package.
+
+```javascript
+const viewerStore = useViewerStore()
+
+await viewerStore.fetchAndSetActiveViewer({
+  packageId: packageId.value,
+  packageType: packageType.value
+})
 ```
 
-### Lints and fixes files
+⚠️ **This is an async function. You must await it before using the component.**
+
+### **3. Use the Component**
+
+Once the store is initialized, you can render the component:
+
+```vue
+<template>
+  <tsviewer />
+</template>
 ```
-yarn lint
+
+## **✅ Full Example (Vue 3 + Composition API)**
+
+```vue
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useViewerStore, TSViewer } from 'tsviewer'
+import 'tsviewer/style'
+
+const packageId = ref('your-package-id')
+const packageType = ref('your-package-type')
+const isViewerReady = ref(false)
+
+const viewerStore = useViewerStore()
+
+onMounted(async () => {
+  await viewerStore.fetchAndSetActiveViewer({
+    packageId: packageId.value,
+    packageType: packageType.value
+  })
+  isViewerReady.value = true
+})
+</script>
+
+<template>
+  <TSViewer v-if="isViewerReady" />
+</template>
+
+<template>
+  <tsviewer />
+</template>
 ```
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+## **⚙️ Requirements**
 
-# TSViewer
+- Vue 3
+- Pinia (state management)
 
-A Vue 3 component library.
+## **🛠️ Development & Contributing**
 
-## Install
+Coming soon.
 
-```bash
-npm install tsviewer
+## **📄 License**
+
+MIT License.
+
+Feel free to open issues or pull requests if you'd like to contribute or report bugs.

package/dist/tsviewer.es.js

@@ -12860,7 +12860,16 @@ const getLayerIndex = (e, t, n) => {
       propOr([{}], "properties"),
       find(propEq("category", "Blackfynn")),
       propOr([{}], "properties")
-    )(e.activeViewer)
+    )(e.activeViewer),
+    /**
+       * Getter to check if file is processed
+       * @param {Object} fileRecord - The file record object to check status for
+       * @returns {Boolean} True if file is processed (READY), false otherwise
+       */
+    isTSFileProcessed: (e) => (t) => {
+      var r;
+      return ((r = t == null ? void 0 : t.content) == null ? void 0 : r.state) === "READY";
+    }
   },
   actions: {
     clearState() {
@@ -12871,7 +12880,9 @@ const getLayerIndex = (e, t, n) => {
     },
     async fetchAndSetActiveViewer(e) {
       const t = e.packageId, n = await useToken(), r = `https://api.pennsieve.net/packages/${t}?api_key=${n}`, i = await useSendXhr(r);
-      this.setActiveViewer(i);
+      if (this.isFileProcessed(i))
+        return this.setActiveViewer(i), Promise.resolve(i);
+      throw new Error("Timeseries viewer is not available, since the file is not processed");
     },
     closeViewer() {
       this.clearState();