{"_id":"pennsieve-dashboard","_rev":"31-eae5981d302eeb2f6abf5bc8105cf3ac","name":"pennsieve-dashboard","dist-tags":{"latest":"1.2.0"},"versions":{"0.0.2":{"name":"pennsieve-dashboard","version":"0.0.2","_id":"pennsieve-dashboard@0.0.2","maintainers":[{"name":"smashmantha","email":"kraftsam@gmail.com"}],"dist":{"shasum":"2a33e8e16d780203ba887b2f53a5d57fbe423351","tarball":"https://registry.npmjs.org/pennsieve-dashboard/-/pennsieve-dashboard-0.0.2.tgz","fileCount":6,"integrity":"sha512-WW3aYzogz7ddjKo7aKri0+66C/qkHFbVME7cXXiJEmKSq0D+TvL71Fg/1a4nLOPfAeiTxkuHTLTIo4lUeCIoTg==","signatures":[{"sig":"MEUCIQCIUf420ZdStB25wxY1spmSrZI0mXsL7HUTpQrrhN0PkwIgfmEhTPH1DEtikwKHv3Ng5A6laqFfgEmIki60JQqLlbI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":567092},"main":"./dist/pennsieve-dashboard.umd.js","type":"module","style":"dist/style.css","module":"./dist/pennsieve-dashboard.es.js","exports":{".":{"import":"./dist/pennsieve-dashboard.es.js","require":"./dist/pennsieve-dashboard.umd.js"},"./style.css":"./dist/style.css"},"gitHead":"47d58bacb64856f125d6266407f7b4d578994959","private":false,"scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"smashmantha","email":"kraftsam@gmail.com"},"_npmVersion":"11.5.1","description":"This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `\n```\n\nThe key takeaway: call `useDashboardGlobalVars()` in your component to access the dashboard’s shared state — `services` (data URLs, API keys), `filters`, and filter-setting methods — without any extra wiring. See the [Building a Component Library](#3-building-a-component-library) section below for a full explanation of this composable.\n\n---\n\n### 3. Building a Component Library\n\nIf you’re building a **new widget library** (rather than adding to an existing one), you need to understand how the PennsieveDashboard communicates with widget components.\n\n#### How the Dashboard Provides Context\n\nWhen the `PennsieveDashboard` component mounts, it calls `provide(\"dashboard:globalVars\", ...)` to inject a shared context object into the component tree. Any descendant component — including widgets from external libraries — can access this context using Vue’s `inject`.\n\n#### The `useGlobalVars.ts` Composable\n\nTo access the injected context, your library should include a `useGlobalVars.ts` file (you can copy this directly from [SparcDashWidgets](https://github.com/nih-sparc/SparcDashWidgets)):\n\n```ts\n// src/useGlobalVars.ts\nimport { inject } from ‘vue’\n\nexport const DASHBOARD_GLOBAL_VARS_KEY = ‘dashboard:globalVars’ as const\nexport type FilterValue = string | number | boolean | null | string[] | number[]\nexport type Filters = Record\nexport type Services = Record\n\nexport type GlobalVarsShape = {\n services: Services | import(‘vue’).Ref // All configurables (URLs, API keys, etc.)\n filters: Filters | import(‘vue’).Ref // Shared reactive filter state\n setFilter: (key: string, value: FilterValue, isDisplayed?: boolean) => void\n clearFilter: (key: string) => void\n resetFilters?: (next?: Filters) => void\n}\n\nexport function useDashboardGlobalVars(required = false) {\n const gv = inject(DASHBOARD_GLOBAL_VARS_KEY, null)\n if (!gv && required) {\n console.warn(‘[Widget] dashboard:globalVars not provided.’)\n }\n return gv\n}\n```\n\n#### What Each Property Does\n\n| Property | Description |\n|----------|-------------|\n| `services` | Key-value map of configurables passed in from the host application — data URLs, API endpoints, API keys, etc. For example: `services.s3Url`, `services.ApiUrl`, `services.ScicrunchApiKey`. |\n| `filters` | Reactive key-value object representing the current dashboard filter state. Widgets read from this to stay in sync. |\n| `setFilter(key, value, isDisplayed?)` | Set a filter value. `isDisplayed` controls whether the filter chip appears in the dashboard header. |\n| `clearFilter(key)` | Remove a single filter by key. |\n| `resetFilters(next?)` | Clear all filters, optionally replacing them with `next`. |\n\n#### Using Filters for Cross-Widget Communication\n\nFilters are the primary mechanism for widgets to communicate. One widget sets a filter, and other widgets react to the change:\n\n```ts\nconst GlobalVars = useDashboardGlobalVars();\n\n// Read a service configurable (e.g. data URL, API key)\nconst dataUrl = unref(GlobalVars?.services)?.s3Url;\nconst apiKey = unref(GlobalVars?.services)?.ScicrunchApiKey;\n\n// Set a filter (other widgets will see this reactively)\nGlobalVars?.setFilter(‘SELECTED_GENE’, ‘CDH9’, true);\n\n// Read a filter\nconst gene = GlobalVars?.filters?.SELECTED_GENE;\n\n// Clear a filter\nGlobalVars?.clearFilter(‘SELECTED_GENE’);\n\n// Reset all filters\nGlobalVars?.resetFilters();\n```\n\n#### Library Structure\n\nA typical widget library follows this structure:\n\n```\nyour-widget-library/\n├── src/\n│ ├── components/ # Widget components (public API)\n│ │ ├── MyWidget/\n│ │ │ └── MyWidget.vue\n│ │ └── index.js # Barrel export\n│ ├── useGlobalVars.ts # Copy from SparcDashWidgets\n│ └── main.ts # Dev entry point\n├── package.json\n└── vite.config.ts # Build in library mode\n```\n\nYour `vite.config.ts` should build in library mode with `vue`, `pinia`, and `element-plus` as externals. See SparcDashWidgets or PrecisionDashWidgets for working examples.\n\n## Contact Support\n\nThere are several ways to get in contact with our support team. \n**support page**\nhttps://discover.pennsieve.io/about/support\n","readmeFilename":"README.md"}