Merge pull request #1 from Carifio24/updates

Updates and build workflows

.github/workflows/build-deploy.yml

@@ -0,0 +1,57 @@
+name: Build and Deploy
+
+on:
+  push:
+    branches:
+      main
+
+jobs:
+  build:
+    if: ${{ github.repository_owner == 'cosmicds' }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          persist-credentials: false
+          ref: ${{ github.event.pull_request.head.sha }}
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.17.1'
+
+      - name: Yarn install
+        run: yarn install
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Build
+        run: yarn build
+
+          # - name: BrowserStack env setup
+          #   uses: browserstack/github-actions/setup-env@master
+          #   with:
+          #     username:  ${{ secrets.BROWSERSTACK_USERNAME }}
+          #     access-key: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
+
+          # - name: BrowserStack local tunnel setup
+          #   uses: browserstack/github-actions/setup-local@master
+          #   with:
+          #     local-testing: start
+          #     local-identifier: random
+
+          # - name: Run BrowserStack tests
+          #   run: |
+          #     set -xeuo pipefail
+          #     yarn serve &
+          #     sleep 10
+          #     yarn test-bslocal -e default,firefox,edge,safari -o reports
+
+      - name: Deploy to GitHub Pages
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          branch: gh-pages
+          folder: dist
+          ssh-key: ${{ secrets.DEPLOY_KEY }}

.github/workflows/build.yml

@@ -0,0 +1,56 @@
+name: Build
+
+on:
+  pull_request_target:
+    branches:
+      main
+
+permissions: read-all
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          persist-credentials: false
+          ref: ${{ github.event.pull_request.head.sha }}
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.17.1'
+
+      - name: Yarn install
+        run: yarn install
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Build
+        run: yarn build
+
+          # - name: BrowserStack env setup
+          #   uses: browserstack/github-actions/setup-env@master
+          #   with:
+          #     username:  ${{ secrets.BROWSERSTACK_USERNAME }}
+          #     access-key: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
+
+          # - name: 'BrowserStack local tunnel setup'
+          #   uses: browserstack/github-actions/setup-local@master
+          #   with:
+          #     local-testing: start
+          #     local-identifier: random
+
+          # - name: Run BrowserStack tests
+          #   run: |
+          #     set -xeuo pipefail
+          #     yarn serve &
+          #     sleep 10
+          #     yarn test-bslocal -e default,firefox,edge,safari -o reports
+
+          # - name: 'BrowserStackLocal Stop'  # Terminating the BrowserStackLocal tunnel connection
+          #   uses: browserstack/github-actions/setup-local@master
+          #   with:
+          #     local-testing: stop

package.json

@@ -1,11 +1,14 @@
 {
-  "name": "@minids/pinwheel-supernova",
+  "name": "@cosmicds/pinwheel-supernova",
   "version": "0.0.0",
   "dependencies": {
+    "@cosmicds/vue-toolkit": "^0.1.3",
     "@kyvg/vue3-notification": "^2.8.0",
-    "@minids/common": "workspace:0.0.0",
     "@vuepic/vue-datepicker": "^3.6.5",
     "@wwtelescope/astro": "^0.2.2",
+    "@wwtelescope/engine": "^7.29.3",
+    "@wwtelescope/engine-helpers": "^0.16.0",
+    "@wwtelescope/engine-types": "^0.6.7",
     "assert": "^2.0.0",
     "chart.js": "^4.3.0",
     "d3": "^7.8.4",

src/Credits.vue

@@ -2,61 +2,44 @@
   <div id="credits" class="ui-text">
     <div id="icons-container">
       <a href="https://www.cosmicds.cfa.harvard.edu/" target="_blank"
-        ><img alt="CosmicDS Logo" src="../../assets/cosmicds_logo_for_dark_backgrounds.png"
+        ><img alt="CosmicDS Logo" src="https://cosmicds.github.io/cds-website/logos/cosmicds_logo_for_dark_backgrounds.png"
       /></a>
       <a href="https://worldwidetelescope.org/home/" target="_blank"
-        ><img alt="WWT Logo" src="../../assets/logo_wwt.png"
+        ><img alt="WWT Logo" src="https://cosmicds.github.io/cds-website/logos/logo_wwt.png"
       /></a>
       <a href="https://mo-www.cfa.harvard.edu/MicroObservatory/" target="_blank" class="pl-1"
         ><img alt="MicroObservatory at CfA" src="../src/assets/MicroObservatory_Logo.png"
       /></a>
       <a href="https://science.nasa.gov/learners" target="_blank" class="pl-1"
-        ><img alt="SciAct Logo" src="../../assets/logo_sciact.png"
+        ><img alt="SciAct Logo" src="https://cosmicds.github.io/cds-website/logoslogo_sciact.png"
       /></a>
       <a href="https://nasa.gov/" target="_blank" class="pl-1"
-        ><img alt="SciAct Logo" src="../../assets/NASA_Partner_color_300_no_outline.png"
+        ><img alt="SciAct Logo" src="https://cosmicds.github.io/cds-website/logos/NASA_Partner_color_300_no_outline.png"
       /></a>
     </div>
   </div>
 </template>
 
 
 <script lang="ts">
-import { defineComponent, } from "vue";
-
-
+import { defineComponent } from "vue";
 
 export default defineComponent({
 
-
   props: {
     visible: {
       type: Boolean,
       default: true
     },
   },
 
-  data() {
-    return {    };
-  },
-
-  created() {
-    return;
-  },
-
-  methods: {
-    
-  },
-
   computed: { 
 
     isMobile() {
       return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent));
     },
-  },
-
-  watch: {
   }
+
 });
 </script>
 
@@ -110,4 +93,4 @@ export default defineComponent({
     height: 24px;
   }
 }
-</style>
+</style>

src/M101SN.vue

@@ -679,21 +679,20 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { csvFormatRows, csvParse } from "d3-dsv";
+import { csvParse } from "d3-dsv";
 
 import { distance } from "@wwtelescope/astro";
-import { Color, Constellations, Folder, Grids, Layer, LayerManager, Poly, RenderContext, Settings, SpreadSheetLayer, WWTControl } from "@wwtelescope/engine";
-import { MarkerScales, PlotTypes, Thumbnail } from "@wwtelescope/engine-types";
+import { Constellations, Folder, Grids, ImageSetLayer, Layer, LayerManager, Place, Poly, RenderContext, Settings, SpreadSheetLayer, WWTControl } from "@wwtelescope/engine";
+import { Thumbnail } from "@wwtelescope/engine-types";
 
 import L, { LeafletMouseEvent, Map } from "leaflet";
 import { getTimezoneOffset } from "date-fns-tz";
 import tzlookup from "tz-lookup";
-import { MiniDSBase, BackgroundImageset, skyBackgroundImagesets } from "@minids/common";
+import { MiniDSBase, BackgroundImageset, skyBackgroundImagesets } from "@cosmicds/vue-toolkit";
 
-import { ImageSetLayer, Place } from "@wwtelescope/engine";
 import { applyImageSetLayerSetting } from "@wwtelescope/engine-helpers";
 
-import {GotoRADecZoomParams} from "@wwtelescope/engine-pinia";
+import { GotoRADecZoomParams } from "@wwtelescope/engine-pinia";
 
 import { drawSkyOverlays, initializeConstellationNames, makeAltAzGridText, drawSpreadSheetLayer, layerManagerDraw } from "./wwt-hacks";
 
@@ -761,27 +760,6 @@ const aavsoLightCurveTable = csvParse(aavsoLightCurve, (d) => {
 type Table = typeof fullDatesTable;
 type TableRow = typeof fullDatesTable[number];
 
-function formatCsvTable(table: Table): string {
-  return csvFormatRows([[
-    "Date", "RA", "Dec"
-  ]].concat(table.map((d, _i) => {
-    return [
-      d.date.toISOString(),
-      d.ra.toString(),
-      d.dec.toString(),
-      // d.tMag.toString(),
-      // d.angspeed.toString(),
-    ];
-  }))).replace(/\n/g, '\r\n');
-  // By using a regex, we replace all instances.
-  // For WWT implementation reasons (left over from 
-  // the Windows client?), we need the line endings 
-  // to be CRLF // lol
-}
-
-// const fullDatesString = formatCsvTable(fullDatesTable);
-// const imageDatesString = formatCsvTable(imageDatesTable);
-
 const allDates = fullDatesTable.map(r => r.date.getTime());
 const imageDates = [... new Set(imageDatesTable.map(r => r.date.getTime()))];
 const minDate = Math.min(...allDates, ...imageDates)-2*MILLISECONDS_PER_DAY;
@@ -2427,7 +2405,7 @@ export default defineComponent({
 <style lang="less">
 @font-face {
   font-family: "Highway Gothic Narrow";
-  src: url("../../assets/HighwayGothicNarrow.ttf");
+  src: url("https://cosmicds.github.io/cds-website/fonts/HighwayGothicNarrow.ttf");
 }
 
 html {
@@ -2513,7 +2491,7 @@ body {
     align-items: center;
     justify-content: center;
     .spinner {
-      background-image: url("../../assets/lunar_loader.gif");
+      background-image: url("https://cosmicds.github.io/cds-website/misc/lunar_loader.gif");
       background-repeat: no-repeat;
       background-size: contain;
       width: 3rem;

src/chartjs-scatter.vue

@@ -195,6 +195,9 @@ export default defineComponent({
       // https://stackoverflow.com/questions/72214227/chart-js-add-direction-arrows-to-the-x-and-y-axes
       const arrowBorder = {
         id: 'arrowBorder',
+        // JC: I don't know whether or not these unused fields are actually needed,
+        // so I just decided to leave them
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         afterDatasetsDraw(chart: Chart, args: any, pluginOptions: any) {
           const {
             ctx,
@@ -203,7 +206,9 @@ export default defineComponent({
               bottom,
               left,
               right,
+              // eslint-disable-next-line @typescript-eslint/no-unused-vars
               width,
+              // eslint-disable-next-line @typescript-eslint/no-unused-vars
               height
             }
           } = chart;

src/main.ts

@@ -9,10 +9,7 @@ import chartjsScatter from "./chartjs-scatter.vue";
 import d3Scatter from "./d3-scatter.vue";
 // import PlotDataPlotly from "./PlotDataPlotly.vue";
 import ConstellationIcon from "./ConstellationIcon.vue";
-import { IconButton } from "@minids/common";
-import { FundingAcknowledgment } from "@minids/common";
-
-import { Gallery } from "@minids/common";
+import { FundingAcknowledgment, Gallery, IconButton } from "@cosmicds/vue-toolkit";
 
 import "./polyfills";
 
@@ -84,7 +81,7 @@ import "leaflet/dist/leaflet.css";
 const update = (el: HTMLElement, binding: Vue.DirectiveBinding) => el.style.visibility = (binding.value) ? "hidden" : "";
 
 createApp(M101SN, {
-  wwtNamespace: "wwt-minids-m101-supernova",
+  wwtNamespace: "pinwheel-supernova",
   wtml: { // images are listed in chronological order earliest to latest
     imageCollection: "https://raw.githubusercontent.com/johnarban/wwt_interactives/main/images/m101/m101_all.wtml",
   },

vue.config.js

@@ -1,13 +1,24 @@
 const { VuetifyPlugin } = require('webpack-plugin-vuetify');
-const { defineConfig } = require("@vue/cli-service")
+const { defineConfig } = require("@vue/cli-service");
+const webpack = require("webpack");
+const path = require("path");
 
 module.exports = defineConfig({
   publicPath: "./",
 
   configureWebpack: {
     plugins: [
-      new VuetifyPlugin()
-    ]
+      new VuetifyPlugin(),
+      new webpack.DefinePlugin({
+          // https://github.com/vuejs/vue-cli/pull/7443
+          __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
+        })
+      ],
+    resolve: {
+      alias: {
+        vue: path.resolve("./node_modules/vue")
+      }
+    }
   },
 
   // Needed for BrowserStack/Safari testing as of 2023 March. This makes the