Cd 521/update graphql parsing (#3)

* Updated Parsring for new GraphQL Query

* Remove Excess Package Files

* Updated documentation and interface

---------

Co-authored-by: Nick Sweet <[email protected]>

Author: Luke-Lowery

.gitignore

@@ -32,4 +32,5 @@ e2e-results/
 # Editor
 .idea
 
-.eslintcache
+.eslintcache
+plugins/*

README.md

@@ -1,11 +1,21 @@
 # Grafana Plugin: Map Panel
 
-Visualize maps provided by an s3 datasource
+Visualize image files for indoor maps.
 
+## Interface
+We expect the datasource to provide a parseable JSON string of an object in the shape:
 
-## Requirements
+```
+{
+  layers: { cleaning: "<SOME_URL>"},
+  mapBundle: "<SOME_URL>"
+}
+```
+
+Note that this will be subject to change as we include new features (e.g. viewing multiple layers).
 
-- Depends on [grafanaplugin-s3-datasource](https://github.com/tailosinc/grafanaplugin-s3-datasource) -- please make sure you have that installed to the same parent directory if you want to develop this plugin!
+### Example Setup
+You can use the [infinity datasource](https://grafana.com/grafana/plugins/yesoreyeram-infinity-datasource/?tab=installation) as . Simply put it in a top-level `plugins` folder then install through administration tools.
 
 ## Getting Started
 

docker-compose.yaml

@@ -7,10 +7,9 @@ services:
       context: ./.config
       args:
         grafana_image: ${GRAFANA_IMAGE:-grafana-enterprise}
-        grafana_version: ${GRAFANA_VERSION:-latest}
+        grafana_version: ${GRAFANA_VERSION:-10.0.3}
     ports:
       - 3000:3000/tcp
     volumes:
-      - ./provisioning:/etc/grafana/provisioning
+      - ./plugins:/var/lib/grafana/plugins
       - ./dist:/var/lib/grafana/plugins/grafanaplugin-map-panel
-      - ../grafanaplugin-s3-datasource/dist:/var/lib/grafana/plugins/grafanaplugin-s3-datasource

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tailosinc/grafanaplugin-map-panel",
   "version": "1.0.4",
-  "description": "Visualize maps provided by an s3 datasource",
+  "description": "Visualize image files for indoor maps.",
   "scripts": {
     "build": "webpack -c ./.config/webpack/webpack.config.ts --env production",
     "dev": "webpack -w -c ./.config/webpack/webpack.config.ts --env development",

src/README.md

@@ -1,11 +1,7 @@
 # Grafana Plugin: Map Panel
 
-Visualize maps provided by an s3 datasource
+Visualize image files for indoor maps.
 
 ## Overview / Introduction
 
 Panel that visualizes an indoor map (collection of layers of spatial data using the same frame of reference).
-
-## Getting Started
-
-This panel depends on URLs provided in a dataframe (see [grafanaplugin-s3-datasource](https://github.com/tailosinc/grafanaplugin-s3-datasource) as an example datasource).

src/components/ImageDisplayPanel.tsx

@@ -15,12 +15,9 @@ export const ImageDisplayPanel: React.FC<Props> = ({
 }) => {
   const styles = getStyles();
 
-  // TODO: we'll need get all values from the first data series into URLS to be displayed
-  // First series will get the image to be displayed  
-  const displayUrl = data.series[0].fields[0].values.get(0);
-
-  // Second series will get a distinct download URL (if it exists)
-  const downloadUrl = data.series.length > 1 ? data.series[1].fields[0].values.get(0) : displayUrl;
+  const parsedData = JSON.parse(data.series[0].fields[0].values.get(0));
+  const displayUrl = parsedData.layers.cleaning;
+  const downloadUrl = parsedData.mapBundle ?? displayUrl;
 
   const { states } = useMapData(displayUrl, width, height, options);
   const [displayDownload, setDisplayDownload] = useState(false);

src/plugin.json

@@ -7,7 +7,7 @@
     "keywords": [
       "panel"
     ],
-    "description": "Visualize maps provided by an s3 datasource",
+    "description": "Visualize image files for indoor maps.",
     "author": {
       "name": "Tailos"
     },