Skip to content

Commit

Permalink
Merge pull request #15 from Carifio24/more-stories
Browse files Browse the repository at this point in the history
Add more stories to Storybook documentation
  • Loading branch information
Carifio24 authored Aug 26, 2024
2 parents f904c9a + 3681714 commit 60e0f8e
Show file tree
Hide file tree
Showing 10 changed files with 316 additions and 7 deletions.
2 changes: 2 additions & 0 deletions .storybook/preview.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { setup, type Preview } from "@storybook/vue3";
import { wwtPinia } from "@wwtelescope/engine-pinia";

import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
Expand All @@ -10,6 +11,7 @@ const vuetify = createVuetify({
});

setup((app) => {
app.use(wwtPinia);
app.use(vuetify);
});

Expand Down
5 changes: 3 additions & 2 deletions src/components/Gallery.vue
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<img
class="noselect"
:src="places[previewIndex] ? (getImageset(places[previewIndex])?.get_thumbnailUrl() ?? '') : ''"
/>
/>
</div>
</slot>
</div>
Expand Down Expand Up @@ -69,11 +69,12 @@
import { ref, reactive, computed, watch, onBeforeMount, toRaw } from "vue";
import { engineStore } from "@wwtelescope/engine-pinia";
import { Folder, Imageset, Place } from "@wwtelescope/engine";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faTimes } from "@fortawesome/free-solid-svg-icons";
library.add(faTimes);
import { filterInPlace } from "@/utils";
import { filterInPlace } from "../utils";
import { GalleryProps } from "../types";
Expand Down
4 changes: 2 additions & 2 deletions src/components/LocationSelector.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,15 @@ import L, { CircleMarkerOptions, LeafletMouseEvent, Map } from 'leaflet';
import "leaflet/dist/leaflet.css";
import { notify } from "@kyvg/vue3-notification";
import { useGeolocation } from "@/geolocation";
import { useGeolocation } from "../geolocation";
import { GeoJSONProp, LeafletMapOptions, LocationDeg, LocationSelectorProps, PlaceDeg } from "../types";
const defaultMapOptions: LeafletMapOptions = {
templateUrl: 'https://{s}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}',
minZoom: 1,
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3'],
subdomains: ['mt0','mt1','mt2','mt3'],
attribution: `&copy <a href="https://www.google.com/maps">Google Maps</a>`,
className: 'map-tiles'
};
Expand Down
3 changes: 1 addition & 2 deletions src/stories/CreditLogos.stories.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
/* eslint-disable @typescript-eslint/naming-convention */

import { Meta, StoryObj } from "@storybook/vue3";
import { CreditLogosProps } from "../types";
import CreditLogos from "../components/CreditLogos.vue";
import { CreditLogos, CreditLogosProps } from "..";

const meta: Meta<typeof CreditLogos> = {
component: CreditLogos,
Expand Down
26 changes: 26 additions & 0 deletions src/stories/FundingAcknowledgement.stories.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
/* eslint-disable @typescript-eslint/naming-convention */

import { Meta, StoryObj } from "@storybook/vue3";
import { FundingAcknowledgement, FundingAcknowledgementProps } from "..";

const meta: Meta<typeof FundingAcknowledgement> = {
component: FundingAcknowledgement,
tags: ["autodocs"],
};

export default meta;
type Story = StoryObj<typeof FundingAcknowledgement>;

export const Primary: Story = {
render: (args: FundingAcknowledgementProps) => ({
components: { FundingAcknowledgement },
template: `<FundingAcknowledgement v-bind="args" />`,
setup() {
return { args };
}
}),
args: {
color: "#E0E0E0",
backgroundColor: "#0C3D91",
}
};
43 changes: 43 additions & 0 deletions src/stories/Gallery.stories.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
/* eslint-disable @typescript-eslint/naming-convention */

import { Meta, StoryObj } from "@storybook/vue3";
import { Gallery, GalleryProps } from "..";
import { WWTComponent } from "@wwtelescope/engine-pinia";

const meta: Meta<typeof Gallery> = {
component: Gallery,
tags: ["autodocs"],
};

export default meta;
type Story = StoryObj<typeof Gallery>;

export const Primary: Story = {
render: (args: GalleryProps) => ({
components: { Gallery, WWTComponent },
template: `
<div>
<WWTComponent
:wwtNamespace="storybook"
style="display: none"
/>
<Gallery v-bind="args" />
</div>
`,
setup() {
return { args };
},
}),
args: {
wtmlUrl: "https://raw.githubusercontent.com/johnarban/wwt_interactives/main/images/m101/gallery.wtml",
columns: 2,
width: "500px",
maxHeight: "500px",
title: "Example Gallery",
selectedColor: "#1E90FF",
singleSelect: true,
highlightLastOnly: true,
previewIndex: 0,
closedText: "Open the gallery!",
},
};
2 changes: 1 addition & 1 deletion src/stories/IconButton.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import { Meta, StoryObj } from "@storybook/vue3";
import { IconButtonProps } from "../types";
import IconButton from "../components/IconButton.vue";
import { IconButton } from "..";

import { library } from "@fortawesome/fontawesome-svg-core";
import { faBookOpen } from "@fortawesome/free-solid-svg-icons";
Expand Down
70 changes: 70 additions & 0 deletions src/stories/LocationSelector.stories.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
/* eslint-disable @typescript-eslint/naming-convention */

import { Meta, StoryObj } from "@storybook/vue3";
import { LocationSelector, LocationSelectorProps } from "..";
import { ref } from "vue";

const meta: Meta<typeof LocationSelector> = {
component: LocationSelector,
tags: ["autodocs"],
};

export default meta;
type Story = StoryObj<typeof LocationSelector>;

// Default location is Harvard College Observatory
const location = ref({
latitudeDeg: 42.3814,
longitudeDeg: -71.1281,
});
console.log(location);
export const Primary: Story = {
render: (args: LocationSelectorProps) => ({
components: { LocationSelector },
template: `
<LocationSelector
style="width: 300px; height: 400px;"
v-bind="args"
/>`,
setup() {
return { args };
}
}),
decorators: [
() => {
return { template: `<div style="display: flex; justify-content: center"><story /></div>` };
}
],
args: {
activatorColor: "#ffffff",
detectLocation: true,
modelValue: location,
mapOptions: {
templateUrl: 'https://{s}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}',
minZoom: 1,
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3'],
attribution: `&copy <a href="https://www.google.com/maps">Google Maps</a>`,
className: 'map-tiles',
},
places: [],
placeCircleOptions: {
color: "#0000FF",
fillColor: "#3333FF",
fillOpacity: 0.5,
radius: 150,
},
placeSelectable: true,
selectable: true,
selectedCircleOptions: {
color: "#FF0000",
fillColor: "#FF0033",
fillOpacity: 0.5,
radius: 200,
},
selectionEvent: "click",
worldRadii: true,
geoJsonFiles: [],
layers: [],
}
};
48 changes: 48 additions & 0 deletions src/stories/WwtHud.stories.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/* eslint-disable @typescript-eslint/naming-convention */

import { Meta, StoryObj } from "@storybook/vue3";
import { engineStore, WWTComponent } from "@wwtelescope/engine-pinia";
import { WwtHud, WwtHUDProps } from "..";

const meta: Meta<typeof WwtHud> = {
component: WwtHud,
tags: ["autodocs"],
};

export default meta;
type Story = StoryObj<typeof WwtHud>;

export const Primary: Story = {
render: (args: WwtHUDProps) => {
const store = engineStore();
return {
components: { WwtHud, WWTComponent },
template: `
<div style="width: 300px; height: 600px">
<WWTComponent
:wwtNamespace="storybook"
style="display: none"
/>
<WwtHud v-bind="args" :store="store" />
</div>
`,
setup() {
return { args, store };
}
};
},
args: {
location: {
top: "50%",
left: "50%",
},
offsetCenter: {
x: 0.5,
y: 0.5,
},
otherVariables: {},
fontSize: "14pt",
backgroundColor: "rgba(0, 0, 0, 0.5)",
textShadow: null,
}
};
120 changes: 120 additions & 0 deletions src/stories/assets/gallery.wtml
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
<?xml version='1.0' encoding='UTF-8'?>
<Folder Browseable="True"
Group="Explorer"
Name="Folder"
Searchable="True">
<Place
Name="Discovery Image (Koichi Itagaki)"
RA="14.054307666666666"
Dec="54.312844"
ZoomLevel="0.6815819999999999"
DataSetType="Sky"
Opacity="100"
Thumbnail="https://johnarban.github.io/wwt_interactives/images/m101/discovery_thumb.jpg"
Constellation="">
<ForegroundImageSet>
<ImageSet DataSetType="Sky"
BandPass="Visible"
Url="https://johnarban.github.io/wwt_interactives/images/m101/m101_discovery.jpg"
TileLevels="0"
WidthFactor="2"
Rotation="-2.8000000000000114"
Projection="SkyImage"
FileType=".tif"
CenterY="54.312844"
CenterX="210.814615"
BottomsUp="False"
OffsetX="443.6"
OffsetY="198"
BaseTileLevel="0"
BaseDegreesPerTile="0.0003442333333333333">
<Credits>Koichi Itagaki</Credits>
<CreditsUrl>https://www.wis-tns.org/object/2023ixf/discovery-cert</CreditsUrl>
<ThumbnailUrl>https://johnarban.github.io/wwt_interactives/images/m101/discovery_thumb.jpg</ThumbnailUrl>
</ImageSet>
</ForegroundImageSet>
</Place>
<Place Angle="0"
AngularSize="0"
Constellation="UMA"
DataSetType="Sky"
Dec="54.35401801671693"
Magnitude="0"
Name="Hubble image from before the Supernova"
Opacity="100"
RA="14.052657702093098"
Rotation="0"
Thumbnail="https://johnarban.github.io/wwt_interactives/images/m101/hubble_m101/thumb.jpg"
ZoomLevel="3.009844396799986">
<ForegroundImageSet>
<ImageSet BandPass="Visible"
BaseDegreesPerTile="0.4028863610879981"
BaseTileLevel="0"
BottomsUp="False"
CenterX="210.76050104577"
CenterY="54.34032252248"
DataSetType="Sky"
ElevationModel="False"
FileType=".png"
Generic="False"
Name="Pinwheel Galaxy (Hubble)"
OffsetX="-0.017180822476658673"
OffsetY="0.013613773026242323"
Projection="Tan"
QuadTreeMap=""
Rotation="0.28497719299999946"
Sparse="True"
StockSet="False"
TileLevels="5"
Url="https://johnarban.github.io/wwt_interactives/images/m101/hubble_m101/{1}/{3}/{3}_{2}.png"
WidthFactor="2">
<Credits>NASA, ESA, K. Kuntz (JHU), F. Bresolin (University of Hawaii), J. Trauger (Jet Propulsion Lab), J. Mould (NOAO), Y.-H. Chu (University of Illinois, Urbana), and STScI</Credits>
<CreditsUrl>https://hubblesite.org/contents/news-releases/2009/news-2009-07</CreditsUrl>
<Description>Messier 101 has a pancake-like shape that we view face-on. This perspective shows off the spiral structure that gives it the nickname the Pinwheel Galaxy. In this Hubble image, taken in visible light, the bright blue clumps are regions where new stars have formed. The yellowish core consists mainly of old stars. The dark brown dust lanes are colder and denser regions where interstellar clouds may collapse to form new stars. All of these features are shaped into a beautiful spiral pattern by a combination of gravity and rotation. Astronomers use visible light to study where and how stars form in spiral galaxies.</Description>
<ThumbnailUrl>https://johnarban.github.io/wwt_interactives/images/m101/hubble_m101/thumb.jpg</ThumbnailUrl>
</ImageSet>
</ForegroundImageSet>
</Place>
<Place Angle="0"
AngularSize="0"
Constellation="UMA"
DataSetType="Sky"
Dec="54.31814483807457"
Magnitude="0"
Name="Gemini Observatory"
Opacity="100"
RA="14.054180763541849"
Rotation="0"
Thumbnail="https://johnarban.github.io/wwt_interactives/images/m101/gemini_m101/thumb.jpg"
ZoomLevel="0.9104310121605126">
<ForegroundImageSet>
<ImageSet BandPass="Visible"
BaseDegreesPerTile="0.18390368809964985"
BaseTileLevel="0"
BottomsUp="False"
CenterX="210.81274987346"
CenterY="54.318122349753"
DataSetType="Sky"
ElevationModel="False"
FileType=".png"
Generic="False"
Name="SN 2023ixf (Gemini Obs.)"
OffsetX="4.489836135245358e-05"
OffsetY="2.244918067622679e-05"
Projection="Tan"
QuadTreeMap=""
Rotation="0.09999999999999926"
Sparse="True"
StockSet="False"
TileLevels="4"
Url="https://johnarban.github.io/wwt_interactives/images/m101/gemini_m101/{1}/{3}/{3}_{2}.png"
WidthFactor="2">
<Credits>International Gemini Observatory/NOIRLab/NSF/AURA Image Processing: J. Miller (Gemini Observatory/NSF’s NOIRLab), M. Rodriguez (Gemini Observatory/NSF’s NOIRLab), M. Zamani (NSF’s NOIRLab), T.A. Rector (University of Alaska Anchorage/NSF’s NOIRLab) &amp; D. de Martin (NSF’s NOIRLab). Astronomical processing done with DRAGONS 3.1.  </Credits>
<CreditsUrl>https://noirlab.edu/public/images/noirlab2315a/</CreditsUrl>
<Description>Gemini North, part of the International Gemini Observatory operated by NSF’s NOIRLab, is back observing the night sky following the repair and refurbishment of its primary mirror. The telescope’s debut observation captured the supernova dubbed SN 2023ixf (lower left), which was discovered on 19 May by Japanese astronomer Koichi Itagaki. This dazzling point of light, the closest supernova seen in the past five years, is located along one of the spiral arms of the Pinwheel Galaxy (Messier 101). </Description>
<ThumbnailUrl>https://johnarban.github.io/wwt_interactives/images/m101/gemini_m101/thumb.jpg</ThumbnailUrl>
</ImageSet>
</ForegroundImageSet>
</Place>

</Folder>

0 comments on commit 60e0f8e

Please sign in to comment.