From 59d7482e2831a7ac52719c83276955bebf50dec9 Mon Sep 17 00:00:00 2001
From: Lloyd Dakin <taidakin99lol@gmail.com>
Date: Mon, 2 Dec 2024 11:32:56 -0800
Subject: [PATCH 1/3] fixing analysis for datalab outputs, replace d3 chart
 with chart.js, fix image downloads

---
 package-lock.json                             | 447 +-----------------
 package.json                                  |   3 +-
 .../Project/CreateSessionDialog.vue           |   4 +
 .../Project/ImageAnalysis/ImageAnalyzer.vue   |  13 +-
 .../ImageAnalysis/ImageDownloadMenu.vue       |  27 +-
 .../Project/ImageAnalysis/ImageViewer.vue     |   6 +-
 .../Project/ImageAnalysis/LinePlot.vue        | 230 +++++----
 src/utils/api.js                              |   7 +-
 8 files changed, 179 insertions(+), 558 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a9a0e9c6..aa361f0e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,8 +10,8 @@
       "dependencies": {
         "@geoman-io/leaflet-geoman-free": "^2.17.0",
         "@mdi/font": "5.9.55",
+        "chart.js": "^4.4.6",
         "core-js": "^3.8.3",
-        "d3": "^7.9.0",
         "leaflet": "^1.9.4",
         "lodash": "^4.17.21",
         "lru-cache": "^10.2.0",
@@ -21,7 +21,6 @@
         "serve": "^14.2.1",
         "vue": "^3.5.9",
         "vue-router": "^4.2.5",
-        "vue3-carousel": "^0.3.1",
         "vuetify": "^3.7.4",
         "webfontloader": "^1.0.0"
       },
@@ -2042,6 +2041,12 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+      "license": "MIT"
+    },
     "node_modules/@leichtgewicht/ip-codec": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
@@ -4552,6 +4557,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/chart.js": {
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.6.tgz",
+      "integrity": "sha512-8Y406zevUPbbIBA/HRk33khEmQPk5+cxeflWE/2rx1NJsjVWMPw/9mSP9rxHP5eqi6LNoPBVMfZHxbwLSgldYA==",
+      "license": "MIT",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -5381,395 +5398,6 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
-    "node_modules/d3": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz",
-      "integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
-      "dependencies": {
-        "d3-array": "3",
-        "d3-axis": "3",
-        "d3-brush": "3",
-        "d3-chord": "3",
-        "d3-color": "3",
-        "d3-contour": "4",
-        "d3-delaunay": "6",
-        "d3-dispatch": "3",
-        "d3-drag": "3",
-        "d3-dsv": "3",
-        "d3-ease": "3",
-        "d3-fetch": "3",
-        "d3-force": "3",
-        "d3-format": "3",
-        "d3-geo": "3",
-        "d3-hierarchy": "3",
-        "d3-interpolate": "3",
-        "d3-path": "3",
-        "d3-polygon": "3",
-        "d3-quadtree": "3",
-        "d3-random": "3",
-        "d3-scale": "4",
-        "d3-scale-chromatic": "3",
-        "d3-selection": "3",
-        "d3-shape": "3",
-        "d3-time": "3",
-        "d3-time-format": "4",
-        "d3-timer": "3",
-        "d3-transition": "3",
-        "d3-zoom": "3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-array": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
-      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
-      "dependencies": {
-        "internmap": "1 - 2"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-axis": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
-      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-brush": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
-      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
-      "dependencies": {
-        "d3-dispatch": "1 - 3",
-        "d3-drag": "2 - 3",
-        "d3-interpolate": "1 - 3",
-        "d3-selection": "3",
-        "d3-transition": "3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-chord": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
-      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
-      "dependencies": {
-        "d3-path": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-color": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
-      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-contour": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
-      "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
-      "dependencies": {
-        "d3-array": "^3.2.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-delaunay": {
-      "version": "6.0.4",
-      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
-      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
-      "dependencies": {
-        "delaunator": "5"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-dispatch": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
-      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-drag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
-      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
-      "dependencies": {
-        "d3-dispatch": "1 - 3",
-        "d3-selection": "3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-dsv": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
-      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
-      "dependencies": {
-        "commander": "7",
-        "iconv-lite": "0.6",
-        "rw": "1"
-      },
-      "bin": {
-        "csv2json": "bin/dsv2json.js",
-        "csv2tsv": "bin/dsv2dsv.js",
-        "dsv2dsv": "bin/dsv2dsv.js",
-        "dsv2json": "bin/dsv2json.js",
-        "json2csv": "bin/json2dsv.js",
-        "json2dsv": "bin/json2dsv.js",
-        "json2tsv": "bin/json2dsv.js",
-        "tsv2csv": "bin/dsv2dsv.js",
-        "tsv2json": "bin/dsv2json.js"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-dsv/node_modules/commander": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/d3-dsv/node_modules/iconv-lite": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/d3-ease": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
-      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-fetch": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
-      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
-      "dependencies": {
-        "d3-dsv": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-force": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
-      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
-      "dependencies": {
-        "d3-dispatch": "1 - 3",
-        "d3-quadtree": "1 - 3",
-        "d3-timer": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-format": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
-      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-geo": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
-      "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
-      "dependencies": {
-        "d3-array": "2.5.0 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-hierarchy": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
-      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-interpolate": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
-      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
-      "dependencies": {
-        "d3-color": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-path": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
-      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-polygon": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
-      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-quadtree": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
-      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-random": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
-      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-scale": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
-      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
-      "dependencies": {
-        "d3-array": "2.10.0 - 3",
-        "d3-format": "1 - 3",
-        "d3-interpolate": "1.2.0 - 3",
-        "d3-time": "2.1.1 - 3",
-        "d3-time-format": "2 - 4"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-scale-chromatic": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
-      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
-      "dependencies": {
-        "d3-color": "1 - 3",
-        "d3-interpolate": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-selection": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
-      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-shape": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
-      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
-      "dependencies": {
-        "d3-path": "^3.1.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-time": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
-      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
-      "dependencies": {
-        "d3-array": "2 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-time-format": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
-      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
-      "dependencies": {
-        "d3-time": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-timer": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
-      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-transition": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
-      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
-      "dependencies": {
-        "d3-color": "1 - 3",
-        "d3-dispatch": "1 - 3",
-        "d3-ease": "1 - 3",
-        "d3-interpolate": "1 - 3",
-        "d3-timer": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "peerDependencies": {
-        "d3-selection": "2 - 3"
-      }
-    },
-    "node_modules/d3-zoom": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
-      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
-      "dependencies": {
-        "d3-dispatch": "1 - 3",
-        "d3-drag": "2 - 3",
-        "d3-interpolate": "1 - 3",
-        "d3-selection": "2 - 3",
-        "d3-transition": "2 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -6001,14 +5629,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/delaunator": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz",
-      "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
-      "dependencies": {
-        "robust-predicates": "^3.0.2"
-      }
-    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -7956,14 +7576,6 @@
       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
     },
-    "node_modules/internmap": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
-      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/interpret": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz",
@@ -10920,11 +10532,6 @@
       "resolved": "https://registry.npmjs.org/roboto-fontface/-/roboto-fontface-0.10.0.tgz",
       "integrity": "sha512-OlwfYEgA2RdboZohpldlvJ1xngOins5d7ejqnIBWr9KaMxsnBqotpptRXTyfNRLnFpqzX6sTDt+X+a+6udnU8g=="
     },
-    "node_modules/robust-predicates": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
-      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
-    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -10948,11 +10555,6 @@
         "queue-microtask": "^1.2.2"
       }
     },
-    "node_modules/rw": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
-      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
-    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -10975,7 +10577,8 @@
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true
     },
     "node_modules/sass": {
       "version": "1.70.0",
@@ -12717,14 +12320,6 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
-    "node_modules/vue3-carousel": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/vue3-carousel/-/vue3-carousel-0.3.1.tgz",
-      "integrity": "sha512-86vUkNPBzL2PVuR9w6hUsI90ccFjLp+K8cSFpRTISf+SjUQY3fMHc5CFF5MUL62v1xYYm27zEBmQupO9VQx9Kw==",
-      "peerDependencies": {
-        "vue": "^3.2.0"
-      }
-    },
     "node_modules/vuetify": {
       "version": "3.7.4",
       "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.7.4.tgz",
diff --git a/package.json b/package.json
index f5a0c48f..12199b4b 100644
--- a/package.json
+++ b/package.json
@@ -10,8 +10,8 @@
   "dependencies": {
     "@geoman-io/leaflet-geoman-free": "^2.17.0",
     "@mdi/font": "5.9.55",
+    "chart.js": "^4.4.6",
     "core-js": "^3.8.3",
-    "d3": "^7.9.0",
     "leaflet": "^1.9.4",
     "lodash": "^4.17.21",
     "lru-cache": "^10.2.0",
@@ -21,7 +21,6 @@
     "serve": "^14.2.1",
     "vue": "^3.5.9",
     "vue-router": "^4.2.5",
-    "vue3-carousel": "^0.3.1",
     "vuetify": "^3.7.4",
     "webfontloader": "^1.0.0"
   },
diff --git a/src/components/Project/CreateSessionDialog.vue b/src/components/Project/CreateSessionDialog.vue
index 195e5959..a0f577ec 100644
--- a/src/components/Project/CreateSessionDialog.vue
+++ b/src/components/Project/CreateSessionDialog.vue
@@ -39,6 +39,8 @@ async function addImagesToExistingSession(session){
   const inputData = [...existingSession.input_data, ...props.newImages.map(image => ({
     'source': 'archive',
     'basename': image.basename.replace('-small', '') || image.basename.replace('-large', ''),
+    'id': image.id,
+    'url': image.url,
     'filter': image.FILTER
   }))]
   const requestBody = {
@@ -57,6 +59,8 @@ async function createNewDataSession(){
   const inputData = props.newImages.map(image => ({
     'source': 'archive',
     'basename': image.basename.replace('-small', '') || image.basename.replace('-large', ''),
+    'id': image.id,
+    'url': image.url,
     'filter': image.FILTER
   }))
   const requestBody = {
diff --git a/src/components/Project/ImageAnalysis/ImageAnalyzer.vue b/src/components/Project/ImageAnalysis/ImageAnalyzer.vue
index 159c7927..76ec27ea 100644
--- a/src/components/Project/ImageAnalysis/ImageAnalyzer.vue
+++ b/src/components/Project/ImageAnalysis/ImageAnalyzer.vue
@@ -39,6 +39,7 @@ function closeDialog() {
   startCoords.value = null
   endCoords.value = null
   headerData.value = null
+  positionAngle.value = null
   emit('update:modelValue', false)
 }
 
@@ -47,6 +48,7 @@ function requestAnalysis(action, input, action_callback=null){
   const url = configStore.datalabApiBaseUrl + 'analysis/' + action + '/'
   const body = {
     'basename': props.image.basename,
+    'source': props.image.source,
     ...input
   }
   fetchApiCall({url: url, method: 'POST', body: body, successCallback: (response) => {handleAnalysisOutput(response, action, action_callback)}})
@@ -111,10 +113,13 @@ function showHeaderDialog() {
         />
         <v-toolbar-title>{{ image.basename || "Unknown" }}</v-toolbar-title>
         <image-download-menu
-          :image="image"
+          :image-name="image.basename"
+          :fits-url="image.url || image.fits_url"
+          :jpg-url="image.largeCachedUrl"
           @analysis-action="requestAnalysis"
         />
         <v-btn
+          v-if="image.id"
           icon="mdi-information"
           @click="showHeaderDialog"
         />
@@ -145,8 +150,8 @@ function showHeaderDialog() {
             rounded
           >
             <line-plot
-              :y-axis-luminosity="lineProfile"
-              :x-axis-arcsecs="lineProfileLength"
+              :y-axis-data="lineProfile"
+              :x-axis-length="lineProfileLength"
               :start-coords="startCoords"
               :end-coords="endCoords"
               :position-angle="positionAngle"
@@ -212,11 +217,11 @@ a{
 }
 .basic-info-sheet{
   padding: 1rem;
+  margin-bottom: 1rem;
   color: var(--tan);
   background-color: var(--metal);
 }
 .line-plot-sheet {
-  margin-top: 1rem;
   padding: 1rem;
   background-color: var(--metal);
   height: 100%;
diff --git a/src/components/Project/ImageAnalysis/ImageDownloadMenu.vue b/src/components/Project/ImageAnalysis/ImageDownloadMenu.vue
index d81d1105..61e2ee0c 100644
--- a/src/components/Project/ImageAnalysis/ImageDownloadMenu.vue
+++ b/src/components/Project/ImageAnalysis/ImageDownloadMenu.vue
@@ -1,7 +1,23 @@
 <script setup>
 import { useAlertsStore } from '@/stores/alerts'
 
-const props = defineProps(['image', 'tifUrl'])
+const props = defineProps({
+  imageName: {
+    type: String,
+    required: true,
+    default: null,
+  },
+  fitsUrl: {
+    type: String,
+    required: false,
+    default: null,
+  },
+  jpgUrl: {
+    type: String,
+    required: false,
+    default: null,
+  },
+})
 
 defineEmits(['analysisAction'])
 
@@ -12,6 +28,7 @@ function downloadLink(link, filename, fileType='file'){
     alertStore.setAlert('error', `No ${fileType} available for download`)
     return
   }
+  // Create a link element and click it to download the file
   const a = document.createElement('a')
   a.href = link
   a.download = filename
@@ -33,19 +50,21 @@ function downloadLink(link, filename, fileType='file'){
       />
     </template>
     <v-btn
+      v-if="props.fitsUrl"
       key="1"
       text=".FITS"
-      @click="downloadLink(props.image.url, props.image.basename, 'FITs')"
+      @click="downloadLink(props.fitsUrl, props.imageName, 'FITs')"
     />
     <v-btn
       key="2"
       text=".TIF"
-      @click="$emit('analysisAction', 'get-tif', {'basename': props.image.basename}, downloadLink)"
+      @click="$emit('analysisAction', 'get-tif', {'basename': props.imageName}, downloadLink)"
     />
     <v-btn
+      v-if="props.jpgUrl"
       key="3"
       text=".JPG"
-      @click="downloadLink(props.image.largeCachedUrl, props.image.basename, 'JPG')"
+      @click="downloadLink(props.jpgUrl, props.imageName, 'JPG')"
     />
   </v-speed-dial>
 </template>
diff --git a/src/components/Project/ImageAnalysis/ImageViewer.vue b/src/components/Project/ImageAnalysis/ImageViewer.vue
index 4505dde7..eda75ce2 100644
--- a/src/components/Project/ImageAnalysis/ImageViewer.vue
+++ b/src/components/Project/ImageAnalysis/ImageViewer.vue
@@ -54,9 +54,6 @@ function loadImageOverlay() {
     maxBoundsViscosity: 1.0,
   })
 
-  // Layer control allows the toggling of layers on the map
-  layerControl = L.control.layers(null, null, {collapsed:false}).addTo(imageMap)
-
   const img = new Image()
   img.src = props.imageSrc
   
@@ -216,6 +213,9 @@ function createCatalogLayer(){
   // Displays the catalog layer by default
   catalogLayerGroup.addTo(imageMap)
 
+  // Layer control allows the toggling of layers on the map
+  layerControl = L.control.layers(null, null, {collapsed:false}).addTo(imageMap)
+
   layerControl.addOverlay(catalogLayerGroup, 'Source Catalog')
 }
 
diff --git a/src/components/Project/ImageAnalysis/LinePlot.vue b/src/components/Project/ImageAnalysis/LinePlot.vue
index 378dfb15..fb132f16 100644
--- a/src/components/Project/ImageAnalysis/LinePlot.vue
+++ b/src/components/Project/ImageAnalysis/LinePlot.vue
@@ -1,140 +1,138 @@
 <script setup>
-import { onMounted, ref, watch } from 'vue'
-import * as d3 from 'd3'
-
-const svg = ref(null)
-
-const props = defineProps(['yAxisLuminosity', 'xAxisArcsecs', 'startCoords', 'endCoords', 'positionAngle'])
-
-// Setting dimensions and margins for the plot
-const margin = { top: 0, right: 40, bottom: 50, left: 60 },
-  svgWidth = 500,
-  svgHeight = 350,
-  width = svgWidth - margin.left - margin.right,
-  height = svgHeight - margin.top - margin.bottom
-
-// Configuring linear scales for positioning data points
-let x = d3.scaleLinear().range([0, width])
-let y = d3.scaleLinear().range([height, 0])
-let svgElement
-
-
-// Mapping an array of data points to an SVG path
-const line = d3.line()
-// index of each point for x
-  .x((d, i) => x((i / (props.yAxisLuminosity.length - 1)) * props.xAxisArcsecs))
-  // value for y
-  .y(d => y(d))
-
-
-const updateAxes = () => {
-  const maxX = props.xAxisArcsecs
-  // Add 5% to the largest number to buffer the plot
-  const maxY = d3.max(props.yAxisLuminosity) * 1.05
+import Chart from 'chart.js/auto'
+import { ref, watch } from 'vue'
+
+const chartRef = ref(null)
+let lineProfileChart = null
+
+const props = defineProps({
+  yAxisData: { type: Array, required: true },
+  xAxisLength: { type: Number, default: null },
+  startCoords: { type: Array, default: null },
+  endCoords: { type: Array, default: null },
+  positionAngle: { type: Number, default: null },
+})
 
-  x.domain([0, maxX])
-  y.domain([0, maxY])
+// chartJs can't use css vars as strings, so we need to get the actual value
+var style = getComputedStyle(document.body)
+const tan = style.getPropertyValue('--tan')
+const darkBlue = style.getPropertyValue('--dark-blue')
+const lightBlue = style.getPropertyValue('--light-blue')
+const darkGreen = style.getPropertyValue('--dark-green')
 
-  svgElement.select('.x.axis').call(d3.axisBottom(x))
-  svgElement.select('.y.axis').call(d3.axisLeft(y))
+watch(() => [props.yAxisData, props.xAxisLength], () => {
+  lineProfileChart ? updateChart() : createChart()
+})
 
-  updatePlot()
+function createChart (){
+  lineProfileChart = new Chart(chartRef.value, {
+    type: 'line',
+    data: {
+      labels: generateLabels(),
+      datasets: [
+        {
+          label: 'Flux',
+          data: props.yAxisData,
+          // Line styling
+          borderColor: lightBlue,
+          borderWidth: 2,
+          borderJoinStyle: 'round',
+          backgroundColor: lightBlue,
+          // Point styling
+          pointRadius: 0,
+          // Point hover styling
+          pointHitRadius: 10,
+          pointHoverBorderColor: darkGreen,
+          pointHoverBackgroundColor: darkGreen,
+        },
+      ],
+    },
+    options: {
+      scales: {
+        x: {
+          title: { display: true, text: distanceLabel(), color: tan, size: 14 },
+          border: { color: tan, width: 2 },
+          ticks: { color: tan, autoSkip: true, autoSkipPadding: 10 , maxRotation: 0 },
+          grid: { color: darkBlue },
+        },
+        y: {
+          title: { display: true, text: 'Luminosity', color: tan },
+          border: { color: tan, width: 2 },
+          ticks: { color: tan, autoSkip: true, },
+          grid: { color: darkBlue },
+        },
+      },
+      plugins: {
+        title: { display: true, text: 'Line Profile', color: tan },
+        legend: { display: false },
+        tooltip: {
+          titleAlign: 'center',
+          titleColor: tan,
+          bodyAlign: 'center',
+          bodyColor: tan,
+          backgroundColor: darkGreen,
+          displayColors: false,
+        },
+      },
+    },
+  })
 }
 
-const updatePlot = () => {
-  // Clearing the existing line before drawing a new one
-  svgElement.selectAll('.line').remove()
-  // Getting new data points and drawing a new line
-  svgElement.append('path')
-    .datum(props.yAxisLuminosity)
-    .attr('class', 'line')
-    .attr('d', line)
-    .attr('fill', 'none')
-    .attr('stroke', 'steelblue')
-    .attr('stroke-width', 1)
+function updateChart(){
+  lineProfileChart.data.labels = generateLabels()
+  lineProfileChart.data.datasets[0].data = props.yAxisData
+  lineProfileChart.options.scales.x.title.text = distanceLabel()
+  lineProfileChart.update()
 }
 
-watch(() => [props.yAxisLuminosity, props.xAxisArcsecs], () => {
-  updateAxes()
-})
-
-onMounted(() => {
-  svgElement = d3.select(svg.value)
-    .append('g')
-    .attr('transform', `translate(${margin.left},${margin.top})`)
-
-  const xAxis = svgElement.append('g')
-    .attr('class', 'x axis')
-    .attr('transform', `translate(0,${height})`)
-
-  const yAxis = svgElement.append('g')
-    .attr('class', 'y axis')
-
-  updateAxes()
-
-  // Labeling and styling axes
-  xAxis.append('text')
-    .attr('class', 'axis-label')
-    .attr('x', width / 2)
-    .attr('y', margin.bottom)
-    .attr('fill', 'var(--tan)')
-    .style('font-size', '16px')
-    .style('font-family', 'Open Sans, sans-serif')
-    .style('text-anchor', 'middle')
-    .text('Arcseconds')
-
-  yAxis.append('text')
-    .attr('class', 'axis-label')
-    .attr('transform', 'rotate(-90)')
-    .attr('y', -margin.left)
-    .attr('x', -(height / 2))
-    .attr('dy', '1em')
-    .attr('fill', 'var(--tan)')
-    .style('font-size', '16px')
-    .style('font-family', 'Open Sans, sans-serif')
-    .style('text-anchor', 'middle')
-    .text('Luminosity')
+// Creates the labels for the x-axis
+function generateLabels() {
+  const length = props.xAxisLength
+  const data = props.yAxisData
+  
+  if (!length) {
+    // If image has no pixScale or WCS we don't have the arcsec length, use data to find pixel length
+    return Array.from({ length: data.length }, (_, i) => i)
+  }
+
+  const step = length / (data.length - 1)
+  return Array.from({ length: data.length }, (_, i) => (i * step).toFixed(0))
+}
 
-})
+function distanceLabel(){
+  if(props.xAxisLength){ 
+    return 'Distance ' + (props.xAxisLength.toFixed(6) + ' (arcseconds)') 
+  }
+  else { 
+    return 'Distance ' + (props.yAxisData.length + ' (pixels)') 
+  }
+}
 </script>
 
 <template>
-  <div class="svg-wrapper">
-    <svg
-      ref="svg"
-      class="line-plot"
-      :width="svgWidth"
-      :height="svgHeight"
-    />
-  </div>
-  <div
-    class="line-details"
-  >
-    <p v-if="xAxisArcsecs">
-      Distance: {{ xAxisArcsecs.toFixed(3) }} arcseconds
-    </p>
+  <canvas
+    ref="chartRef"
+    class="line-plot"
+  />
+  <div class="line-details">
     <p v-if="startCoords">
-      Start: RA {{ startCoords[0].toFixed(3) }} DEC {{ startCoords[1].toFixed(3) }}
+      <b>Start:</b> RA {{ startCoords[0].toFixed(6) }} DEC {{ startCoords[1].toFixed(6) }}
     </p>
     <p v-if="endCoords">
-      End: RA {{ endCoords[0].toFixed(3) }} DEC {{ endCoords[1].toFixed(3) }}
+      <b>End:</b> RA {{ endCoords[0].toFixed(6) }} DEC {{ endCoords[1].toFixed(6) }}
     </p>
     <p v-if="positionAngle">
-      Position Angle: {{ positionAngle.toFixed(3) }}° East of North
+      <v-tooltip
+        activator="parent"
+        text="Angle showing how a celestial object is rotated in the sky"
+      />
+      <b>Position Angle:</b> {{ positionAngle.toFixed(3) }}° East of North
     </p>
   </div>
 </template>
 
 <style scoped>
-.line-plot {
-  color: var(--tan);
-  font-family: 'Open Sans', sans-serif;
-}
-.axis-label {
-  color: var(--tan);
-}
-.line-details {
-  color: var(--tan);
-  font-family: 'Open Sans', sans-serif;
+.line-details{
+  margin-top: 2rem;
 }
 </style>
diff --git a/src/utils/api.js b/src/utils/api.js
index cd567e52..d24b5d6a 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -1,5 +1,6 @@
 import { useUserDataStore } from '@/stores/userData'
 import { useConfigurationStore } from '@/stores/configuration'
+import { useAlertsStore } from '@/stores/alerts'
 
 // handles api requests for datasessions with configurable parameters and callback functions
 async function fetchApiCall({ url, method, body = null, header, successCallback = null, failCallback = handleError }) {
@@ -28,7 +29,6 @@ async function fetchApiCall({ url, method, body = null, header, successCallback
     } else {
       const responseData = await response.json()
       if (!response.ok) {
-        console.error('Response not OK', responseData)
         failCallback ? failCallback(responseData, response.status) : null
       } else {
         // Invoking success callback with responseData
@@ -43,8 +43,9 @@ async function fetchApiCall({ url, method, body = null, header, successCallback
 }
 
 // manages api call failures by logging errors
-const handleError = (error) => {
-  console.error('API call failed with error:', error)
+const handleError = (response) => {
+  const alert = useAlertsStore()
+  response.error ? alert.setAlert('error', response.error) : console.error('API call failed with error:', response)
 }
 
 function deleteOperation(sessionId, operationId, successCallback, failCallback = handleError) {

From e50cb0277a7a94ca0f06fc9fdbc929b357dc2105 Mon Sep 17 00:00:00 2001
From: Lloyd Dakin <taidakin99lol@gmail.com>
Date: Tue, 3 Dec 2024 10:50:21 -0800
Subject: [PATCH 2/3] handle null flux ra and dec

---
 src/components/Project/ImageAnalysis/ImageViewer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Project/ImageAnalysis/ImageViewer.vue b/src/components/Project/ImageAnalysis/ImageViewer.vue
index eda75ce2..d64493d8 100644
--- a/src/components/Project/ImageAnalysis/ImageViewer.vue
+++ b/src/components/Project/ImageAnalysis/ImageViewer.vue
@@ -203,7 +203,7 @@ function createCatalogLayer(){
       snapIgnore: false, // Allow snapping to this layer
     })
 
-    sourceMarker.bindPopup(`Flux: ${source.flux}<br>Ra: ${source.ra}<br>Dec: ${source.dec}`)
+    sourceMarker.bindPopup(`Flux: ${source.flux ?? 'N/A'}<br>Ra: ${source.ra ?? 'N/A'}<br>Dec: ${source.dec ?? 'N/A'}`)
     sourceCatalogMarkers.push(sourceMarker)
   })
 

From 7cff85db8c714450f26f7365875e28f0a68fd6d0 Mon Sep 17 00:00:00 2001
From: Lloyd Dakin <taidakin99lol@gmail.com>
Date: Tue, 3 Dec 2024 11:03:53 -0800
Subject: [PATCH 3/3] removed unused attribute

---
 src/components/Project/ImageAnalysis/LinePlot.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Project/ImageAnalysis/LinePlot.vue b/src/components/Project/ImageAnalysis/LinePlot.vue
index fb132f16..f73661a4 100644
--- a/src/components/Project/ImageAnalysis/LinePlot.vue
+++ b/src/components/Project/ImageAnalysis/LinePlot.vue
@@ -50,7 +50,7 @@ function createChart (){
     options: {
       scales: {
         x: {
-          title: { display: true, text: distanceLabel(), color: tan, size: 14 },
+          title: { display: true, text: distanceLabel(), color: tan },
           border: { color: tan, width: 2 },
           ticks: { color: tan, autoSkip: true, autoSkipPadding: 10 , maxRotation: 0 },
           grid: { color: darkBlue },