diff --git a/apps/ftu-ui-small-wc/index.html b/apps/ftu-ui-small-wc/index.html index f03fc76fb..084ca3f86 100644 --- a/apps/ftu-ui-small-wc/index.html +++ b/apps/ftu-ui-small-wc/index.html @@ -6,6 +6,7 @@ + \ No newline at end of file + import './main.92135131.iframe.bundle.js'; \ No newline at end of file diff --git a/storybook/components-behavioral/main.92135131.iframe.bundle.js b/storybook/components-behavioral/main.92135131.iframe.bundle.js new file mode 100644 index 000000000..e592553dc --- /dev/null +++ b/storybook/components-behavioral/main.92135131.iframe.bundle.js @@ -0,0 +1 @@ +(self.webpackChunkhra_ui=self.webpackChunkhra_ui||[]).push([[179],{"./dist/compodoc sync recursive ^\\.\\/.*\\/documentation\\.json$":(module,__unused_webpack_exports,__webpack_require__)=>{var map={"./components-behavioral/documentation.json":"./dist/compodoc/components-behavioral/documentation.json","./components-molecules/documentation.json":"./dist/compodoc/components-molecules/documentation.json","./components-organisms/documentation.json":"./dist/compodoc/components-organisms/documentation.json"};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id="./dist/compodoc sync recursive ^\\.\\/.*\\/documentation\\.json$"},"./libs/components/behavioral lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/behavioral(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.(js%7Cjsx%7Cts%7Ctsx))$":(module,__unused_webpack_exports,__webpack_require__)=>{var map={"./src/lib/biomarker-details/biomarker-details.component.stories":["./libs/components/behavioral/src/lib/biomarker-details/biomarker-details.component.stories.ts",977,948,678,111,390,552,254,724,801,971],"./src/lib/biomarker-details/biomarker-details.component.stories.ts":["./libs/components/behavioral/src/lib/biomarker-details/biomarker-details.component.stories.ts",977,948,678,111,390,552,254,724,801,971],"./src/lib/contact-behavior/contact-behavior.component.stories":["./libs/components/behavioral/src/lib/contact-behavior/contact-behavior.component.stories.ts",977,948,678,111,390,254,801,805],"./src/lib/contact-behavior/contact-behavior.component.stories.ts":["./libs/components/behavioral/src/lib/contact-behavior/contact-behavior.component.stories.ts",977,948,678,111,390,254,801,805],"./src/lib/footer-behavior/footer-behavior.component.stories":["./libs/components/behavioral/src/lib/footer-behavior/footer-behavior.component.stories.ts",977,948,678,930,111,390,839,254,801,57],"./src/lib/footer-behavior/footer-behavior.component.stories.ts":["./libs/components/behavioral/src/lib/footer-behavior/footer-behavior.component.stories.ts",977,948,678,930,111,390,839,254,801,57],"./src/lib/header-behavior/header-behavior.component.stories":["./libs/components/behavioral/src/lib/header-behavior/header-behavior.component.stories.ts",977,948,930,254,854],"./src/lib/header-behavior/header-behavior.component.stories.ts":["./libs/components/behavioral/src/lib/header-behavior/header-behavior.component.stories.ts",977,948,930,254,854],"./src/lib/hra-landing-page-intro-wc-behaviour/landing-page-content.component.stories":["./libs/components/behavioral/src/lib/hra-landing-page-intro-wc-behaviour/landing-page-content.component.stories.ts",254,983],"./src/lib/hra-landing-page-intro-wc-behaviour/landing-page-content.component.stories.ts":["./libs/components/behavioral/src/lib/hra-landing-page-intro-wc-behaviour/landing-page-content.component.stories.ts",254,983],"./src/lib/landing-page-content/landing-page-content.component.stories":["./libs/components/behavioral/src/lib/landing-page-content/landing-page-content.component.stories.ts",977,948,930,254,487],"./src/lib/landing-page-content/landing-page-content.component.stories.ts":["./libs/components/behavioral/src/lib/landing-page-content/landing-page-content.component.stories.ts",977,948,930,254,487],"./src/lib/medical-illustration-behavior/medical-illustration-behavior.component.stories":["./libs/components/behavioral/src/lib/medical-illustration-behavior/medical-illustration-behavior.component.stories.ts",977,678,111,913,724,430],"./src/lib/medical-illustration-behavior/medical-illustration-behavior.component.stories.ts":["./libs/components/behavioral/src/lib/medical-illustration-behavior/medical-illustration-behavior.component.stories.ts",977,678,111,913,724,430],"./src/lib/tissue-library-behavior/tissue-library-behavior.component.stories":["./libs/components/behavioral/src/lib/tissue-library-behavior/tissue-library-behavior.component.stories.ts",977,948,678,930,617,724,587],"./src/lib/tissue-library-behavior/tissue-library-behavior.component.stories.ts":["./libs/components/behavioral/src/lib/tissue-library-behavior/tissue-library-behavior.component.stories.ts",977,948,678,930,617,724,587]};function webpackAsyncContext(req){if(!__webpack_require__.o(map,req))return Promise.resolve().then((()=>{var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}));var ids=map[req],id=ids[0];return Promise.all(ids.slice(1).map(__webpack_require__.e)).then((()=>__webpack_require__(id)))}webpackAsyncContext.keys=()=>Object.keys(map),webpackAsyncContext.id="./libs/components/behavioral lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/behavioral(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.(js%7Cjsx%7Cts%7Ctsx))$",module.exports=webpackAsyncContext},"./libs/components/behavioral lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/behavioral(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.mdx)$":module=>{function webpackEmptyAsyncContext(req){return Promise.resolve().then((()=>{var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}))}webpackEmptyAsyncContext.keys=()=>[],webpackEmptyAsyncContext.resolve=webpackEmptyAsyncContext,webpackEmptyAsyncContext.id="./libs/components/behavioral lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/behavioral(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.mdx)$",module.exports=webpackEmptyAsyncContext},"./.storybook/styles.scss?ngGlobalStyle":()=>{},"./libs/components/behavioral/.storybook/preview.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{argTypesEnhancers:()=>argTypesEnhancers,decorators:()=>decorators,parameters:()=>parameters});var http=__webpack_require__("./node_modules/@angular/common/fesm2020/http.mjs"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),animations=__webpack_require__("./node_modules/@angular/platform-browser/fesm2020/animations.mjs"),ngxs_logger_plugin=__webpack_require__("./node_modules/@ngxs/logger-plugin/fesm2015/ngxs-logger-plugin.js"),ngxs_store=__webpack_require__("./node_modules/@ngxs/store/fesm2015/ngxs-store.js"),angular=__webpack_require__("./node_modules/@storybook/addon-docs/angular/index.js"),dist=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),ngx_markdown=__webpack_require__("./node_modules/ngx-markdown/fesm2020/ngx-markdown.mjs"),tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),angular_material_css_vars=__webpack_require__("./node_modules/angular-material-css-vars/fesm2020/angular-material-css-vars.mjs"),js_yaml=__webpack_require__("./node_modules/js-yaml/dist/js-yaml.mjs"),map=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/map.js"),tap=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/tap.js"),Observable=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/Observable.js");class Load{constructor(url){this.url=url,this.type=Load.type}}Load.type="[Theming] Load Theming File";var lib=__webpack_require__("./node_modules/zod/lib/index.mjs");const THEMING_FILE_SCHEMA=lib.z.record(lib.z.nativeEnum(angular_material_css_vars.Rm),lib.z.string());let ThemingState=class ThemingState{constructor(){this.http=(0,core.inject)(http.eN),this.materialVars=(0,core.inject)(angular_material_css_vars.jO)}load(ctx,{url}){return this.http.get(url,{responseType:"text"}).pipe((0,map.U)((data=>(0,js_yaml.zD)(data,{filename:url}))),(0,map.U)((data=>THEMING_FILE_SCHEMA.parse(data))),(0,tap.b)((data=>ctx.setState(data))),(0,tap.b)((data=>this.setVariables(data))))}setVariables(data){for(const[key,value]of Object.entries(data))this.materialVars.setVariable(key,value)}};(0,tslib_es6.gn)([(0,ngxs_store.aU)(Load),(0,tslib_es6.w6)("design:type",Function),(0,tslib_es6.w6)("design:paramtypes",[Object,Load]),(0,tslib_es6.w6)("design:returntype",Observable.y)],ThemingState.prototype,"load",null),ThemingState=(0,tslib_es6.gn)([(0,ngxs_store.ZM)({name:"theming",defaults:{}}),(0,core.Injectable)()],ThemingState);let ThemingModule=class ThemingModule{};function parseDefaultValue(type){const{defaultValue,type:typeDef}=type;if(void 0===defaultValue||"string"!=typeof defaultValue||"string"===typeDef?.name)return defaultValue;switch(typeDef?.name){case"array":case"boolean":case"number":case"object":try{return new Function("return "+defaultValue)()}catch(_error){return}case"enum":return typeDef.value.includes(defaultValue)?defaultValue:void 0;default:return}}ThemingModule=(0,tslib_es6.gn)([(0,core.NgModule)({imports:[angular_material_css_vars.Pe.forRoot({}),ngxs_store.$l.forFeature([ThemingState])]})],ThemingModule);const parameters={actions:{argTypesRegex:"^on[A-Z].*"},controls:{matchers:{color:/(background|color)$/i,date:/Date$/}},docs:{inlineStories:!0}},argTypesEnhancers=[function fixArgTypes(){return context=>{const argTypes={...context.argTypes},exclude=[...context.parameters.controls?.exclude??[]];for(const[key,type]of Object.entries(argTypes))switch(type.table.category){case"inputs":const defaultValue=parseDefaultValue(type);defaultValue!==type.defaultValue&&(argTypes[key]={...type,defaultValue});break;case"outputs":argTypes[key]={...type,defaultValue:void 0};break;default:exclude.push(key)}return context.parameters.controls={...context.parameters.controls,exclude},argTypes}}()],decorators=[(0,dist.applicationConfig)({providers:[(0,core.importProvidersFrom)(animations.BrowserAnimationsModule,http.JF,ngxs_store.$l.forRoot([],{developmentMode:!0}),ngxs_logger_plugin.xz.forRoot(),ngx_markdown.JP.forRoot({loader:http.eN}),ThemingModule)]}),(0,dist.componentWrapperDecorator)((story=>`\n
${story}
\n
\n `)),function addState(){return(fn,ctx)=>{const config=ctx.parameters.state;return config?(0,dist.applicationConfig)({providers:[(0,core.importProvidersFrom)(ngxs_store.$l.forFeature(config.states)),{provide:core.APP_INITIALIZER,multi:!0,useFactory:store=>()=>{const{actions}=config;return actions&&actions.length>0?store.dispatch(actions):void 0},deps:[ngxs_store.yh]}]})(fn,ctx):fn(ctx)}}()];!function setDocs(library){const docs=__webpack_require__("./dist/compodoc sync recursive ^\\.\\/.*\\/documentation\\.json$")(`./${library}/documentation.json`);(0,angular.P)(docs)}("components-behavioral")},"./storybook-config-entry.js":(__unused_webpack_module,__unused_webpack___webpack_exports__,__webpack_require__)=>{"use strict";var dist=__webpack_require__("./node_modules/@storybook/global/dist/index.mjs"),external_STORYBOOK_MODULE_PREVIEW_API_=__webpack_require__("@storybook/preview-api");const external_STORYBOOK_MODULE_CHANNEL_POSTMESSAGE_namespaceObject=__STORYBOOK_MODULE_CHANNEL_POSTMESSAGE__,external_STORYBOOK_MODULE_CHANNEL_WEBSOCKET_namespaceObject=__STORYBOOK_MODULE_CHANNEL_WEBSOCKET__;var asyncToGenerator=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js");const pipeline=x=>x(),importers=[function(){var _ref=(0,asyncToGenerator.Z)((function*(path){if(!/^\.[\\/](?:libs\/components\/behavioral(?:\/(?!\.)(?:(?:(?!(?:^|\/)\.).)*?)\/|\/|$)(?!\.)(?=.)[^/]*?\.stories\.mdx)$/.exec(path))return;const pathRemainder=path.substring(29);return __webpack_require__("./libs/components/behavioral lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/behavioral(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.mdx)$")("./"+pathRemainder)}));return function(_x){return _ref.apply(this,arguments)}}(),function(){var _ref2=(0,asyncToGenerator.Z)((function*(path){if(!/^\.[\\/](?:libs\/components\/behavioral(?:\/(?!\.)(?:(?:(?!(?:^|\/)\.).)*?)\/|\/|$)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$/.exec(path))return;const pathRemainder=path.substring(29);return __webpack_require__("./libs/components/behavioral lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/behavioral(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.(js%7Cjsx%7Cts%7Ctsx))$")("./"+pathRemainder)}));return function(_x2){return _ref2.apply(this,arguments)}}()];function _importFn(){return(_importFn=(0,asyncToGenerator.Z)((function*(path){for(let i=0;iimporters[i](path)));if(moduleExports)return moduleExports}}))).apply(this,arguments)}const{SERVER_CHANNEL_URL}=dist.global,channel=(0,external_STORYBOOK_MODULE_CHANNEL_POSTMESSAGE_namespaceObject.createChannel)({page:"preview"});if(external_STORYBOOK_MODULE_PREVIEW_API_.addons.setChannel(channel),SERVER_CHANNEL_URL){const serverChannel=(0,external_STORYBOOK_MODULE_CHANNEL_WEBSOCKET_namespaceObject.createChannel)({url:SERVER_CHANNEL_URL});external_STORYBOOK_MODULE_PREVIEW_API_.addons.setServerChannel(serverChannel),window.__STORYBOOK_SERVER_CHANNEL__=serverChannel}const preview=new external_STORYBOOK_MODULE_PREVIEW_API_.PreviewWeb;window.__STORYBOOK_PREVIEW__=preview,window.__STORYBOOK_STORY_STORE__=preview.storyStore,window.__STORYBOOK_ADDONS_CHANNEL__=channel,window.__STORYBOOK_CLIENT_API__=new external_STORYBOOK_MODULE_PREVIEW_API_.ClientApi({storyStore:preview.storyStore}),preview.initialize({importFn:function importFn(_x3){return _importFn.apply(this,arguments)},getProjectAnnotations:()=>(0,external_STORYBOOK_MODULE_PREVIEW_API_.composeConfigs)([__webpack_require__("./node_modules/@storybook/angular/dist/client/docs/config.js"),__webpack_require__("./node_modules/@storybook/angular/dist/client/config.js"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/docs/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/actions/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/backgrounds/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/measure/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/outline/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/highlight/preview.mjs"),__webpack_require__("./libs/components/behavioral/.storybook/preview.ts")])})},"./node_modules/@storybook/addon-docs/dist sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="./node_modules/@storybook/addon-docs/dist sync recursive",module.exports=webpackEmptyContext},"@storybook/channels":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CHANNELS__},"@storybook/client-logger":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CLIENT_LOGGER__},"@storybook/core-client":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CORE_CLIENT__},"@storybook/core-events":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CORE_EVENTS__},"@storybook/preview-api":module=>{"use strict";module.exports=__STORYBOOK_MODULE_PREVIEW_API__},"./dist/compodoc/components-behavioral/documentation.json":module=>{"use strict";module.exports=JSON.parse('{"pipes":[],"interfaces":[],"injectables":[],"guards":[],"interceptors":[],"classes":[],"directives":[],"components":[{"name":"BiomarkerDetailsComponent","id":"component-BiomarkerDetailsComponent-77362795c55e59d8109b5a13e3d57e4774ce01b5484ac21237c42d2857f2de4ecd80ec15ae66e99983246bdc3de1df675717253be566d7ba0efe1495a48c9f3c","file":"src/lib/biomarker-details/biomarker-details.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-biomarker-details","styleUrls":["./biomarker-details.component.scss"],"styles":[],"templateUrl":["./biomarker-details.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"collaborateText","defaultValue":"\'Collaborate with the HRA Team\'","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

button text of empty biomarker component.

\\n","line":106,"rawdescription":"\\n\\nbutton text of empty biomarker component.\\n","modifierKind":[144]},{"name":"gradientHoverInfo","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.GradientLegendInfo)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Info to be shown on the tooltip for Gradient Legend

\\n","line":58,"rawdescription":"\\nInfo to be shown on the tooltip for Gradient Legend","modifierKind":[144]},{"name":"gradients","defaultValue":"selectQuerySnapshot(RR.field, Ids.GradientLegend, RTypes.Gradient, \'points\' as const, [])<\\n GradientPoint[]\\n >","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Gradient colors along with their stop points

\\n","line":67,"rawdescription":"\\nGradient colors along with their stop points","modifierKind":[144]},{"name":"iri","defaultValue":"selectSnapshot(ActiveFtuSelectors.iri)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Iri of medical illustration behavior component

\\n","line":80,"rawdescription":"\\n\\nIri of medical illustration behavior component\\n","modifierKind":[144]},{"name":"isTableFullScreen","defaultValue":"false","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Indicates if the table is fully shown, defaults to false

\\n","line":64,"rawdescription":"\\nIndicates if the table is fully shown, defaults to false"},{"name":"message","defaultValue":"`We currently do not have cell type data for this biomarker.\\n

Please contact us to discuss your dataset.`","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

message markdown of empty biomarker component.

\\n","line":111,"rawdescription":"\\n\\nmessage markdown of empty biomarker component.\\n","modifierKind":[144]},{"name":"selectedOnHovered","defaultValue":"selectSnapshot(IllustratorSelectors.selectedOnHovered)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Selects the cells hovered currently to highlight in table

\\n","line":88,"rawdescription":"\\nSelects the cells hovered currently to highlight in table","modifierKind":[144]},{"name":"sizeHoverInfo","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.SizeLegendInfo)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Info to be shown on the tooltip for Size Legend

\\n","line":61,"rawdescription":"\\nInfo to be shown on the tooltip for Size Legend","modifierKind":[144]},{"name":"sizes","defaultValue":"selectQuerySnapshot(RR.field, Ids.SizeLegend, RTypes.Size, \'sizes\' as const, [])","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Taking input for the radius of the circle and the label to be displayed.

\\n","line":72,"rawdescription":"\\nTaking input for the radius of the circle and the label to be displayed.","modifierKind":[144]},{"name":"source","defaultValue":"selectSnapshot(SourceRefsSelectors.sourceReferences)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

List of sources with titles and links displayed to the user

\\n","line":75,"rawdescription":"\\nList of sources with titles and links displayed to the user","modifierKind":[144]},{"name":"tabs","defaultValue":"selectSnapshot(CellSummarySelectors.aggregates)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Table tabs

\\n","line":55,"rawdescription":"\\nTable tabs","modifierKind":[144]},{"name":"tissues","defaultValue":"selectSnapshot(TissueLibrarySelectors.tissues)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Get all tissues

\\n","line":85,"rawdescription":"\\n\\nGet all tissues\\n","modifierKind":[144]}],"methodsClass":[{"name":"collaborate","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":129,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which opens the contact modal dialog box","description":"

A function which opens the contact modal dialog box

\\n"},{"name":"toggleFullscreen","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":123,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function that toggles isTableFullScreen and\\ncalls the setScreenMode function.\\n","description":"

A function that toggles isTableFullScreen and\\ncalls the setScreenMode function.

\\n"}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

The component displays the biomarker details which includes the details, gradient legends, size legends and source lists

\\n","rawdescription":"\\nThe component displays the biomarker details which includes the details, gradient legends, size legends and source lists","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, inject } from \'@angular/core\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatTabsModule } from \'@angular/material/tabs\';\\nimport { HoverDirective } from \'@hra-ui/cdk\';\\nimport { dispatch, selectQuerySnapshot, selectSnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RR } from \'@hra-ui/cdk/state\';\\nimport { ActiveFtuSelectors, IllustratorSelectors, ScreenModeAction, TissueLibrarySelectors } from \'@hra-ui/state\';\\nimport {\\n EmptyBiomarkerComponent,\\n GradientLegendComponent,\\n GradientPoint,\\n LabelBoxComponent,\\n SizeLegend,\\n SizeLegendComponent,\\n} from \'@hra-ui/components/atoms\';\\nimport { BiomarkerTableDataCardComponent, SourceListComponent } from \'@hra-ui/components/molecules\';\\nimport { BiomarkerTableComponent, TissueInfo } from \'@hra-ui/components/organisms\';\\nimport { CellSummarySelectors, ResourceIds as Ids, ResourceTypes as RTypes, SourceRefsSelectors } from \'@hra-ui/state\';\\nimport { MatDialog, MatDialogConfig, MatDialogModule } from \'@angular/material/dialog\';\\nimport { ContactBehaviorComponent } from \'../contact-behavior/contact-behavior.component\';\\n\\n/**\\n * PlaceHolder for Empty Tissue Info\\n */\\nconst EMPTY_TISSUE_INFO: TissueInfo = {\\n id: \'\',\\n label: \'\',\\n};\\n\\n/** The component displays the biomarker details which includes the details, gradient legends, size legends and source lists*/\\n@Component({\\n selector: \'ftu-biomarker-details\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatIconModule,\\n MatTabsModule,\\n MatDialogModule,\\n BiomarkerTableComponent,\\n BiomarkerTableDataCardComponent,\\n GradientLegendComponent,\\n HoverDirective,\\n LabelBoxComponent,\\n SizeLegendComponent,\\n SourceListComponent,\\n EmptyBiomarkerComponent,\\n ],\\n templateUrl: \'./biomarker-details.component.html\',\\n styleUrls: [\'./biomarker-details.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerDetailsComponent {\\n /** Table tabs */\\n readonly tabs = selectSnapshot(CellSummarySelectors.aggregates);\\n\\n /** Info to be shown on the tooltip for Gradient Legend */\\n readonly gradientHoverInfo = selectQuerySnapshot(RR.anyText, Ids.GradientLegendInfo);\\n\\n /** Info to be shown on the tooltip for Size Legend */\\n readonly sizeHoverInfo = selectQuerySnapshot(RR.anyText, Ids.SizeLegendInfo);\\n\\n /** Indicates if the table is fully shown, defaults to false*/\\n isTableFullScreen = false;\\n\\n /** Gradient colors along with their stop points */\\n readonly gradients = selectQuerySnapshot(RR.field, Ids.GradientLegend, RTypes.Gradient, \'points\' as const, [])<\\n GradientPoint[]\\n >;\\n\\n /** Taking input for the radius of the circle and the label to be displayed. */\\n readonly sizes = selectQuerySnapshot(RR.field, Ids.SizeLegend, RTypes.Size, \'sizes\' as const, []);\\n\\n /** List of sources with titles and links displayed to the user */\\n readonly source = selectSnapshot(SourceRefsSelectors.sourceReferences);\\n\\n /**\\n * Iri of medical illustration behavior component\\n */\\n readonly iri = selectSnapshot(ActiveFtuSelectors.iri);\\n\\n /**\\n * Get all tissues\\n */\\n readonly tissues = selectSnapshot(TissueLibrarySelectors.tissues);\\n\\n /** Selects the cells hovered currently to highlight in table */\\n readonly selectedOnHovered = selectSnapshot(IllustratorSelectors.selectedOnHovered);\\n\\n /**\\n * Gets tissue title from the list of tissues\\n */\\n get tissueInfo(): TissueInfo {\\n const iri = this.iri();\\n const tissues = this.tissues();\\n if (iri === undefined) {\\n return EMPTY_TISSUE_INFO;\\n }\\n const { id, label } = tissues[iri];\\n return { id, label };\\n }\\n\\n /**\\n * button text of empty biomarker component.\\n */\\n readonly collaborateText = \'Collaborate with the HRA Team\';\\n\\n /**\\n * message markdown of empty biomarker component.\\n */\\n readonly message = `We currently do not have cell type data for this biomarker.\\n

Please contact us to discuss your dataset.`;\\n\\n /** A dispatcher function to set the screen mode */\\n private readonly setScreenMode = dispatch(ScreenModeAction.Set);\\n\\n /** A dialog box which shows contact modal after clicking on contact */\\n private readonly dialog = inject(MatDialog);\\n\\n /** A function that toggles isTableFullScreen and\\n * calls the setScreenMode function.\\n */\\n toggleFullscreen(): void {\\n this.isTableFullScreen = !this.isTableFullScreen;\\n this.setScreenMode(this.isTableFullScreen);\\n }\\n\\n /** A function which opens the contact modal dialog box */\\n collaborate(): void {\\n const dialogConfig = new MatDialogConfig();\\n dialogConfig.disableClose = true;\\n this.dialog.open(ContactBehaviorComponent, dialogConfig);\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n display: grid;\\n grid-template-columns: 1fr 1fr auto;\\n grid-template-rows: 3.5rem minmax(5rem, 2fr) 3rem 5rem minmax(5rem, 1fr);\\n grid-template-areas:\\n \'table-header table-header table-header\'\\n \'table table table\'\\n \'gradient-legend-header size-legend-header .\'\\n \'gradient-legend size-legend .\'\\n \'source-list source-list source-list\';\\n overflow-y: auto;\\n\\n .table-header {\\n grid-area: table-header;\\n border-bottom: 0.063rem solid #d3d3d3;\\n height: 3.5rem;\\n font-weight: 400;\\n }\\n\\n .table {\\n grid-area: table;\\n max-width: 100%;\\n overflow: auto;\\n border-bottom: 0.063rem solid #d3d3d3;\\n\\n ::ng-deep .table-tab-header {\\n padding-left: 1rem;\\n padding-right: 1rem;\\n border-left: 0.063rem solid #d3d3d3;\\n border-bottom: 0.063rem solid #d3d3d3;\\n background-color: white;\\n font-weight: 400;\\n letter-spacing: 0;\\n\\n &:last-child {\\n border-right: 0.063rem solid #d3d3d3;\\n }\\n\\n &.mdc-tab-indicator--active {\\n background-color: #f8f9fa;\\n }\\n\\n &:hover {\\n background-color: #f8f9fa;\\n }\\n .mat-tab__text-label {\\n --palette-accent-500-rgb: #243142;\\n }\\n }\\n }\\n\\n ::ng-deep {\\n .table-tab-header > .mdc-tab__content > span {\\n color: vars.$primary;\\n }\\n .mat-mdc-tab-group.mat-accent .mat-mdc-tab:not(.mat-mdc-tab-disabled).mdc-tab--active .mdc-tab__text-label {\\n color: vars.$primary;\\n }\\n }\\n\\n .legend-header {\\n color: vars.$dark-primary-text;\\n border-top: 0.063rem solid #d3d3d3;\\n border-bottom: 0.063rem solid #d3d3d3;\\n border-right: 0.063rem solid #d3d3d3;\\n\\n &.gradient {\\n grid-area: gradient-legend-header;\\n }\\n\\n &.size {\\n grid-area: size-legend-header;\\n }\\n\\n .icon {\\n margin-left: 0.6rem;\\n width: unset;\\n }\\n }\\n\\n .legend {\\n padding: 1rem 2rem;\\n border-right: 0.063rem solid #d3d3d3;\\n\\n &.gradient {\\n grid-area: gradient-legend;\\n\\n .content {\\n width: 10rem;\\n }\\n }\\n\\n &.size {\\n grid-area: size-legend;\\n }\\n }\\n\\n .source-list {\\n grid-area: source-list;\\n }\\n\\n .cursor {\\n cursor: default;\\n }\\n}\\n\\n::ng-deep .biomarker-details.info-tooltip {\\n display: flex;\\n padding: 1rem;\\n border: 1px solid #a8a3a3;\\n border-radius: 0.5rem;\\n box-shadow: 1px 2px 16px 2px #00000029;\\n background-color: vars.$primary-contrast-rgb;\\n max-width: 21rem;\\n font-size: small;\\n font-family: Inter;\\n}\\n","styleUrl":"./biomarker-details.component.scss"}],"stylesData":"","accessors":{"tissueInfo":{"name":"tissueInfo","getSignature":{"name":"tissueInfo","type":"","returnType":"TissueInfo","line":93,"rawdescription":"\\n\\nGets tissue title from the list of tissues\\n","description":"

Gets tissue title from the list of tissues

\\n"}}},"templateData":"\\n Cell Types by Gene Biomarkers\\n \\n {{ isTableFullScreen ? \'close_fullscreen\' : \'open_in_full\' }}\\n \\n\\n\\n\\n \\n \\n \\n \\n\\n\\n\\n Biomarker Expression Mean in FTU\\n info_outlined\\n\\n
\\n \\n
\\n\\n\\n Percentage of Cells in FTU\\n info_outlined\\n\\n
\\n \\n
\\n\\n
\\n \\n
\\n\\n\\n
\\n {{ tooltip }}\\n
\\n\\n"},{"name":"BiomarkerDetailsWcComponent","id":"component-BiomarkerDetailsWcComponent-2a35b01614cd4a83a9546a33b9e03200b2f96e7d06e07e8803741ed0f77a8815075e35be5e35822c9fb46279ff45ee49dbbfc6fc96f328f11a42b7f9898a30ef","file":"src/lib/biomarker-details-wc/biomarker-details-wc.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-wc-biomarker-details","styleUrls":["./biomarker-details-wc.component.scss"],"styles":[],"templateUrl":["./biomarker-details-wc.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"collaborateText","defaultValue":"\'Collaborate with the HRA Team\'","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

button text of empty biomarker component.

\\n","line":145,"rawdescription":"\\n\\nbutton text of empty biomarker component.\\n","modifierKind":[144]},{"name":"currentUrl","defaultValue":"selectSnapshot(IllustratorSelectors.url)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Current illustration url

\\n","line":71,"rawdescription":"\\n\\nCurrent illustration url\\n","modifierKind":[144]},{"name":"gradientHoverInfo","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.GradientLegendInfo)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Info to be shown on the tooltip for Gradient Legend

\\n","line":111,"rawdescription":"\\nInfo to be shown on the tooltip for Gradient Legend","modifierKind":[144]},{"name":"gradients","defaultValue":"selectQuerySnapshot(RR.field, Ids.GradientLegend, RTypes.Gradient, \'points\' as const, [])<\\n GradientPoint[]\\n >","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Gradient colors along with their stop points

\\n","line":120,"rawdescription":"\\nGradient colors along with their stop points","modifierKind":[144]},{"name":"iri","defaultValue":"selectSnapshot(ActiveFtuSelectors.iri)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Iri of medical illustration behavior component

\\n","line":81,"rawdescription":"\\n\\nIri of medical illustration behavior component\\n","modifierKind":[144]},{"name":"isTableFullScreen","defaultValue":"false","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Indicates if the table is fully shown, defaults to false

\\n","line":117,"rawdescription":"\\nIndicates if the table is fully shown, defaults to false"},{"name":"mapping","defaultValue":"selectSnapshot(IllustratorSelectors.mapping)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Current mapping file

\\n","line":76,"rawdescription":"\\n\\nCurrent mapping file\\n","modifierKind":[144]},{"name":"message","defaultValue":"`We currently do not have cell type data for this biomarker.\\n

Please contact us to discuss your dataset.`","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

message markdown of empty biomarker component.

\\n","line":150,"rawdescription":"\\n\\nmessage markdown of empty biomarker component.\\n","modifierKind":[144]},{"name":"sizeHoverInfo","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.SizeLegendInfo)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Info to be shown on the tooltip for Size Legend

\\n","line":114,"rawdescription":"\\nInfo to be shown on the tooltip for Size Legend","modifierKind":[144]},{"name":"sizes","defaultValue":"selectQuerySnapshot(RR.field, Ids.SizeLegend, RTypes.Size, \'sizes\' as const, [])","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Taking input for the radius of the circle and the label to be displayed.

\\n","line":125,"rawdescription":"\\nTaking input for the radius of the circle and the label to be displayed.","modifierKind":[144]},{"name":"source","defaultValue":"selectSnapshot(SourceRefsSelectors.sourceReferences)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

List of sources with titles and links displayed to the user

\\n","line":128,"rawdescription":"\\nList of sources with titles and links displayed to the user","modifierKind":[144]},{"name":"tabs","defaultValue":"selectSnapshot(CellSummarySelectors.aggregates)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Table tabs

\\n","line":108,"rawdescription":"\\nTable tabs","modifierKind":[144]},{"name":"tissues","defaultValue":"selectSnapshot(TissueLibrarySelectors.tissues)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Get all tissues

\\n","line":86,"rawdescription":"\\n\\nGet all tissues\\n","modifierKind":[144]},{"name":"updateNodeOnClicked","defaultValue":"dispatch(IllustratorActions.SetClicked)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Updates the active node on node click

\\n","line":105,"rawdescription":"\\n\\nUpdates the active node on node click\\n","modifierKind":[144]},{"name":"updateNodeOnHover","defaultValue":"dispatch(IllustratorActions.SetHover)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Updates the active node on node hover

\\n","line":100,"rawdescription":"\\n\\nUpdates the active node on node hover\\n","modifierKind":[144]}],"methodsClass":[{"name":"collaborate","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":167,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which opens the contact modal dialog box","description":"

A function which opens the contact modal dialog box

\\n"},{"name":"toggleFullscreen","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":162,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function that toggles isTableFullScreen and\\ncalls the setScreenMode function.\\n","description":"

A function that toggles isTableFullScreen and\\ncalls the setScreenMode function.

\\n"}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for Biomarker Table Details Web component

\\n","rawdescription":"\\nComponent for Biomarker Table Details Web component","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, inject } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatTabsModule } from \'@angular/material/tabs\';\\nimport { HoverDirective } from \'@hra-ui/cdk\';\\nimport { selectSnapshot, selectQuerySnapshot, dispatch } from \'@hra-ui/cdk/injectors\';\\nimport {\\n GradientLegendComponent,\\n LabelBoxComponent,\\n SizeLegendComponent,\\n EmptyBiomarkerComponent,\\n GradientPoint,\\n SizeLegend,\\n} from \'@hra-ui/components/atoms\';\\nimport {\\n BiomarkerTableDataCardComponent,\\n InteractiveSvgComponent,\\n SourceListComponent,\\n} from \'@hra-ui/components/molecules\';\\nimport { TissueInfo, BiomarkerTableComponent } from \'@hra-ui/components/organisms\';\\nimport {\\n ActiveFtuSelectors,\\n TissueLibrarySelectors,\\n ScreenModeAction,\\n IllustratorActions,\\n IllustratorSelectors,\\n CellSummarySelectors,\\n ResourceIds as Ids,\\n ResourceTypes as RTypes,\\n SourceRefsSelectors,\\n} from \'@hra-ui/state\';\\nimport { ResourceRegistrySelectors as RR } from \'@hra-ui/cdk/state\';\\nimport { MatDialog, MatDialogConfig } from \'@angular/material/dialog\';\\nimport { ContactBehaviorComponent } from \'../contact-behavior/contact-behavior.component\';\\n\\n/**\\n * PlaceHolder for Empty Tissue Info\\n */\\nconst EMPTY_TISSUE_INFO: TissueInfo = {\\n id: \'\',\\n label: \'\',\\n};\\n\\n/** Component for Biomarker Table Details Web component */\\n@Component({\\n selector: \'ftu-wc-biomarker-details\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatIconModule,\\n MatTabsModule,\\n\\n BiomarkerTableComponent,\\n BiomarkerTableDataCardComponent,\\n GradientLegendComponent,\\n HoverDirective,\\n LabelBoxComponent,\\n SizeLegendComponent,\\n SourceListComponent,\\n EmptyBiomarkerComponent,\\n InteractiveSvgComponent,\\n ],\\n templateUrl: \'./biomarker-details-wc.component.html\',\\n styleUrls: [\'./biomarker-details-wc.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerDetailsWcComponent {\\n /**\\n * Current illustration url\\n */\\n readonly currentUrl = selectSnapshot(IllustratorSelectors.url);\\n\\n /**\\n * Current mapping file\\n */\\n readonly mapping = selectSnapshot(IllustratorSelectors.mapping);\\n\\n /**\\n * Iri of medical illustration behavior component\\n */\\n readonly iri = selectSnapshot(ActiveFtuSelectors.iri);\\n\\n /**\\n * Get all tissues\\n */\\n readonly tissues = selectSnapshot(TissueLibrarySelectors.tissues);\\n\\n /**\\n * Gets tissue title from the list of tissues\\n */\\n get tissueTitle(): string {\\n const iri = this.iri();\\n const tissues = this.tissues();\\n return iri ? tissues[iri].label : \'\';\\n }\\n\\n /**\\n * Updates the active node on node hover\\n */\\n readonly updateNodeOnHover = dispatch(IllustratorActions.SetHover);\\n\\n /**\\n * Updates the active node on node click\\n */\\n readonly updateNodeOnClicked = dispatch(IllustratorActions.SetClicked);\\n\\n /** Table tabs */\\n readonly tabs = selectSnapshot(CellSummarySelectors.aggregates);\\n\\n /** Info to be shown on the tooltip for Gradient Legend */\\n readonly gradientHoverInfo = selectQuerySnapshot(RR.anyText, Ids.GradientLegendInfo);\\n\\n /** Info to be shown on the tooltip for Size Legend */\\n readonly sizeHoverInfo = selectQuerySnapshot(RR.anyText, Ids.SizeLegendInfo);\\n\\n /** Indicates if the table is fully shown, defaults to false*/\\n isTableFullScreen = false;\\n\\n /** Gradient colors along with their stop points */\\n readonly gradients = selectQuerySnapshot(RR.field, Ids.GradientLegend, RTypes.Gradient, \'points\' as const, [])<\\n GradientPoint[]\\n >;\\n\\n /** Taking input for the radius of the circle and the label to be displayed. */\\n readonly sizes = selectQuerySnapshot(RR.field, Ids.SizeLegend, RTypes.Size, \'sizes\' as const, []);\\n\\n /** List of sources with titles and links displayed to the user */\\n readonly source = selectSnapshot(SourceRefsSelectors.sourceReferences);\\n /**\\n * Gets tissue title from the list of tissues\\n */\\n get tissueInfo(): TissueInfo {\\n const iri = this.iri();\\n const tissues = this.tissues();\\n if (iri === undefined) {\\n return EMPTY_TISSUE_INFO;\\n }\\n const { id, label } = tissues[iri];\\n return { id, label };\\n }\\n\\n /**\\n * button text of empty biomarker component.\\n */\\n readonly collaborateText = \'Collaborate with the HRA Team\';\\n\\n /**\\n * message markdown of empty biomarker component.\\n */\\n readonly message = `We currently do not have cell type data for this biomarker.\\n

Please contact us to discuss your dataset.`;\\n\\n /** A dispatcher function to set the screen mode */\\n private readonly setScreenMode = dispatch(ScreenModeAction.Set);\\n\\n /** A dialog box which shows contact modal after clicking on contact */\\n private readonly dialog = inject(MatDialog);\\n\\n /** A function that toggles isTableFullScreen and\\n * calls the setScreenMode function.\\n */\\n toggleFullscreen(): void {\\n this.isTableFullScreen = !this.isTableFullScreen;\\n this.setScreenMode(this.isTableFullScreen);\\n }\\n /** A function which opens the contact modal dialog box */\\n collaborate(): void {\\n const dialogConfig = new MatDialogConfig();\\n dialogConfig.disableClose = true;\\n this.dialog.open(ContactBehaviorComponent, dialogConfig);\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n ::ng-deep .extraTab {\\n border: 0.063rem solid #d3d3d3;\\n border-top: 0;\\n }\\n\\n .table-header {\\n grid-area: table-header;\\n border: 0.063rem solid #d3d3d3;\\n width: 43rem;\\n height: 3.5rem;\\n }\\n\\n .table {\\n grid-area: table;\\n max-width: 100%;\\n overflow: auto;\\n border: 0.063rem solid #d3d3d3;\\n\\n ::ng-deep .table-tab-header {\\n padding-left: 1rem;\\n padding-right: 1rem;\\n border-left: 0.063rem solid #d3d3d3;\\n border-bottom: 0.063rem solid #d3d3d3;\\n\\n &:last-child {\\n border-right: 0.063rem solid #d3d3d3;\\n }\\n\\n &.mdc-tab-indicator--active {\\n background-color: #f8f9fa;\\n }\\n }\\n }\\n\\n hra-biomarker-table {\\n overflow-y: auto;\\n overflow-x: auto;\\n }\\n\\n .legends {\\n display: inline-flex;\\n width: 100%;\\n .legends-right {\\n width: 50%;\\n }\\n .legends-left {\\n width: 50%;\\n }\\n }\\n\\n .legend-header {\\n color: vars.$dark-primary-text;\\n border-top: 0.063rem solid #d3d3d3;\\n border-bottom: 0.063rem solid #d3d3d3;\\n border-right: 0.063rem solid #d3d3d3;\\n\\n &.gradient {\\n grid-area: gradient-legend-header;\\n }\\n\\n &.size {\\n grid-area: size-legend-header;\\n }\\n\\n .icon {\\n margin-left: 0.6rem;\\n }\\n }\\n\\n .legend {\\n padding: 1rem 2rem;\\n border-right: 0.063rem solid #d3d3d3;\\n\\n &.gradient {\\n grid-area: gradient-legend;\\n\\n .content {\\n width: 10rem;\\n }\\n }\\n\\n &.size {\\n grid-area: size-legend;\\n }\\n }\\n\\n .source-list {\\n grid-area: source-list;\\n\\n .content {\\n width: min-content;\\n }\\n }\\n}\\n\\n::ng-deep .biomarker-details.info-tooltip {\\n display: flex;\\n padding: 1rem;\\n border: 1px solid #a8a3a3;\\n border-radius: 0.5rem;\\n box-shadow: 1px 2px 16px 2px #00000029;\\n background-color: vars.$primary-contrast-rgb;\\n max-width: 21rem;\\n font-size: small;\\n}\\n","styleUrl":"./biomarker-details-wc.component.scss"}],"stylesData":"","accessors":{"tissueTitle":{"name":"tissueTitle","getSignature":{"name":"tissueTitle","type":"string","returnType":"string","line":91,"rawdescription":"\\n\\nGets tissue title from the list of tissues\\n","description":"

Gets tissue title from the list of tissues

\\n"}},"tissueInfo":{"name":"tissueInfo","getSignature":{"name":"tissueInfo","type":"","returnType":"TissueInfo","line":132,"rawdescription":"\\n\\nGets tissue title from the list of tissues\\n","description":"

Gets tissue title from the list of tissues

\\n"}}},"templateData":"\\n {{ tissueTitle }}: FTU Illustration\\n \\n {{ isTableFullScreen ? \'close_fullscreen\' : \'open_in_full\' }}\\n \\n\\n\\n\\n \\n \\n \\n \\n \\n \\n\\n
\\n
\\n \\n Biomarker Expression Mean in FTU\\n info_outlined\\n \\n
\\n \\n
\\n
\\n\\n
\\n \\n Percentage of Cells in FTU\\n info_outlined\\n \\n
\\n \\n
\\n
\\n
\\n \\n \\n \\n
\\n \\n
\\n\\n \\n
\\n {{ tooltip }}\\n
\\n \\n \\n\\n"},{"name":"ContactBehaviorComponent","id":"component-ContactBehaviorComponent-b9d5e223798d92be933b5dbadc75b1d6c247f7b00beb75f933bb07b0a4949d22458ee53931ca654d0b255f40508dbf23ef4e516e2f80368415a86fdfe44d60b6","file":"src/lib/contact-behavior/contact-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-contact-behavior","styleUrls":["./contact-behavior.component.scss"],"styles":[],"templateUrl":["./contact-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"description","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.ContactAcknowledgement)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Information modal message to the user

\\n","line":29,"rawdescription":"\\nInformation modal message to the user","modifierKind":[144]},{"name":"postMessageTemplate","deprecated":false,"deprecationMessage":"","type":"TemplateRef","optional":false,"description":"

A template to post a message

\\n","line":20,"rawdescription":"\\nA template to post a message","decorators":[{"name":"ViewChild","stringifiedArguments":"\'postMessage\'"}],"modifierKind":[144]},{"name":"productLogoUrl","defaultValue":"selectQuerySnapshot(RR.url, Ids.ProductLogoUrl)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product logo URL to displayed on the left side.

\\n","line":23,"rawdescription":"\\nInput for product logo URL to displayed on the left side.","modifierKind":[144]},{"name":"productTitle","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.ProductTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product title to displayed on the left side.

\\n","line":26,"rawdescription":"\\nInput for product title to displayed on the left side.","modifierKind":[144]},{"name":"sendMessage","defaultValue":"dispatch(ContactActions.SendMessage)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

A dispatcher function to send message entered by user

\\n","line":32,"rawdescription":"\\nA dispatcher function to send message entered by user","modifierKind":[144]}],"methodsClass":[{"name":"close","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":51,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which closes the \'Contact us\' dialog and the acknowledgement dialog.","description":"

A function which closes the 'Contact us' dialog and the acknowledgement dialog.

\\n"},{"name":"submit","args":[{"name":"message","type":"ContactData","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"void","typeParameters":[],"line":44,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which sends/dispatches a message which contains email, subject, and message. And also opens the acknowledgement dialog box.","description":"

A function which sends/dispatches a message which contains email, subject, and message. And also opens the acknowledgement dialog box.

\\n","jsdoctags":[{"name":"message","type":"ContactData","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

A Component for contact behavior which sends the message entered by the user and shows an acknowledgement

\\n","rawdescription":"\\nA Component for contact behavior which sends the message entered by the user and shows an acknowledgement","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, inject, TemplateRef, ViewChild } from \'@angular/core\';\\nimport { MatDialog, MatDialogModule, MatDialogRef } from \'@angular/material/dialog\';\\nimport { dispatch, selectQuerySnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RR } from \'@hra-ui/cdk/state\';\\nimport { ContactData, ContactModalComponent, InfoModalComponent } from \'@hra-ui/components/molecules\';\\nimport { ResourceIds as Ids, ContactActions } from \'@hra-ui/state\';\\n\\n/** A Component for contact behavior which sends the message entered by the user and shows an acknowledgement */\\n@Component({\\n selector: \'ftu-contact-behavior\',\\n standalone: true,\\n imports: [CommonModule, MatDialogModule, ContactModalComponent, InfoModalComponent],\\n templateUrl: \'./contact-behavior.component.html\',\\n styleUrls: [\'./contact-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class ContactBehaviorComponent {\\n /** A template to post a message */\\n @ViewChild(\'postMessage\') readonly postMessageTemplate!: TemplateRef;\\n\\n /** Input for product logo URL to displayed on the left side. */\\n readonly productLogoUrl = selectQuerySnapshot(RR.url, Ids.ProductLogoUrl);\\n\\n /** Input for product title to displayed on the left side. */\\n readonly productTitle = selectQuerySnapshot(RR.anyText, Ids.ProductTitle);\\n\\n /** Information modal message to the user */\\n readonly description = selectQuerySnapshot(RR.anyText, Ids.ContactAcknowledgement);\\n\\n /** A dispatcher function to send message entered by user */\\n readonly sendMessage = dispatch(ContactActions.SendMessage);\\n\\n /** A dialog box which shows user an acknowledgement after clicking on submit */\\n private readonly dialog = inject(MatDialog);\\n\\n /** A mat form field dialog which accepts the email, subject, and message of user and validates it */\\n private readonly selfRef = inject(MatDialogRef, { optional: true });\\n\\n /** Dialog box which references the acknowledgement dialog box */\\n private postRef?: MatDialogRef;\\n\\n /** A function which sends/dispatches a message which contains email, subject, and message. And also opens the acknowledgement dialog box. */\\n submit(message: ContactData): void {\\n this.sendMessage(message);\\n this.selfRef?.close();\\n this.postRef = this.dialog.open(this.postMessageTemplate);\\n }\\n\\n /** A function which closes the \'Contact us\' dialog and the acknowledgement dialog. */\\n close(): void {\\n this.postRef?.close();\\n this.selfRef?.close();\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n\\n .contact-modal {\\n width: 41rem;\\n height: 40rem;\\n }\\n\\n .info-modal {\\n width: 35rem;\\n height: 11.8rem;\\n }\\n\\n @media screen and (max-height: 328px) {\\n .contact-modal {\\n height: calc(100vh - 2rem);\\n }\\n }\\n}\\n","styleUrl":"./contact-behavior.component.scss"}],"stylesData":"","templateData":"\\n\\n\\n\\n \\n \\n\\n"},{"name":"FooterBehaviorComponent","id":"component-FooterBehaviorComponent-d9ecf51e28e6cdbe2f77b2f819a2e3df3acd0382e946f213975e78af53f6c11b1a7a013fefb862cfa9449b9973d2ea3497fa9687d6c04eb492751c2a83c17410","file":"src/lib/footer-behavior/footer-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-footer-behavior","styleUrls":["./footer-behavior.component.scss"],"styles":[],"templateUrl":["./footer-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"download","defaultValue":"dispatch(DownloadActions.Download)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

A dispatcher function to download file in specified format

\\n","line":39,"rawdescription":"\\nA dispatcher function to download file in specified format","modifierKind":[144]},{"name":"downloadFormats","defaultValue":"selectSnapshot(DownloadSelectors.formats)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Selects a snapshot of the current value of the available download formats

\\n","line":27,"rawdescription":"\\nSelects a snapshot of the current value of the available download formats","modifierKind":[144]},{"name":"embed","defaultValue":"LinkIds.Embed","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Embed link routing after clicking on Embed

\\n","line":36,"rawdescription":"\\nEmbed link routing after clicking on Embed","modifierKind":[144]},{"name":"hraPortal","defaultValue":"LinkIds.Portal","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Hra portal link routing after clicking on HRA Portal

\\n","line":30,"rawdescription":"\\nHra portal link routing after clicking on HRA Portal","modifierKind":[144]},{"name":"illustrationMetadata","defaultValue":"LinkIds.Illustration","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Metadata page link routing after clicking on Illustration

\\n","line":33,"rawdescription":"\\nMetadata page link routing after clicking on Illustration","modifierKind":[144]},{"name":"productLogoUrl","defaultValue":"selectQuerySnapshot(RR.url, Ids.ProductLogoUrl)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product logo URL to displayed on the left side.

\\n","line":21,"rawdescription":"\\nInput for product logo URL to displayed on the left side.","modifierKind":[144]},{"name":"productTitle","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.ProductTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product title to displayed on the left side.

\\n","line":24,"rawdescription":"\\nInput for product title to displayed on the left side.","modifierKind":[144]},{"name":"size","defaultValue":"selectSnapshot(ScreenModeSelectors.size)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Selects the current value of the available ScreenMode Size

\\n","line":41,"rawdescription":"\\nSelects the current value of the available ScreenMode Size","modifierKind":[144]}],"methodsClass":[{"name":"contact","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":47,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which opens the contact modal dialog box","description":"

A function which opens the contact modal dialog box

\\n"}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

A component for footer behavior which provides functionality for various buttons in footer

\\n","rawdescription":"\\nA component for footer behavior which provides functionality for various buttons in footer","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, inject } from \'@angular/core\';\\nimport { MatDialog, MatDialogConfig, MatDialogModule } from \'@angular/material/dialog\';\\nimport { dispatch, selectQuerySnapshot, selectSnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RR } from \'@hra-ui/cdk/state\';\\nimport { FooterComponent } from \'@hra-ui/components/molecules\';\\nimport { DownloadActions, DownloadSelectors, ResourceIds as Ids, LinkIds, ScreenModeSelectors } from \'@hra-ui/state\';\\nimport { ContactBehaviorComponent } from \'../contact-behavior/contact-behavior.component\';\\n\\n/** A component for footer behavior which provides functionality for various buttons in footer */\\n@Component({\\n selector: \'ftu-footer-behavior\',\\n standalone: true,\\n imports: [CommonModule, MatDialogModule, FooterComponent, ContactBehaviorComponent],\\n templateUrl: \'./footer-behavior.component.html\',\\n styleUrls: [\'./footer-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class FooterBehaviorComponent {\\n /** Input for product logo URL to displayed on the left side. */\\n readonly productLogoUrl = selectQuerySnapshot(RR.url, Ids.ProductLogoUrl);\\n\\n /** Input for product title to displayed on the left side. */\\n readonly productTitle = selectQuerySnapshot(RR.anyText, Ids.ProductTitle);\\n\\n /** Selects a snapshot of the current value of the available download formats */\\n readonly downloadFormats = selectSnapshot(DownloadSelectors.formats);\\n\\n /** Hra portal link routing after clicking on HRA Portal */\\n readonly hraPortal = LinkIds.Portal;\\n\\n /** Metadata page link routing after clicking on Illustration */\\n readonly illustrationMetadata = LinkIds.Illustration;\\n\\n /** Embed link routing after clicking on Embed */\\n readonly embed = LinkIds.Embed;\\n\\n /** A dispatcher function to download file in specified format */\\n readonly download = dispatch(DownloadActions.Download);\\n /** Selects the current value of the available ScreenMode Size */\\n readonly size = selectSnapshot(ScreenModeSelectors.size);\\n\\n /** A dialog box which shows contact modal after clicking on contact */\\n private readonly dialog = inject(MatDialog);\\n\\n /** A function which opens the contact modal dialog box */\\n contact(): void {\\n const dialogConfig = new MatDialogConfig();\\n dialogConfig.disableClose = true;\\n this.dialog.open(ContactBehaviorComponent, dialogConfig);\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n}\\n","styleUrl":"./footer-behavior.component.scss"}],"stylesData":"","templateData":"\\n\\n"},{"name":"HeaderBehaviorComponent","id":"component-HeaderBehaviorComponent-a76f74e70c7aacab4debd2492e1302dc534513cd4598dce499fc0d4f09bf0a16fc333bcb4bb100ffc9dbcb5427533473060400e0ae5eb7051dac7768474ae300","file":"src/lib/header-behavior/header-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-header-behavior","styleUrls":["./header-behavior.component.scss"],"styles":[],"templateUrl":["./header-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"aboutLink","defaultValue":"LinkIds.About","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for about link for user click action.

\\n","line":41,"rawdescription":"\\n\\nInput for about link for user click action.\\n","modifierKind":[144]},{"name":"appTitle","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.AppTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for app title to show on the left side.

\\n","line":31,"rawdescription":"\\n\\nInput for app title to show on the left side.\\n","modifierKind":[144]},{"name":"productLogoUrl","defaultValue":"selectQuerySnapshot(RR.url, Ids.ProductLogoUrl)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product logo URL to displayed on the left side.

\\n","line":21,"rawdescription":"\\n\\nInput for product logo URL to displayed on the left side.\\n","modifierKind":[144]},{"name":"productTitle","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.ProductTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product title to displayed on the left side.

\\n","line":26,"rawdescription":"\\n\\nInput for product title to displayed on the left side.\\n","modifierKind":[144]},{"name":"productTitleLink","defaultValue":"LinkIds.ProductTitle","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product title link for user click action

\\n","line":36,"rawdescription":"\\n\\nInput for product title link for user click action\\n","modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for Header Behavior

\\n","rawdescription":"\\nComponent for Header Behavior","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component } from \'@angular/core\';\\nimport { selectQuerySnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RR } from \'@hra-ui/cdk/state\';\\nimport { HeaderComponent } from \'@hra-ui/components/molecules\';\\nimport { ResourceIds as Ids, LinkIds } from \'@hra-ui/state\';\\n\\n/** Component for Header Behavior */\\n@Component({\\n selector: \'ftu-header-behavior\',\\n standalone: true,\\n imports: [CommonModule, HeaderComponent],\\n templateUrl: \'./header-behavior.component.html\',\\n styleUrls: [\'./header-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class HeaderBehaviorComponent {\\n /**\\n * Input for product logo URL to displayed on the left side.\\n */\\n readonly productLogoUrl = selectQuerySnapshot(RR.url, Ids.ProductLogoUrl);\\n\\n /**\\n * Input for product title to displayed on the left side.\\n */\\n readonly productTitle = selectQuerySnapshot(RR.anyText, Ids.ProductTitle);\\n\\n /**\\n * Input for app title to show on the left side.\\n */\\n readonly appTitle = selectQuerySnapshot(RR.anyText, Ids.AppTitle);\\n\\n /**\\n * Input for product title link for user click action\\n */\\n readonly productTitleLink = LinkIds.ProductTitle;\\n\\n /**\\n * Input for about link for user click action.\\n */\\n readonly aboutLink = LinkIds.About;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n}\\n","styleUrl":"./header-behavior.component.scss"}],"stylesData":"","templateData":"\\n\\n"},{"name":"HraLandingPageIntroWcBehaviourComponent","id":"component-HraLandingPageIntroWcBehaviourComponent-b8c2509d12b92bff8ab139855b712563f2a92e8aa91e8ecc05714063b91b1765ade0e9c6e691367a2eaa4724d94d6dfe4ade28c89da03cfcf6eae21630452b23","file":"src/lib/hra-landing-page-intro-wc-behaviour/hra-landing-page-intro-wc-behaviour.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-wc-intro","styleUrls":["./hra-landing-page-intro-wc-behaviour.component.scss"],"styles":[],"templateUrl":["./hra-landing-page-intro-wc-behaviour.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"landingPageIntroDescription","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPageDescription)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro description

\\n","line":21,"rawdescription":"\\nselect snapshot for landing page intro description","modifierKind":[144]},{"name":"landingPageIntroPartners","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPagePartners)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro partners

\\n","line":25,"rawdescription":"\\nselect snapshot for landing page intro partners","modifierKind":[144]},{"name":"landingPageIntroReadMore","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPageIntroReadMore)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro partners

\\n","line":23,"rawdescription":"\\nselect snapshot for landing page intro partners","modifierKind":[144]},{"name":"landingPageIntroTitle","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.LandingPageTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for Landing Page title

\\n","line":19,"rawdescription":"\\nselect snapshot for Landing Page title","modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for LandingPage Intro Behaviour: Web component

\\n","rawdescription":"\\nComponent for LandingPage Intro Behaviour: Web component","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { HraLandingPageIntroWcComponent } from \'@hra-ui/components/molecules\';\\nimport { ResourceRegistrySelectors as RRS } from \'@hra-ui/cdk/state\';\\nimport { selectQuerySnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceIds as RIds } from \'@hra-ui/state\';\\n\\n/** Component for LandingPage Intro Behaviour: Web component */\\n@Component({\\n selector: \'ftu-wc-intro\',\\n standalone: true,\\n imports: [CommonModule, HraLandingPageIntroWcComponent],\\n templateUrl: \'./hra-landing-page-intro-wc-behaviour.component.html\',\\n styleUrls: [\'./hra-landing-page-intro-wc-behaviour.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class HraLandingPageIntroWcBehaviourComponent {\\n /** select snapshot for Landing Page title */\\n readonly landingPageIntroTitle = selectQuerySnapshot(RRS.anyText, RIds.LandingPageTitle);\\n /** select snapshot for landing page intro description */\\n readonly landingPageIntroDescription = selectQuerySnapshot(RRS.markdown, RIds.LandingPageDescription);\\n /** select snapshot for landing page intro partners */\\n readonly landingPageIntroReadMore = selectQuerySnapshot(RRS.markdown, RIds.LandingPageIntroReadMore);\\n /** select snapshot for landing page intro partners */\\n readonly landingPageIntroPartners = selectQuerySnapshot(RRS.markdown, RIds.LandingPagePartners);\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n\\n .intro {\\n display: inline-grid;\\n border: 1px solid #e2e7e9;\\n padding: 24px 32px 24px 32px;\\n width: 71rem;\\n }\\n}\\n","styleUrl":"./hra-landing-page-intro-wc-behaviour.component.scss"}],"stylesData":"","templateData":"\\n"},{"name":"LandingPageContentComponent","id":"component-LandingPageContentComponent-d72615e2863b7f2f08c767452a75c71c9e079687610cd3e50b54f72f11546184f7ad55c5304741d79adb9bb9ea161cdac4253ae6fb1cbbf15040f2814110616a","file":"src/lib/landing-page-content/landing-page-content.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-landing-page-content","styleUrls":["./landing-page-content.component.scss"],"styles":[],"templateUrl":["./landing-page-content.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"intersectableEls","deprecated":false,"deprecationMessage":"","type":"QueryList","optional":false,"description":"

array of element refs for intersectables

\\n","line":34,"rawdescription":"\\narray of element refs for intersectables","decorators":[{"name":"ViewChildren","stringifiedArguments":"\'intersectable\', {read: ElementRef}"}],"modifierKind":[144]},{"name":"landingPageDepthDescription","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPageDepthDescription)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page depth description

\\n","line":57,"rawdescription":"\\nselect snapshot for landing page depth description","modifierKind":[144]},{"name":"landingPageDepthImg","defaultValue":"selectQuerySnapshot(RRS.url, RIds.LandingPageDepthImg)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page depth img

\\n","line":61,"rawdescription":"\\nselect snapshot for landing page depth img","modifierKind":[144]},{"name":"landingPageDepthMoreText","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.LandingPageDepthMoreText)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot forlanding page depth more text

\\n","line":59,"rawdescription":"\\nselect snapshot forlanding page depth more text","modifierKind":[144]},{"name":"landingPageDepthTitle","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.LandingPageDepthTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page depth title

\\n","line":55,"rawdescription":"\\nselect snapshot for landing page depth title","modifierKind":[144]},{"name":"landingPageIntroDescription","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPageDescription)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro description

\\n","line":40,"rawdescription":"\\nselect snapshot for landing page intro description","modifierKind":[144]},{"name":"landingPageIntroImg","defaultValue":"selectQuerySnapshot(RRS.url, RIds.LandingPageIntroImg)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro img

\\n","line":47,"rawdescription":"\\nselect snapshot for landing page intro img","modifierKind":[144]},{"name":"landingPageIntroMoreText","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.LandingPageIntroMoreText)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro more text

\\n","line":45,"rawdescription":"\\nselect snapshot for landing page intro more text","modifierKind":[144]},{"name":"landingPageIntroPartners","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPagePartners)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro partners

\\n","line":42,"rawdescription":"\\nselect snapshot for landing page intro partners","modifierKind":[144]},{"name":"landingPageIntroTitle","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.LandingPageTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for Landing Page title

\\n","line":37,"rawdescription":"\\nselect snapshot for Landing Page title","modifierKind":[144]},{"name":"LinkIds","defaultValue":"LinkIds","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Expose links for use it template

\\n","line":64,"rawdescription":"\\nExpose links for use it template","modifierKind":[144]},{"name":"metrics","defaultValue":"selectQuerySnapshot(RRS.field, RIds.Metrics, RTypes.Metrics, \'metrics\' as const, [])","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for metrics

\\n","line":49,"rawdescription":"\\nselect snapshot for metrics","modifierKind":[144]},{"name":"metricsLogo","defaultValue":"selectQuerySnapshot(RRS.url, RIds.MetricsLogo)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for metrics logo

\\n","line":53,"rawdescription":"\\nselect snapshot for metrics logo","modifierKind":[144]},{"name":"metricsTitle","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.MetricsTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for metrics title

\\n","line":51,"rawdescription":"\\nselect snapshot for metrics title","modifierKind":[144]}],"methodsClass":[{"name":"handleIntersection","args":[{"name":"entries","type":"IntersectionObserverEntry[]","deprecated":false,"deprecationMessage":""},{"name":"observer","type":"IntersectionObserver","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"void","typeParameters":[],"line":82,"deprecated":false,"deprecationMessage":"","rawdescription":"\\ncallback function for intersection observer","description":"

callback function for intersection observer

\\n","jsdoctags":[{"name":"entries","type":"IntersectionObserverEntry[]","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}},{"name":"observer","type":"IntersectionObserver","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for LandingPageContent Behavior

\\n","rawdescription":"\\nComponent for LandingPageContent Behavior","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport {\\n AfterViewInit,\\n ChangeDetectionStrategy,\\n Component,\\n ElementRef,\\n inject,\\n QueryList,\\n Renderer2,\\n ViewChildren,\\n} from \'@angular/core\';\\nimport { injectDestroy$, selectQuerySnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RRS } from \'@hra-ui/cdk/state\';\\nimport {\\n LandingPageInDepthComponent,\\n LandingPageIntroComponent,\\n MetricItem,\\n MetricsComponent,\\n} from \'@hra-ui/components/molecules\';\\nimport { LinkIds, ResourceIds as RIds, ResourceTypes as RTypes } from \'@hra-ui/state\';\\n\\n/** Component for LandingPageContent Behavior */\\n@Component({\\n selector: \'ftu-landing-page-content\',\\n standalone: true,\\n imports: [CommonModule, LandingPageIntroComponent, MetricsComponent, LandingPageInDepthComponent],\\n templateUrl: \'./landing-page-content.component.html\',\\n styleUrls: [\'./landing-page-content.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class LandingPageContentComponent implements AfterViewInit {\\n /** array of element refs for intersectables */\\n @ViewChildren(\'intersectable\', { read: ElementRef })\\n readonly intersectableEls!: QueryList;\\n\\n /** select snapshot for Landing Page title */\\n readonly landingPageIntroTitle = selectQuerySnapshot(RRS.anyText, RIds.LandingPageTitle);\\n\\n /** select snapshot for landing page intro description */\\n readonly landingPageIntroDescription = selectQuerySnapshot(RRS.markdown, RIds.LandingPageDescription);\\n /** select snapshot for landing page intro partners */\\n readonly landingPageIntroPartners = selectQuerySnapshot(RRS.markdown, RIds.LandingPagePartners);\\n\\n /** select snapshot for landing page intro more text */\\n readonly landingPageIntroMoreText = selectQuerySnapshot(RRS.anyText, RIds.LandingPageIntroMoreText);\\n /** select snapshot for landing page intro img */\\n readonly landingPageIntroImg = selectQuerySnapshot(RRS.url, RIds.LandingPageIntroImg);\\n /** select snapshot for metrics */\\n readonly metrics = selectQuerySnapshot(RRS.field, RIds.Metrics, RTypes.Metrics, \'metrics\' as const, []);\\n /** select snapshot for metrics title */\\n readonly metricsTitle = selectQuerySnapshot(RRS.anyText, RIds.MetricsTitle);\\n /** select snapshot for metrics logo */\\n readonly metricsLogo = selectQuerySnapshot(RRS.url, RIds.MetricsLogo);\\n /** select snapshot for landing page depth title */\\n readonly landingPageDepthTitle = selectQuerySnapshot(RRS.anyText, RIds.LandingPageDepthTitle);\\n /** select snapshot for landing page depth description */\\n readonly landingPageDepthDescription = selectQuerySnapshot(RRS.markdown, RIds.LandingPageDepthDescription);\\n /** select snapshot forlanding page depth more text */\\n readonly landingPageDepthMoreText = selectQuerySnapshot(RRS.anyText, RIds.LandingPageDepthMoreText);\\n /** select snapshot for landing page depth img */\\n readonly landingPageDepthImg = selectQuerySnapshot(RRS.url, RIds.LandingPageDepthImg);\\n\\n /** Expose links for use it template */\\n readonly LinkIds = LinkIds;\\n\\n /** Renderer to add class for animation */\\n private readonly renderer = inject(Renderer2);\\n /** destroys observer */\\n private readonly destroy$ = injectDestroy$();\\n\\n /** creates an observer after view init */\\n ngAfterViewInit(): void {\\n const observer = new IntersectionObserver(this.handleIntersection.bind(this), {\\n threshold: 0.18,\\n });\\n\\n this.intersectableEls.forEach((el) => observer.observe(el.nativeElement));\\n this.destroy$.subscribe(() => observer.disconnect());\\n }\\n\\n /** callback function for intersection observer */\\n handleIntersection(entries: IntersectionObserverEntry[], observer: IntersectionObserver): void {\\n for (const { isIntersecting, target } of entries) {\\n if (isIntersecting) {\\n this.renderer.addClass(target, \'visible\');\\n observer.unobserve(target);\\n }\\n }\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n overflow-x: hidden;\\n\\n .intro {\\n margin: 3.5rem 2rem;\\n }\\n\\n .metrics {\\n opacity: 0;\\n\\n &.visible {\\n animation: fadeIn 2s ease-in forwards;\\n }\\n }\\n\\n .in-depth {\\n opacity: 0;\\n\\n &.visible {\\n overflow: hidden;\\n animation: slideIn 2s ease-in-out forwards;\\n }\\n }\\n}\\n\\n@keyframes fadeIn {\\n 0% {\\n opacity: 0;\\n }\\n\\n 100% {\\n opacity: 1;\\n }\\n}\\n\\n@keyframes slideIn {\\n 0% {\\n transform: translateX(200%);\\n opacity: 1;\\n }\\n\\n 100% {\\n transform: translateX(0);\\n opacity: 1;\\n }\\n}\\n","styleUrl":"./landing-page-content.component.scss"}],"stylesData":"","implements":["AfterViewInit"],"templateData":"\\n\\n\\n\\n\\n\\n"},{"name":"MedicalIllustrationBehaviorComponent","id":"component-MedicalIllustrationBehaviorComponent-6fea78f0a6011315eef3ff0e9cf3f451130b68d93388f1b8ff7f362f6c7f2ec8bbad2f6518d0329f94a749b1e02a1018129acf2b8340f015397957c3e0fd985d","file":"src/lib/medical-illustration-behavior/medical-illustration-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-medical-illustration-behavior","styleUrls":["./medical-illustration-behavior.component.scss"],"styles":[],"templateUrl":["./medical-illustration-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"currentUrl","defaultValue":"selectSnapshot(IllustratorSelectors.url)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Current illustration url

\\n","line":23,"rawdescription":"\\n\\nCurrent illustration url\\n","modifierKind":[144]},{"name":"iri","defaultValue":"selectSnapshot(ActiveFtuSelectors.iri)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Iri of medical illustration behavior component

\\n","line":33,"rawdescription":"\\n\\nIri of medical illustration behavior component\\n","modifierKind":[144]},{"name":"mapping","defaultValue":"selectSnapshot(IllustratorSelectors.mapping)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Current mapping file

\\n","line":28,"rawdescription":"\\n\\nCurrent mapping file\\n","modifierKind":[144]},{"name":"tissues","defaultValue":"selectSnapshot(TissueLibrarySelectors.tissues)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Get all tissues

\\n","line":38,"rawdescription":"\\n\\nGet all tissues\\n","modifierKind":[144]},{"name":"updateNodeOnClicked","defaultValue":"dispatch(IllustratorActions.SetClicked)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Updates the active node on node click

\\n","line":57,"rawdescription":"\\n\\nUpdates the active node on node click\\n","modifierKind":[144]},{"name":"updateNodeOnHover","defaultValue":"dispatch(IllustratorActions.SetHover)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Updates the active node on node hover

\\n","line":52,"rawdescription":"\\n\\nUpdates the active node on node hover\\n","modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Behavior component for medical illustration component

\\n","rawdescription":"\\n\\nBehavior component for medical illustration component\\n","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component } from \'@angular/core\';\\nimport { dispatch, selectSnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { LabelBoxComponent } from \'@hra-ui/components/atoms\';\\nimport { InteractiveSvgComponent } from \'@hra-ui/components/molecules\';\\nimport { ActiveFtuSelectors, IllustratorActions, IllustratorSelectors, TissueLibrarySelectors } from \'@hra-ui/state\';\\n\\n/**\\n * Behavior component for medical illustration component\\n */\\n@Component({\\n selector: \'ftu-medical-illustration-behavior\',\\n standalone: true,\\n imports: [CommonModule, InteractiveSvgComponent, LabelBoxComponent],\\n templateUrl: \'./medical-illustration-behavior.component.html\',\\n styleUrls: [\'./medical-illustration-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class MedicalIllustrationBehaviorComponent {\\n /**\\n * Current illustration url\\n */\\n readonly currentUrl = selectSnapshot(IllustratorSelectors.url);\\n\\n /**\\n * Current mapping file\\n */\\n readonly mapping = selectSnapshot(IllustratorSelectors.mapping);\\n\\n /**\\n * Iri of medical illustration behavior component\\n */\\n readonly iri = selectSnapshot(ActiveFtuSelectors.iri);\\n\\n /**\\n * Get all tissues\\n */\\n readonly tissues = selectSnapshot(TissueLibrarySelectors.tissues);\\n\\n /**\\n * Gets tissue title from the list of tissues\\n */\\n get tissueTitle(): string {\\n const iri = this.iri();\\n const tissues = this.tissues();\\n return iri ? tissues[iri].label : \'\';\\n }\\n\\n /**\\n * Updates the active node on node hover\\n */\\n readonly updateNodeOnHover = dispatch(IllustratorActions.SetHover);\\n\\n /**\\n * Updates the active node on node click\\n */\\n readonly updateNodeOnClicked = dispatch(IllustratorActions.SetClicked);\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n hra-label-box {\\n border-bottom: 0.063rem solid #d3d3d3;\\n width: 100%;\\n height: 3.5rem;\\n }\\n}\\n","styleUrl":"./medical-illustration-behavior.component.scss"}],"stylesData":"","accessors":{"tissueTitle":{"name":"tissueTitle","getSignature":{"name":"tissueTitle","type":"string","returnType":"string","line":43,"rawdescription":"\\n\\nGets tissue title from the list of tissues\\n","description":"

Gets tissue title from the list of tissues

\\n"}}},"templateData":"{{ tissueTitle }}\\n\\n\\n"},{"name":"ScreenNoticeBehaviorComponent","id":"component-ScreenNoticeBehaviorComponent-de4fc156bf7f658d9ca0a8d114626d829387a03f3b206cb5439f1ad22b9e157cbc51e850b06eb8f0b9dd48a75acb723b42c7fd79d0c50694757e9d23cac9f416","file":"src/lib/screen-notice-behavior/screen-notice-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-ui-screen-notice-behavior","styleUrls":["./screen-notice-behavior.component.scss"],"styles":[],"templateUrl":["./screen-notice-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"content","defaultValue":"selectQuerySnapshot(RR.anyText, ResourceIds.ScreenSizeNoticeContent)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Content of screen notice behavior component

\\n","line":21,"rawdescription":"\\nContent of screen notice behavior component","modifierKind":[144]},{"name":"portal","defaultValue":"LinkIds.Portal","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Hra portal link routing after clicking on HRA Portal

\\n","line":24,"rawdescription":"\\nHra portal link routing after clicking on HRA Portal","modifierKind":[144]}],"methodsClass":[{"name":"close","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":33,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which closes the screen size notice dialog box","description":"

A function which closes the screen size notice dialog box

\\n"}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

A component for screen size notice behavior which provides the content to be displayed and provides functionality\\nfor the buttons on the notice modal

\\n","rawdescription":"\\nA component for screen size notice behavior which provides the content to be displayed and provides functionality\\nfor the buttons on the notice modal","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, inject } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { dispatch, selectQuerySnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RR, StorageActions, StorageId } from \'@hra-ui/cdk/state\';\\nimport { ResourceIds, LinkIds } from \'@hra-ui/state\';\\nimport { ScreenSizeNoticeComponent } from \'@hra-ui/components/molecules\';\\nimport { MatDialogRef } from \'@angular/material/dialog\';\\n\\n/** A component for screen size notice behavior which provides the content to be displayed and provides functionality\\n * for the buttons on the notice modal */\\n@Component({\\n selector: \'ftu-ui-screen-notice-behavior\',\\n standalone: true,\\n imports: [CommonModule, ScreenSizeNoticeComponent],\\n templateUrl: \'./screen-notice-behavior.component.html\',\\n styleUrls: [\'./screen-notice-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class ScreenNoticeBehaviorComponent {\\n /** Content of screen notice behavior component*/\\n readonly content = selectQuerySnapshot(RR.anyText, ResourceIds.ScreenSizeNoticeContent);\\n\\n /** Hra portal link routing after clicking on HRA Portal*/\\n readonly portal = LinkIds.Portal;\\n\\n /** Reference for the screen size notice dialog box*/\\n private readonly ref = inject(MatDialogRef, { optional: true });\\n\\n /** A dispatcher function that sets the Local Storage as \'shown\'*/\\n private readonly setScreenNoticeShown = dispatch(StorageActions.Set, StorageId.Local, \'screen-size-notice\', \'shown\');\\n\\n /** A function which closes the screen size notice dialog box*/\\n close(): void {\\n this.setScreenNoticeShown();\\n this.ref?.close();\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n}\\n","styleUrl":"./screen-notice-behavior.component.scss"}],"stylesData":"","templateData":" \\n"},{"name":"TissueLibraryBehaviorComponent","id":"component-TissueLibraryBehaviorComponent-1565978e9f70870b546b49f929236ee86c2eb9cc241e10b805863df59e4d66dca72495ffa8c27a7f282e396acc84f78b6724255570a4eab733a3af995543b47a","file":"src/lib/tissue-library-behavior/tissue-library-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-tissue-library-behavior","styleUrls":["./tissue-library-behavior.component.scss"],"styles":[],"templateUrl":["./tissue-library-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"list","deprecated":false,"deprecationMessage":"","type":"TissueTreeListComponent","optional":true,"description":"

Reference to the TissueTreeListComponent.

\\n","line":25,"rawdescription":"\\n\\nReference to the TissueTreeListComponent.\\n","decorators":[{"name":"ViewChild","stringifiedArguments":"\'list\', {static: true}"}],"modifierKind":[144]},{"name":"selected","deprecated":false,"deprecationMessage":"","type":"Tissue","optional":true,"description":"

Selected of tissue library behavior component

\\n","line":34,"rawdescription":"\\n\\nSelected of tissue library behavior component\\n"},{"name":"tissues","defaultValue":"selectSnapshot(TissueLibrarySelectors.tissues)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for tissues data

\\n","line":30,"rawdescription":"\\n\\nInput for tissues data\\n","modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for Tissue Library Behavior

\\n","rawdescription":"\\n\\nComponent for Tissue Library Behavior\\n","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, ViewChild } from \'@angular/core\';\\nimport { select$, selectSnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { TissueTreeListComponent } from \'@hra-ui/components/molecules\';\\nimport { Tissue } from \'@hra-ui/services\';\\nimport { ActiveFtuSelectors, TissueLibrarySelectors } from \'@hra-ui/state\';\\nimport { LabelBoxComponent } from \'@hra-ui/components/atoms\';\\n\\n/**\\n * Component for Tissue Library Behavior\\n */\\n@Component({\\n selector: \'ftu-tissue-library-behavior\',\\n standalone: true,\\n imports: [CommonModule, LabelBoxComponent, TissueTreeListComponent],\\n templateUrl: \'./tissue-library-behavior.component.html\',\\n styleUrls: [\'./tissue-library-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class TissueLibraryBehaviorComponent {\\n /**\\n * Reference to the TissueTreeListComponent.\\n */\\n @ViewChild(\'list\', { static: true })\\n readonly list?: TissueTreeListComponent;\\n\\n /**\\n * Input for tissues data\\n */\\n readonly tissues = selectSnapshot(TissueLibrarySelectors.tissues);\\n /**\\n * Selected of tissue library behavior component\\n */\\n selected?: Tissue;\\n\\n /**\\n * Sets the TissueItem instance as undefined if\\n * the url is undefined\\n */\\n constructor() {\\n /** Get iris from the observable else reset selection if\\n * iri is undefined\\n */\\n select$(ActiveFtuSelectors.iri).subscribe((iri) => {\\n this.selected = iri && this.tissues()[iri];\\n if (iri === undefined) {\\n this.list?.resetSelection();\\n }\\n });\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n .label {\\n border-bottom: 1px solid #e2e7e9;\\n width: 100%;\\n height: 3.5rem;\\n }\\n}\\n","styleUrl":"./tissue-library-behavior.component.scss"}],"stylesData":"","constructorObj":{"name":"constructor","description":"

Sets the TissueItem instance as undefined if\\nthe url is undefined

\\n","deprecated":false,"deprecationMessage":"","args":[],"line":34,"rawdescription":"\\n\\nSets the TissueItem instance as undefined if\\nthe url is undefined\\n"},"templateData":"FTU Library\\n \\n"}],"modules":[],"miscellaneous":{"variables":[{"name":"EMPTY_TISSUE_INFO","ctype":"miscellaneous","subtype":"variable","file":"src/lib/biomarker-details/biomarker-details.component.ts","deprecated":false,"deprecationMessage":"","type":"TissueInfo","defaultValue":"{\\n id: \'\',\\n label: \'\',\\n}","rawdescription":"PlaceHolder for Empty Tissue Info","description":"

PlaceHolder for Empty Tissue Info

\\n"},{"name":"EMPTY_TISSUE_INFO","ctype":"miscellaneous","subtype":"variable","file":"src/lib/biomarker-details-wc/biomarker-details-wc.component.ts","deprecated":false,"deprecationMessage":"","type":"TissueInfo","defaultValue":"{\\n id: \'\',\\n label: \'\',\\n}","rawdescription":"PlaceHolder for Empty Tissue Info","description":"

PlaceHolder for Empty Tissue Info

\\n"}],"functions":[],"typealiases":[],"enumerations":[],"groupedVariables":{"src/lib/biomarker-details/biomarker-details.component.ts":[{"name":"EMPTY_TISSUE_INFO","ctype":"miscellaneous","subtype":"variable","file":"src/lib/biomarker-details/biomarker-details.component.ts","deprecated":false,"deprecationMessage":"","type":"TissueInfo","defaultValue":"{\\n id: \'\',\\n label: \'\',\\n}","rawdescription":"PlaceHolder for Empty Tissue Info","description":"

PlaceHolder for Empty Tissue Info

\\n"}],"src/lib/biomarker-details-wc/biomarker-details-wc.component.ts":[{"name":"EMPTY_TISSUE_INFO","ctype":"miscellaneous","subtype":"variable","file":"src/lib/biomarker-details-wc/biomarker-details-wc.component.ts","deprecated":false,"deprecationMessage":"","type":"TissueInfo","defaultValue":"{\\n id: \'\',\\n label: \'\',\\n}","rawdescription":"PlaceHolder for Empty Tissue Info","description":"

PlaceHolder for Empty Tissue Info

\\n"}]},"groupedFunctions":{},"groupedEnumerations":{},"groupedTypeAliases":{}}}')},"./dist/compodoc/components-molecules/documentation.json":module=>{"use strict";module.exports=JSON.parse('{"pipes":[],"interfaces":[{"name":"ContactData","id":"interface-ContactData-309310b2740da63be5ea5aaa894ef73ced8bed2a86b50643af4dd031551d6cdb7b26ece6b3328d0e31c21e46f940bd8b901f5665c241ca2a4cb38f39631bd8a3","file":"src/lib/contact-modal/contact-modal.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EmailInputComponent, RequiredInputComponent, RequiredTextboxComponent } from \'@hra-ui/components/atoms\';\\nimport { produce } from \'immer\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/**\\n An interface representing contact data information which will be emitted if all the fields are in correct format.\\n */\\nexport interface ContactData {\\n /** The email address of the person submitting the form. */\\n email: string;\\n /** The subject line of the message being sent. */\\n subject: string;\\n /** The body of the message being sent. */\\n message: string;\\n}\\n\\n/** Initial empty contact data */\\nconst EMPTY_CONTACT_DATA: Partial = {\\n email: undefined,\\n subject: undefined,\\n message: undefined,\\n};\\n\\n/**\\n * Contact modal component.\\n */\\n@Component({\\n selector: \'hra-contact-modal\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatButtonModule,\\n MatIconModule,\\n EmailInputComponent,\\n MarkdownModule,\\n RequiredTextboxComponent,\\n RequiredInputComponent,\\n ],\\n templateUrl: \'./contact-modal.component.html\',\\n styleUrls: [\'./contact-modal.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class ContactModalComponent {\\n /** Input for product logo URL to displayed on the left side. */\\n @Input() productLogoUrl = \'\';\\n\\n /** Input for product title to displayed on the left side. */\\n @Input() productTitle = \'\';\\n\\n /** Emits when the submit button is clicked and all the values are appropriate. */\\n @Output() readonly submitClick = new EventEmitter();\\n\\n /** Emits when the cancel button or close icon is clicked */\\n @Output() readonly closeClick = new EventEmitter();\\n\\n /** A function to disable the submit button. If all the values are in approproiate format, then it will be enabled. */\\n get disableSubmit(): boolean {\\n return Object.values(this.contactData).some((value) => value === undefined);\\n }\\n\\n /** Asigns the undefined initially to all the input fields. */\\n contactData = EMPTY_CONTACT_DATA;\\n\\n /** Updates the contact data object with a new value for a given key. */\\n updateData(key: K, value?: ContactData[K]): void {\\n this.contactData = produce(this.contactData, (draft) => {\\n draft[key] = value;\\n });\\n }\\n\\n /** It emits the updated value of contact data */\\n submit(): void {\\n this.submitClick.emit(this.contactData as ContactData);\\n }\\n}\\n","properties":[{"name":"email","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

The email address of the person submitting the form.

\\n","line":14,"rawdescription":"\\nThe email address of the person submitting the form."},{"name":"message","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

The body of the message being sent.

\\n","line":18,"rawdescription":"\\nThe body of the message being sent."},{"name":"subject","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

The subject line of the message being sent.

\\n","line":16,"rawdescription":"\\nThe subject line of the message being sent."}],"indexSignatures":[],"kind":165,"description":"

An interface representing contact data information which will be emitted if all the fields are in correct format.

\\n","rawdescription":"\\n\\nAn interface representing contact data information which will be emitted if all the fields are in correct format.\\n","methods":[]},{"name":"DataItem","id":"interface-DataItem-dba50a1e9cbac5f9733930bd6b04d1ac5fda31ee6342e13da75314f7b5dbbf46c436aab104bfc47abdc323e9ff42aeeb0047ee89577f639d3979c6964344bbd7","file":"src/lib/biomarker-table-data-card/biomarker-table-data-card.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule } from \'@angular/material/table\';\\n\\n/** An item which defines a string label and a string value */\\nexport interface DataItem {\\n /** A string property that represents the label */\\n label: string;\\n /** A string property that represents the value */\\n value: string;\\n}\\n\\n/** An item which represents a section with a data item and an indicator for the last item in the section */\\nexport interface SectionItem {\\n /** A number property that represents the section number */\\n section: number;\\n /** A DateItem property that represents a section and its data */\\n data: DataItem;\\n /** A boolean property that represents the last item of a section */\\n isLastItem: boolean;\\n}\\n\\n/** This component displays a table with sections, where each section contains a list of items with a label and a value. */\\n@Component({\\n selector: \'hra-biomarker-table-data-card\',\\n standalone: true,\\n imports: [CommonModule, MatTableModule],\\n templateUrl: \'./biomarker-table-data-card.component.html\',\\n styleUrls: [\'./biomarker-table-data-card.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableDataCardComponent implements OnChanges {\\n /** Nested list of DataItems for each section which is displayed to the user */\\n @Input() data: DataItem[][] = [];\\n\\n /** Converted nested array of DataItem into Flat array of SectionItem */\\n sectionItems: SectionItem[] = [];\\n\\n /** Triggers an update on sectionItems array when data is changed */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.updateSectionItems();\\n }\\n }\\n\\n /** Updates sectionItems array when data is changed */\\n private updateSectionItems(): void {\\n const newSectionItems: SectionItem[] = [];\\n\\n this.data.forEach((section, sectionIndex) => {\\n section.forEach((item, itemIndex) => {\\n newSectionItems.push({\\n data: item,\\n section: sectionIndex,\\n isLastItem: itemIndex === section.length - 1,\\n });\\n });\\n });\\n\\n this.sectionItems = newSectionItems;\\n }\\n}\\n","properties":[{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

A string property that represents the label

\\n","line":8,"rawdescription":"\\nA string property that represents the label"},{"name":"value","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

A string property that represents the value

\\n","line":10,"rawdescription":"\\nA string property that represents the value"}],"indexSignatures":[],"kind":165,"description":"

An item which defines a string label and a string value

\\n","rawdescription":"\\nAn item which defines a string label and a string value","methods":[]},{"name":"DataNode","id":"interface-DataNode-8544338e8c5e11dd440f8b104bfa31552155bc5006289770258a8e940978177df7797adcb9bafb5b09a9943913ecf339692d528f868c6846be5c3de8a6270237","file":"src/lib/tissue-tree-list/tissue-tree-list.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { FlatTreeControl } from \'@angular/cdk/tree\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n Input,\\n OnChanges,\\n Output,\\n SimpleChanges,\\n} from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatRippleModule } from \'@angular/material/core\';\\nimport { MatExpansionModule } from \'@angular/material/expansion\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatTreeFlatDataSource, MatTreeFlattener, MatTreeModule } from \'@angular/material/tree\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { LinkId } from \'@hra-ui/cdk/state\';\\n\\n/** Base node type */\\nexport interface DataNode {\\n /** User readable label */\\n label: string;\\n /** Id to pass as a query parameter on navigation */\\n id?: string;\\n /** Link to navigate to on node click */\\n link?: LinkId;\\n /** Nested nodes */\\n children?: K[];\\n}\\n\\n/**\\n * Internal interface for flat tissue data hierarchy\\n */\\ninterface InternalNode> {\\n /** Displayed label */\\n label: string;\\n /** Whether the node can be expanded to display child nodes */\\n expandable: boolean;\\n /** Depth of node in the tree */\\n level: number;\\n /** Associated user node data */\\n data: T;\\n}\\n\\n/**\\n * Tabular View for hubMap tissue side-bar\\n */\\n@Component({\\n selector: \'hra-tissue-tree-list\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatButtonModule,\\n MatTreeModule,\\n MatIconModule,\\n MatExpansionModule,\\n MatRippleModule,\\n LinkDirective,\\n ],\\n templateUrl: \'./tissue-tree-list.component.html\',\\n styleUrls: [\'./tissue-tree-list.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class TissueTreeListComponent> implements OnChanges {\\n /**\\n * Input of tissue tree list component\\n */\\n @Input() nodes: Record = {} as Record;\\n\\n /**\\n * Node selected, to view the data associated with it\\n */\\n @Input() selected?: T = undefined;\\n\\n /**\\n * Output of tissue tree list component\\n */\\n @Output() readonly selectedChange = new EventEmitter();\\n\\n /**\\n * tree controller, used to control the nodes in the tree\\n */\\n readonly control = new FlatTreeControl>(\\n (node) => node.level,\\n (node) => node.expandable\\n );\\n\\n /**\\n * Flattener of tissue tree list component, returns flat-data structure\\n */\\n readonly flattener = new MatTreeFlattener>(\\n (node, level) => ({\\n label: node.label,\\n expandable: (node.children?.length ?? 0) > 0,\\n level,\\n data: node,\\n }),\\n (node) => node.level,\\n (node) => node.expandable,\\n (node) => node.children?.map((id) => this.nodes[id])\\n );\\n\\n /**\\n * Data source of tissue tree list component, defines the data in mat-tree\\n */\\n readonly dataSource = new MatTreeFlatDataSource(this.control, this.flattener);\\n\\n /**\\n * Take actions if any data changes\\n * @param changes changes in data\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'nodes\' in changes) {\\n this.dataSource.data = this.findRootNodes();\\n }\\n if (\'selected\' in changes) {\\n const path = this.selected ? this.dfsFindPath(this.findRootNodes(), this.selected) : [];\\n this.expandPath(path);\\n }\\n }\\n\\n /**\\n * check if the current node has children\\n * @param node current selected node\\n * @returns boolean, which means if node has children\\n */\\n hasChild(_: number, node: InternalNode): boolean {\\n return node.expandable;\\n }\\n\\n /**\\n * It selects the node, which is clicked.\\n * @param node Tissue Tree Item, which is clicked\\n */\\n selectNode(node: T): void {\\n if (this.selected !== node) {\\n this.selected = node;\\n this.selectedChange.emit(this.selected);\\n }\\n }\\n\\n /**\\n * Resets selection and collapes all nodes of the tree.\\n */\\n resetSelection(): void {\\n this.selected = undefined;\\n this.control.collapseAll();\\n }\\n\\n /**\\n * It creates a copy of the input nodes object.\\n * It iterates over it and removes all the children nodes from it.\\n * @returns remaining nodes which are root nodes.\\n */\\n private findRootNodes(): T[] {\\n const { nodes } = this;\\n const roots = { ...this.nodes };\\n for (const key in nodes) {\\n for (const child of nodes[key].children ?? []) {\\n delete roots[child];\\n }\\n }\\n\\n return Object.values(roots);\\n }\\n\\n /**\\n * expands the tree nodes based on the path provided.\\n * @param path is given as an input.\\n */\\n private expandPath(path: DataNode[]): void {\\n const nodes = this.control.dataNodes.filter((node) => path.includes(node.data));\\n nodes.forEach((node) => this.control.expand(node));\\n }\\n\\n /**\\n * It used the logic of depth first search to find the target node.\\n * returns the path to the target node.\\n */\\n private dfsFindPath(nodes: T[], target: T, path: T[] = []): T[] {\\n for (const node of nodes) {\\n path.push(node);\\n if (node === target) {\\n return path;\\n }\\n\\n const savedLength = path.length;\\n const children = node.children?.map((id) => this.nodes[id]) ?? [];\\n if (this.dfsFindPath(children, target, path).length > savedLength) {\\n return path;\\n }\\n\\n path.pop();\\n }\\n\\n return path;\\n }\\n}\\n","properties":[{"name":"children","deprecated":false,"deprecationMessage":"","type":"K[]","optional":true,"description":"

Nested nodes

\\n","line":29,"rawdescription":"\\nNested nodes"},{"name":"id","deprecated":false,"deprecationMessage":"","type":"string","optional":true,"description":"

Id to pass as a query parameter on navigation

\\n","line":25,"rawdescription":"\\nId to pass as a query parameter on navigation"},{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

User readable label

\\n","line":23,"rawdescription":"\\nUser readable label"},{"name":"link","deprecated":false,"deprecationMessage":"","type":"LinkId","optional":true,"description":"

Link to navigate to on node click

\\n","line":27,"rawdescription":"\\nLink to navigate to on node click"}],"indexSignatures":[],"kind":165,"description":"

Base node type

\\n","rawdescription":"\\nBase node type","methods":[]},{"name":"DownloadFormat","id":"interface-DownloadFormat-45c5a61fc5d68c201808fb76ff867f9a7cf8e42e6ef95ae08b440dbd37ce63eb4c77c3da0597ef90973854d65522a3ba496eeb5eccbe75750c1fd2f5abf52e6b","file":"src/lib/footer/footer.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { ConnectedPosition, OverlayModule } from \'@angular/cdk/overlay\';\\nimport { MatListModule } from \'@angular/material/list\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { EMPTY_LINK } from \'@hra-ui/cdk/state\';\\n\\n/**\\n * Base type for different download format options.\\n */\\nexport interface DownloadFormat {\\n /**\\n * User readable format label\\n */\\n label: string;\\n}\\n\\n/**\\n * Positioning value for the download list popup\\n */\\nconst DOWNLOADS_LIST_POSITION: ConnectedPosition[] = [\\n {\\n panelClass: \'above\',\\n originX: \'start\',\\n originY: \'top\',\\n overlayX: \'start\',\\n overlayY: \'bottom\',\\n offsetY: 0,\\n },\\n {\\n panelClass: \'below\',\\n originX: \'start\',\\n originY: \'bottom\',\\n overlayX: \'start\',\\n overlayY: \'top\',\\n },\\n];\\n\\n/**\\n * Component for footer that displays its content at the bottom of the page with different action buttons.\\n */\\n@Component({\\n selector: \'hra-footer\',\\n standalone: true,\\n imports: [CommonModule, MatButtonModule, MatIconModule, OverlayModule, MatListModule, LinkDirective],\\n templateUrl: \'./footer.component.html\',\\n styleUrls: [\'./footer.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class FooterComponent {\\n /** Host binding of footer component */\\n @HostBinding(\'class\')\\n @Input()\\n size: \'small\' | \'large\' = \'large\';\\n\\n /** Input for product logo URL to displayed on the left side. */\\n @Input() productLogoUrl = \'\';\\n\\n /** Input for product title to displayed on the left side. */\\n @Input() productTitle = \'\';\\n\\n /** Input for HRA Portal link */\\n @Input() hraPortal = EMPTY_LINK;\\n\\n /** Input for Illustration metadata page link in HRA Portal */\\n @Input() illustrationMetadata = EMPTY_LINK;\\n\\n /** Input for embed link in HRA Portal */\\n @Input() embed = EMPTY_LINK;\\n\\n /** Different download formats options displayed to the user */\\n @Input() downloadFormats: T[] = [];\\n\\n /** Emits the selected download format */\\n @Output() readonly download = new EventEmitter();\\n\\n /** Emits when the contact button is clicked */\\n @Output() readonly contactClick = new EventEmitter();\\n\\n /** Download list popup overlay positioning */\\n readonly DOWNLOADS_LIST_POSITION = DOWNLOADS_LIST_POSITION;\\n\\n /** Gets whether the footer required is small */\\n get isSmall(): boolean {\\n return this.size === \'small\';\\n }\\n\\n /** Whether the download list panel is open */\\n downloadListOpen = false;\\n}\\n","properties":[{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

User readable format label

\\n","line":17,"rawdescription":"\\n\\nUser readable format label\\n"}],"indexSignatures":[],"kind":165,"description":"

Base type for different download format options.

\\n","rawdescription":"\\n\\nBase type for different download format options.\\n","methods":[]},{"name":"InternalNode","id":"interface-InternalNode-8544338e8c5e11dd440f8b104bfa31552155bc5006289770258a8e940978177df7797adcb9bafb5b09a9943913ecf339692d528f868c6846be5c3de8a6270237","file":"src/lib/tissue-tree-list/tissue-tree-list.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { FlatTreeControl } from \'@angular/cdk/tree\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n Input,\\n OnChanges,\\n Output,\\n SimpleChanges,\\n} from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatRippleModule } from \'@angular/material/core\';\\nimport { MatExpansionModule } from \'@angular/material/expansion\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatTreeFlatDataSource, MatTreeFlattener, MatTreeModule } from \'@angular/material/tree\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { LinkId } from \'@hra-ui/cdk/state\';\\n\\n/** Base node type */\\nexport interface DataNode {\\n /** User readable label */\\n label: string;\\n /** Id to pass as a query parameter on navigation */\\n id?: string;\\n /** Link to navigate to on node click */\\n link?: LinkId;\\n /** Nested nodes */\\n children?: K[];\\n}\\n\\n/**\\n * Internal interface for flat tissue data hierarchy\\n */\\ninterface InternalNode> {\\n /** Displayed label */\\n label: string;\\n /** Whether the node can be expanded to display child nodes */\\n expandable: boolean;\\n /** Depth of node in the tree */\\n level: number;\\n /** Associated user node data */\\n data: T;\\n}\\n\\n/**\\n * Tabular View for hubMap tissue side-bar\\n */\\n@Component({\\n selector: \'hra-tissue-tree-list\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatButtonModule,\\n MatTreeModule,\\n MatIconModule,\\n MatExpansionModule,\\n MatRippleModule,\\n LinkDirective,\\n ],\\n templateUrl: \'./tissue-tree-list.component.html\',\\n styleUrls: [\'./tissue-tree-list.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class TissueTreeListComponent> implements OnChanges {\\n /**\\n * Input of tissue tree list component\\n */\\n @Input() nodes: Record = {} as Record;\\n\\n /**\\n * Node selected, to view the data associated with it\\n */\\n @Input() selected?: T = undefined;\\n\\n /**\\n * Output of tissue tree list component\\n */\\n @Output() readonly selectedChange = new EventEmitter();\\n\\n /**\\n * tree controller, used to control the nodes in the tree\\n */\\n readonly control = new FlatTreeControl>(\\n (node) => node.level,\\n (node) => node.expandable\\n );\\n\\n /**\\n * Flattener of tissue tree list component, returns flat-data structure\\n */\\n readonly flattener = new MatTreeFlattener>(\\n (node, level) => ({\\n label: node.label,\\n expandable: (node.children?.length ?? 0) > 0,\\n level,\\n data: node,\\n }),\\n (node) => node.level,\\n (node) => node.expandable,\\n (node) => node.children?.map((id) => this.nodes[id])\\n );\\n\\n /**\\n * Data source of tissue tree list component, defines the data in mat-tree\\n */\\n readonly dataSource = new MatTreeFlatDataSource(this.control, this.flattener);\\n\\n /**\\n * Take actions if any data changes\\n * @param changes changes in data\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'nodes\' in changes) {\\n this.dataSource.data = this.findRootNodes();\\n }\\n if (\'selected\' in changes) {\\n const path = this.selected ? this.dfsFindPath(this.findRootNodes(), this.selected) : [];\\n this.expandPath(path);\\n }\\n }\\n\\n /**\\n * check if the current node has children\\n * @param node current selected node\\n * @returns boolean, which means if node has children\\n */\\n hasChild(_: number, node: InternalNode): boolean {\\n return node.expandable;\\n }\\n\\n /**\\n * It selects the node, which is clicked.\\n * @param node Tissue Tree Item, which is clicked\\n */\\n selectNode(node: T): void {\\n if (this.selected !== node) {\\n this.selected = node;\\n this.selectedChange.emit(this.selected);\\n }\\n }\\n\\n /**\\n * Resets selection and collapes all nodes of the tree.\\n */\\n resetSelection(): void {\\n this.selected = undefined;\\n this.control.collapseAll();\\n }\\n\\n /**\\n * It creates a copy of the input nodes object.\\n * It iterates over it and removes all the children nodes from it.\\n * @returns remaining nodes which are root nodes.\\n */\\n private findRootNodes(): T[] {\\n const { nodes } = this;\\n const roots = { ...this.nodes };\\n for (const key in nodes) {\\n for (const child of nodes[key].children ?? []) {\\n delete roots[child];\\n }\\n }\\n\\n return Object.values(roots);\\n }\\n\\n /**\\n * expands the tree nodes based on the path provided.\\n * @param path is given as an input.\\n */\\n private expandPath(path: DataNode[]): void {\\n const nodes = this.control.dataNodes.filter((node) => path.includes(node.data));\\n nodes.forEach((node) => this.control.expand(node));\\n }\\n\\n /**\\n * It used the logic of depth first search to find the target node.\\n * returns the path to the target node.\\n */\\n private dfsFindPath(nodes: T[], target: T, path: T[] = []): T[] {\\n for (const node of nodes) {\\n path.push(node);\\n if (node === target) {\\n return path;\\n }\\n\\n const savedLength = path.length;\\n const children = node.children?.map((id) => this.nodes[id]) ?? [];\\n if (this.dfsFindPath(children, target, path).length > savedLength) {\\n return path;\\n }\\n\\n path.pop();\\n }\\n\\n return path;\\n }\\n}\\n","properties":[{"name":"data","deprecated":false,"deprecationMessage":"","type":"T","optional":false,"description":"

Associated user node data

\\n","line":43,"rawdescription":"\\nAssociated user node data"},{"name":"expandable","deprecated":false,"deprecationMessage":"","type":"boolean","optional":false,"description":"

Whether the node can be expanded to display child nodes

\\n","line":39,"rawdescription":"\\nWhether the node can be expanded to display child nodes"},{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Displayed label

\\n","line":37,"rawdescription":"\\nDisplayed label"},{"name":"level","deprecated":false,"deprecationMessage":"","type":"number","optional":false,"description":"

Depth of node in the tree

\\n","line":41,"rawdescription":"\\nDepth of node in the tree"}],"indexSignatures":[],"kind":165,"description":"

Internal interface for flat tissue data hierarchy

\\n","rawdescription":"\\n\\nInternal interface for flat tissue data hierarchy\\n","methods":[]},{"name":"MetricItem","id":"interface-MetricItem-e52c0a1cdf090042d1924c4907a4034774cbb442217faca9ec5035e76d2796116cf55644ecf49ae040fdea1168f9c5d99f6ce15b2079f70de3d853fece481b30","file":"src/lib/metrics/metrics.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\n\\n/**\\n An interface representing a single metric with an icon, value and description.\\n */\\nexport interface MetricItem {\\n /** Represents the icon associated with the metric. */\\n icon: string;\\n /** Describes the numberical value of the metric. */\\n value: string;\\n /** Describes the type of metric. */\\n description: string;\\n}\\n/**\\n * Describes the metrics for the HuBMAP project.\\n */\\n@Component({\\n selector: \'hra-metrics\',\\n standalone: true,\\n imports: [CommonModule],\\n templateUrl: \'./metrics.component.html\',\\n styleUrls: [\'./metrics.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class MetricsComponent {\\n /** Main title of metrics component. */\\n @Input() title = \'\';\\n\\n /** Logo of metrics component. */\\n @Input() logo = \'\';\\n\\n /** List of metrics that will be shown to the user. */\\n @Input() metrics: MetricItem[] = [];\\n}\\n","properties":[{"name":"description","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Describes the type of metric.

\\n","line":13,"rawdescription":"\\nDescribes the type of metric."},{"name":"icon","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Represents the icon associated with the metric.

\\n","line":9,"rawdescription":"\\nRepresents the icon associated with the metric."},{"name":"value","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Describes the numberical value of the metric.

\\n","line":11,"rawdescription":"\\nDescribes the numberical value of the metric."}],"indexSignatures":[],"kind":165,"description":"

An interface representing a single metric with an icon, value and description.

\\n","rawdescription":"\\n\\nAn interface representing a single metric with an icon, value and description.\\n","methods":[]},{"name":"NodeMapEntry","id":"interface-NodeMapEntry-34dafc0493fcadf92dd676bebad498e3798e87879ccd7ab9c56dfb6b52cf51b41a6b132fa4c00fa2f32867f3f84829bef3163da37de19cf480f10a8cd94e74f1","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ConnectedPosition, OverlayModule } from \'@angular/cdk/overlay\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n inject,\\n Input,\\n OnChanges,\\n OnDestroy,\\n Output,\\n Renderer2,\\n SimpleChanges,\\n ViewEncapsulation,\\n} from \'@angular/core\';\\nimport { TooltipComponent } from \'@hra-ui/components/atoms\';\\nimport { InlineSVGModule, SVGScriptEvalMode } from \'ng-inline-svg-2\';\\nimport { BehaviorSubject, debounce, fromEventPattern, Observable, Subject, takeUntil, timer } from \'rxjs\';\\nimport { NodeEventHandler } from \'rxjs/internal/observable/fromEvent\';\\n\\n/** Delay before tooltip becomes visible */\\nconst HOVER_DELAY = 200;\\n\\n/** Tooltip position settings */\\nconst TOOLTIP_POSITIONS: ConnectedPosition[] = [\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'start\',\\n overlayY: \'center\',\\n offsetX: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'end\',\\n overlayY: \'center\',\\n offsetX: -8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'top\',\\n offsetY: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'bottom\',\\n offsetY: -8,\\n },\\n];\\n\\n/** Node tooltip data */\\nexport interface NodeTooltipData {\\n /** Node name */\\n node: string;\\n /** Center point of hovered node in screen coordinates */\\n origin: { x: number; y: number };\\n}\\n\\n/** Interface for node entries */\\nexport interface NodeMapEntry {\\n /** Node label */\\n label: string;\\n /** Node id in svg */\\n id: string;\\n /** Ontology id of cell type */\\n ontologyId: string;\\n}\\n\\n/**\\n * Interactive SVG component\\n */\\n@Component({\\n selector: \'hra-interactive-svg\',\\n standalone: true,\\n imports: [CommonModule, InlineSVGModule, OverlayModule, TooltipComponent],\\n templateUrl: \'./interactive-svg.component.html\',\\n styleUrls: [\'./interactive-svg.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n encapsulation: ViewEncapsulation.ShadowDom,\\n})\\nexport class InteractiveSvgComponent implements OnChanges, OnDestroy {\\n /** SVG url */\\n @Input() url?: string;\\n\\n /** Mapping info */\\n @Input() mapping: T[] = [];\\n\\n /** Highlighted ontology id */\\n @Input() highlightId?: string;\\n\\n /** Emits node id when hovered */\\n @Output() readonly nodeHover = new EventEmitter();\\n\\n /** Emits node id when clicked */\\n @Output() readonly nodeClick = new EventEmitter();\\n\\n /** SVG script eval mode */\\n readonly NEVER_EVAL_SCRIPTS = SVGScriptEvalMode.NEVER;\\n\\n /** Tooltip position settings */\\n readonly TOOLTIP_POSITIONS = TOOLTIP_POSITIONS;\\n\\n /** Observable of node hover data or undefined when there is no active hover */\\n readonly nodeHoverData$ = new BehaviorSubject(undefined);\\n\\n /** Observable of node hover with a timer */\\n readonly nodeHoverDelayedData$ = this.nodeHoverData$.pipe(debounce((event) => timer(event ? HOVER_DELAY : 0)));\\n\\n /** Custom renderer */\\n private readonly renderer = inject(Renderer2);\\n\\n /** Destroys */\\n private destroy$ = new Subject();\\n\\n /** Crosswalk element of svg */\\n private crosswalkEl?: Element;\\n\\n /** List of highlighted svg elements */\\n private highlightedElements: Element[] = [];\\n\\n /**\\n * Updates the highlighting based on current highlight id\\n * @param changes\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'highlightId\' in changes) {\\n this.resetHighlight();\\n this.setHighlight();\\n }\\n }\\n\\n /**\\n * Highlights cells that match highlightId\\n */\\n private setHighlight() {\\n const { mapping, highlightId, crosswalkEl } = this;\\n const entry = mapping.find(({ ontologyId }) => ontologyId === highlightId);\\n if (!entry || !crosswalkEl) {\\n return;\\n }\\n\\n let id = this.encodeId(entry.id);\\n const element = crosswalkEl.querySelector(`#${id}`);\\n if (!element) {\\n return;\\n } else if (element.nodeName !== \'g\') {\\n id = element.parentElement?.id ?? \'\';\\n }\\n\\n const elements = crosswalkEl.querySelectorAll(`#${id} :is(path, polygon, polyline)`);\\n this.highlightedElements = Array.from(elements);\\n elements.forEach((el) => el.classList.add(\'click-active\'));\\n }\\n\\n /**\\n * Resets all highlighted elements in the svg\\n */\\n private resetHighlight(): void {\\n for (const el of this.highlightedElements) {\\n el.classList.remove(\'click-active\');\\n }\\n this.highlightedElements = [];\\n }\\n\\n /**\\n * Clears observables on destroy\\n */\\n ngOnDestroy(): void {\\n this.clear();\\n }\\n\\n /**\\n * Sets SVG element\\n * @param el SVG element\\n */\\n setSvgElement(el: SVGElement): void {\\n this.clear();\\n this.crosswalkEl = el.querySelector(\'[id^=\\"Crosswalk\\"]\') ?? undefined;\\n if (this.crosswalkEl) {\\n // Move to front (i.e. last child in svg)\\n this.renderer.appendChild(el, this.crosswalkEl);\\n this.attachCrosswalkHover(this.crosswalkEl);\\n }\\n }\\n\\n /**\\n * Removes underscores from id\\n * @param name Node name\\n * @returns node name without underscores\\n */\\n formatNodeName(name: string): string {\\n return name.replace(/_/g, \' \');\\n }\\n\\n /**\\n * Attaches crosswalk hover\\n * @param el element\\n */\\n private attachCrosswalkHover(el: Element): void {\\n this.attachEvent(el, \'mouseover\').subscribe((event) => this.onCrosswalkHover(event));\\n this.attachEvent(el, \'mouseout\').subscribe(() => this.onCrosswalkHover(undefined as never as MouseEvent));\\n this.attachEvent(el, \'click\').subscribe((event) => this.nodeClick.emit(this.getNode(event)));\\n }\\n\\n /**\\n * Finds matching node in data from a hovered element\\n * @param event Mouse event\\n */\\n private onCrosswalkHover(event: MouseEvent): void {\\n if (event) {\\n const node = this.getNode(event);\\n if (node) {\\n this.nodeHoverData$.next({\\n node: node.label,\\n origin: {\\n x: event.clientX,\\n y: event.clientY,\\n },\\n });\\n this.nodeHover.emit(node); //emits node entry\\n }\\n } else {\\n this.nodeHoverData$.next(undefined);\\n this.nodeHover.emit();\\n }\\n }\\n\\n /**\\n * Clears observables\\n */\\n private clear(): void {\\n this.destroy$.next();\\n this.destroy$.complete();\\n this.destroy$ = new Subject();\\n }\\n\\n /**\\n * Returns entry from mapping if target, parent, or grandparent id matches the node name\\n * @param event Event\\n * @returns Node entry that matches the target id\\n */\\n private getNode(event: Event): T | undefined {\\n const targetId = (event.target as Element).id;\\n const parentId = (event.target as Element).parentElement?.id ?? \'\';\\n const grandparentId = (event.target as Element).parentElement?.parentElement?.id ?? \'\';\\n const idCollection = [targetId, parentId, grandparentId];\\n for (const id of idCollection) {\\n const decodedID = this.decodeId(id);\\n const match = this.mapping.find(\\n (item) => item.id?.toLowerCase() === decodedID.toLowerCase() //search mapping by name for matching node entry\\n );\\n if (match) {\\n return match;\\n }\\n }\\n return undefined;\\n }\\n\\n /**\\n * Decodes id into a normal string\\n * @param id Undecoded ID\\n * @returns id\\n */\\n private decodeId(id: string): string {\\n const replacer = (_match: string, hex: string) => String.fromCharCode(Number.parseInt(hex, 16));\\n return id.replace(/_x([\\\\da-f]+)_/gi, replacer);\\n }\\n\\n /**\\n * Turns normal string into decoded SVG id\\n * @param id id\\n * @returns Encoded id\\n */\\n private encodeId(id: string): string {\\n const replacer = (match: string) => `_x${match.charCodeAt(0).toString(16).toUpperCase()}_`;\\n return id.replace(/[^a-z0-9-]/gi, replacer);\\n }\\n\\n /**\\n * Attaches an event listener\\n * @template K\\n * @param el Element\\n * @param event Event\\n * @returns Observable\\n */\\n private attachEvent(el: Element, event: K): Observable {\\n const { renderer, destroy$ } = this;\\n const add = (handler: NodeEventHandler) => renderer.listen(el, event, handler);\\n const remove = (_handler: NodeEventHandler, unlisten: () => void) => unlisten();\\n return fromEventPattern(add, remove).pipe(takeUntil(destroy$));\\n }\\n}\\n","properties":[{"name":"id","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Node id in svg

\\n","line":69,"rawdescription":"\\nNode id in svg"},{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Node label

\\n","line":67,"rawdescription":"\\nNode label"},{"name":"ontologyId","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Ontology id of cell type

\\n","line":71,"rawdescription":"\\nOntology id of cell type"}],"indexSignatures":[],"kind":165,"description":"

Interface for node entries

\\n","rawdescription":"\\nInterface for node entries","methods":[]},{"name":"NodeTooltipData","id":"interface-NodeTooltipData-34dafc0493fcadf92dd676bebad498e3798e87879ccd7ab9c56dfb6b52cf51b41a6b132fa4c00fa2f32867f3f84829bef3163da37de19cf480f10a8cd94e74f1","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ConnectedPosition, OverlayModule } from \'@angular/cdk/overlay\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n inject,\\n Input,\\n OnChanges,\\n OnDestroy,\\n Output,\\n Renderer2,\\n SimpleChanges,\\n ViewEncapsulation,\\n} from \'@angular/core\';\\nimport { TooltipComponent } from \'@hra-ui/components/atoms\';\\nimport { InlineSVGModule, SVGScriptEvalMode } from \'ng-inline-svg-2\';\\nimport { BehaviorSubject, debounce, fromEventPattern, Observable, Subject, takeUntil, timer } from \'rxjs\';\\nimport { NodeEventHandler } from \'rxjs/internal/observable/fromEvent\';\\n\\n/** Delay before tooltip becomes visible */\\nconst HOVER_DELAY = 200;\\n\\n/** Tooltip position settings */\\nconst TOOLTIP_POSITIONS: ConnectedPosition[] = [\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'start\',\\n overlayY: \'center\',\\n offsetX: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'end\',\\n overlayY: \'center\',\\n offsetX: -8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'top\',\\n offsetY: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'bottom\',\\n offsetY: -8,\\n },\\n];\\n\\n/** Node tooltip data */\\nexport interface NodeTooltipData {\\n /** Node name */\\n node: string;\\n /** Center point of hovered node in screen coordinates */\\n origin: { x: number; y: number };\\n}\\n\\n/** Interface for node entries */\\nexport interface NodeMapEntry {\\n /** Node label */\\n label: string;\\n /** Node id in svg */\\n id: string;\\n /** Ontology id of cell type */\\n ontologyId: string;\\n}\\n\\n/**\\n * Interactive SVG component\\n */\\n@Component({\\n selector: \'hra-interactive-svg\',\\n standalone: true,\\n imports: [CommonModule, InlineSVGModule, OverlayModule, TooltipComponent],\\n templateUrl: \'./interactive-svg.component.html\',\\n styleUrls: [\'./interactive-svg.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n encapsulation: ViewEncapsulation.ShadowDom,\\n})\\nexport class InteractiveSvgComponent implements OnChanges, OnDestroy {\\n /** SVG url */\\n @Input() url?: string;\\n\\n /** Mapping info */\\n @Input() mapping: T[] = [];\\n\\n /** Highlighted ontology id */\\n @Input() highlightId?: string;\\n\\n /** Emits node id when hovered */\\n @Output() readonly nodeHover = new EventEmitter();\\n\\n /** Emits node id when clicked */\\n @Output() readonly nodeClick = new EventEmitter();\\n\\n /** SVG script eval mode */\\n readonly NEVER_EVAL_SCRIPTS = SVGScriptEvalMode.NEVER;\\n\\n /** Tooltip position settings */\\n readonly TOOLTIP_POSITIONS = TOOLTIP_POSITIONS;\\n\\n /** Observable of node hover data or undefined when there is no active hover */\\n readonly nodeHoverData$ = new BehaviorSubject(undefined);\\n\\n /** Observable of node hover with a timer */\\n readonly nodeHoverDelayedData$ = this.nodeHoverData$.pipe(debounce((event) => timer(event ? HOVER_DELAY : 0)));\\n\\n /** Custom renderer */\\n private readonly renderer = inject(Renderer2);\\n\\n /** Destroys */\\n private destroy$ = new Subject();\\n\\n /** Crosswalk element of svg */\\n private crosswalkEl?: Element;\\n\\n /** List of highlighted svg elements */\\n private highlightedElements: Element[] = [];\\n\\n /**\\n * Updates the highlighting based on current highlight id\\n * @param changes\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'highlightId\' in changes) {\\n this.resetHighlight();\\n this.setHighlight();\\n }\\n }\\n\\n /**\\n * Highlights cells that match highlightId\\n */\\n private setHighlight() {\\n const { mapping, highlightId, crosswalkEl } = this;\\n const entry = mapping.find(({ ontologyId }) => ontologyId === highlightId);\\n if (!entry || !crosswalkEl) {\\n return;\\n }\\n\\n let id = this.encodeId(entry.id);\\n const element = crosswalkEl.querySelector(`#${id}`);\\n if (!element) {\\n return;\\n } else if (element.nodeName !== \'g\') {\\n id = element.parentElement?.id ?? \'\';\\n }\\n\\n const elements = crosswalkEl.querySelectorAll(`#${id} :is(path, polygon, polyline)`);\\n this.highlightedElements = Array.from(elements);\\n elements.forEach((el) => el.classList.add(\'click-active\'));\\n }\\n\\n /**\\n * Resets all highlighted elements in the svg\\n */\\n private resetHighlight(): void {\\n for (const el of this.highlightedElements) {\\n el.classList.remove(\'click-active\');\\n }\\n this.highlightedElements = [];\\n }\\n\\n /**\\n * Clears observables on destroy\\n */\\n ngOnDestroy(): void {\\n this.clear();\\n }\\n\\n /**\\n * Sets SVG element\\n * @param el SVG element\\n */\\n setSvgElement(el: SVGElement): void {\\n this.clear();\\n this.crosswalkEl = el.querySelector(\'[id^=\\"Crosswalk\\"]\') ?? undefined;\\n if (this.crosswalkEl) {\\n // Move to front (i.e. last child in svg)\\n this.renderer.appendChild(el, this.crosswalkEl);\\n this.attachCrosswalkHover(this.crosswalkEl);\\n }\\n }\\n\\n /**\\n * Removes underscores from id\\n * @param name Node name\\n * @returns node name without underscores\\n */\\n formatNodeName(name: string): string {\\n return name.replace(/_/g, \' \');\\n }\\n\\n /**\\n * Attaches crosswalk hover\\n * @param el element\\n */\\n private attachCrosswalkHover(el: Element): void {\\n this.attachEvent(el, \'mouseover\').subscribe((event) => this.onCrosswalkHover(event));\\n this.attachEvent(el, \'mouseout\').subscribe(() => this.onCrosswalkHover(undefined as never as MouseEvent));\\n this.attachEvent(el, \'click\').subscribe((event) => this.nodeClick.emit(this.getNode(event)));\\n }\\n\\n /**\\n * Finds matching node in data from a hovered element\\n * @param event Mouse event\\n */\\n private onCrosswalkHover(event: MouseEvent): void {\\n if (event) {\\n const node = this.getNode(event);\\n if (node) {\\n this.nodeHoverData$.next({\\n node: node.label,\\n origin: {\\n x: event.clientX,\\n y: event.clientY,\\n },\\n });\\n this.nodeHover.emit(node); //emits node entry\\n }\\n } else {\\n this.nodeHoverData$.next(undefined);\\n this.nodeHover.emit();\\n }\\n }\\n\\n /**\\n * Clears observables\\n */\\n private clear(): void {\\n this.destroy$.next();\\n this.destroy$.complete();\\n this.destroy$ = new Subject();\\n }\\n\\n /**\\n * Returns entry from mapping if target, parent, or grandparent id matches the node name\\n * @param event Event\\n * @returns Node entry that matches the target id\\n */\\n private getNode(event: Event): T | undefined {\\n const targetId = (event.target as Element).id;\\n const parentId = (event.target as Element).parentElement?.id ?? \'\';\\n const grandparentId = (event.target as Element).parentElement?.parentElement?.id ?? \'\';\\n const idCollection = [targetId, parentId, grandparentId];\\n for (const id of idCollection) {\\n const decodedID = this.decodeId(id);\\n const match = this.mapping.find(\\n (item) => item.id?.toLowerCase() === decodedID.toLowerCase() //search mapping by name for matching node entry\\n );\\n if (match) {\\n return match;\\n }\\n }\\n return undefined;\\n }\\n\\n /**\\n * Decodes id into a normal string\\n * @param id Undecoded ID\\n * @returns id\\n */\\n private decodeId(id: string): string {\\n const replacer = (_match: string, hex: string) => String.fromCharCode(Number.parseInt(hex, 16));\\n return id.replace(/_x([\\\\da-f]+)_/gi, replacer);\\n }\\n\\n /**\\n * Turns normal string into decoded SVG id\\n * @param id id\\n * @returns Encoded id\\n */\\n private encodeId(id: string): string {\\n const replacer = (match: string) => `_x${match.charCodeAt(0).toString(16).toUpperCase()}_`;\\n return id.replace(/[^a-z0-9-]/gi, replacer);\\n }\\n\\n /**\\n * Attaches an event listener\\n * @template K\\n * @param el Element\\n * @param event Event\\n * @returns Observable\\n */\\n private attachEvent(el: Element, event: K): Observable {\\n const { renderer, destroy$ } = this;\\n const add = (handler: NodeEventHandler) => renderer.listen(el, event, handler);\\n const remove = (_handler: NodeEventHandler, unlisten: () => void) => unlisten();\\n return fromEventPattern(add, remove).pipe(takeUntil(destroy$));\\n }\\n}\\n","properties":[{"name":"node","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Node name

\\n","line":59,"rawdescription":"\\nNode name"},{"name":"origin","deprecated":false,"deprecationMessage":"","type":"literal type","optional":false,"description":"

Center point of hovered node in screen coordinates

\\n","line":61,"rawdescription":"\\nCenter point of hovered node in screen coordinates"}],"indexSignatures":[],"kind":165,"description":"

Node tooltip data

\\n","rawdescription":"\\nNode tooltip data","methods":[]},{"name":"SectionItem","id":"interface-SectionItem-dba50a1e9cbac5f9733930bd6b04d1ac5fda31ee6342e13da75314f7b5dbbf46c436aab104bfc47abdc323e9ff42aeeb0047ee89577f639d3979c6964344bbd7","file":"src/lib/biomarker-table-data-card/biomarker-table-data-card.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule } from \'@angular/material/table\';\\n\\n/** An item which defines a string label and a string value */\\nexport interface DataItem {\\n /** A string property that represents the label */\\n label: string;\\n /** A string property that represents the value */\\n value: string;\\n}\\n\\n/** An item which represents a section with a data item and an indicator for the last item in the section */\\nexport interface SectionItem {\\n /** A number property that represents the section number */\\n section: number;\\n /** A DateItem property that represents a section and its data */\\n data: DataItem;\\n /** A boolean property that represents the last item of a section */\\n isLastItem: boolean;\\n}\\n\\n/** This component displays a table with sections, where each section contains a list of items with a label and a value. */\\n@Component({\\n selector: \'hra-biomarker-table-data-card\',\\n standalone: true,\\n imports: [CommonModule, MatTableModule],\\n templateUrl: \'./biomarker-table-data-card.component.html\',\\n styleUrls: [\'./biomarker-table-data-card.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableDataCardComponent implements OnChanges {\\n /** Nested list of DataItems for each section which is displayed to the user */\\n @Input() data: DataItem[][] = [];\\n\\n /** Converted nested array of DataItem into Flat array of SectionItem */\\n sectionItems: SectionItem[] = [];\\n\\n /** Triggers an update on sectionItems array when data is changed */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.updateSectionItems();\\n }\\n }\\n\\n /** Updates sectionItems array when data is changed */\\n private updateSectionItems(): void {\\n const newSectionItems: SectionItem[] = [];\\n\\n this.data.forEach((section, sectionIndex) => {\\n section.forEach((item, itemIndex) => {\\n newSectionItems.push({\\n data: item,\\n section: sectionIndex,\\n isLastItem: itemIndex === section.length - 1,\\n });\\n });\\n });\\n\\n this.sectionItems = newSectionItems;\\n }\\n}\\n","properties":[{"name":"data","deprecated":false,"deprecationMessage":"","type":"DataItem","optional":false,"description":"

A DateItem property that represents a section and its data

\\n","line":18,"rawdescription":"\\nA DateItem property that represents a section and its data"},{"name":"isLastItem","deprecated":false,"deprecationMessage":"","type":"boolean","optional":false,"description":"

A boolean property that represents the last item of a section

\\n","line":20,"rawdescription":"\\nA boolean property that represents the last item of a section"},{"name":"section","deprecated":false,"deprecationMessage":"","type":"number","optional":false,"description":"

A number property that represents the section number

\\n","line":16,"rawdescription":"\\nA number property that represents the section number"}],"indexSignatures":[],"kind":165,"description":"

An item which represents a section with a data item and an indicator for the last item in the section

\\n","rawdescription":"\\nAn item which represents a section with a data item and an indicator for the last item in the section","methods":[]},{"name":"SourceListItem","id":"interface-SourceListItem-f0d0464b044f898be3752719190f2d8ad8511283d4daafb2f8b17bd0f4dfa0290abbbeb293819664c07134fcaee5a64313aaf72d69e335a063e244c2ba1d7c0c","file":"src/lib/source-list/source-list.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule } from \'@angular/material/table\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EmptyBiomarkerComponent, LabelBoxComponent } from \'@hra-ui/components/atoms\';\\n\\n/** SourceListItem interface contains title and link to the dataset for the SourceList*/\\nexport interface SourceListItem {\\n /** Title of the dataset in the SourceList */\\n title: string;\\n\\n /** Label of the dataset in the SourceList */\\n label: string;\\n\\n /** Link to the dataset in the SourceList */\\n link: string;\\n}\\n\\n/** This component shows list of sources with title and links to the datasets */\\n@Component({\\n selector: \'hra-source-list\',\\n standalone: true,\\n imports: [CommonModule, MatTableModule, MatIconModule, LabelBoxComponent, EmptyBiomarkerComponent],\\n templateUrl: \'./source-list.component.html\',\\n styleUrls: [\'./source-list.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class SourceListComponent {\\n /** List of sources with titles and links displayed to the user */\\n @Input() sources: SourceListItem[] = [];\\n /**\\n * Input buttonon text of empty biomarker component.\\n */\\n @Input() collaborateText = \'\';\\n\\n /**\\n * Input message markdown of empty biomarker component.\\n */\\n @Input() message = \'\';\\n /**\\n * Show table of source list component which toggles to true or false\\n * based on click\\n */\\n showTable = true;\\n\\n /** Emits when the contact button is clicked */\\n @Output() readonly collaborateClick = new EventEmitter();\\n\\n /**\\n * It changes the value of showTable to false if value it true\\n * and vice versa\\n */\\n toggleTable(): void {\\n this.showTable = !this.showTable;\\n }\\n}\\n","properties":[{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Label of the dataset in the SourceList

\\n","line":13,"rawdescription":"\\nLabel of the dataset in the SourceList"},{"name":"link","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Link to the dataset in the SourceList

\\n","line":16,"rawdescription":"\\nLink to the dataset in the SourceList"},{"name":"title","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Title of the dataset in the SourceList

\\n","line":10,"rawdescription":"\\nTitle of the dataset in the SourceList"}],"indexSignatures":[],"kind":165,"description":"

SourceListItem interface contains title and link to the dataset for the SourceList

\\n","rawdescription":"\\nSourceListItem interface contains title and link to the dataset for the SourceList","methods":[]}],"injectables":[],"guards":[],"interceptors":[],"classes":[],"directives":[],"components":[{"name":"BiomarkerTableDataCardComponent","id":"component-BiomarkerTableDataCardComponent-dba50a1e9cbac5f9733930bd6b04d1ac5fda31ee6342e13da75314f7b5dbbf46c436aab104bfc47abdc323e9ff42aeeb0047ee89577f639d3979c6964344bbd7","file":"src/lib/biomarker-table-data-card/biomarker-table-data-card.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-biomarker-table-data-card","styleUrls":["./biomarker-table-data-card.component.scss"],"styles":[],"templateUrl":["./biomarker-table-data-card.component.html"],"viewProviders":[],"inputsClass":[{"name":"data","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nNested list of DataItems for each section which is displayed to the user","description":"

Nested list of DataItems for each section which is displayed to the user

\\n","line":34,"type":"DataItem[][]","decorators":[]}],"outputsClass":[],"propertiesClass":[{"name":"sectionItems","defaultValue":"[]","deprecated":false,"deprecationMessage":"","type":"SectionItem[]","optional":false,"description":"

Converted nested array of DataItem into Flat array of SectionItem

\\n","line":37,"rawdescription":"\\nConverted nested array of DataItem into Flat array of SectionItem"}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

This component displays a table with sections, where each section contains a list of items with a label and a value.

\\n","rawdescription":"\\nThis component displays a table with sections, where each section contains a list of items with a label and a value.","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule } from \'@angular/material/table\';\\n\\n/** An item which defines a string label and a string value */\\nexport interface DataItem {\\n /** A string property that represents the label */\\n label: string;\\n /** A string property that represents the value */\\n value: string;\\n}\\n\\n/** An item which represents a section with a data item and an indicator for the last item in the section */\\nexport interface SectionItem {\\n /** A number property that represents the section number */\\n section: number;\\n /** A DateItem property that represents a section and its data */\\n data: DataItem;\\n /** A boolean property that represents the last item of a section */\\n isLastItem: boolean;\\n}\\n\\n/** This component displays a table with sections, where each section contains a list of items with a label and a value. */\\n@Component({\\n selector: \'hra-biomarker-table-data-card\',\\n standalone: true,\\n imports: [CommonModule, MatTableModule],\\n templateUrl: \'./biomarker-table-data-card.component.html\',\\n styleUrls: [\'./biomarker-table-data-card.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableDataCardComponent implements OnChanges {\\n /** Nested list of DataItems for each section which is displayed to the user */\\n @Input() data: DataItem[][] = [];\\n\\n /** Converted nested array of DataItem into Flat array of SectionItem */\\n sectionItems: SectionItem[] = [];\\n\\n /** Triggers an update on sectionItems array when data is changed */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.updateSectionItems();\\n }\\n }\\n\\n /** Updates sectionItems array when data is changed */\\n private updateSectionItems(): void {\\n const newSectionItems: SectionItem[] = [];\\n\\n this.data.forEach((section, sectionIndex) => {\\n section.forEach((item, itemIndex) => {\\n newSectionItems.push({\\n data: item,\\n section: sectionIndex,\\n isLastItem: itemIndex === section.length - 1,\\n });\\n });\\n });\\n\\n this.sectionItems = newSectionItems;\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'utils\';\\n@use \'variables\' as vars;\\n\\n:host {\\n display: flex;\\n padding: 1rem 1.5rem;\\n border-radius: 0.5rem;\\n box-shadow: 0.063rem 0.125rem 1rem 0.125rem rgba(0, 0, 0, 0.16);\\n background-color: vars.$primary-contrast-rgb;\\n\\n .mat-mdc-cell {\\n padding: 0.25rem 0rem;\\n }\\n\\n .mat-mdc-row {\\n height: fit-content;\\n }\\n\\n .no-border {\\n border: none;\\n }\\n\\n .label {\\n color: #243142;\\n padding-right: 3rem;\\n }\\n\\n .value {\\n color: #4c5a69;\\n }\\n\\n .sr-only {\\n @include utils.sr-only();\\n }\\n}\\n","styleUrl":"./biomarker-table-data-card.component.scss"}],"stylesData":"","implements":["OnChanges"],"templateData":"
No data
\\n 0\\" [dataSource]=\\"sectionItems\\">\\n \\n\\n \x3c!-- Label Column --\x3e\\n \\n \\n \\n \\n\\n \x3c!-- Value Column --\x3e\\n \\n \\n \\n \\n\\n \\n
\\n Biomarker Table Data Card\\n
Item Label\\n {{ element.data.label }}\\n Item Value\\n {{ element.data.value }}\\n
\\n"},{"name":"BiomarkerTableDataIconComponent","id":"component-BiomarkerTableDataIconComponent-0fab04062dee70e0c4d57bfdc6f056400c9b82591b050c6912b9e59a896e1a5535f884a104c1d3f95c19721a049ca51f5b2a953512dc1d6a501c29d5399a063c","file":"src/lib/biomarker-table-data-icon/biomarker-table-data-icon.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-biomarker-table-data-icon","styleUrls":["./biomarker-table-data-icon.component.scss"],"styles":[],"template":"","templateUrl":[],"viewProviders":[],"inputsClass":[{"name":"color","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nRepresents the color of the icon","description":"

Represents the color of the icon

\\n","line":17,"type":"string","decorators":[]},{"name":"size","defaultValue":"0","deprecated":false,"deprecationMessage":"","rawdescription":"\\nRepresents the size of the icon","description":"

Represents the size of the icon

\\n","line":20,"type":"number","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Describes the data icon for the table

\\n","rawdescription":"\\n\\nDescribes the data icon for the table\\n","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, HostBinding, Input } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\n\\n/**\\n * Describes the data icon for the table\\n */\\n@Component({\\n selector: \'hra-biomarker-table-data-icon\',\\n standalone: true,\\n imports: [CommonModule],\\n template: \'\',\\n styleUrls: [\'./biomarker-table-data-icon.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableDataIconComponent {\\n /** Represents the color of the icon */\\n @HostBinding(\'style.background-color\') @Input() color = \'\';\\n\\n /** Represents the size of the icon */\\n @HostBinding(\'style.--radius.rem\') @Input() size = 0;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n border-radius: 50%;\\n --radius: 0.625rem;\\n width: var(--radius);\\n height: var(--radius);\\n}\\n","styleUrl":"./biomarker-table-data-icon.component.scss"}],"stylesData":""},{"name":"ContactModalComponent","id":"component-ContactModalComponent-309310b2740da63be5ea5aaa894ef73ced8bed2a86b50643af4dd031551d6cdb7b26ece6b3328d0e31c21e46f940bd8b901f5665c241ca2a4cb38f39631bd8a3","file":"src/lib/contact-modal/contact-modal.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-contact-modal","styleUrls":["./contact-modal.component.scss"],"styles":[],"templateUrl":["./contact-modal.component.html"],"viewProviders":[],"inputsClass":[{"name":"productLogoUrl","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for product logo URL to displayed on the left side.","description":"

Input for product logo URL to displayed on the left side.

\\n","line":49,"type":"string","decorators":[]},{"name":"productTitle","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for product title to displayed on the left side.","description":"

Input for product title to displayed on the left side.

\\n","line":52,"type":"string","decorators":[]}],"outputsClass":[{"name":"closeClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the cancel button or close icon is clicked","description":"

Emits when the cancel button or close icon is clicked

\\n","line":58,"type":"EventEmitter"},{"name":"submitClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the submit button is clicked and all the values are appropriate.","description":"

Emits when the submit button is clicked and all the values are appropriate.

\\n","line":55,"type":"EventEmitter"}],"propertiesClass":[{"name":"contactData","defaultValue":"EMPTY_CONTACT_DATA","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Asigns the undefined initially to all the input fields.

\\n","line":66,"rawdescription":"\\nAsigns the undefined initially to all the input fields."}],"methodsClass":[{"name":"submit","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":76,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nIt emits the updated value of contact data","description":"

It emits the updated value of contact data

\\n"},{"name":"updateData","args":[{"name":"key","type":"K","deprecated":false,"deprecationMessage":""},{"name":"value","type":"","deprecated":false,"deprecationMessage":"","optional":true}],"optional":false,"returnType":"void","typeParameters":["K"],"line":69,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nUpdates the contact data object with a new value for a given key.","description":"

Updates the contact data object with a new value for a given key.

\\n","jsdoctags":[{"name":"key","type":"K","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}},{"name":"value","type":"","deprecated":false,"deprecationMessage":"","optional":true,"tagName":{"text":"param"}}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Contact modal component.

\\n","rawdescription":"\\n\\nContact modal component.\\n","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EmailInputComponent, RequiredInputComponent, RequiredTextboxComponent } from \'@hra-ui/components/atoms\';\\nimport { produce } from \'immer\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/**\\n An interface representing contact data information which will be emitted if all the fields are in correct format.\\n */\\nexport interface ContactData {\\n /** The email address of the person submitting the form. */\\n email: string;\\n /** The subject line of the message being sent. */\\n subject: string;\\n /** The body of the message being sent. */\\n message: string;\\n}\\n\\n/** Initial empty contact data */\\nconst EMPTY_CONTACT_DATA: Partial = {\\n email: undefined,\\n subject: undefined,\\n message: undefined,\\n};\\n\\n/**\\n * Contact modal component.\\n */\\n@Component({\\n selector: \'hra-contact-modal\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatButtonModule,\\n MatIconModule,\\n EmailInputComponent,\\n MarkdownModule,\\n RequiredTextboxComponent,\\n RequiredInputComponent,\\n ],\\n templateUrl: \'./contact-modal.component.html\',\\n styleUrls: [\'./contact-modal.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class ContactModalComponent {\\n /** Input for product logo URL to displayed on the left side. */\\n @Input() productLogoUrl = \'\';\\n\\n /** Input for product title to displayed on the left side. */\\n @Input() productTitle = \'\';\\n\\n /** Emits when the submit button is clicked and all the values are appropriate. */\\n @Output() readonly submitClick = new EventEmitter();\\n\\n /** Emits when the cancel button or close icon is clicked */\\n @Output() readonly closeClick = new EventEmitter();\\n\\n /** A function to disable the submit button. If all the values are in approproiate format, then it will be enabled. */\\n get disableSubmit(): boolean {\\n return Object.values(this.contactData).some((value) => value === undefined);\\n }\\n\\n /** Asigns the undefined initially to all the input fields. */\\n contactData = EMPTY_CONTACT_DATA;\\n\\n /** Updates the contact data object with a new value for a given key. */\\n updateData(key: K, value?: ContactData[K]): void {\\n this.contactData = produce(this.contactData, (draft) => {\\n draft[key] = value;\\n });\\n }\\n\\n /** It emits the updated value of contact data */\\n submit(): void {\\n this.submitClick.emit(this.contactData as ContactData);\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n position: relative;\\n padding-top: 2rem;\\n margin-right: 1.5rem;\\n margin-left: 1.5rem;\\n font-family: \'Inter\';\\n\\n .product-logo {\\n display: flex;\\n align-items: center;\\n\\n .product-logo-image {\\n margin-right: 1rem;\\n }\\n\\n .product-title {\\n color: #990000;\\n margin: 0;\\n font-weight: 600;\\n }\\n }\\n\\n .close {\\n position: absolute;\\n top: 1.5rem;\\n right: 0rem;\\n }\\n\\n .submit {\\n margin-right: 1.5rem;\\n }\\n\\n .submit,\\n .cancel {\\n width: 7.5rem;\\n }\\n\\n .email {\\n margin-top: 1.25rem;\\n }\\n\\n .message-field {\\n margin-top: 1rem;\\n }\\n\\n .subject-field {\\n margin-top: 1rem;\\n }\\n\\n .desc {\\n margin-top: 1.5rem;\\n }\\n}\\n","styleUrl":"./contact-modal.component.scss"}],"stylesData":"","accessors":{"disableSubmit":{"name":"disableSubmit","getSignature":{"name":"disableSubmit","type":"boolean","returnType":"boolean","line":61,"rawdescription":"\\nA function to disable the submit button. If all the values are in approproiate format, then it will be enabled.","description":"

A function to disable the submit button. If all the values are in approproiate format, then it will be enabled.

\\n"}}},"templateData":"\\n \\"Prodoct\\n

{{ productTitle }}

\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n"},{"name":"FooterComponent","id":"component-FooterComponent-45c5a61fc5d68c201808fb76ff867f9a7cf8e42e6ef95ae08b440dbd37ce63eb4c77c3da0597ef90973854d65522a3ba496eeb5eccbe75750c1fd2f5abf52e6b","file":"src/lib/footer/footer.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-footer","styleUrls":["./footer.component.scss"],"styles":[],"templateUrl":["./footer.component.html"],"viewProviders":[],"inputsClass":[{"name":"downloadFormats","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nDifferent download formats options displayed to the user","description":"

Different download formats options displayed to the user

\\n","line":74,"type":"T[]","decorators":[]},{"name":"embed","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for embed link in HRA Portal","description":"

Input for embed link in HRA Portal

\\n","line":71,"type":"any","decorators":[]},{"name":"hraPortal","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for HRA Portal link","description":"

Input for HRA Portal link

\\n","line":65,"type":"any","decorators":[]},{"name":"illustrationMetadata","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for Illustration metadata page link in HRA Portal","description":"

Input for Illustration metadata page link in HRA Portal

\\n","line":68,"type":"any","decorators":[]},{"name":"productLogoUrl","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for product logo URL to displayed on the left side.","description":"

Input for product logo URL to displayed on the left side.

\\n","line":59,"type":"string","decorators":[]},{"name":"productTitle","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for product title to displayed on the left side.","description":"

Input for product title to displayed on the left side.

\\n","line":62,"type":"string","decorators":[]},{"name":"size","defaultValue":"\'large\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nHost binding of footer component","description":"

Host binding of footer component

\\n","line":56,"type":"\\"small\\" | \\"large\\"","decorators":[]}],"outputsClass":[{"name":"contactClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the contact button is clicked","description":"

Emits when the contact button is clicked

\\n","line":80,"type":"EventEmitter"},{"name":"download","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits the selected download format","description":"

Emits the selected download format

\\n","line":77,"type":"EventEmitter"}],"propertiesClass":[{"name":"downloadListOpen","defaultValue":"false","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Whether the download list panel is open

\\n","line":91,"rawdescription":"\\nWhether the download list panel is open"},{"name":"DOWNLOADS_LIST_POSITION","defaultValue":"DOWNLOADS_LIST_POSITION","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Download list popup overlay positioning

\\n","line":83,"rawdescription":"\\nDownload list popup overlay positioning","modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for footer that displays its content at the bottom of the page with different action buttons.

\\n","rawdescription":"\\n\\nComponent for footer that displays its content at the bottom of the page with different action buttons.\\n","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { ConnectedPosition, OverlayModule } from \'@angular/cdk/overlay\';\\nimport { MatListModule } from \'@angular/material/list\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { EMPTY_LINK } from \'@hra-ui/cdk/state\';\\n\\n/**\\n * Base type for different download format options.\\n */\\nexport interface DownloadFormat {\\n /**\\n * User readable format label\\n */\\n label: string;\\n}\\n\\n/**\\n * Positioning value for the download list popup\\n */\\nconst DOWNLOADS_LIST_POSITION: ConnectedPosition[] = [\\n {\\n panelClass: \'above\',\\n originX: \'start\',\\n originY: \'top\',\\n overlayX: \'start\',\\n overlayY: \'bottom\',\\n offsetY: 0,\\n },\\n {\\n panelClass: \'below\',\\n originX: \'start\',\\n originY: \'bottom\',\\n overlayX: \'start\',\\n overlayY: \'top\',\\n },\\n];\\n\\n/**\\n * Component for footer that displays its content at the bottom of the page with different action buttons.\\n */\\n@Component({\\n selector: \'hra-footer\',\\n standalone: true,\\n imports: [CommonModule, MatButtonModule, MatIconModule, OverlayModule, MatListModule, LinkDirective],\\n templateUrl: \'./footer.component.html\',\\n styleUrls: [\'./footer.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class FooterComponent {\\n /** Host binding of footer component */\\n @HostBinding(\'class\')\\n @Input()\\n size: \'small\' | \'large\' = \'large\';\\n\\n /** Input for product logo URL to displayed on the left side. */\\n @Input() productLogoUrl = \'\';\\n\\n /** Input for product title to displayed on the left side. */\\n @Input() productTitle = \'\';\\n\\n /** Input for HRA Portal link */\\n @Input() hraPortal = EMPTY_LINK;\\n\\n /** Input for Illustration metadata page link in HRA Portal */\\n @Input() illustrationMetadata = EMPTY_LINK;\\n\\n /** Input for embed link in HRA Portal */\\n @Input() embed = EMPTY_LINK;\\n\\n /** Different download formats options displayed to the user */\\n @Input() downloadFormats: T[] = [];\\n\\n /** Emits the selected download format */\\n @Output() readonly download = new EventEmitter();\\n\\n /** Emits when the contact button is clicked */\\n @Output() readonly contactClick = new EventEmitter();\\n\\n /** Download list popup overlay positioning */\\n readonly DOWNLOADS_LIST_POSITION = DOWNLOADS_LIST_POSITION;\\n\\n /** Gets whether the footer required is small */\\n get isSmall(): boolean {\\n return this.size === \'small\';\\n }\\n\\n /** Whether the download list panel is open */\\n downloadListOpen = false;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: flex;\\n padding: 1rem 2rem;\\n border-top: 0.063rem solid #e2e7e9;\\n align-items: center;\\n background-color: #f8f9fa;\\n gap: 1rem;\\n\\n --palette-primary-500: #abcdef;\\n\\n .controls {\\n display: flex;\\n justify-content: flex-end;\\n }\\n .filler {\\n flex-grow: 1;\\n }\\n\\n .product-title {\\n color: #990000;\\n margin-right: 0rem;\\n }\\n\\n a {\\n cursor: pointer;\\n display: flex;\\n }\\n\\n .product-logo-image {\\n height: 1.2rem;\\n margin-right: 1rem;\\n }\\n\\n button {\\n justify-content: center;\\n align-items: center;\\n min-width: 9rem;\\n min-height: 3rem;\\n gap: 0.5rem;\\n\\n --palette-primary-100-rgb: #4c5a69;\\n --palette-primary-500-rgb: #243142;\\n\\n &.mat-accent {\\n &:active {\\n --palette-primary-700-rgb: #4c5a69;\\n }\\n .mat-icon {\\n z-index: 1;\\n }\\n }\\n }\\n}\\n\\n::ng-deep {\\n .download-options-panel {\\n box-shadow: 0.1rem 0.1rem 0.4rem 0.2rem #dad7d7;\\n background-color: #ffffff;\\n }\\n}\\n::ng-deep .download-button {\\n .mdc-button__label {\\n display: flex;\\n gap: 0.5rem;\\n }\\n}\\n","styleUrl":"./footer.component.scss"}],"stylesData":"","accessors":{"isSmall":{"name":"isSmall","getSignature":{"name":"isSmall","type":"boolean","returnType":"boolean","line":86,"rawdescription":"\\nGets whether the footer required is small","description":"

Gets whether the footer required is small

\\n"}}},"templateData":"\\n
\\n\\n\\n\\n\\n download \\n Download\\n\\n\\n\\n\\n
\\n\\n\\n\\n\\n\\n\\n \\n \\n {{ format.label }}\\n \\n \\n\\n"},{"name":"FullscreenContainerComponent","id":"component-FullscreenContainerComponent-78edc2b37cbc90a17be0fcca4ed7291593d5f3d12c4ea823de3f9510c13bad4492bc5cd65823726fc7e333c874880c17093ff9d20096fd92e20137c8cc4f75af","file":"src/lib/fullscreen/fullscreen-container.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-fullscreen-container","styleUrls":[],"styles":["\\n :host {\\n display: block;\\n position: relative;\\n }\\n "],"template":"","templateUrl":[],"viewProviders":[],"inputsClass":[{"name":"fullscreen","defaultValue":"false","deprecated":false,"deprecationMessage":"","rawdescription":"\\nA boolean input property that controls the fullscreen mode","description":"

A boolean input property that controls the fullscreen mode

\\n","line":38,"type":"boolean","decorators":[]}],"outputsClass":[],"propertiesClass":[{"name":"content","deprecated":false,"deprecationMessage":"","type":"QueryList","optional":true,"description":"

A property that gets a reference to any child components of type FullscreenContentComponent that are projected into the component's content area

\\n","line":35,"rawdescription":"\\nA property that gets a reference to any child components of type FullscreenContentComponent that are projected into the component\'s content area","decorators":[{"name":"ContentChildren","stringifiedArguments":"FullscreenContentComponent"}],"modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

A component that wraps any child components of type FullscreenContentComponent and\\nsets their isFullScreen property to true or false based on its own fullscreen input property

\\n","rawdescription":"\\nA component that wraps any child components of type FullscreenContentComponent and\\nsets their isFullScreen property to true or false based on its own fullscreen input property\\n","type":"component","sourceCode":"import {\\n AfterContentInit,\\n ChangeDetectionStrategy,\\n Component,\\n ContentChildren,\\n Input,\\n OnChanges,\\n QueryList,\\n SimpleChanges,\\n} from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { FullscreenContentComponent } from \'./fullscreen-content.component\';\\n\\n/** A component that wraps any child components of type FullscreenContentComponent and\\n * sets their isFullScreen property to true or false based on its own fullscreen input property\\n */\\n@Component({\\n selector: \'hra-fullscreen-container\',\\n standalone: true,\\n imports: [CommonModule, FullscreenContentComponent],\\n template: \'\',\\n styles: [\\n `\\n :host {\\n display: block;\\n position: relative;\\n }\\n `,\\n ],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class FullscreenContainerComponent implements AfterContentInit, OnChanges {\\n /** A property that gets a reference to any child components of type FullscreenContentComponent that are projected into the component\'s content area */\\n @ContentChildren(FullscreenContentComponent)\\n readonly content?: QueryList;\\n\\n /** A boolean input property that controls the fullscreen mode */\\n @Input() fullscreen = false;\\n\\n /** It calls the updateFullscreenMode method to set the isFullScreen property of the child\\n * FullscreenContentComponent instances based on the value of the fullscreen input property\\n */\\n ngAfterContentInit(): void {\\n this.updateFullscreenMode();\\n }\\n\\n /** It checks if the fullscreen input property has changed, and calls the updateFullscreenMode method if it has */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'fullscreen\' in changes) {\\n this.updateFullscreenMode();\\n }\\n }\\n\\n /** A private method that sets the isFullScreen property of each child FullscreenContentComponent based on the value of the fullscreen */\\n private updateFullscreenMode(): void {\\n this.content?.forEach((content) => {\\n content.isFullScreen = this.fullscreen;\\n });\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":"","stylesData":"\\n :host {\\n display: block;\\n position: relative;\\n }\\n \\n","implements":["AfterContentInit","OnChanges"]},{"name":"FullscreenContentComponent","id":"component-FullscreenContentComponent-061cdd7c639f9c53e46272aaf23ed318885fbcf937978d8940b0f0baf165576129c5897204992603662d7b530bcd8d63a7d7a97602a18e97b7f1711f84c4725f","file":"src/lib/fullscreen/fullscreen-content.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-fullscreen-content","styleUrls":["./fullscreen-content.component.scss"],"styles":[],"template":"","templateUrl":[],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"isFullScreen","defaultValue":"false","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

This binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true

\\n","line":40,"rawdescription":"\\nThis binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true","decorators":[{"name":"HostBinding","stringifiedArguments":"\'class.fullscreen-on\'"},{"name":"HostBinding","stringifiedArguments":"\'@animateResize\'"}]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[{"name":"@animateResize","defaultValue":"false","deprecated":false,"deprecationMessage":"","rawdescription":"\\nThis binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true","description":"

This binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true

\\n","line":40,"type":"boolean","decorators":[]},{"name":"class.fullscreen-on","defaultValue":"false","deprecated":false,"deprecationMessage":"","rawdescription":"\\nThis binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true","description":"

This binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true

\\n","line":40,"type":"boolean","decorators":[]}],"hostListeners":[],"description":"

A component that displays its content in fullscreen mode when its isFullScreen property is set to true

\\n","rawdescription":"\\nA component that displays its content in fullscreen mode when its isFullScreen property is set to true","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, HostBinding } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { animate, state, style, transition, trigger } from \'@angular/animations\';\\n\\n/** A component that displays its content in fullscreen mode when its isFullScreen property is set to true */\\n@Component({\\n selector: \'hra-fullscreen-content\',\\n standalone: true,\\n imports: [CommonModule],\\n animations: [\\n trigger(\'animateResize\', [\\n state(\\n \'true\',\\n style({\\n width: \'100%\',\\n position: \'absolute\',\\n right: 0,\\n })\\n ),\\n state(\\n \'false\',\\n style({\\n width: \'50%\',\\n position: \'absolute\',\\n right: 0,\\n })\\n ),\\n transition(\'true <=> false\', [animate(\'0.5s ease\')]),\\n ]),\\n ],\\n template: \'\',\\n styleUrls: [\'./fullscreen-content.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class FullscreenContentComponent {\\n /** This binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true */\\n @HostBinding(\'class.fullscreen-on\')\\n /** This binds the isFullScreen property to the @animateResize when isFullScreen is true */\\n @HostBinding(\'@animateResize\')\\n isFullScreen = false;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n overflow-y: hidden;\\n\\n &.fullscreen-on {\\n z-index: 100;\\n background: #f8f9fa;\\n }\\n}\\n","styleUrl":"./fullscreen-content.component.scss"}],"stylesData":""},{"name":"HeaderComponent","id":"component-HeaderComponent-81f5689eacf69c8f1658a62e299bcad0df485f2cc8e6664f3f16cfa7d30400e53a54549f6aa8125abb2fc207fb428887c0a19dde695063a2d92611d78d9c6956","file":"src/lib/header/header.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-header","styleUrls":["./header.component.scss"],"styles":[],"templateUrl":["./header.component.html"],"viewProviders":[],"inputsClass":[{"name":"aboutLink","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for about link","description":"

Input for about link

\\n","line":40,"type":"any","decorators":[]},{"name":"appTitle","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput for app title to show on the left side.\\n","description":"

Input for app title to show on the left side.

\\n","line":34,"type":"string","decorators":[]},{"name":"productLogoUrl","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput for product logo URL to displayed on the left side.\\n","description":"

Input for product logo URL to displayed on the left side.

\\n","line":24,"type":"string","decorators":[]},{"name":"productTitle","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput for product title to displayed on the left side.\\n","description":"

Input for product title to displayed on the left side.

\\n","line":29,"type":"string","decorators":[]},{"name":"productTitleLink","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for Product Title link","description":"

Input for Product Title link

\\n","line":37,"type":"any","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Header component, displays on top of every page.

\\n","rawdescription":"\\n\\nHeader component, displays on top of every page.\\n","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatRippleModule } from \'@angular/material/core\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { EMPTY_LINK } from \'@hra-ui/cdk\';\\n\\n/**\\n * Header component, displays on top of every page.\\n */\\n@Component({\\n selector: \'hra-header\',\\n standalone: true,\\n imports: [CommonModule, MatButtonModule, MatIconModule, MatRippleModule, LinkDirective],\\n templateUrl: \'./header.component.html\',\\n styleUrls: [\'./header.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class HeaderComponent {\\n /**\\n * Input for product logo URL to displayed on the left side.\\n */\\n @Input() productLogoUrl = \'\';\\n\\n /**\\n * Input for product title to displayed on the left side.\\n */\\n @Input() productTitle = \'\';\\n\\n /**\\n * Input for app title to show on the left side.\\n */\\n @Input() appTitle = \'\';\\n\\n /** Input for Product Title link */\\n @Input() productTitleLink = EMPTY_LINK;\\n\\n /** Input for about link */\\n @Input() aboutLink = EMPTY_LINK;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'utils\';\\n@use \'variables\' as vars;\\n\\n:host {\\n display: flex;\\n align-items: center;\\n height: 5rem;\\n padding: 0 2rem 0 1rem;\\n\\n @include utils.define-flex-filler();\\n\\n h1 {\\n // Reset margins for h1 elements\\n margin: 0;\\n }\\n\\n .product {\\n display: flex;\\n align-items: center;\\n text-decoration: none;\\n // Style the ripple animation\\n padding: 0 1rem;\\n border-radius: 0.25rem;\\n\\n &:hover {\\n cursor: pointer;\\n }\\n\\n .text {\\n margin-left: 1rem;\\n font-weight: 600;\\n color: vars.$accent-rgb;\\n }\\n }\\n\\n .app {\\n margin-left: 0.5rem;\\n }\\n\\n .about {\\n width: 9rem;\\n height: 3rem;\\n text-decoration: none;\\n span {\\n border-bottom: 1px solid var(--palette-primary-500-rgb);\\n }\\n .icon {\\n width: 1.5rem;\\n height: 1.5rem;\\n font-size: 1.5rem;\\n }\\n }\\n\\n @media (max-width: 30rem) {\\n height: 4.5rem;\\n\\n .product .text,\\n .about .text {\\n @include utils.sr-only();\\n }\\n\\n .product {\\n height: 2.5rem;\\n padding: 0 0.25rem;\\n\\n .logo {\\n width: 1.5rem;\\n height: 1.5rem;\\n }\\n }\\n\\n .app {\\n font-size: 1rem;\\n line-height: 1.5rem;\\n }\\n\\n .about {\\n min-width: 2.5rem;\\n width: 2.5rem;\\n height: 2.5rem;\\n padding: 0;\\n\\n .icon {\\n margin: 0;\\n }\\n }\\n }\\n\\n @media (max-width: 20rem) {\\n padding: 0;\\n }\\n}\\n","styleUrl":"./header.component.scss"}],"stylesData":"","templateData":"\\n \\n

{{ productTitle }}

\\n\\n

{{ appTitle }}

\\n\\n
\\n\\n\\n info_outlined\\n About\\n\\n"},{"name":"HraLandingPageIntroWcComponent","id":"component-HraLandingPageIntroWcComponent-57ba89b5fa60bec2ad59de1cc52e4d3002935eab8da7f77895b1d7b507237df7df5d8fa2fec4dd3ba498b8d06fc5f70758beb2ba67ccbb24f2819798948e81d4","file":"src/lib/hra-landing-page-intro-wc/hra-landing-page-intro-wc.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-ui-hra-landing-page-intro-wc","styleUrls":["./hra-landing-page-intro-wc.component.scss"],"styles":[],"templateUrl":["./hra-landing-page-intro-wc.component.html"],"viewProviders":[],"inputsClass":[{"name":"description","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nDescription for FTU Explorer","description":"

Description for FTU Explorer

\\n","line":19,"type":"string","decorators":[]},{"name":"partners","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nThank you message to partners","description":"

Thank you message to partners

\\n","line":22,"type":"string","decorators":[]},{"name":"readMore","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nIntro Image file url","description":"

Intro Image file url

\\n","line":25,"type":"string","decorators":[]},{"name":"title","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nIntro title for FTU Explorer","description":"

Intro title for FTU Explorer

\\n","line":16,"type":"string","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for LandingPage Intro - Web coomponent

\\n","rawdescription":"\\nComponent for LandingPage Intro - Web coomponent","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/** Component for LandingPage Intro - Web coomponent */\\n@Component({\\n selector: \'hra-ui-hra-landing-page-intro-wc\',\\n standalone: true,\\n imports: [CommonModule, MarkdownModule],\\n templateUrl: \'./hra-landing-page-intro-wc.component.html\',\\n styleUrls: [\'./hra-landing-page-intro-wc.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class HraLandingPageIntroWcComponent {\\n /** Intro title for FTU Explorer */\\n @Input() title = \'\';\\n\\n /** Description for FTU Explorer */\\n @Input() description = \'\';\\n\\n /** Thank you message to partners */\\n @Input() partners = \'\';\\n\\n /** Intro Image file url */\\n @Input() readMore = \'\';\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n gap: 8px;\\n padding: 24px, 32px, 24px, 32px;\\n .title {\\n font-size: 20px;\\n font-family: Inter;\\n font-weight: 400;\\n line-height: 24px;\\n letter-spacing: 0em;\\n text-align: left;\\n }\\n\\n .description .partners .readMore {\\n font-family: Inter;\\n font-size: 16px;\\n font-weight: 400;\\n line-height: 24px;\\n letter-spacing: 0em;\\n text-align: left;\\n }\\n ::ng-deep a {\\n color: vars.$primary-rgb;\\n font-weight: 700;\\n }\\n ::ng-deep p {\\n margin: 0;\\n }\\n}\\n","styleUrl":"./hra-landing-page-intro-wc.component.scss"}],"stylesData":"","templateData":"

{{ title }}

\\n\\n\\n\\n\\n\\n\\n"},{"name":"InfoModalComponent","id":"component-InfoModalComponent-56dc03e6960f4005149bab8dbf6a5b713061505964f6b3cc7d33868ed7f83aff7dbf222ccf66999864c6313f218c20f849715b3ebcc4d2ea44285c6e07811662","file":"src/lib/info-modal/info-modal.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-info-modal","styleUrls":["./info-modal.component.scss"],"styles":[],"templateUrl":["./info-modal.component.html"],"viewProviders":[],"inputsClass":[{"name":"description","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInformation modal message to the user","description":"

Information modal message to the user

\\n","line":24,"type":"string","decorators":[]},{"name":"productLogoUrl","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nProduct logo shown to the user","description":"

Product logo shown to the user

\\n","line":21,"type":"string","decorators":[]},{"name":"productTitle","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nProduct title shown to the user","description":"

Product title shown to the user

\\n","line":18,"type":"string","decorators":[]}],"outputsClass":[{"name":"closeClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the close icon is clicked","description":"

Emits when the close icon is clicked

\\n","line":27,"type":"EventEmitter"}],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Displays an information modal to the user with the product title and logo and description

\\n","rawdescription":"\\nDisplays an information modal to the user with the product title and logo and description","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/** Displays an information modal to the user with the product title and logo and description */\\n@Component({\\n selector: \'hra-info-modal\',\\n standalone: true,\\n imports: [CommonModule, MatButtonModule, MatIconModule, MarkdownModule],\\n templateUrl: \'./info-modal.component.html\',\\n styleUrls: [\'./info-modal.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class InfoModalComponent {\\n /** Product title shown to the user */\\n @Input() productTitle = \'\';\\n\\n /** Product logo shown to the user */\\n @Input() productLogoUrl = \'\';\\n\\n /** Information modal message to the user */\\n @Input() description = \'\';\\n\\n /** Emits when the close icon is clicked */\\n @Output() readonly closeClick = new EventEmitter();\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n position: relative;\\n padding: 2rem 2rem 1.25rem 2rem;\\n\\n .close {\\n position: absolute;\\n top: 1.5rem;\\n right: 1.5rem;\\n }\\n\\n .title {\\n display: flex;\\n align-items: center;\\n\\n .product-logo-image {\\n height: 2.75rem;\\n margin-right: 1rem;\\n }\\n\\n .product-title {\\n margin: 0;\\n color: #990000;\\n }\\n }\\n\\n .description {\\n display: block;\\n margin-top: 1rem;\\n }\\n}\\n","styleUrl":"./info-modal.component.scss"}],"stylesData":"","templateData":"\\n \\"Prodoct\\n

{{ productTitle }}

\\n\\n\\n\\n\\n\\n"},{"name":"InteractiveSvgComponent","id":"component-InteractiveSvgComponent-34dafc0493fcadf92dd676bebad498e3798e87879ccd7ab9c56dfb6b52cf51b41a6b132fa4c00fa2f32867f3f84829bef3163da37de19cf480f10a8cd94e74f1","file":"src/lib/interactive-svg/interactive-svg.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":["ViewEncapsulation.ShadowDom"],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-interactive-svg","styleUrls":["./interactive-svg.component.scss"],"styles":[],"templateUrl":["./interactive-svg.component.html"],"viewProviders":[],"inputsClass":[{"name":"highlightId","deprecated":false,"deprecationMessage":"","rawdescription":"\\nHighlighted ontology id","description":"

Highlighted ontology id

\\n","line":94,"type":"string","decorators":[]},{"name":"mapping","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nMapping info","description":"

Mapping info

\\n","line":91,"type":"T[]","decorators":[]},{"name":"url","deprecated":false,"deprecationMessage":"","rawdescription":"\\nSVG url","description":"

SVG url

\\n","line":88,"type":"string","decorators":[]}],"outputsClass":[{"name":"nodeClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits node id when clicked","description":"

Emits node id when clicked

\\n","line":100,"type":"EventEmitter"},{"name":"nodeHover","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits node id when hovered","description":"

Emits node id when hovered

\\n","line":97,"type":"EventEmitter"}],"propertiesClass":[{"name":"NEVER_EVAL_SCRIPTS","defaultValue":"SVGScriptEvalMode.NEVER","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

SVG script eval mode

\\n","line":103,"rawdescription":"\\nSVG script eval mode","modifierKind":[144]},{"name":"nodeHoverData$","defaultValue":"new BehaviorSubject(undefined)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Observable of node hover data or undefined when there is no active hover

\\n","line":109,"rawdescription":"\\nObservable of node hover data or undefined when there is no active hover","modifierKind":[144]},{"name":"nodeHoverDelayedData$","defaultValue":"this.nodeHoverData$.pipe(debounce((event) => timer(event ? HOVER_DELAY : 0)))","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Observable of node hover with a timer

\\n","line":112,"rawdescription":"\\nObservable of node hover with a timer","modifierKind":[144]},{"name":"TOOLTIP_POSITIONS","defaultValue":"TOOLTIP_POSITIONS","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Tooltip position settings

\\n","line":106,"rawdescription":"\\nTooltip position settings","modifierKind":[144]}],"methodsClass":[{"name":"formatNodeName","args":[{"name":"name","type":"string","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"string","typeParameters":[],"line":196,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nRemoves underscores from id\\n","description":"

Removes underscores from id

\\n","jsdoctags":[{"name":{"pos":4993,"end":4997,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"name"},"type":"string","deprecated":false,"deprecationMessage":"","tagName":{"pos":4987,"end":4992,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":"

Node name

\\n"},{"tagName":{"pos":5014,"end":5021,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":"

node name without underscores

\\n"}]},{"name":"setSvgElement","args":[{"name":"el","type":"SVGElement","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"void","typeParameters":[],"line":181,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nSets SVG element\\n","description":"

Sets SVG element

\\n","jsdoctags":[{"name":{"pos":4595,"end":4597,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"el"},"type":"SVGElement","deprecated":false,"deprecationMessage":"","tagName":{"pos":4589,"end":4594,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":"

SVG element

\\n"}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Interactive SVG component

\\n","rawdescription":"\\n\\nInteractive SVG component\\n","type":"component","sourceCode":"import { ConnectedPosition, OverlayModule } from \'@angular/cdk/overlay\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n inject,\\n Input,\\n OnChanges,\\n OnDestroy,\\n Output,\\n Renderer2,\\n SimpleChanges,\\n ViewEncapsulation,\\n} from \'@angular/core\';\\nimport { TooltipComponent } from \'@hra-ui/components/atoms\';\\nimport { InlineSVGModule, SVGScriptEvalMode } from \'ng-inline-svg-2\';\\nimport { BehaviorSubject, debounce, fromEventPattern, Observable, Subject, takeUntil, timer } from \'rxjs\';\\nimport { NodeEventHandler } from \'rxjs/internal/observable/fromEvent\';\\n\\n/** Delay before tooltip becomes visible */\\nconst HOVER_DELAY = 200;\\n\\n/** Tooltip position settings */\\nconst TOOLTIP_POSITIONS: ConnectedPosition[] = [\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'start\',\\n overlayY: \'center\',\\n offsetX: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'end\',\\n overlayY: \'center\',\\n offsetX: -8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'top\',\\n offsetY: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'bottom\',\\n offsetY: -8,\\n },\\n];\\n\\n/** Node tooltip data */\\nexport interface NodeTooltipData {\\n /** Node name */\\n node: string;\\n /** Center point of hovered node in screen coordinates */\\n origin: { x: number; y: number };\\n}\\n\\n/** Interface for node entries */\\nexport interface NodeMapEntry {\\n /** Node label */\\n label: string;\\n /** Node id in svg */\\n id: string;\\n /** Ontology id of cell type */\\n ontologyId: string;\\n}\\n\\n/**\\n * Interactive SVG component\\n */\\n@Component({\\n selector: \'hra-interactive-svg\',\\n standalone: true,\\n imports: [CommonModule, InlineSVGModule, OverlayModule, TooltipComponent],\\n templateUrl: \'./interactive-svg.component.html\',\\n styleUrls: [\'./interactive-svg.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n encapsulation: ViewEncapsulation.ShadowDom,\\n})\\nexport class InteractiveSvgComponent implements OnChanges, OnDestroy {\\n /** SVG url */\\n @Input() url?: string;\\n\\n /** Mapping info */\\n @Input() mapping: T[] = [];\\n\\n /** Highlighted ontology id */\\n @Input() highlightId?: string;\\n\\n /** Emits node id when hovered */\\n @Output() readonly nodeHover = new EventEmitter();\\n\\n /** Emits node id when clicked */\\n @Output() readonly nodeClick = new EventEmitter();\\n\\n /** SVG script eval mode */\\n readonly NEVER_EVAL_SCRIPTS = SVGScriptEvalMode.NEVER;\\n\\n /** Tooltip position settings */\\n readonly TOOLTIP_POSITIONS = TOOLTIP_POSITIONS;\\n\\n /** Observable of node hover data or undefined when there is no active hover */\\n readonly nodeHoverData$ = new BehaviorSubject(undefined);\\n\\n /** Observable of node hover with a timer */\\n readonly nodeHoverDelayedData$ = this.nodeHoverData$.pipe(debounce((event) => timer(event ? HOVER_DELAY : 0)));\\n\\n /** Custom renderer */\\n private readonly renderer = inject(Renderer2);\\n\\n /** Destroys */\\n private destroy$ = new Subject();\\n\\n /** Crosswalk element of svg */\\n private crosswalkEl?: Element;\\n\\n /** List of highlighted svg elements */\\n private highlightedElements: Element[] = [];\\n\\n /**\\n * Updates the highlighting based on current highlight id\\n * @param changes\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'highlightId\' in changes) {\\n this.resetHighlight();\\n this.setHighlight();\\n }\\n }\\n\\n /**\\n * Highlights cells that match highlightId\\n */\\n private setHighlight() {\\n const { mapping, highlightId, crosswalkEl } = this;\\n const entry = mapping.find(({ ontologyId }) => ontologyId === highlightId);\\n if (!entry || !crosswalkEl) {\\n return;\\n }\\n\\n let id = this.encodeId(entry.id);\\n const element = crosswalkEl.querySelector(`#${id}`);\\n if (!element) {\\n return;\\n } else if (element.nodeName !== \'g\') {\\n id = element.parentElement?.id ?? \'\';\\n }\\n\\n const elements = crosswalkEl.querySelectorAll(`#${id} :is(path, polygon, polyline)`);\\n this.highlightedElements = Array.from(elements);\\n elements.forEach((el) => el.classList.add(\'click-active\'));\\n }\\n\\n /**\\n * Resets all highlighted elements in the svg\\n */\\n private resetHighlight(): void {\\n for (const el of this.highlightedElements) {\\n el.classList.remove(\'click-active\');\\n }\\n this.highlightedElements = [];\\n }\\n\\n /**\\n * Clears observables on destroy\\n */\\n ngOnDestroy(): void {\\n this.clear();\\n }\\n\\n /**\\n * Sets SVG element\\n * @param el SVG element\\n */\\n setSvgElement(el: SVGElement): void {\\n this.clear();\\n this.crosswalkEl = el.querySelector(\'[id^=\\"Crosswalk\\"]\') ?? undefined;\\n if (this.crosswalkEl) {\\n // Move to front (i.e. last child in svg)\\n this.renderer.appendChild(el, this.crosswalkEl);\\n this.attachCrosswalkHover(this.crosswalkEl);\\n }\\n }\\n\\n /**\\n * Removes underscores from id\\n * @param name Node name\\n * @returns node name without underscores\\n */\\n formatNodeName(name: string): string {\\n return name.replace(/_/g, \' \');\\n }\\n\\n /**\\n * Attaches crosswalk hover\\n * @param el element\\n */\\n private attachCrosswalkHover(el: Element): void {\\n this.attachEvent(el, \'mouseover\').subscribe((event) => this.onCrosswalkHover(event));\\n this.attachEvent(el, \'mouseout\').subscribe(() => this.onCrosswalkHover(undefined as never as MouseEvent));\\n this.attachEvent(el, \'click\').subscribe((event) => this.nodeClick.emit(this.getNode(event)));\\n }\\n\\n /**\\n * Finds matching node in data from a hovered element\\n * @param event Mouse event\\n */\\n private onCrosswalkHover(event: MouseEvent): void {\\n if (event) {\\n const node = this.getNode(event);\\n if (node) {\\n this.nodeHoverData$.next({\\n node: node.label,\\n origin: {\\n x: event.clientX,\\n y: event.clientY,\\n },\\n });\\n this.nodeHover.emit(node); //emits node entry\\n }\\n } else {\\n this.nodeHoverData$.next(undefined);\\n this.nodeHover.emit();\\n }\\n }\\n\\n /**\\n * Clears observables\\n */\\n private clear(): void {\\n this.destroy$.next();\\n this.destroy$.complete();\\n this.destroy$ = new Subject();\\n }\\n\\n /**\\n * Returns entry from mapping if target, parent, or grandparent id matches the node name\\n * @param event Event\\n * @returns Node entry that matches the target id\\n */\\n private getNode(event: Event): T | undefined {\\n const targetId = (event.target as Element).id;\\n const parentId = (event.target as Element).parentElement?.id ?? \'\';\\n const grandparentId = (event.target as Element).parentElement?.parentElement?.id ?? \'\';\\n const idCollection = [targetId, parentId, grandparentId];\\n for (const id of idCollection) {\\n const decodedID = this.decodeId(id);\\n const match = this.mapping.find(\\n (item) => item.id?.toLowerCase() === decodedID.toLowerCase() //search mapping by name for matching node entry\\n );\\n if (match) {\\n return match;\\n }\\n }\\n return undefined;\\n }\\n\\n /**\\n * Decodes id into a normal string\\n * @param id Undecoded ID\\n * @returns id\\n */\\n private decodeId(id: string): string {\\n const replacer = (_match: string, hex: string) => String.fromCharCode(Number.parseInt(hex, 16));\\n return id.replace(/_x([\\\\da-f]+)_/gi, replacer);\\n }\\n\\n /**\\n * Turns normal string into decoded SVG id\\n * @param id id\\n * @returns Encoded id\\n */\\n private encodeId(id: string): string {\\n const replacer = (match: string) => `_x${match.charCodeAt(0).toString(16).toUpperCase()}_`;\\n return id.replace(/[^a-z0-9-]/gi, replacer);\\n }\\n\\n /**\\n * Attaches an event listener\\n * @template K\\n * @param el Element\\n * @param event Event\\n * @returns Observable\\n */\\n private attachEvent(el: Element, event: K): Observable {\\n const { renderer, destroy$ } = this;\\n const add = (handler: NodeEventHandler) => renderer.listen(el, event, handler);\\n const remove = (_handler: NodeEventHandler, unlisten: () => void) => unlisten();\\n return fromEventPattern(add, remove).pipe(takeUntil(destroy$));\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":".svg {\\n max-height: calc(100vh - 14rem);\\n overflow-y: auto;\\n}\\nsvg {\\n max-height: calc(100vh - 10rem);\\n width: 100%;\\n}\\n\\n[id^=\'Crosswalk\'] {\\n :is(path, polygon, polyline) {\\n fill: transparent;\\n stroke: transparent;\\n }\\n\\n .hover-active & g:hover > :is(path, polygon, polyline),\\n .hover-active & g > g:hover > :is(path, polygon, polyline),\\n .click-active {\\n fill: hsl(0deg 100% 50%);\\n mix-blend-mode: saturation;\\n }\\n}\\n\\n::-webkit-scrollbar {\\n width: 0.5rem;\\n height: 0.5rem;\\n}\\n\\n::-webkit-scrollbar-track {\\n background: #f8f9fa;\\n border: 0.063rem solid #d3d3d3;\\n}\\n\\n::-webkit-scrollbar-thumb {\\n background: #a0abb4;\\n border-radius: 0.5rem;\\n}\\n","styleUrl":"./interactive-svg.component.scss"}],"stylesData":"","implements":["OnChanges","OnDestroy"],"templateData":"\\n\\n\\n \\n \\n \\n\\n"},{"name":"LandingPageInDepthComponent","id":"component-LandingPageInDepthComponent-266cc77d12f81268af62a259a42675f25c0be65e3cab6881ce7afcd3dbaa4ab87e767f669fc822ea592327de677787a00c9eb4a5b9b1171d78fe6aefc8cc439b","file":"src/lib/landing-page-in-depth/landing-page-in-depth.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-landing-page-in-depth","styleUrls":["./landing-page-in-depth.component.scss"],"styles":[],"templateUrl":["./landing-page-in-depth.component.html"],"viewProviders":[],"inputsClass":[{"name":"description","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nImage description shown to the user","description":"

Image description shown to the user

\\n","line":24,"type":"string","decorators":[]},{"name":"img","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nImage shown to the user","description":"

Image shown to the user

\\n","line":27,"type":"string","decorators":[]},{"name":"moreLink","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nLink to navigate to on more button click","description":"

Link to navigate to on more button click

\\n","line":33,"type":"any","decorators":[]},{"name":"moreText","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nText for more button","description":"

Text for more button

\\n","line":30,"type":"string","decorators":[]},{"name":"title","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nImage title shown to the user","description":"

Image title shown to the user

\\n","line":21,"type":"string","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Displays the image and also corresponding title and text along with a button to read more

\\n","rawdescription":"\\n\\nDisplays the image and also corresponding title and text along with a button to read more\\n","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EMPTY_LINK, LinkDirective } from \'@hra-ui/cdk\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/**\\n * Displays the image and also corresponding title and text along with a button to read more\\n */\\n@Component({\\n selector: \'hra-landing-page-in-depth\',\\n standalone: true,\\n imports: [CommonModule, MarkdownModule, MatButtonModule, MatIconModule, LinkDirective],\\n templateUrl: \'./landing-page-in-depth.component.html\',\\n styleUrls: [\'./landing-page-in-depth.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class LandingPageInDepthComponent {\\n /** Image title shown to the user */\\n @Input() title = \'\';\\n\\n /** Image description shown to the user */\\n @Input() description = \'\';\\n\\n /** Image shown to the user */\\n @Input() img = \'\';\\n\\n /** Text for more button */\\n @Input() moreText = \'\';\\n\\n /** Link to navigate to on more button click */\\n @Input() moreLink = EMPTY_LINK;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n display: grid;\\n grid-template-columns: 2fr 3fr;\\n grid-template-rows: auto auto 1fr;\\n column-gap: 2rem;\\n row-gap: 2rem;\\n padding: 3.5rem 2rem;\\n\\n .image {\\n grid-column: 1;\\n grid-row: 1 / span 3;\\n width: 100%;\\n height: auto;\\n align-self: center;\\n border-radius: 1rem;\\n box-shadow: 0.06rem 0.13rem 1rem 0.13rem #00000029;\\n }\\n\\n .title {\\n font-size: 2rem;\\n line-height: 2.5rem;\\n margin: 0;\\n }\\n\\n .description {\\n font-size: 1rem;\\n line-height: 1.5rem;\\n\\n ::ng-deep p {\\n margin: 0;\\n }\\n\\n ::ng-deep a {\\n color: vars.$primary-rgb;\\n font-weight: 700;\\n }\\n }\\n\\n .more-button {\\n width: fit-content;\\n height: 3rem;\\n }\\n}\\n","styleUrl":"./landing-page-in-depth.component.scss"}],"stylesData":"","templateData":"\\"\\"\\n

{{ title }}

\\n\\n\\n"},{"name":"LandingPageIntroComponent","id":"component-LandingPageIntroComponent-8e48a2ad3d32eea60c9dee7976b3dbc195b3a8107a3c174ac68b4696362903f19522bad089b509daae23505334aa5361945e7a8124fd32f17a6834c349c87aed","file":"src/lib/landing-page-intro/landing-page-intro.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-landing-page-intro","styleUrls":["./landing-page-intro.component.scss"],"styles":[],"templateUrl":["./landing-page-intro.component.html"],"viewProviders":[],"inputsClass":[{"name":"description","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nDescription for FTU Explorer","description":"

Description for FTU Explorer

\\n","line":22,"type":"string","decorators":[]},{"name":"img","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nIntro Image file url","description":"

Intro Image file url

\\n","line":28,"type":"string","decorators":[]},{"name":"moreLink","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nLink to navigate to on more button click","description":"

Link to navigate to on more button click

\\n","line":34,"type":"any","decorators":[]},{"name":"moreText","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nText for more button","description":"

Text for more button

\\n","line":31,"type":"string","decorators":[]},{"name":"partners","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nThank you message to partners","description":"

Thank you message to partners

\\n","line":25,"type":"string","decorators":[]},{"name":"title","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nIntro title for FTU Explorer","description":"

Intro title for FTU Explorer

\\n","line":19,"type":"string","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for LandingPage Intro

\\n","rawdescription":"\\nComponent for LandingPage Intro","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EMPTY_LINK, LinkDirective } from \'@hra-ui/cdk\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/** Component for LandingPage Intro */\\n@Component({\\n selector: \'hra-landing-page-intro\',\\n standalone: true,\\n imports: [CommonModule, MatButtonModule, MatIconModule, MarkdownModule, LinkDirective],\\n templateUrl: \'./landing-page-intro.component.html\',\\n styleUrls: [\'./landing-page-intro.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class LandingPageIntroComponent {\\n /** Intro title for FTU Explorer */\\n @Input() title = \'\';\\n\\n /** Description for FTU Explorer */\\n @Input() description = \'\';\\n\\n /** Thank you message to partners */\\n @Input() partners = \'\';\\n\\n /** Intro Image file url */\\n @Input() img = \'\';\\n\\n /** Text for more button */\\n @Input() moreText = \'\';\\n\\n /** Link to navigate to on more button click */\\n @Input() moreLink = EMPTY_LINK;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n display: grid;\\n grid-template-columns: 3fr 2fr;\\n grid-template-rows: auto auto 3rem 1fr;\\n align-items: start;\\n column-gap: 2rem;\\n row-gap: 2rem;\\n\\n .title {\\n font-size: 3rem;\\n line-height: 4rem;\\n margin: 0;\\n }\\n\\n .more-button {\\n width: fit-content;\\n height: 3rem;\\n }\\n\\n .image {\\n grid-column: 2;\\n grid-row: 1 / span 4;\\n place-self: center;\\n width: 100%;\\n height: auto;\\n }\\n\\n .description,\\n .partners {\\n ::ng-deep p {\\n margin: 0;\\n }\\n\\n ::ng-deep a {\\n color: vars.$primary-rgb;\\n font-weight: 700;\\n }\\n }\\n\\n .red-theme {\\n background-color: #990000;\\n border-color: #990000;\\n &:hover {\\n background-color: #990000;\\n border-color: #990000;\\n\\n mat-icon {\\n transform: translateX(30%);\\n transition: 0.5s;\\n }\\n }\\n\\n &:active,\\n &:focus,\\n &:focus:not(:hover) {\\n background-color: #990000;\\n border-color: #990000;\\n\\n ::ng-deep .mat-mdc-focus-indicator {\\n background-color: #990000 !important;\\n border-color: #990000;\\n }\\n }\\n }\\n}\\n","styleUrl":"./landing-page-intro.component.scss"}],"stylesData":"","templateData":"

{{ title }}

\\n\\n\\n\\n\\n\\n\\"alt\\"\\n"},{"name":"MetricsComponent","id":"component-MetricsComponent-e52c0a1cdf090042d1924c4907a4034774cbb442217faca9ec5035e76d2796116cf55644ecf49ae040fdea1168f9c5d99f6ce15b2079f70de3d853fece481b30","file":"src/lib/metrics/metrics.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-metrics","styleUrls":["./metrics.component.scss"],"styles":[],"templateUrl":["./metrics.component.html"],"viewProviders":[],"inputsClass":[{"name":"logo","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nLogo of metrics component.","description":"

Logo of metrics component.

\\n","line":31,"type":"string","decorators":[]},{"name":"metrics","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nList of metrics that will be shown to the user.","description":"

List of metrics that will be shown to the user.

\\n","line":34,"type":"MetricItem[]","decorators":[]},{"name":"title","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nMain title of metrics component.","description":"

Main title of metrics component.

\\n","line":28,"type":"string","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Describes the metrics for the HuBMAP project.

\\n","rawdescription":"\\n\\nDescribes the metrics for the HuBMAP project.\\n","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\n\\n/**\\n An interface representing a single metric with an icon, value and description.\\n */\\nexport interface MetricItem {\\n /** Represents the icon associated with the metric. */\\n icon: string;\\n /** Describes the numberical value of the metric. */\\n value: string;\\n /** Describes the type of metric. */\\n description: string;\\n}\\n/**\\n * Describes the metrics for the HuBMAP project.\\n */\\n@Component({\\n selector: \'hra-metrics\',\\n standalone: true,\\n imports: [CommonModule],\\n templateUrl: \'./metrics.component.html\',\\n styleUrls: [\'./metrics.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class MetricsComponent {\\n /** Main title of metrics component. */\\n @Input() title = \'\';\\n\\n /** Logo of metrics component. */\\n @Input() logo = \'\';\\n\\n /** List of metrics that will be shown to the user. */\\n @Input() metrics: MetricItem[] = [];\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n padding: 2rem 0 0 0;\\n background: #f8f9fa;\\n gap: 0.5rem;\\n\\n .logo {\\n height: 2.75rem;\\n }\\n\\n .header-title {\\n font-size: 2rem;\\n line-height: 2.5rem;\\n }\\n\\n .metrics {\\n display: flex;\\n flex-direction: row;\\n overflow-x: auto;\\n max-width: 100%;\\n gap: 2rem;\\n padding: 2rem 1.75rem;\\n\\n .metric {\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n min-width: 14.25rem;\\n height: 14.75rem;\\n padding-top: 2rem;\\n padding-bottom: 2rem;\\n\\n .logo {\\n margin-bottom: 2rem;\\n }\\n\\n .value {\\n font-size: 3rem;\\n line-height: 4rem;\\n margin-bottom: 0.25rem;\\n }\\n\\n .description {\\n font-size: 1rem;\\n text-align: center;\\n }\\n }\\n }\\n}\\n","styleUrl":"./metrics.component.scss"}],"stylesData":"","templateData":"\\"\\"\\n{{ title }}\\n\\n
\\n
\\n \\"\\"\\n {{ item.value }} \\n {{ item.description }} \\n
\\n
\\n"},{"name":"ScreenSizeNoticeComponent","id":"component-ScreenSizeNoticeComponent-6b641a220201d969fb228ecf72f5e7a8fc87da742b8a53350bc9c27cea9c54a6493313826b99ec8c34dfd7004772a27748e45af5b0c9ead80bdf168a781117f8","file":"src/lib/screen-size-notice/screen-size-notice.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-screen-size-notice","styleUrls":["./screen-size-notice.component.scss"],"styles":[],"templateUrl":["./screen-size-notice.component.html"],"viewProviders":[],"inputsClass":[{"name":"content","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput for passing screen size notice content\\n","description":"

Input for passing screen size notice content

\\n","line":23,"type":"string","decorators":[]},{"name":"portal","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput of screen size notice component\\n","description":"

Input of screen size notice component

\\n","line":28,"type":"any","decorators":[]}],"outputsClass":[{"name":"proceedClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the proceed button is clicked","description":"

Emits when the proceed button is clicked

\\n","line":31,"type":"EventEmitter"}],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

The screen size notice component displays a notice for the users specifying the required screen size

\\n","rawdescription":"\\n\\nThe screen size notice component displays a notice for the users specifying the required screen size\\n","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EMPTY_LINK, LinkDirective } from \'@hra-ui/cdk\';\\n\\n/**\\n * The screen size notice component displays a notice for the users specifying the required screen size\\n */\\n@Component({\\n selector: \'hra-screen-size-notice\',\\n standalone: true,\\n imports: [CommonModule, MarkdownModule, MatButtonModule, MatIconModule, LinkDirective],\\n templateUrl: \'./screen-size-notice.component.html\',\\n styleUrls: [\'./screen-size-notice.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class ScreenSizeNoticeComponent {\\n /**\\n * Input for passing screen size notice content\\n */\\n @Input() content = \'\';\\n\\n /**\\n * Input of screen size notice component\\n */\\n @Input() portal = EMPTY_LINK;\\n\\n /** Emits when the proceed button is clicked */\\n @Output() readonly proceedClick = new EventEmitter();\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: none;\\n position: relative;\\n border-radius: 0.5rem;\\n padding: 1.5rem;\\n flex-direction: column;\\n\\n .header-close {\\n position: absolute;\\n top: 0.625rem;\\n right: 1rem;\\n }\\n\\n h3 {\\n margin: 0 0 1rem 0;\\n font-weight: 700;\\n }\\n\\n .btn-stroked {\\n font-weight: 700;\\n margin-bottom: 1rem;\\n margin-top: 1rem;\\n padding: 0.75rem 0;\\n letter-spacing: 0.5px;\\n }\\n\\n .btn-flat {\\n font-weight: 700;\\n font-size: 16px;\\n padding: 0.75rem 0;\\n letter-spacing: 0.5px;\\n color: white;\\n }\\n\\n .content {\\n font-size: 1rem;\\n line-height: 1.5rem;\\n letter-spacing: 0.5px;\\n }\\n\\n @media (max-width: 480px) {\\n display: flex;\\n }\\n}\\n","styleUrl":"./screen-size-notice.component.scss"}],"stylesData":"","templateData":"

Screen Size Notice

\\n\\n\\n\\n Human Reference Atlas Portal \\n"},{"name":"SourceListComponent","id":"component-SourceListComponent-f0d0464b044f898be3752719190f2d8ad8511283d4daafb2f8b17bd0f4dfa0290abbbeb293819664c07134fcaee5a64313aaf72d69e335a063e244c2ba1d7c0c","file":"src/lib/source-list/source-list.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-source-list","styleUrls":["./source-list.component.scss"],"styles":[],"templateUrl":["./source-list.component.html"],"viewProviders":[],"inputsClass":[{"name":"collaborateText","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput buttonon text of empty biomarker component.\\n","description":"

Input buttonon text of empty biomarker component.

\\n","line":34,"type":"string","decorators":[]},{"name":"message","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput message markdown of empty biomarker component.\\n","description":"

Input message markdown of empty biomarker component.

\\n","line":39,"type":"string","decorators":[]},{"name":"sources","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nList of sources with titles and links displayed to the user","description":"

List of sources with titles and links displayed to the user

\\n","line":30,"type":"SourceListItem[]","decorators":[]}],"outputsClass":[{"name":"collaborateClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the contact button is clicked","description":"

Emits when the contact button is clicked

\\n","line":47,"type":"EventEmitter"}],"propertiesClass":[{"name":"showTable","defaultValue":"true","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Show table of source list component which toggles to true or false\\nbased on click

\\n","line":44,"rawdescription":"\\n\\nShow table of source list component which toggles to true or false\\nbased on click\\n"}],"methodsClass":[{"name":"toggleTable","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":53,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nIt changes the value of showTable to false if value it true\\nand vice versa\\n","description":"

It changes the value of showTable to false if value it true\\nand vice versa

\\n"}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

This component shows list of sources with title and links to the datasets

\\n","rawdescription":"\\nThis component shows list of sources with title and links to the datasets","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule } from \'@angular/material/table\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EmptyBiomarkerComponent, LabelBoxComponent } from \'@hra-ui/components/atoms\';\\n\\n/** SourceListItem interface contains title and link to the dataset for the SourceList*/\\nexport interface SourceListItem {\\n /** Title of the dataset in the SourceList */\\n title: string;\\n\\n /** Label of the dataset in the SourceList */\\n label: string;\\n\\n /** Link to the dataset in the SourceList */\\n link: string;\\n}\\n\\n/** This component shows list of sources with title and links to the datasets */\\n@Component({\\n selector: \'hra-source-list\',\\n standalone: true,\\n imports: [CommonModule, MatTableModule, MatIconModule, LabelBoxComponent, EmptyBiomarkerComponent],\\n templateUrl: \'./source-list.component.html\',\\n styleUrls: [\'./source-list.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class SourceListComponent {\\n /** List of sources with titles and links displayed to the user */\\n @Input() sources: SourceListItem[] = [];\\n /**\\n * Input buttonon text of empty biomarker component.\\n */\\n @Input() collaborateText = \'\';\\n\\n /**\\n * Input message markdown of empty biomarker component.\\n */\\n @Input() message = \'\';\\n /**\\n * Show table of source list component which toggles to true or false\\n * based on click\\n */\\n showTable = true;\\n\\n /** Emits when the contact button is clicked */\\n @Output() readonly collaborateClick = new EventEmitter();\\n\\n /**\\n * It changes the value of showTable to false if value it true\\n * and vice versa\\n */\\n toggleTable(): void {\\n this.showTable = !this.showTable;\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'utils\';\\n@use \'variables\' as vars;\\n\\n:host {\\n display: block;\\n height: 100%;\\n\\n .sr-only {\\n @include utils.sr-only();\\n }\\n\\n .toggle {\\n display: flex;\\n align-items: center;\\n height: 3.5rem;\\n grid-area: source-list-header;\\n color: var(--dark-primary-text);\\n border-top: 0.063rem solid #d3d3d3;\\n border-bottom: 0.063rem solid #d3d3d3;\\n }\\n\\n .table-content {\\n height: calc(100% - 3.5rem);\\n overflow: auto;\\n\\n &.hidden {\\n display: none;\\n }\\n\\n table {\\n height: 100%;\\n }\\n\\n .mat-mdc-cell {\\n vertical-align: top;\\n border: none;\\n padding: 0.25rem 0.875rem;\\n font-size: 1rem;\\n }\\n\\n ::ng-deep .mdc-data-table__content {\\n display: block;\\n padding: 1rem 0rem;\\n }\\n }\\n}\\n","styleUrl":"./source-list.component.scss"}],"stylesData":"","templateData":"\\n Source Data\\n \\n {{ showTable ? \'keyboard_arrow_down\' : \'keyboard_arrow_up\' }}\\n \\n\\n\\n
\\n \\n \\n\\n \x3c!-- Position Column --\x3e\\n \\n \\n \\n \\n\\n \x3c!-- Data Column --\x3e\\n \\n \\n \\n \\n\\n \\n
\\n Source List Table with Title and Links\\n
Item Number{{ i + 1 }}.Title and Link\\n {{ element.title }}\\n
\\n {{ element.label }}\\n
\\n \\n
\\n"},{"name":"TissueTreeListComponent","id":"component-TissueTreeListComponent-8544338e8c5e11dd440f8b104bfa31552155bc5006289770258a8e940978177df7797adcb9bafb5b09a9943913ecf339692d528f868c6846be5c3de8a6270237","file":"src/lib/tissue-tree-list/tissue-tree-list.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-tissue-tree-list","styleUrls":["./tissue-tree-list.component.scss"],"styles":[],"templateUrl":["./tissue-tree-list.component.html"],"viewProviders":[],"inputsClass":[{"name":"nodes","defaultValue":"{} as Record","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput of tissue tree list component\\n","description":"

Input of tissue tree list component

\\n","line":69,"type":"Record","decorators":[]},{"name":"selected","defaultValue":"undefined","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nNode selected, to view the data associated with it\\n","description":"

Node selected, to view the data associated with it

\\n","line":74,"type":"T","decorators":[]}],"outputsClass":[{"name":"selectedChange","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nOutput of tissue tree list component\\n","description":"

Output of tissue tree list component

\\n","line":79,"type":"EventEmitter"}],"propertiesClass":[{"name":"control","defaultValue":"new FlatTreeControl>(\\n (node) => node.level,\\n (node) => node.expandable\\n )","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

tree controller, used to control the nodes in the tree

\\n","line":84,"rawdescription":"\\n\\ntree controller, used to control the nodes in the tree\\n","modifierKind":[144]},{"name":"dataSource","defaultValue":"new MatTreeFlatDataSource(this.control, this.flattener)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Data source of tissue tree list component, defines the data in mat-tree

\\n","line":107,"rawdescription":"\\n\\nData source of tissue tree list component, defines the data in mat-tree\\n","modifierKind":[144]},{"name":"flattener","defaultValue":"new MatTreeFlattener>(\\n (node, level) => ({\\n label: node.label,\\n expandable: (node.children?.length ?? 0) > 0,\\n level,\\n data: node,\\n }),\\n (node) => node.level,\\n (node) => node.expandable,\\n (node) => node.children?.map((id) => this.nodes[id])\\n )","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Flattener of tissue tree list component, returns flat-data structure

\\n","line":92,"rawdescription":"\\n\\nFlattener of tissue tree list component, returns flat-data structure\\n","modifierKind":[144]}],"methodsClass":[{"name":"hasChild","args":[{"name":"_","type":"number","deprecated":false,"deprecationMessage":""},{"name":"node","type":"InternalNode","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"boolean","typeParameters":[],"line":128,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\ncheck if the current node has children\\n","description":"

check if the current node has children

\\n","jsdoctags":[{"name":"_","type":"number","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}},{"name":{"pos":3422,"end":3426,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"node"},"type":"InternalNode","deprecated":false,"deprecationMessage":"","tagName":{"pos":3416,"end":3421,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":"

current selected node

\\n"},{"tagName":{"pos":3455,"end":3462,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":"

boolean, which means if node has children

\\n"}]},{"name":"resetSelection","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":146,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nResets selection and collapes all nodes of the tree.\\n","description":"

Resets selection and collapes all nodes of the tree.

\\n"},{"name":"selectNode","args":[{"name":"node","type":"T","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"void","typeParameters":[],"line":136,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nIt selects the node, which is clicked.\\n","description":"

It selects the node, which is clicked.

\\n","jsdoctags":[{"name":{"pos":3665,"end":3669,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"node"},"type":"T","deprecated":false,"deprecationMessage":"","tagName":{"pos":3659,"end":3664,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":"

Tissue Tree Item, which is clicked

\\n"}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Tabular View for hubMap tissue side-bar

\\n","rawdescription":"\\n\\nTabular View for hubMap tissue side-bar\\n","type":"component","sourceCode":"import { FlatTreeControl } from \'@angular/cdk/tree\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n Input,\\n OnChanges,\\n Output,\\n SimpleChanges,\\n} from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatRippleModule } from \'@angular/material/core\';\\nimport { MatExpansionModule } from \'@angular/material/expansion\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatTreeFlatDataSource, MatTreeFlattener, MatTreeModule } from \'@angular/material/tree\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { LinkId } from \'@hra-ui/cdk/state\';\\n\\n/** Base node type */\\nexport interface DataNode {\\n /** User readable label */\\n label: string;\\n /** Id to pass as a query parameter on navigation */\\n id?: string;\\n /** Link to navigate to on node click */\\n link?: LinkId;\\n /** Nested nodes */\\n children?: K[];\\n}\\n\\n/**\\n * Internal interface for flat tissue data hierarchy\\n */\\ninterface InternalNode> {\\n /** Displayed label */\\n label: string;\\n /** Whether the node can be expanded to display child nodes */\\n expandable: boolean;\\n /** Depth of node in the tree */\\n level: number;\\n /** Associated user node data */\\n data: T;\\n}\\n\\n/**\\n * Tabular View for hubMap tissue side-bar\\n */\\n@Component({\\n selector: \'hra-tissue-tree-list\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatButtonModule,\\n MatTreeModule,\\n MatIconModule,\\n MatExpansionModule,\\n MatRippleModule,\\n LinkDirective,\\n ],\\n templateUrl: \'./tissue-tree-list.component.html\',\\n styleUrls: [\'./tissue-tree-list.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class TissueTreeListComponent> implements OnChanges {\\n /**\\n * Input of tissue tree list component\\n */\\n @Input() nodes: Record = {} as Record;\\n\\n /**\\n * Node selected, to view the data associated with it\\n */\\n @Input() selected?: T = undefined;\\n\\n /**\\n * Output of tissue tree list component\\n */\\n @Output() readonly selectedChange = new EventEmitter();\\n\\n /**\\n * tree controller, used to control the nodes in the tree\\n */\\n readonly control = new FlatTreeControl>(\\n (node) => node.level,\\n (node) => node.expandable\\n );\\n\\n /**\\n * Flattener of tissue tree list component, returns flat-data structure\\n */\\n readonly flattener = new MatTreeFlattener>(\\n (node, level) => ({\\n label: node.label,\\n expandable: (node.children?.length ?? 0) > 0,\\n level,\\n data: node,\\n }),\\n (node) => node.level,\\n (node) => node.expandable,\\n (node) => node.children?.map((id) => this.nodes[id])\\n );\\n\\n /**\\n * Data source of tissue tree list component, defines the data in mat-tree\\n */\\n readonly dataSource = new MatTreeFlatDataSource(this.control, this.flattener);\\n\\n /**\\n * Take actions if any data changes\\n * @param changes changes in data\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'nodes\' in changes) {\\n this.dataSource.data = this.findRootNodes();\\n }\\n if (\'selected\' in changes) {\\n const path = this.selected ? this.dfsFindPath(this.findRootNodes(), this.selected) : [];\\n this.expandPath(path);\\n }\\n }\\n\\n /**\\n * check if the current node has children\\n * @param node current selected node\\n * @returns boolean, which means if node has children\\n */\\n hasChild(_: number, node: InternalNode): boolean {\\n return node.expandable;\\n }\\n\\n /**\\n * It selects the node, which is clicked.\\n * @param node Tissue Tree Item, which is clicked\\n */\\n selectNode(node: T): void {\\n if (this.selected !== node) {\\n this.selected = node;\\n this.selectedChange.emit(this.selected);\\n }\\n }\\n\\n /**\\n * Resets selection and collapes all nodes of the tree.\\n */\\n resetSelection(): void {\\n this.selected = undefined;\\n this.control.collapseAll();\\n }\\n\\n /**\\n * It creates a copy of the input nodes object.\\n * It iterates over it and removes all the children nodes from it.\\n * @returns remaining nodes which are root nodes.\\n */\\n private findRootNodes(): T[] {\\n const { nodes } = this;\\n const roots = { ...this.nodes };\\n for (const key in nodes) {\\n for (const child of nodes[key].children ?? []) {\\n delete roots[child];\\n }\\n }\\n\\n return Object.values(roots);\\n }\\n\\n /**\\n * expands the tree nodes based on the path provided.\\n * @param path is given as an input.\\n */\\n private expandPath(path: DataNode[]): void {\\n const nodes = this.control.dataNodes.filter((node) => path.includes(node.data));\\n nodes.forEach((node) => this.control.expand(node));\\n }\\n\\n /**\\n * It used the logic of depth first search to find the target node.\\n * returns the path to the target node.\\n */\\n private dfsFindPath(nodes: T[], target: T, path: T[] = []): T[] {\\n for (const node of nodes) {\\n path.push(node);\\n if (node === target) {\\n return path;\\n }\\n\\n const savedLength = path.length;\\n const children = node.children?.map((id) => this.nodes[id]) ?? [];\\n if (this.dfsFindPath(children, target, path).length > savedLength) {\\n return path;\\n }\\n\\n path.pop();\\n }\\n\\n return path;\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n display: block;\\n height: calc(100% - 5rem);\\n overflow-y: auto;\\n .row {\\n min-height: 2rem;\\n &.child {\\n padding: 5px 0 5px 64px;\\n }\\n &.selected {\\n background-color: vars.$accent-lighter-rgb;\\n }\\n\\n .toggle {\\n width: 2rem;\\n height: 2rem;\\n padding: 0.25rem;\\n }\\n\\n .label-container {\\n display: flex;\\n align-items: center;\\n height: 2rem;\\n padding: 0 1rem;\\n border-radius: 0.25rem;\\n\\n .link {\\n cursor: pointer;\\n text-decoration: none;\\n color: rgba(vars.$dark-primary-text);\\n }\\n }\\n\\n &.selected .label-container .link {\\n color: vars.$accent-rgb;\\n }\\n }\\n}\\n","styleUrl":"./tissue-tree-list.component.scss"}],"stylesData":"","implements":["OnChanges"],"templateData":"\\n \\n \\n \\n\\n \\n \\n\\n \\n \\n\\n\\n\\n
\\n \\n {{ label }}\\n \\n \\n {{ label }}\\n \\n
\\n\\n"},{"name":"TitleCardComponent","id":"component-TitleCardComponent-dda33e0370aff82797f5b3494c98b25f59e8b87daefd03e828cec8116928222c19885f73255625acfce7c66d590784fd1ad8faa664dac65130f8119fc2670670","file":"src/lib/title-card/title-card.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-title-card","styleUrls":["./title-card.component.scss"],"styles":[],"templateUrl":["./title-card.component.html"],"viewProviders":[],"inputsClass":[{"name":"description","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nDescription for the title card shown to the user","description":"

Description for the title card shown to the user

\\n","line":19,"type":"string","decorators":[]},{"name":"title","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nTitle for the title card shown to the user","description":"

Title for the title card shown to the user

\\n","line":16,"type":"string","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Displays title card to the user with title and description

\\n","rawdescription":"\\nDisplays title card to the user with title and description","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/** Displays title card to the user with title and description */\\n@Component({\\n selector: \'hra-title-card\',\\n standalone: true,\\n imports: [CommonModule, MarkdownModule],\\n templateUrl: \'./title-card.component.html\',\\n styleUrls: [\'./title-card.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class TitleCardComponent {\\n /** Title for the title card shown to the user*/\\n @Input() title = \'\';\\n\\n /** Description for the title card shown to the user*/\\n @Input() description = \'\';\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n\\n .title {\\n margin-bottom: 0.5rem;\\n }\\n}\\n","styleUrl":"./title-card.component.scss"}],"stylesData":"","templateData":"

{{ title }}

\\n\\n"}],"modules":[],"miscellaneous":{"variables":[{"name":"DOWNLOADS_LIST_POSITION","ctype":"miscellaneous","subtype":"variable","file":"src/lib/footer/footer.component.ts","deprecated":false,"deprecationMessage":"","type":"ConnectedPosition[]","defaultValue":"[\\n {\\n panelClass: \'above\',\\n originX: \'start\',\\n originY: \'top\',\\n overlayX: \'start\',\\n overlayY: \'bottom\',\\n offsetY: 0,\\n },\\n {\\n panelClass: \'below\',\\n originX: \'start\',\\n originY: \'bottom\',\\n overlayX: \'start\',\\n overlayY: \'top\',\\n },\\n]","rawdescription":"Positioning value for the download list popup","description":"

Positioning value for the download list popup

\\n"},{"name":"EMPTY_CONTACT_DATA","ctype":"miscellaneous","subtype":"variable","file":"src/lib/contact-modal/contact-modal.component.ts","deprecated":false,"deprecationMessage":"","type":"Partial","defaultValue":"{\\n email: undefined,\\n subject: undefined,\\n message: undefined,\\n}","rawdescription":"Initial empty contact data","description":"

Initial empty contact data

\\n"},{"name":"HOVER_DELAY","ctype":"miscellaneous","subtype":"variable","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"number","defaultValue":"200","rawdescription":"Delay before tooltip becomes visible","description":"

Delay before tooltip becomes visible

\\n"},{"name":"TOOLTIP_POSITIONS","ctype":"miscellaneous","subtype":"variable","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"ConnectedPosition[]","defaultValue":"[\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'start\',\\n overlayY: \'center\',\\n offsetX: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'end\',\\n overlayY: \'center\',\\n offsetX: -8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'top\',\\n offsetY: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'bottom\',\\n offsetY: -8,\\n },\\n]","rawdescription":"Tooltip position settings","description":"

Tooltip position settings

\\n"}],"functions":[],"typealiases":[],"enumerations":[],"groupedVariables":{"src/lib/footer/footer.component.ts":[{"name":"DOWNLOADS_LIST_POSITION","ctype":"miscellaneous","subtype":"variable","file":"src/lib/footer/footer.component.ts","deprecated":false,"deprecationMessage":"","type":"ConnectedPosition[]","defaultValue":"[\\n {\\n panelClass: \'above\',\\n originX: \'start\',\\n originY: \'top\',\\n overlayX: \'start\',\\n overlayY: \'bottom\',\\n offsetY: 0,\\n },\\n {\\n panelClass: \'below\',\\n originX: \'start\',\\n originY: \'bottom\',\\n overlayX: \'start\',\\n overlayY: \'top\',\\n },\\n]","rawdescription":"Positioning value for the download list popup","description":"

Positioning value for the download list popup

\\n"}],"src/lib/contact-modal/contact-modal.component.ts":[{"name":"EMPTY_CONTACT_DATA","ctype":"miscellaneous","subtype":"variable","file":"src/lib/contact-modal/contact-modal.component.ts","deprecated":false,"deprecationMessage":"","type":"Partial","defaultValue":"{\\n email: undefined,\\n subject: undefined,\\n message: undefined,\\n}","rawdescription":"Initial empty contact data","description":"

Initial empty contact data

\\n"}],"src/lib/interactive-svg/interactive-svg.component.ts":[{"name":"HOVER_DELAY","ctype":"miscellaneous","subtype":"variable","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"number","defaultValue":"200","rawdescription":"Delay before tooltip becomes visible","description":"

Delay before tooltip becomes visible

\\n"},{"name":"TOOLTIP_POSITIONS","ctype":"miscellaneous","subtype":"variable","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"ConnectedPosition[]","defaultValue":"[\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'start\',\\n overlayY: \'center\',\\n offsetX: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'end\',\\n overlayY: \'center\',\\n offsetX: -8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'top\',\\n offsetY: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'bottom\',\\n offsetY: -8,\\n },\\n]","rawdescription":"Tooltip position settings","description":"

Tooltip position settings

\\n"}]},"groupedFunctions":{},"groupedEnumerations":{},"groupedTypeAliases":{}}}')},"./dist/compodoc/components-organisms/documentation.json":module=>{"use strict";module.exports=JSON.parse('{"pipes":[],"interfaces":[{"name":"DataCell","id":"interface-DataCell-1a11b32dee89b55746dd02d393406aa7ea06e3d180099074510a109749d06241410786b045f3a9d570f4479be6442014b194d68f340724b0e76b4b0983b59760","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule, MatTableDataSource } from \'@angular/material/table\';\\nimport {\\n BiomarkerTableDataCardComponent,\\n BiomarkerTableDataIconComponent,\\n DataItem,\\n} from \'@hra-ui/components/molecules\';\\nimport { HoverDirective } from \'@hra-ui/cdk\';\\nimport { GradientPoint, SizeLegend } from \'@hra-ui/components/atoms\';\\n\\n/**\\n * RGBTriblet of type RGB to store color\\n */\\ntype RGBTriplet = [number, number, number];\\n\\n/**\\n * An interface representing a single cell of the table.\\n */\\nexport interface DataCell {\\n /** Represents the color of the icon */\\n color: string;\\n /** Represents the size of the icon */\\n size: number;\\n /** Represents the data for the data card */\\n data: {\\n cell: string;\\n biomarker: string;\\n meanExpression: number;\\n /** Number of datasets for this Tissue */\\n dataset_count: number;\\n };\\n}\\n\\n/**\\n * Details of the Tissue\\n */\\nexport interface TissueInfo {\\n /** ID of the Tissue */\\n id: string;\\n /** Name of the Tissue */\\n label: string;\\n}\\n\\n/** Describes the composition of a single row in the table */\\nexport type DataRow = [string, number | undefined, ...(T | undefined)[]];\\n\\n/** Cell types table, describing the types and quanitites of cells for a specific organ */\\n@Component({\\n selector: \'hra-biomarker-table\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatTableModule,\\n BiomarkerTableDataIconComponent,\\n HoverDirective,\\n BiomarkerTableDataCardComponent,\\n ],\\n templateUrl: \'./biomarker-table.component.html\',\\n styleUrls: [\'./biomarker-table.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableComponent implements OnChanges {\\n /**\\n * Input: TissueInfo carrying the details of the tissue open\\n */\\n @Input() tissueInfo: TissueInfo = {\\n id: \'\',\\n label: \'\',\\n };\\n\\n /** Columns for the table */\\n @Input() columns: string[] = [];\\n\\n /** Rows of the table */\\n @Input() data: DataRow[] = [];\\n\\n /** Gradient colors along with their stop points */\\n @Input() gradient: GradientPoint[] = [];\\n\\n /** Taking input for the radius of the circle and the label to be displayed. */\\n @Input() sizes: SizeLegend[] = [];\\n\\n /**Cell name which is hovered, used for highlighting */\\n @Input() hightlightedCellName = \'\';\\n\\n /** Getter method to provide the definations of the columns */\\n get columnsWithTypeAndCount(): string[] {\\n return [\'type\', \'count\', ...this.columns];\\n }\\n\\n /** Source for the table */\\n readonly dataSource = new MatTableDataSource>([]);\\n\\n /**\\n * sets the data source for the table on every change\\n * @param changes object consisting of change in the Input\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.dataSource.data = this.data;\\n }\\n }\\n\\n /** Lerp function to give value beween min and max value based on the given value\\n *\\n * @param value\\n * @param min\\n * @param max\\n * @returns\\n */\\n lerp(value: number, min: number, max: number): number {\\n return min * (1 - value) + max * value;\\n }\\n\\n /**\\n * Converts HexCode to RGB\\n * @param hex\\n * @returns\\n */\\n hex2rgb(hex: string): RGBTriplet {\\n const r = parseInt(hex.slice(1, 3), 16);\\n const g = parseInt(hex.slice(3, 5), 16);\\n const b = parseInt(hex.slice(5, 7), 16);\\n return [r, g, b];\\n }\\n\\n /**\\n * Gets Min and Max color grade based on the meanExpression value\\n * @param meanExpression\\n * @returns\\n */\\n getMinMaxColor(meanExpression: number): { minColor: RGBTriplet; maxColor: RGBTriplet } {\\n const index = this.gradient.findIndex((item, i, arr) => {\\n return meanExpression >= item.percentage && meanExpression <= arr[i + 1]?.percentage;\\n });\\n\\n const minColor: RGBTriplet = this.hex2rgb(this.gradient[index]?.color ?? this.gradient[0].color);\\n const maxColor: RGBTriplet = this.hex2rgb(\\n this.gradient[index + 1]?.color ?? this.gradient[this.gradient.length - 1].color\\n );\\n\\n return { minColor, maxColor };\\n }\\n\\n /**\\n * Gets Min and Max size grade based on the Percentage value\\n * @param percentage\\n * @returns\\n */\\n getMinMaxSize(percentage: number): { minSize: number; maxSize: number } {\\n const index = this.sizes.findIndex((item, i, arr) => {\\n return percentage >= parseFloat(item.label) / 100 && percentage <= parseFloat(arr[i + 1]?.label) / 100;\\n });\\n const minSize: number = this.sizes[index]?.radius ?? this.sizes[0].radius;\\n const maxSize: number = this.sizes[index + 1]?.radius ?? this.sizes[this.sizes.length - 1].radius;\\n return { minSize, maxSize };\\n }\\n\\n /**\\n * Calculates the color of this value on this gradient\\n * @param value\\n * @returns\\n */\\n getColor(value: number): string {\\n const { minColor, maxColor } = this.getMinMaxColor(value);\\n return (\\n \'#\' +\\n minColor\\n .map((min, index) => this.lerp(value, min, maxColor[index]))\\n .map((component) => Math.round(component).toString(16))\\n .join(\'\')\\n );\\n }\\n\\n /**\\n * gets Size of the Cell based on the percentage value\\n * @param value\\n * @returns\\n */\\n getSize(value: number): number {\\n const { minSize, maxSize } = this.getMinMaxSize(value);\\n return this.lerp(value, minSize, maxSize);\\n }\\n\\n /**\\n * rocesses the object for hover data for Table Cell\\n * @param index index of the row of the datasource\\n * @param row row of the datasource\\n * @returns\\n */\\n getHoverData([index, row]: [number, DataRow]): DataItem[][] {\\n if (row[index] === undefined) {\\n return [];\\n }\\n\\n const {\\n tissueInfo: { id, label },\\n } = this;\\n const {\\n data: { cell, biomarker, meanExpression, dataset_count },\\n } = row[index] as T;\\n\\n return [\\n [\\n { label: \'Functional Tissue Unit Name\', value: label },\\n { label: \'Uberon ID\', value: id },\\n { label: \'#Datasets\', value: `${dataset_count ?? 0}` },\\n ],\\n [\\n { label: \'Cell Type Name\', value: row[0] },\\n { label: \'CL ID\', value: cell },\\n { label: \'Number of Cells\', value: `${row[1]}` },\\n ],\\n [\\n { label: \'Gene Name\', value: this.columns[index - 2] },\\n { label: \'HGNC ID\', value: biomarker },\\n { label: \'Mean Expression Value\', value: meanExpression.toFixed(6) },\\n ],\\n ];\\n }\\n}\\n","properties":[{"name":"color","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Represents the color of the icon

\\n","line":22,"rawdescription":"\\nRepresents the color of the icon"},{"name":"data","deprecated":false,"deprecationMessage":"","type":"literal type","optional":false,"description":"

Represents the data for the data card

\\n","line":26,"rawdescription":"\\nRepresents the data for the data card"},{"name":"size","deprecated":false,"deprecationMessage":"","type":"number","optional":false,"description":"

Represents the size of the icon

\\n","line":24,"rawdescription":"\\nRepresents the size of the icon"}],"indexSignatures":[],"kind":165,"description":"

An interface representing a single cell of the table.

\\n","rawdescription":"\\n\\nAn interface representing a single cell of the table.\\n","methods":[]},{"name":"TissueInfo","id":"interface-TissueInfo-1a11b32dee89b55746dd02d393406aa7ea06e3d180099074510a109749d06241410786b045f3a9d570f4479be6442014b194d68f340724b0e76b4b0983b59760","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule, MatTableDataSource } from \'@angular/material/table\';\\nimport {\\n BiomarkerTableDataCardComponent,\\n BiomarkerTableDataIconComponent,\\n DataItem,\\n} from \'@hra-ui/components/molecules\';\\nimport { HoverDirective } from \'@hra-ui/cdk\';\\nimport { GradientPoint, SizeLegend } from \'@hra-ui/components/atoms\';\\n\\n/**\\n * RGBTriblet of type RGB to store color\\n */\\ntype RGBTriplet = [number, number, number];\\n\\n/**\\n * An interface representing a single cell of the table.\\n */\\nexport interface DataCell {\\n /** Represents the color of the icon */\\n color: string;\\n /** Represents the size of the icon */\\n size: number;\\n /** Represents the data for the data card */\\n data: {\\n cell: string;\\n biomarker: string;\\n meanExpression: number;\\n /** Number of datasets for this Tissue */\\n dataset_count: number;\\n };\\n}\\n\\n/**\\n * Details of the Tissue\\n */\\nexport interface TissueInfo {\\n /** ID of the Tissue */\\n id: string;\\n /** Name of the Tissue */\\n label: string;\\n}\\n\\n/** Describes the composition of a single row in the table */\\nexport type DataRow = [string, number | undefined, ...(T | undefined)[]];\\n\\n/** Cell types table, describing the types and quanitites of cells for a specific organ */\\n@Component({\\n selector: \'hra-biomarker-table\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatTableModule,\\n BiomarkerTableDataIconComponent,\\n HoverDirective,\\n BiomarkerTableDataCardComponent,\\n ],\\n templateUrl: \'./biomarker-table.component.html\',\\n styleUrls: [\'./biomarker-table.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableComponent implements OnChanges {\\n /**\\n * Input: TissueInfo carrying the details of the tissue open\\n */\\n @Input() tissueInfo: TissueInfo = {\\n id: \'\',\\n label: \'\',\\n };\\n\\n /** Columns for the table */\\n @Input() columns: string[] = [];\\n\\n /** Rows of the table */\\n @Input() data: DataRow[] = [];\\n\\n /** Gradient colors along with their stop points */\\n @Input() gradient: GradientPoint[] = [];\\n\\n /** Taking input for the radius of the circle and the label to be displayed. */\\n @Input() sizes: SizeLegend[] = [];\\n\\n /**Cell name which is hovered, used for highlighting */\\n @Input() hightlightedCellName = \'\';\\n\\n /** Getter method to provide the definations of the columns */\\n get columnsWithTypeAndCount(): string[] {\\n return [\'type\', \'count\', ...this.columns];\\n }\\n\\n /** Source for the table */\\n readonly dataSource = new MatTableDataSource>([]);\\n\\n /**\\n * sets the data source for the table on every change\\n * @param changes object consisting of change in the Input\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.dataSource.data = this.data;\\n }\\n }\\n\\n /** Lerp function to give value beween min and max value based on the given value\\n *\\n * @param value\\n * @param min\\n * @param max\\n * @returns\\n */\\n lerp(value: number, min: number, max: number): number {\\n return min * (1 - value) + max * value;\\n }\\n\\n /**\\n * Converts HexCode to RGB\\n * @param hex\\n * @returns\\n */\\n hex2rgb(hex: string): RGBTriplet {\\n const r = parseInt(hex.slice(1, 3), 16);\\n const g = parseInt(hex.slice(3, 5), 16);\\n const b = parseInt(hex.slice(5, 7), 16);\\n return [r, g, b];\\n }\\n\\n /**\\n * Gets Min and Max color grade based on the meanExpression value\\n * @param meanExpression\\n * @returns\\n */\\n getMinMaxColor(meanExpression: number): { minColor: RGBTriplet; maxColor: RGBTriplet } {\\n const index = this.gradient.findIndex((item, i, arr) => {\\n return meanExpression >= item.percentage && meanExpression <= arr[i + 1]?.percentage;\\n });\\n\\n const minColor: RGBTriplet = this.hex2rgb(this.gradient[index]?.color ?? this.gradient[0].color);\\n const maxColor: RGBTriplet = this.hex2rgb(\\n this.gradient[index + 1]?.color ?? this.gradient[this.gradient.length - 1].color\\n );\\n\\n return { minColor, maxColor };\\n }\\n\\n /**\\n * Gets Min and Max size grade based on the Percentage value\\n * @param percentage\\n * @returns\\n */\\n getMinMaxSize(percentage: number): { minSize: number; maxSize: number } {\\n const index = this.sizes.findIndex((item, i, arr) => {\\n return percentage >= parseFloat(item.label) / 100 && percentage <= parseFloat(arr[i + 1]?.label) / 100;\\n });\\n const minSize: number = this.sizes[index]?.radius ?? this.sizes[0].radius;\\n const maxSize: number = this.sizes[index + 1]?.radius ?? this.sizes[this.sizes.length - 1].radius;\\n return { minSize, maxSize };\\n }\\n\\n /**\\n * Calculates the color of this value on this gradient\\n * @param value\\n * @returns\\n */\\n getColor(value: number): string {\\n const { minColor, maxColor } = this.getMinMaxColor(value);\\n return (\\n \'#\' +\\n minColor\\n .map((min, index) => this.lerp(value, min, maxColor[index]))\\n .map((component) => Math.round(component).toString(16))\\n .join(\'\')\\n );\\n }\\n\\n /**\\n * gets Size of the Cell based on the percentage value\\n * @param value\\n * @returns\\n */\\n getSize(value: number): number {\\n const { minSize, maxSize } = this.getMinMaxSize(value);\\n return this.lerp(value, minSize, maxSize);\\n }\\n\\n /**\\n * rocesses the object for hover data for Table Cell\\n * @param index index of the row of the datasource\\n * @param row row of the datasource\\n * @returns\\n */\\n getHoverData([index, row]: [number, DataRow]): DataItem[][] {\\n if (row[index] === undefined) {\\n return [];\\n }\\n\\n const {\\n tissueInfo: { id, label },\\n } = this;\\n const {\\n data: { cell, biomarker, meanExpression, dataset_count },\\n } = row[index] as T;\\n\\n return [\\n [\\n { label: \'Functional Tissue Unit Name\', value: label },\\n { label: \'Uberon ID\', value: id },\\n { label: \'#Datasets\', value: `${dataset_count ?? 0}` },\\n ],\\n [\\n { label: \'Cell Type Name\', value: row[0] },\\n { label: \'CL ID\', value: cell },\\n { label: \'Number of Cells\', value: `${row[1]}` },\\n ],\\n [\\n { label: \'Gene Name\', value: this.columns[index - 2] },\\n { label: \'HGNC ID\', value: biomarker },\\n { label: \'Mean Expression Value\', value: meanExpression.toFixed(6) },\\n ],\\n ];\\n }\\n}\\n","properties":[{"name":"id","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

ID of the Tissue

\\n","line":40,"rawdescription":"\\nID of the Tissue"},{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Name of the Tissue

\\n","line":42,"rawdescription":"\\nName of the Tissue"}],"indexSignatures":[],"kind":165,"description":"

Details of the Tissue

\\n","rawdescription":"\\n\\nDetails of the Tissue\\n","methods":[]}],"injectables":[],"guards":[],"interceptors":[],"classes":[],"directives":[],"components":[{"name":"BiomarkerTableComponent","id":"component-BiomarkerTableComponent-1a11b32dee89b55746dd02d393406aa7ea06e3d180099074510a109749d06241410786b045f3a9d570f4479be6442014b194d68f340724b0e76b4b0983b59760","file":"src/lib/biomarker-table/biomarker-table.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-biomarker-table","styleUrls":["./biomarker-table.component.scss"],"styles":[],"templateUrl":["./biomarker-table.component.html"],"viewProviders":[],"inputsClass":[{"name":"columns","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nColumns for the table","description":"

Columns for the table

\\n","line":73,"type":"string[]","decorators":[]},{"name":"data","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nRows of the table","description":"

Rows of the table

\\n","line":76,"type":"DataRow[]","decorators":[]},{"name":"gradient","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nGradient colors along with their stop points","description":"

Gradient colors along with their stop points

\\n","line":79,"type":"GradientPoint[]","decorators":[]},{"name":"hightlightedCellName","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nCell name which is hovered, used for highlighting","description":"

Cell name which is hovered, used for highlighting

\\n","line":85,"type":"string","decorators":[]},{"name":"sizes","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nTaking input for the radius of the circle and the label to be displayed.","description":"

Taking input for the radius of the circle and the label to be displayed.

\\n","line":82,"type":"SizeLegend[]","decorators":[]},{"name":"tissueInfo","defaultValue":"{\\n id: \'\',\\n label: \'\',\\n }","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput: TissueInfo carrying the details of the tissue open\\n","description":"

Input: TissueInfo carrying the details of the tissue open

\\n","line":67,"type":"TissueInfo","decorators":[]}],"outputsClass":[],"propertiesClass":[{"name":"dataSource","defaultValue":"new MatTableDataSource>([])","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Source for the table

\\n","line":93,"rawdescription":"\\nSource for the table","modifierKind":[144]}],"methodsClass":[{"name":"getColor","args":[{"name":"value","type":"number","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"string","typeParameters":[],"line":165,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nCalculates the color of this value on this gradient\\n","description":"

Calculates the color of this value on this gradient

\\n","jsdoctags":[{"name":{"pos":4778,"end":4783,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"value"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":4772,"end":4777,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":4790,"end":4797,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"getHoverData","args":[{"type":"[number, DataRow]","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"[][]","typeParameters":[],"line":192,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nrocesses the object for hover data for Table Cell\\n","description":"

rocesses the object for hover data for Table Cell

\\n","jsdoctags":[{"type":"[number, DataRow]","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}},{"tagName":{"pos":5512,"end":5519,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"getMinMaxColor","args":[{"name":"meanExpression","type":"number","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"literal type","typeParameters":[],"line":133,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nGets Min and Max color grade based on the meanExpression value\\n","description":"

Gets Min and Max color grade based on the meanExpression value

\\n","jsdoctags":[{"name":{"pos":3545,"end":3559,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"meanExpression"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":3539,"end":3544,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":3566,"end":3573,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"getMinMaxSize","args":[{"name":"percentage","type":"number","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"literal type","typeParameters":[],"line":151,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nGets Min and Max size grade based on the Percentage value\\n","description":"

Gets Min and Max size grade based on the Percentage value

\\n","jsdoctags":[{"name":{"pos":4199,"end":4209,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"percentage"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":4193,"end":4198,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":4216,"end":4223,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"getSize","args":[{"name":"value","type":"number","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"number","typeParameters":[],"line":181,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\ngets Size of the Cell based on the percentage value\\n","description":"

gets Size of the Cell based on the percentage value

\\n","jsdoctags":[{"name":{"pos":5181,"end":5186,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"value"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":5175,"end":5180,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":5193,"end":5200,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"hex2rgb","args":[{"name":"hex","type":"string","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"RGBTriplet","typeParameters":[],"line":121,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nConverts HexCode to RGB\\n","description":"

Converts HexCode to RGB

\\n","jsdoctags":[{"name":{"pos":3236,"end":3239,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"hex"},"type":"string","deprecated":false,"deprecationMessage":"","tagName":{"pos":3230,"end":3235,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":3246,"end":3253,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"lerp","args":[{"name":"value","type":"number","deprecated":false,"deprecationMessage":""},{"name":"min","type":"number","deprecated":false,"deprecationMessage":""},{"name":"max","type":"number","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"number","typeParameters":[],"line":112,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nLerp function to give value beween min and max value based on the given value\\n\\n","description":"

Lerp function to give value beween min and max value based on the given value

\\n","jsdoctags":[{"name":{"pos":3024,"end":3029,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"value"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":3018,"end":3023,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"name":{"pos":3042,"end":3045,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"min"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":3036,"end":3041,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"name":{"pos":3058,"end":3061,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"max"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":3052,"end":3057,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":3068,"end":3075,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Cell types table, describing the types and quanitites of cells for a specific organ

\\n","rawdescription":"\\nCell types table, describing the types and quanitites of cells for a specific organ","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule, MatTableDataSource } from \'@angular/material/table\';\\nimport {\\n BiomarkerTableDataCardComponent,\\n BiomarkerTableDataIconComponent,\\n DataItem,\\n} from \'@hra-ui/components/molecules\';\\nimport { HoverDirective } from \'@hra-ui/cdk\';\\nimport { GradientPoint, SizeLegend } from \'@hra-ui/components/atoms\';\\n\\n/**\\n * RGBTriblet of type RGB to store color\\n */\\ntype RGBTriplet = [number, number, number];\\n\\n/**\\n * An interface representing a single cell of the table.\\n */\\nexport interface DataCell {\\n /** Represents the color of the icon */\\n color: string;\\n /** Represents the size of the icon */\\n size: number;\\n /** Represents the data for the data card */\\n data: {\\n cell: string;\\n biomarker: string;\\n meanExpression: number;\\n /** Number of datasets for this Tissue */\\n dataset_count: number;\\n };\\n}\\n\\n/**\\n * Details of the Tissue\\n */\\nexport interface TissueInfo {\\n /** ID of the Tissue */\\n id: string;\\n /** Name of the Tissue */\\n label: string;\\n}\\n\\n/** Describes the composition of a single row in the table */\\nexport type DataRow = [string, number | undefined, ...(T | undefined)[]];\\n\\n/** Cell types table, describing the types and quanitites of cells for a specific organ */\\n@Component({\\n selector: \'hra-biomarker-table\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatTableModule,\\n BiomarkerTableDataIconComponent,\\n HoverDirective,\\n BiomarkerTableDataCardComponent,\\n ],\\n templateUrl: \'./biomarker-table.component.html\',\\n styleUrls: [\'./biomarker-table.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableComponent implements OnChanges {\\n /**\\n * Input: TissueInfo carrying the details of the tissue open\\n */\\n @Input() tissueInfo: TissueInfo = {\\n id: \'\',\\n label: \'\',\\n };\\n\\n /** Columns for the table */\\n @Input() columns: string[] = [];\\n\\n /** Rows of the table */\\n @Input() data: DataRow[] = [];\\n\\n /** Gradient colors along with their stop points */\\n @Input() gradient: GradientPoint[] = [];\\n\\n /** Taking input for the radius of the circle and the label to be displayed. */\\n @Input() sizes: SizeLegend[] = [];\\n\\n /**Cell name which is hovered, used for highlighting */\\n @Input() hightlightedCellName = \'\';\\n\\n /** Getter method to provide the definations of the columns */\\n get columnsWithTypeAndCount(): string[] {\\n return [\'type\', \'count\', ...this.columns];\\n }\\n\\n /** Source for the table */\\n readonly dataSource = new MatTableDataSource>([]);\\n\\n /**\\n * sets the data source for the table on every change\\n * @param changes object consisting of change in the Input\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.dataSource.data = this.data;\\n }\\n }\\n\\n /** Lerp function to give value beween min and max value based on the given value\\n *\\n * @param value\\n * @param min\\n * @param max\\n * @returns\\n */\\n lerp(value: number, min: number, max: number): number {\\n return min * (1 - value) + max * value;\\n }\\n\\n /**\\n * Converts HexCode to RGB\\n * @param hex\\n * @returns\\n */\\n hex2rgb(hex: string): RGBTriplet {\\n const r = parseInt(hex.slice(1, 3), 16);\\n const g = parseInt(hex.slice(3, 5), 16);\\n const b = parseInt(hex.slice(5, 7), 16);\\n return [r, g, b];\\n }\\n\\n /**\\n * Gets Min and Max color grade based on the meanExpression value\\n * @param meanExpression\\n * @returns\\n */\\n getMinMaxColor(meanExpression: number): { minColor: RGBTriplet; maxColor: RGBTriplet } {\\n const index = this.gradient.findIndex((item, i, arr) => {\\n return meanExpression >= item.percentage && meanExpression <= arr[i + 1]?.percentage;\\n });\\n\\n const minColor: RGBTriplet = this.hex2rgb(this.gradient[index]?.color ?? this.gradient[0].color);\\n const maxColor: RGBTriplet = this.hex2rgb(\\n this.gradient[index + 1]?.color ?? this.gradient[this.gradient.length - 1].color\\n );\\n\\n return { minColor, maxColor };\\n }\\n\\n /**\\n * Gets Min and Max size grade based on the Percentage value\\n * @param percentage\\n * @returns\\n */\\n getMinMaxSize(percentage: number): { minSize: number; maxSize: number } {\\n const index = this.sizes.findIndex((item, i, arr) => {\\n return percentage >= parseFloat(item.label) / 100 && percentage <= parseFloat(arr[i + 1]?.label) / 100;\\n });\\n const minSize: number = this.sizes[index]?.radius ?? this.sizes[0].radius;\\n const maxSize: number = this.sizes[index + 1]?.radius ?? this.sizes[this.sizes.length - 1].radius;\\n return { minSize, maxSize };\\n }\\n\\n /**\\n * Calculates the color of this value on this gradient\\n * @param value\\n * @returns\\n */\\n getColor(value: number): string {\\n const { minColor, maxColor } = this.getMinMaxColor(value);\\n return (\\n \'#\' +\\n minColor\\n .map((min, index) => this.lerp(value, min, maxColor[index]))\\n .map((component) => Math.round(component).toString(16))\\n .join(\'\')\\n );\\n }\\n\\n /**\\n * gets Size of the Cell based on the percentage value\\n * @param value\\n * @returns\\n */\\n getSize(value: number): number {\\n const { minSize, maxSize } = this.getMinMaxSize(value);\\n return this.lerp(value, minSize, maxSize);\\n }\\n\\n /**\\n * rocesses the object for hover data for Table Cell\\n * @param index index of the row of the datasource\\n * @param row row of the datasource\\n * @returns\\n */\\n getHoverData([index, row]: [number, DataRow]): DataItem[][] {\\n if (row[index] === undefined) {\\n return [];\\n }\\n\\n const {\\n tissueInfo: { id, label },\\n } = this;\\n const {\\n data: { cell, biomarker, meanExpression, dataset_count },\\n } = row[index] as T;\\n\\n return [\\n [\\n { label: \'Functional Tissue Unit Name\', value: label },\\n { label: \'Uberon ID\', value: id },\\n { label: \'#Datasets\', value: `${dataset_count ?? 0}` },\\n ],\\n [\\n { label: \'Cell Type Name\', value: row[0] },\\n { label: \'CL ID\', value: cell },\\n { label: \'Number of Cells\', value: `${row[1]}` },\\n ],\\n [\\n { label: \'Gene Name\', value: this.columns[index - 2] },\\n { label: \'HGNC ID\', value: biomarker },\\n { label: \'Mean Expression Value\', value: meanExpression.toFixed(6) },\\n ],\\n ];\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'utils\';\\n@use \'variables\' as vars;\\n\\n:host {\\n display: block;\\n\\n .sr-only {\\n @include utils.sr-only();\\n }\\n\\n .table {\\n margin-left: -1px;\\n\\n .highlight {\\n background-color: #f8f9fa;\\n }\\n td.type {\\n text-transform: lowercase;\\n }\\n }\\n\\n .table th {\\n background-color: #fff7f8;\\n color: #59264d;\\n text-align: right;\\n }\\n\\n .table td {\\n border-bottom: 0.063rem solid #d3d3d3;\\n border-left: 0.063rem solid #d3d3d3;\\n }\\n\\n .table tr:first-child td {\\n border-top: 0rem solid #d3d3d3;\\n }\\n\\n tr > td:first-child {\\n text-align: left;\\n padding: 0 2rem;\\n }\\n\\n tr > th:first-child {\\n text-align: left;\\n padding: 0 2rem;\\n }\\n\\n tr > td:last-of-type {\\n border-right: 0.063rem solid #d3d3d3;\\n }\\n\\n tr > th:last-of-type {\\n border-right: 0.063rem solid #d3d3d3;\\n border-left: solid #d3d3d3 1px;\\n }\\n\\n .type {\\n height: 3rem;\\n max-width: 26rem;\\n min-width: 17rem;\\n border-radius: 0rem;\\n white-space: nowrap;\\n }\\n\\n .count {\\n text-align: right;\\n height: 3rem;\\n min-width: 6.5rem;\\n }\\n\\n .count:not(:first-child) {\\n border-left: solid #d3d3d3 1px;\\n }\\n\\n .icon-header {\\n max-width: 5rem;\\n white-space: nowrap;\\n overflow: hidden;\\n text-overflow: ellipsis;\\n }\\n\\n .icon-cell {\\n max-width: 5rem;\\n min-height: 3rem;\\n\\n .icon {\\n margin: auto;\\n }\\n }\\n}\\n\\n::ng-deep .mat-mdc-tab-header {\\n margin-left: -1px !important;\\n}\\n\\n::ng-deep .biomarker-table-hover.full-column-name {\\n display: flex;\\n padding: 1rem 1.5rem;\\n border-radius: 0.5rem;\\n box-shadow: 0.063rem 0.125rem 1rem 0.125rem rgba(0, 0, 0, 0.16);\\n background-color: vars.$primary-contrast-rgb;\\n overflow: auto;\\n max-width: fit-content;\\n}\\n","styleUrl":"./biomarker-table.component.scss"}],"stylesData":"","implements":["OnChanges"],"accessors":{"columnsWithTypeAndCount":{"name":"columnsWithTypeAndCount","getSignature":{"name":"columnsWithTypeAndCount","type":"[]","returnType":"string[]","line":88,"rawdescription":"\\nGetter method to provide the definations of the columns","description":"

Getter method to provide the definations of the columns

\\n"}}},"templateData":"\\n \\n\\n \\n \\n\\n \\n \\n\\n \\n \\n\\n \\n \\n\\n \\n \\n\\n \\n \\n\\n \\n \\n
\\n Cell type table by Biomarker\\n
Cell Type\\n {{ element[0] }}\\n Cell Count\\n {{ element[1] !== undefined ? (element[1] | number) : \'no data\' }}\\n \\n {{ column }}\\n \\n \\n \\n\\n \\n
\\n \\n
\\n\\n\\n
\\n {{ columnName }}\\n
\\n\\n\\n\\n \\n\\n"}],"modules":[],"miscellaneous":{"variables":[],"functions":[],"typealiases":[{"name":"DataRow","ctype":"miscellaneous","subtype":"typealias","rawtype":"[string, , ...[]]","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","description":"

Describes the composition of a single row in the table

\\n","kind":183},{"name":"RGBTriplet","ctype":"miscellaneous","subtype":"typealias","rawtype":"[number, number, number]","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","description":"

RGBTriblet of type RGB to store color

\\n","kind":183}],"enumerations":[],"groupedVariables":{},"groupedFunctions":{},"groupedEnumerations":{},"groupedTypeAliases":{"src/lib/biomarker-table/biomarker-table.component.ts":[{"name":"DataRow","ctype":"miscellaneous","subtype":"typealias","rawtype":"[string, , ...[]]","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","description":"

Describes the composition of a single row in the table

\\n","kind":183},{"name":"RGBTriplet","ctype":"miscellaneous","subtype":"typealias","rawtype":"[number, number, number]","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","description":"

RGBTriblet of type RGB to store color

\\n","kind":183}]}}}')}},__webpack_require__=>{var __webpack_exec__=moduleId=>__webpack_require__(__webpack_require__.s=moduleId);__webpack_require__.O(0,[758],(()=>(__webpack_exec__("./storybook-config-entry.js"),__webpack_exec__("./.storybook/styles.scss?ngGlobalStyle"))));__webpack_require__.O()}]); \ No newline at end of file diff --git a/storybook/components-behavioral/main.995cdec6.iframe.bundle.js b/storybook/components-behavioral/main.995cdec6.iframe.bundle.js deleted file mode 100644 index 0d4f0a5f8..000000000 --- a/storybook/components-behavioral/main.995cdec6.iframe.bundle.js +++ /dev/null @@ -1 +0,0 @@ -(self.webpackChunkhra_ui=self.webpackChunkhra_ui||[]).push([[179],{"./dist/compodoc sync recursive ^\\.\\/.*\\/documentation\\.json$":(module,__unused_webpack_exports,__webpack_require__)=>{var map={"./components-behavioral/documentation.json":"./dist/compodoc/components-behavioral/documentation.json","./components-molecules/documentation.json":"./dist/compodoc/components-molecules/documentation.json","./components-organisms/documentation.json":"./dist/compodoc/components-organisms/documentation.json"};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id="./dist/compodoc sync recursive ^\\.\\/.*\\/documentation\\.json$"},"./libs/components/behavioral lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/behavioral(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.(js%7Cjsx%7Cts%7Ctsx))$":(module,__unused_webpack_exports,__webpack_require__)=>{var map={"./src/lib/biomarker-details/biomarker-details.component.stories":["./libs/components/behavioral/src/lib/biomarker-details/biomarker-details.component.stories.ts",977,948,678,111,390,552,254,724,801,971],"./src/lib/biomarker-details/biomarker-details.component.stories.ts":["./libs/components/behavioral/src/lib/biomarker-details/biomarker-details.component.stories.ts",977,948,678,111,390,552,254,724,801,971],"./src/lib/contact-behavior/contact-behavior.component.stories":["./libs/components/behavioral/src/lib/contact-behavior/contact-behavior.component.stories.ts",977,948,678,111,390,254,801,805],"./src/lib/contact-behavior/contact-behavior.component.stories.ts":["./libs/components/behavioral/src/lib/contact-behavior/contact-behavior.component.stories.ts",977,948,678,111,390,254,801,805],"./src/lib/footer-behavior/footer-behavior.component.stories":["./libs/components/behavioral/src/lib/footer-behavior/footer-behavior.component.stories.ts",977,948,678,930,111,390,839,254,801,57],"./src/lib/footer-behavior/footer-behavior.component.stories.ts":["./libs/components/behavioral/src/lib/footer-behavior/footer-behavior.component.stories.ts",977,948,678,930,111,390,839,254,801,57],"./src/lib/header-behavior/header-behavior.component.stories":["./libs/components/behavioral/src/lib/header-behavior/header-behavior.component.stories.ts",977,948,930,254,854],"./src/lib/header-behavior/header-behavior.component.stories.ts":["./libs/components/behavioral/src/lib/header-behavior/header-behavior.component.stories.ts",977,948,930,254,854],"./src/lib/hra-landing-page-intro-wc-behaviour/landing-page-content.component.stories":["./libs/components/behavioral/src/lib/hra-landing-page-intro-wc-behaviour/landing-page-content.component.stories.ts",254,983],"./src/lib/hra-landing-page-intro-wc-behaviour/landing-page-content.component.stories.ts":["./libs/components/behavioral/src/lib/hra-landing-page-intro-wc-behaviour/landing-page-content.component.stories.ts",254,983],"./src/lib/landing-page-content/landing-page-content.component.stories":["./libs/components/behavioral/src/lib/landing-page-content/landing-page-content.component.stories.ts",977,948,930,254,487],"./src/lib/landing-page-content/landing-page-content.component.stories.ts":["./libs/components/behavioral/src/lib/landing-page-content/landing-page-content.component.stories.ts",977,948,930,254,487],"./src/lib/medical-illustration-behavior/medical-illustration-behavior.component.stories":["./libs/components/behavioral/src/lib/medical-illustration-behavior/medical-illustration-behavior.component.stories.ts",977,678,111,913,724,430],"./src/lib/medical-illustration-behavior/medical-illustration-behavior.component.stories.ts":["./libs/components/behavioral/src/lib/medical-illustration-behavior/medical-illustration-behavior.component.stories.ts",977,678,111,913,724,430],"./src/lib/tissue-library-behavior/tissue-library-behavior.component.stories":["./libs/components/behavioral/src/lib/tissue-library-behavior/tissue-library-behavior.component.stories.ts",977,948,678,930,617,724,587],"./src/lib/tissue-library-behavior/tissue-library-behavior.component.stories.ts":["./libs/components/behavioral/src/lib/tissue-library-behavior/tissue-library-behavior.component.stories.ts",977,948,678,930,617,724,587]};function webpackAsyncContext(req){if(!__webpack_require__.o(map,req))return Promise.resolve().then((()=>{var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}));var ids=map[req],id=ids[0];return Promise.all(ids.slice(1).map(__webpack_require__.e)).then((()=>__webpack_require__(id)))}webpackAsyncContext.keys=()=>Object.keys(map),webpackAsyncContext.id="./libs/components/behavioral lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/behavioral(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.(js%7Cjsx%7Cts%7Ctsx))$",module.exports=webpackAsyncContext},"./libs/components/behavioral lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/behavioral(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.mdx)$":module=>{function webpackEmptyAsyncContext(req){return Promise.resolve().then((()=>{var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}))}webpackEmptyAsyncContext.keys=()=>[],webpackEmptyAsyncContext.resolve=webpackEmptyAsyncContext,webpackEmptyAsyncContext.id="./libs/components/behavioral lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/behavioral(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.mdx)$",module.exports=webpackEmptyAsyncContext},"./.storybook/styles.scss?ngGlobalStyle":()=>{},"./libs/components/behavioral/.storybook/preview.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{argTypesEnhancers:()=>argTypesEnhancers,decorators:()=>decorators,parameters:()=>parameters});var http=__webpack_require__("./node_modules/@angular/common/fesm2020/http.mjs"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),animations=__webpack_require__("./node_modules/@angular/platform-browser/fesm2020/animations.mjs"),ngxs_logger_plugin=__webpack_require__("./node_modules/@ngxs/logger-plugin/fesm2015/ngxs-logger-plugin.js"),ngxs_store=__webpack_require__("./node_modules/@ngxs/store/fesm2015/ngxs-store.js"),angular=__webpack_require__("./node_modules/@storybook/addon-docs/angular/index.js"),dist=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),ngx_markdown=__webpack_require__("./node_modules/ngx-markdown/fesm2020/ngx-markdown.mjs"),tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),angular_material_css_vars=__webpack_require__("./node_modules/angular-material-css-vars/fesm2020/angular-material-css-vars.mjs"),js_yaml=__webpack_require__("./node_modules/js-yaml/dist/js-yaml.mjs"),map=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/map.js"),tap=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/tap.js"),Observable=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/Observable.js");class Load{constructor(url){this.url=url,this.type=Load.type}}Load.type="[Theming] Load Theming File";var lib=__webpack_require__("./node_modules/zod/lib/index.mjs");const THEMING_FILE_SCHEMA=lib.z.record(lib.z.nativeEnum(angular_material_css_vars.Rm),lib.z.string());let ThemingState=class ThemingState{constructor(){this.http=(0,core.inject)(http.eN),this.materialVars=(0,core.inject)(angular_material_css_vars.jO)}load(ctx,{url}){return this.http.get(url,{responseType:"text"}).pipe((0,map.U)((data=>(0,js_yaml.zD)(data,{filename:url}))),(0,map.U)((data=>THEMING_FILE_SCHEMA.parse(data))),(0,tap.b)((data=>ctx.setState(data))),(0,tap.b)((data=>this.setVariables(data))))}setVariables(data){for(const[key,value]of Object.entries(data))this.materialVars.setVariable(key,value)}};(0,tslib_es6.gn)([(0,ngxs_store.aU)(Load),(0,tslib_es6.w6)("design:type",Function),(0,tslib_es6.w6)("design:paramtypes",[Object,Load]),(0,tslib_es6.w6)("design:returntype",Observable.y)],ThemingState.prototype,"load",null),ThemingState=(0,tslib_es6.gn)([(0,ngxs_store.ZM)({name:"theming",defaults:{}}),(0,core.Injectable)()],ThemingState);let ThemingModule=class ThemingModule{};function parseDefaultValue(type){const{defaultValue,type:typeDef}=type;if(void 0===defaultValue||"string"!=typeof defaultValue||"string"===typeDef?.name)return defaultValue;switch(typeDef?.name){case"array":case"boolean":case"number":case"object":try{return new Function("return "+defaultValue)()}catch(_error){return}case"enum":return typeDef.value.includes(defaultValue)?defaultValue:void 0;default:return}}ThemingModule=(0,tslib_es6.gn)([(0,core.NgModule)({imports:[angular_material_css_vars.Pe.forRoot({}),ngxs_store.$l.forFeature([ThemingState])]})],ThemingModule);const parameters={actions:{argTypesRegex:"^on[A-Z].*"},controls:{matchers:{color:/(background|color)$/i,date:/Date$/}},docs:{inlineStories:!0}},argTypesEnhancers=[function fixArgTypes(){return context=>{const argTypes={...context.argTypes},exclude=[...context.parameters.controls?.exclude??[]];for(const[key,type]of Object.entries(argTypes))switch(type.table.category){case"inputs":const defaultValue=parseDefaultValue(type);defaultValue!==type.defaultValue&&(argTypes[key]={...type,defaultValue});break;case"outputs":argTypes[key]={...type,defaultValue:void 0};break;default:exclude.push(key)}return context.parameters.controls={...context.parameters.controls,exclude},argTypes}}()],decorators=[(0,dist.applicationConfig)({providers:[(0,core.importProvidersFrom)(animations.BrowserAnimationsModule,http.JF,ngxs_store.$l.forRoot([],{developmentMode:!0}),ngxs_logger_plugin.xz.forRoot(),ngx_markdown.JP.forRoot({loader:http.eN}),ThemingModule)]}),(0,dist.componentWrapperDecorator)((story=>`\n
${story}
\n
\n `)),function addState(){return(fn,ctx)=>{const config=ctx.parameters.state;return config?(0,dist.applicationConfig)({providers:[(0,core.importProvidersFrom)(ngxs_store.$l.forFeature(config.states)),{provide:core.APP_INITIALIZER,multi:!0,useFactory:store=>()=>{const{actions}=config;return actions&&actions.length>0?store.dispatch(actions):void 0},deps:[ngxs_store.yh]}]})(fn,ctx):fn(ctx)}}()];!function setDocs(library){const docs=__webpack_require__("./dist/compodoc sync recursive ^\\.\\/.*\\/documentation\\.json$")(`./${library}/documentation.json`);(0,angular.P)(docs)}("components-behavioral")},"./storybook-config-entry.js":(__unused_webpack_module,__unused_webpack___webpack_exports__,__webpack_require__)=>{"use strict";var dist=__webpack_require__("./node_modules/@storybook/global/dist/index.mjs"),external_STORYBOOK_MODULE_PREVIEW_API_=__webpack_require__("@storybook/preview-api");const external_STORYBOOK_MODULE_CHANNEL_POSTMESSAGE_namespaceObject=__STORYBOOK_MODULE_CHANNEL_POSTMESSAGE__,external_STORYBOOK_MODULE_CHANNEL_WEBSOCKET_namespaceObject=__STORYBOOK_MODULE_CHANNEL_WEBSOCKET__;var asyncToGenerator=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js");const pipeline=x=>x(),importers=[function(){var _ref=(0,asyncToGenerator.Z)((function*(path){if(!/^\.[\\/](?:libs\/components\/behavioral(?:\/(?!\.)(?:(?:(?!(?:^|\/)\.).)*?)\/|\/|$)(?!\.)(?=.)[^/]*?\.stories\.mdx)$/.exec(path))return;const pathRemainder=path.substring(29);return __webpack_require__("./libs/components/behavioral lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/behavioral(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.mdx)$")("./"+pathRemainder)}));return function(_x){return _ref.apply(this,arguments)}}(),function(){var _ref2=(0,asyncToGenerator.Z)((function*(path){if(!/^\.[\\/](?:libs\/components\/behavioral(?:\/(?!\.)(?:(?:(?!(?:^|\/)\.).)*?)\/|\/|$)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$/.exec(path))return;const pathRemainder=path.substring(29);return __webpack_require__("./libs/components/behavioral lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/behavioral(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.(js%7Cjsx%7Cts%7Ctsx))$")("./"+pathRemainder)}));return function(_x2){return _ref2.apply(this,arguments)}}()];function _importFn(){return(_importFn=(0,asyncToGenerator.Z)((function*(path){for(let i=0;iimporters[i](path)));if(moduleExports)return moduleExports}}))).apply(this,arguments)}const{SERVER_CHANNEL_URL}=dist.global,channel=(0,external_STORYBOOK_MODULE_CHANNEL_POSTMESSAGE_namespaceObject.createChannel)({page:"preview"});if(external_STORYBOOK_MODULE_PREVIEW_API_.addons.setChannel(channel),SERVER_CHANNEL_URL){const serverChannel=(0,external_STORYBOOK_MODULE_CHANNEL_WEBSOCKET_namespaceObject.createChannel)({url:SERVER_CHANNEL_URL});external_STORYBOOK_MODULE_PREVIEW_API_.addons.setServerChannel(serverChannel),window.__STORYBOOK_SERVER_CHANNEL__=serverChannel}const preview=new external_STORYBOOK_MODULE_PREVIEW_API_.PreviewWeb;window.__STORYBOOK_PREVIEW__=preview,window.__STORYBOOK_STORY_STORE__=preview.storyStore,window.__STORYBOOK_ADDONS_CHANNEL__=channel,window.__STORYBOOK_CLIENT_API__=new external_STORYBOOK_MODULE_PREVIEW_API_.ClientApi({storyStore:preview.storyStore}),preview.initialize({importFn:function importFn(_x3){return _importFn.apply(this,arguments)},getProjectAnnotations:()=>(0,external_STORYBOOK_MODULE_PREVIEW_API_.composeConfigs)([__webpack_require__("./node_modules/@storybook/angular/dist/client/docs/config.js"),__webpack_require__("./node_modules/@storybook/angular/dist/client/config.js"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/docs/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/actions/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/backgrounds/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/measure/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/outline/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/highlight/preview.mjs"),__webpack_require__("./libs/components/behavioral/.storybook/preview.ts")])})},"./node_modules/@storybook/addon-docs/dist sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="./node_modules/@storybook/addon-docs/dist sync recursive",module.exports=webpackEmptyContext},"@storybook/channels":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CHANNELS__},"@storybook/client-logger":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CLIENT_LOGGER__},"@storybook/core-client":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CORE_CLIENT__},"@storybook/core-events":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CORE_EVENTS__},"@storybook/preview-api":module=>{"use strict";module.exports=__STORYBOOK_MODULE_PREVIEW_API__},"./dist/compodoc/components-behavioral/documentation.json":module=>{"use strict";module.exports=JSON.parse('{"pipes":[],"interfaces":[],"injectables":[],"guards":[],"interceptors":[],"classes":[],"directives":[],"components":[{"name":"BiomarkerDetailsComponent","id":"component-BiomarkerDetailsComponent-77362795c55e59d8109b5a13e3d57e4774ce01b5484ac21237c42d2857f2de4ecd80ec15ae66e99983246bdc3de1df675717253be566d7ba0efe1495a48c9f3c","file":"src/lib/biomarker-details/biomarker-details.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-biomarker-details","styleUrls":["./biomarker-details.component.scss"],"styles":[],"templateUrl":["./biomarker-details.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"collaborateText","defaultValue":"\'Collaborate with the HRA Team\'","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

button text of empty biomarker component.

\\n","line":106,"rawdescription":"\\n\\nbutton text of empty biomarker component.\\n","modifierKind":[144]},{"name":"gradientHoverInfo","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.GradientLegendInfo)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Info to be shown on the tooltip for Gradient Legend

\\n","line":58,"rawdescription":"\\nInfo to be shown on the tooltip for Gradient Legend","modifierKind":[144]},{"name":"gradients","defaultValue":"selectQuerySnapshot(RR.field, Ids.GradientLegend, RTypes.Gradient, \'points\' as const, [])<\\n GradientPoint[]\\n >","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Gradient colors along with their stop points

\\n","line":67,"rawdescription":"\\nGradient colors along with their stop points","modifierKind":[144]},{"name":"iri","defaultValue":"selectSnapshot(ActiveFtuSelectors.iri)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Iri of medical illustration behavior component

\\n","line":80,"rawdescription":"\\n\\nIri of medical illustration behavior component\\n","modifierKind":[144]},{"name":"isTableFullScreen","defaultValue":"false","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Indicates if the table is fully shown, defaults to false

\\n","line":64,"rawdescription":"\\nIndicates if the table is fully shown, defaults to false"},{"name":"message","defaultValue":"`We currently do not have cell type data for this biomarker.\\n

Please contact us to discuss your dataset.`","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

message markdown of empty biomarker component.

\\n","line":111,"rawdescription":"\\n\\nmessage markdown of empty biomarker component.\\n","modifierKind":[144]},{"name":"selectedOnHovered","defaultValue":"selectSnapshot(IllustratorSelectors.selectedOnHovered)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Selects the cells hovered currently to highlight in table

\\n","line":88,"rawdescription":"\\nSelects the cells hovered currently to highlight in table","modifierKind":[144]},{"name":"sizeHoverInfo","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.SizeLegendInfo)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Info to be shown on the tooltip for Size Legend

\\n","line":61,"rawdescription":"\\nInfo to be shown on the tooltip for Size Legend","modifierKind":[144]},{"name":"sizes","defaultValue":"selectQuerySnapshot(RR.field, Ids.SizeLegend, RTypes.Size, \'sizes\' as const, [])","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Taking input for the radius of the circle and the label to be displayed.

\\n","line":72,"rawdescription":"\\nTaking input for the radius of the circle and the label to be displayed.","modifierKind":[144]},{"name":"source","defaultValue":"selectSnapshot(SourceRefsSelectors.sourceReferences)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

List of sources with titles and links displayed to the user

\\n","line":75,"rawdescription":"\\nList of sources with titles and links displayed to the user","modifierKind":[144]},{"name":"tabs","defaultValue":"selectSnapshot(CellSummarySelectors.aggregates)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Table tabs

\\n","line":55,"rawdescription":"\\nTable tabs","modifierKind":[144]},{"name":"tissues","defaultValue":"selectSnapshot(TissueLibrarySelectors.tissues)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Get all tissues

\\n","line":85,"rawdescription":"\\n\\nGet all tissues\\n","modifierKind":[144]}],"methodsClass":[{"name":"collaborate","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":129,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which opens the contact modal dialog box","description":"

A function which opens the contact modal dialog box

\\n"},{"name":"toggleFullscreen","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":123,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function that toggles isTableFullScreen and\\ncalls the setScreenMode function.\\n","description":"

A function that toggles isTableFullScreen and\\ncalls the setScreenMode function.

\\n"}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

The component displays the biomarker details which includes the details, gradient legends, size legends and source lists

\\n","rawdescription":"\\nThe component displays the biomarker details which includes the details, gradient legends, size legends and source lists","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, inject } from \'@angular/core\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatTabsModule } from \'@angular/material/tabs\';\\nimport { HoverDirective } from \'@hra-ui/cdk\';\\nimport { dispatch, selectQuerySnapshot, selectSnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RR } from \'@hra-ui/cdk/state\';\\nimport { ActiveFtuSelectors, IllustratorSelectors, ScreenModeAction, TissueLibrarySelectors } from \'@hra-ui/state\';\\nimport {\\n EmptyBiomarkerComponent,\\n GradientLegendComponent,\\n GradientPoint,\\n LabelBoxComponent,\\n SizeLegend,\\n SizeLegendComponent,\\n} from \'@hra-ui/components/atoms\';\\nimport { BiomarkerTableDataCardComponent, SourceListComponent } from \'@hra-ui/components/molecules\';\\nimport { BiomarkerTableComponent, TissueInfo } from \'@hra-ui/components/organisms\';\\nimport { CellSummarySelectors, ResourceIds as Ids, ResourceTypes as RTypes, SourceRefsSelectors } from \'@hra-ui/state\';\\nimport { MatDialog, MatDialogConfig, MatDialogModule } from \'@angular/material/dialog\';\\nimport { ContactBehaviorComponent } from \'../contact-behavior/contact-behavior.component\';\\n\\n/**\\n * PlaceHolder for Empty Tissue Info\\n */\\nconst EMPTY_TISSUE_INFO: TissueInfo = {\\n id: \'\',\\n label: \'\',\\n};\\n\\n/** The component displays the biomarker details which includes the details, gradient legends, size legends and source lists*/\\n@Component({\\n selector: \'ftu-biomarker-details\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatIconModule,\\n MatTabsModule,\\n MatDialogModule,\\n BiomarkerTableComponent,\\n BiomarkerTableDataCardComponent,\\n GradientLegendComponent,\\n HoverDirective,\\n LabelBoxComponent,\\n SizeLegendComponent,\\n SourceListComponent,\\n EmptyBiomarkerComponent,\\n ],\\n templateUrl: \'./biomarker-details.component.html\',\\n styleUrls: [\'./biomarker-details.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerDetailsComponent {\\n /** Table tabs */\\n readonly tabs = selectSnapshot(CellSummarySelectors.aggregates);\\n\\n /** Info to be shown on the tooltip for Gradient Legend */\\n readonly gradientHoverInfo = selectQuerySnapshot(RR.anyText, Ids.GradientLegendInfo);\\n\\n /** Info to be shown on the tooltip for Size Legend */\\n readonly sizeHoverInfo = selectQuerySnapshot(RR.anyText, Ids.SizeLegendInfo);\\n\\n /** Indicates if the table is fully shown, defaults to false*/\\n isTableFullScreen = false;\\n\\n /** Gradient colors along with their stop points */\\n readonly gradients = selectQuerySnapshot(RR.field, Ids.GradientLegend, RTypes.Gradient, \'points\' as const, [])<\\n GradientPoint[]\\n >;\\n\\n /** Taking input for the radius of the circle and the label to be displayed. */\\n readonly sizes = selectQuerySnapshot(RR.field, Ids.SizeLegend, RTypes.Size, \'sizes\' as const, []);\\n\\n /** List of sources with titles and links displayed to the user */\\n readonly source = selectSnapshot(SourceRefsSelectors.sourceReferences);\\n\\n /**\\n * Iri of medical illustration behavior component\\n */\\n readonly iri = selectSnapshot(ActiveFtuSelectors.iri);\\n\\n /**\\n * Get all tissues\\n */\\n readonly tissues = selectSnapshot(TissueLibrarySelectors.tissues);\\n\\n /** Selects the cells hovered currently to highlight in table */\\n readonly selectedOnHovered = selectSnapshot(IllustratorSelectors.selectedOnHovered);\\n\\n /**\\n * Gets tissue title from the list of tissues\\n */\\n get tissueInfo(): TissueInfo {\\n const iri = this.iri();\\n const tissues = this.tissues();\\n if (iri === undefined) {\\n return EMPTY_TISSUE_INFO;\\n }\\n const { id, label } = tissues[iri];\\n return { id, label };\\n }\\n\\n /**\\n * button text of empty biomarker component.\\n */\\n readonly collaborateText = \'Collaborate with the HRA Team\';\\n\\n /**\\n * message markdown of empty biomarker component.\\n */\\n readonly message = `We currently do not have cell type data for this biomarker.\\n

Please contact us to discuss your dataset.`;\\n\\n /** A dispatcher function to set the screen mode */\\n private readonly setScreenMode = dispatch(ScreenModeAction.Set);\\n\\n /** A dialog box which shows contact modal after clicking on contact */\\n private readonly dialog = inject(MatDialog);\\n\\n /** A function that toggles isTableFullScreen and\\n * calls the setScreenMode function.\\n */\\n toggleFullscreen(): void {\\n this.isTableFullScreen = !this.isTableFullScreen;\\n this.setScreenMode(this.isTableFullScreen);\\n }\\n\\n /** A function which opens the contact modal dialog box */\\n collaborate(): void {\\n const dialogConfig = new MatDialogConfig();\\n dialogConfig.disableClose = true;\\n this.dialog.open(ContactBehaviorComponent, dialogConfig);\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n display: grid;\\n grid-template-columns: 1fr 1fr auto;\\n grid-template-rows: 3.5rem minmax(5rem, 2fr) 3rem 5rem minmax(5rem, 1fr);\\n grid-template-areas:\\n \'table-header table-header table-header\'\\n \'table table table\'\\n \'gradient-legend-header size-legend-header .\'\\n \'gradient-legend size-legend .\'\\n \'source-list source-list source-list\';\\n overflow-y: auto;\\n\\n .table-header {\\n grid-area: table-header;\\n border-bottom: 0.063rem solid #d3d3d3;\\n height: 3.5rem;\\n }\\n\\n .table {\\n grid-area: table;\\n max-width: 100%;\\n overflow: auto;\\n border-bottom: 0.063rem solid #d3d3d3;\\n\\n ::ng-deep .table-tab-header {\\n padding-left: 1rem;\\n padding-right: 1rem;\\n border-left: 0.063rem solid #d3d3d3;\\n border-bottom: 0.063rem solid #d3d3d3;\\n background-color: white;\\n\\n &:last-child {\\n border-right: 0.063rem solid #d3d3d3;\\n }\\n\\n &.mdc-tab-indicator--active {\\n background-color: #f8f9fa;\\n }\\n\\n &:hover {\\n background-color: #f8f9fa;\\n }\\n }\\n }\\n\\n .legend-header {\\n color: vars.$dark-primary-text;\\n border-top: 0.063rem solid #d3d3d3;\\n border-bottom: 0.063rem solid #d3d3d3;\\n border-right: 0.063rem solid #d3d3d3;\\n\\n &.gradient {\\n grid-area: gradient-legend-header;\\n }\\n\\n &.size {\\n grid-area: size-legend-header;\\n }\\n\\n .icon {\\n margin-left: 0.6rem;\\n width: unset;\\n }\\n }\\n\\n .legend {\\n padding: 1rem 2rem;\\n border-right: 0.063rem solid #d3d3d3;\\n\\n &.gradient {\\n grid-area: gradient-legend;\\n\\n .content {\\n width: 10rem;\\n }\\n }\\n\\n &.size {\\n grid-area: size-legend;\\n }\\n }\\n\\n .source-list {\\n grid-area: source-list;\\n }\\n\\n .cursor {\\n cursor: default;\\n }\\n}\\n\\n::ng-deep .biomarker-details.info-tooltip {\\n display: flex;\\n padding: 1rem;\\n border: 1px solid #a8a3a3;\\n border-radius: 0.5rem;\\n box-shadow: 1px 2px 16px 2px #00000029;\\n background-color: vars.$primary-contrast-rgb;\\n max-width: 21rem;\\n font-size: small;\\n font-family: Inter;\\n}\\n","styleUrl":"./biomarker-details.component.scss"}],"stylesData":"","accessors":{"tissueInfo":{"name":"tissueInfo","getSignature":{"name":"tissueInfo","type":"","returnType":"TissueInfo","line":93,"rawdescription":"\\n\\nGets tissue title from the list of tissues\\n","description":"

Gets tissue title from the list of tissues

\\n"}}},"templateData":"\\n Cell Types by Gene Biomarkers\\n \\n {{ isTableFullScreen ? \'close_fullscreen\' : \'open_in_full\' }}\\n \\n\\n\\n\\n \\n \\n \\n \\n\\n\\n\\n Biomarker Expression Mean in FTU\\n info_outlined\\n\\n
\\n \\n
\\n\\n\\n Percentage of Cells in FTU\\n info_outlined\\n\\n
\\n \\n
\\n\\n
\\n \\n
\\n\\n\\n
\\n {{ tooltip }}\\n
\\n\\n"},{"name":"BiomarkerDetailsWcComponent","id":"component-BiomarkerDetailsWcComponent-2a35b01614cd4a83a9546a33b9e03200b2f96e7d06e07e8803741ed0f77a8815075e35be5e35822c9fb46279ff45ee49dbbfc6fc96f328f11a42b7f9898a30ef","file":"src/lib/biomarker-details-wc/biomarker-details-wc.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-wc-biomarker-details","styleUrls":["./biomarker-details-wc.component.scss"],"styles":[],"templateUrl":["./biomarker-details-wc.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"collaborateText","defaultValue":"\'Collaborate with the HRA Team\'","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

button text of empty biomarker component.

\\n","line":145,"rawdescription":"\\n\\nbutton text of empty biomarker component.\\n","modifierKind":[144]},{"name":"currentUrl","defaultValue":"selectSnapshot(IllustratorSelectors.url)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Current illustration url

\\n","line":71,"rawdescription":"\\n\\nCurrent illustration url\\n","modifierKind":[144]},{"name":"gradientHoverInfo","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.GradientLegendInfo)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Info to be shown on the tooltip for Gradient Legend

\\n","line":111,"rawdescription":"\\nInfo to be shown on the tooltip for Gradient Legend","modifierKind":[144]},{"name":"gradients","defaultValue":"selectQuerySnapshot(RR.field, Ids.GradientLegend, RTypes.Gradient, \'points\' as const, [])<\\n GradientPoint[]\\n >","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Gradient colors along with their stop points

\\n","line":120,"rawdescription":"\\nGradient colors along with their stop points","modifierKind":[144]},{"name":"iri","defaultValue":"selectSnapshot(ActiveFtuSelectors.iri)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Iri of medical illustration behavior component

\\n","line":81,"rawdescription":"\\n\\nIri of medical illustration behavior component\\n","modifierKind":[144]},{"name":"isTableFullScreen","defaultValue":"false","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Indicates if the table is fully shown, defaults to false

\\n","line":117,"rawdescription":"\\nIndicates if the table is fully shown, defaults to false"},{"name":"mapping","defaultValue":"selectSnapshot(IllustratorSelectors.mapping)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Current mapping file

\\n","line":76,"rawdescription":"\\n\\nCurrent mapping file\\n","modifierKind":[144]},{"name":"message","defaultValue":"`We currently do not have cell type data for this biomarker.\\n

Please contact us to discuss your dataset.`","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

message markdown of empty biomarker component.

\\n","line":150,"rawdescription":"\\n\\nmessage markdown of empty biomarker component.\\n","modifierKind":[144]},{"name":"sizeHoverInfo","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.SizeLegendInfo)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Info to be shown on the tooltip for Size Legend

\\n","line":114,"rawdescription":"\\nInfo to be shown on the tooltip for Size Legend","modifierKind":[144]},{"name":"sizes","defaultValue":"selectQuerySnapshot(RR.field, Ids.SizeLegend, RTypes.Size, \'sizes\' as const, [])","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Taking input for the radius of the circle and the label to be displayed.

\\n","line":125,"rawdescription":"\\nTaking input for the radius of the circle and the label to be displayed.","modifierKind":[144]},{"name":"source","defaultValue":"selectSnapshot(SourceRefsSelectors.sourceReferences)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

List of sources with titles and links displayed to the user

\\n","line":128,"rawdescription":"\\nList of sources with titles and links displayed to the user","modifierKind":[144]},{"name":"tabs","defaultValue":"selectSnapshot(CellSummarySelectors.aggregates)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Table tabs

\\n","line":108,"rawdescription":"\\nTable tabs","modifierKind":[144]},{"name":"tissues","defaultValue":"selectSnapshot(TissueLibrarySelectors.tissues)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Get all tissues

\\n","line":86,"rawdescription":"\\n\\nGet all tissues\\n","modifierKind":[144]},{"name":"updateNodeOnClicked","defaultValue":"dispatch(IllustratorActions.SetClicked)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Updates the active node on node click

\\n","line":105,"rawdescription":"\\n\\nUpdates the active node on node click\\n","modifierKind":[144]},{"name":"updateNodeOnHover","defaultValue":"dispatch(IllustratorActions.SetHover)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Updates the active node on node hover

\\n","line":100,"rawdescription":"\\n\\nUpdates the active node on node hover\\n","modifierKind":[144]}],"methodsClass":[{"name":"collaborate","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":167,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which opens the contact modal dialog box","description":"

A function which opens the contact modal dialog box

\\n"},{"name":"toggleFullscreen","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":162,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function that toggles isTableFullScreen and\\ncalls the setScreenMode function.\\n","description":"

A function that toggles isTableFullScreen and\\ncalls the setScreenMode function.

\\n"}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for Biomarker Table Details Web component

\\n","rawdescription":"\\nComponent for Biomarker Table Details Web component","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, inject } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatTabsModule } from \'@angular/material/tabs\';\\nimport { HoverDirective } from \'@hra-ui/cdk\';\\nimport { selectSnapshot, selectQuerySnapshot, dispatch } from \'@hra-ui/cdk/injectors\';\\nimport {\\n GradientLegendComponent,\\n LabelBoxComponent,\\n SizeLegendComponent,\\n EmptyBiomarkerComponent,\\n GradientPoint,\\n SizeLegend,\\n} from \'@hra-ui/components/atoms\';\\nimport {\\n BiomarkerTableDataCardComponent,\\n InteractiveSvgComponent,\\n SourceListComponent,\\n} from \'@hra-ui/components/molecules\';\\nimport { TissueInfo, BiomarkerTableComponent } from \'@hra-ui/components/organisms\';\\nimport {\\n ActiveFtuSelectors,\\n TissueLibrarySelectors,\\n ScreenModeAction,\\n IllustratorActions,\\n IllustratorSelectors,\\n CellSummarySelectors,\\n ResourceIds as Ids,\\n ResourceTypes as RTypes,\\n SourceRefsSelectors,\\n} from \'@hra-ui/state\';\\nimport { ResourceRegistrySelectors as RR } from \'@hra-ui/cdk/state\';\\nimport { MatDialog, MatDialogConfig } from \'@angular/material/dialog\';\\nimport { ContactBehaviorComponent } from \'../contact-behavior/contact-behavior.component\';\\n\\n/**\\n * PlaceHolder for Empty Tissue Info\\n */\\nconst EMPTY_TISSUE_INFO: TissueInfo = {\\n id: \'\',\\n label: \'\',\\n};\\n\\n/** Component for Biomarker Table Details Web component */\\n@Component({\\n selector: \'ftu-wc-biomarker-details\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatIconModule,\\n MatTabsModule,\\n\\n BiomarkerTableComponent,\\n BiomarkerTableDataCardComponent,\\n GradientLegendComponent,\\n HoverDirective,\\n LabelBoxComponent,\\n SizeLegendComponent,\\n SourceListComponent,\\n EmptyBiomarkerComponent,\\n InteractiveSvgComponent,\\n ],\\n templateUrl: \'./biomarker-details-wc.component.html\',\\n styleUrls: [\'./biomarker-details-wc.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerDetailsWcComponent {\\n /**\\n * Current illustration url\\n */\\n readonly currentUrl = selectSnapshot(IllustratorSelectors.url);\\n\\n /**\\n * Current mapping file\\n */\\n readonly mapping = selectSnapshot(IllustratorSelectors.mapping);\\n\\n /**\\n * Iri of medical illustration behavior component\\n */\\n readonly iri = selectSnapshot(ActiveFtuSelectors.iri);\\n\\n /**\\n * Get all tissues\\n */\\n readonly tissues = selectSnapshot(TissueLibrarySelectors.tissues);\\n\\n /**\\n * Gets tissue title from the list of tissues\\n */\\n get tissueTitle(): string {\\n const iri = this.iri();\\n const tissues = this.tissues();\\n return iri ? tissues[iri].label : \'\';\\n }\\n\\n /**\\n * Updates the active node on node hover\\n */\\n readonly updateNodeOnHover = dispatch(IllustratorActions.SetHover);\\n\\n /**\\n * Updates the active node on node click\\n */\\n readonly updateNodeOnClicked = dispatch(IllustratorActions.SetClicked);\\n\\n /** Table tabs */\\n readonly tabs = selectSnapshot(CellSummarySelectors.aggregates);\\n\\n /** Info to be shown on the tooltip for Gradient Legend */\\n readonly gradientHoverInfo = selectQuerySnapshot(RR.anyText, Ids.GradientLegendInfo);\\n\\n /** Info to be shown on the tooltip for Size Legend */\\n readonly sizeHoverInfo = selectQuerySnapshot(RR.anyText, Ids.SizeLegendInfo);\\n\\n /** Indicates if the table is fully shown, defaults to false*/\\n isTableFullScreen = false;\\n\\n /** Gradient colors along with their stop points */\\n readonly gradients = selectQuerySnapshot(RR.field, Ids.GradientLegend, RTypes.Gradient, \'points\' as const, [])<\\n GradientPoint[]\\n >;\\n\\n /** Taking input for the radius of the circle and the label to be displayed. */\\n readonly sizes = selectQuerySnapshot(RR.field, Ids.SizeLegend, RTypes.Size, \'sizes\' as const, []);\\n\\n /** List of sources with titles and links displayed to the user */\\n readonly source = selectSnapshot(SourceRefsSelectors.sourceReferences);\\n /**\\n * Gets tissue title from the list of tissues\\n */\\n get tissueInfo(): TissueInfo {\\n const iri = this.iri();\\n const tissues = this.tissues();\\n if (iri === undefined) {\\n return EMPTY_TISSUE_INFO;\\n }\\n const { id, label } = tissues[iri];\\n return { id, label };\\n }\\n\\n /**\\n * button text of empty biomarker component.\\n */\\n readonly collaborateText = \'Collaborate with the HRA Team\';\\n\\n /**\\n * message markdown of empty biomarker component.\\n */\\n readonly message = `We currently do not have cell type data for this biomarker.\\n

Please contact us to discuss your dataset.`;\\n\\n /** A dispatcher function to set the screen mode */\\n private readonly setScreenMode = dispatch(ScreenModeAction.Set);\\n\\n /** A dialog box which shows contact modal after clicking on contact */\\n private readonly dialog = inject(MatDialog);\\n\\n /** A function that toggles isTableFullScreen and\\n * calls the setScreenMode function.\\n */\\n toggleFullscreen(): void {\\n this.isTableFullScreen = !this.isTableFullScreen;\\n this.setScreenMode(this.isTableFullScreen);\\n }\\n /** A function which opens the contact modal dialog box */\\n collaborate(): void {\\n const dialogConfig = new MatDialogConfig();\\n dialogConfig.disableClose = true;\\n this.dialog.open(ContactBehaviorComponent, dialogConfig);\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n ::ng-deep .extraTab {\\n border: 0.063rem solid #d3d3d3;\\n border-top: 0;\\n }\\n\\n .table-header {\\n grid-area: table-header;\\n border: 0.063rem solid #d3d3d3;\\n width: 43rem;\\n height: 3.5rem;\\n }\\n\\n .table {\\n grid-area: table;\\n max-width: 100%;\\n overflow: auto;\\n border: 0.063rem solid #d3d3d3;\\n\\n ::ng-deep .table-tab-header {\\n padding-left: 1rem;\\n padding-right: 1rem;\\n border-left: 0.063rem solid #d3d3d3;\\n border-bottom: 0.063rem solid #d3d3d3;\\n\\n &:last-child {\\n border-right: 0.063rem solid #d3d3d3;\\n }\\n\\n &.mdc-tab-indicator--active {\\n background-color: #f8f9fa;\\n }\\n }\\n }\\n\\n hra-biomarker-table {\\n overflow-y: auto;\\n overflow-x: auto;\\n }\\n\\n .legends {\\n display: inline-flex;\\n width: 100%;\\n .legends-right {\\n width: 50%;\\n }\\n .legends-left {\\n width: 50%;\\n }\\n }\\n\\n .legend-header {\\n color: vars.$dark-primary-text;\\n border-top: 0.063rem solid #d3d3d3;\\n border-bottom: 0.063rem solid #d3d3d3;\\n border-right: 0.063rem solid #d3d3d3;\\n\\n &.gradient {\\n grid-area: gradient-legend-header;\\n }\\n\\n &.size {\\n grid-area: size-legend-header;\\n }\\n\\n .icon {\\n margin-left: 0.6rem;\\n }\\n }\\n\\n .legend {\\n padding: 1rem 2rem;\\n border-right: 0.063rem solid #d3d3d3;\\n\\n &.gradient {\\n grid-area: gradient-legend;\\n\\n .content {\\n width: 10rem;\\n }\\n }\\n\\n &.size {\\n grid-area: size-legend;\\n }\\n }\\n\\n .source-list {\\n grid-area: source-list;\\n\\n .content {\\n width: min-content;\\n }\\n }\\n}\\n\\n::ng-deep .biomarker-details.info-tooltip {\\n display: flex;\\n padding: 1rem;\\n border: 1px solid #a8a3a3;\\n border-radius: 0.5rem;\\n box-shadow: 1px 2px 16px 2px #00000029;\\n background-color: vars.$primary-contrast-rgb;\\n max-width: 21rem;\\n font-size: small;\\n}\\n","styleUrl":"./biomarker-details-wc.component.scss"}],"stylesData":"","accessors":{"tissueTitle":{"name":"tissueTitle","getSignature":{"name":"tissueTitle","type":"string","returnType":"string","line":91,"rawdescription":"\\n\\nGets tissue title from the list of tissues\\n","description":"

Gets tissue title from the list of tissues

\\n"}},"tissueInfo":{"name":"tissueInfo","getSignature":{"name":"tissueInfo","type":"","returnType":"TissueInfo","line":132,"rawdescription":"\\n\\nGets tissue title from the list of tissues\\n","description":"

Gets tissue title from the list of tissues

\\n"}}},"templateData":"\\n {{ tissueTitle }}: FTU Illustration\\n \\n {{ isTableFullScreen ? \'close_fullscreen\' : \'open_in_full\' }}\\n \\n\\n\\n\\n \\n \\n \\n \\n \\n \\n\\n
\\n
\\n \\n Biomarker Expression Mean in FTU\\n info_outlined\\n \\n
\\n \\n
\\n
\\n\\n
\\n \\n Percentage of Cells in FTU\\n info_outlined\\n \\n
\\n \\n
\\n
\\n
\\n \\n \\n \\n
\\n \\n
\\n\\n \\n
\\n {{ tooltip }}\\n
\\n \\n \\n\\n"},{"name":"ContactBehaviorComponent","id":"component-ContactBehaviorComponent-b9d5e223798d92be933b5dbadc75b1d6c247f7b00beb75f933bb07b0a4949d22458ee53931ca654d0b255f40508dbf23ef4e516e2f80368415a86fdfe44d60b6","file":"src/lib/contact-behavior/contact-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-contact-behavior","styleUrls":["./contact-behavior.component.scss"],"styles":[],"templateUrl":["./contact-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"description","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.ContactAcknowledgement)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Information modal message to the user

\\n","line":29,"rawdescription":"\\nInformation modal message to the user","modifierKind":[144]},{"name":"postMessageTemplate","deprecated":false,"deprecationMessage":"","type":"TemplateRef","optional":false,"description":"

A template to post a message

\\n","line":20,"rawdescription":"\\nA template to post a message","decorators":[{"name":"ViewChild","stringifiedArguments":"\'postMessage\'"}],"modifierKind":[144]},{"name":"productLogoUrl","defaultValue":"selectQuerySnapshot(RR.url, Ids.ProductLogoUrl)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product logo URL to displayed on the left side.

\\n","line":23,"rawdescription":"\\nInput for product logo URL to displayed on the left side.","modifierKind":[144]},{"name":"productTitle","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.ProductTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product title to displayed on the left side.

\\n","line":26,"rawdescription":"\\nInput for product title to displayed on the left side.","modifierKind":[144]},{"name":"sendMessage","defaultValue":"dispatch(ContactActions.SendMessage)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

A dispatcher function to send message entered by user

\\n","line":32,"rawdescription":"\\nA dispatcher function to send message entered by user","modifierKind":[144]}],"methodsClass":[{"name":"close","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":51,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which closes the \'Contact us\' dialog and the acknowledgement dialog.","description":"

A function which closes the 'Contact us' dialog and the acknowledgement dialog.

\\n"},{"name":"submit","args":[{"name":"message","type":"ContactData","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"void","typeParameters":[],"line":44,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which sends/dispatches a message which contains email, subject, and message. And also opens the acknowledgement dialog box.","description":"

A function which sends/dispatches a message which contains email, subject, and message. And also opens the acknowledgement dialog box.

\\n","jsdoctags":[{"name":"message","type":"ContactData","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

A Component for contact behavior which sends the message entered by the user and shows an acknowledgement

\\n","rawdescription":"\\nA Component for contact behavior which sends the message entered by the user and shows an acknowledgement","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, inject, TemplateRef, ViewChild } from \'@angular/core\';\\nimport { MatDialog, MatDialogModule, MatDialogRef } from \'@angular/material/dialog\';\\nimport { dispatch, selectQuerySnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RR } from \'@hra-ui/cdk/state\';\\nimport { ContactData, ContactModalComponent, InfoModalComponent } from \'@hra-ui/components/molecules\';\\nimport { ResourceIds as Ids, ContactActions } from \'@hra-ui/state\';\\n\\n/** A Component for contact behavior which sends the message entered by the user and shows an acknowledgement */\\n@Component({\\n selector: \'ftu-contact-behavior\',\\n standalone: true,\\n imports: [CommonModule, MatDialogModule, ContactModalComponent, InfoModalComponent],\\n templateUrl: \'./contact-behavior.component.html\',\\n styleUrls: [\'./contact-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class ContactBehaviorComponent {\\n /** A template to post a message */\\n @ViewChild(\'postMessage\') readonly postMessageTemplate!: TemplateRef;\\n\\n /** Input for product logo URL to displayed on the left side. */\\n readonly productLogoUrl = selectQuerySnapshot(RR.url, Ids.ProductLogoUrl);\\n\\n /** Input for product title to displayed on the left side. */\\n readonly productTitle = selectQuerySnapshot(RR.anyText, Ids.ProductTitle);\\n\\n /** Information modal message to the user */\\n readonly description = selectQuerySnapshot(RR.anyText, Ids.ContactAcknowledgement);\\n\\n /** A dispatcher function to send message entered by user */\\n readonly sendMessage = dispatch(ContactActions.SendMessage);\\n\\n /** A dialog box which shows user an acknowledgement after clicking on submit */\\n private readonly dialog = inject(MatDialog);\\n\\n /** A mat form field dialog which accepts the email, subject, and message of user and validates it */\\n private readonly selfRef = inject(MatDialogRef, { optional: true });\\n\\n /** Dialog box which references the acknowledgement dialog box */\\n private postRef?: MatDialogRef;\\n\\n /** A function which sends/dispatches a message which contains email, subject, and message. And also opens the acknowledgement dialog box. */\\n submit(message: ContactData): void {\\n this.sendMessage(message);\\n this.selfRef?.close();\\n this.postRef = this.dialog.open(this.postMessageTemplate);\\n }\\n\\n /** A function which closes the \'Contact us\' dialog and the acknowledgement dialog. */\\n close(): void {\\n this.postRef?.close();\\n this.selfRef?.close();\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n\\n .contact-modal {\\n width: 41rem;\\n height: 40rem;\\n }\\n\\n .info-modal {\\n width: 35rem;\\n height: 11.8rem;\\n }\\n\\n @media screen and (max-height: 328px) {\\n .contact-modal {\\n height: calc(100vh - 2rem);\\n }\\n }\\n}\\n","styleUrl":"./contact-behavior.component.scss"}],"stylesData":"","templateData":"\\n\\n\\n\\n \\n \\n\\n"},{"name":"FooterBehaviorComponent","id":"component-FooterBehaviorComponent-d9ecf51e28e6cdbe2f77b2f819a2e3df3acd0382e946f213975e78af53f6c11b1a7a013fefb862cfa9449b9973d2ea3497fa9687d6c04eb492751c2a83c17410","file":"src/lib/footer-behavior/footer-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-footer-behavior","styleUrls":["./footer-behavior.component.scss"],"styles":[],"templateUrl":["./footer-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"download","defaultValue":"dispatch(DownloadActions.Download)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

A dispatcher function to download file in specified format

\\n","line":39,"rawdescription":"\\nA dispatcher function to download file in specified format","modifierKind":[144]},{"name":"downloadFormats","defaultValue":"selectSnapshot(DownloadSelectors.formats)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Selects a snapshot of the current value of the available download formats

\\n","line":27,"rawdescription":"\\nSelects a snapshot of the current value of the available download formats","modifierKind":[144]},{"name":"embed","defaultValue":"LinkIds.Embed","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Embed link routing after clicking on Embed

\\n","line":36,"rawdescription":"\\nEmbed link routing after clicking on Embed","modifierKind":[144]},{"name":"hraPortal","defaultValue":"LinkIds.Portal","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Hra portal link routing after clicking on HRA Portal

\\n","line":30,"rawdescription":"\\nHra portal link routing after clicking on HRA Portal","modifierKind":[144]},{"name":"illustrationMetadata","defaultValue":"LinkIds.Illustration","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Metadata page link routing after clicking on Illustration

\\n","line":33,"rawdescription":"\\nMetadata page link routing after clicking on Illustration","modifierKind":[144]},{"name":"productLogoUrl","defaultValue":"selectQuerySnapshot(RR.url, Ids.ProductLogoUrl)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product logo URL to displayed on the left side.

\\n","line":21,"rawdescription":"\\nInput for product logo URL to displayed on the left side.","modifierKind":[144]},{"name":"productTitle","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.ProductTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product title to displayed on the left side.

\\n","line":24,"rawdescription":"\\nInput for product title to displayed on the left side.","modifierKind":[144]},{"name":"size","defaultValue":"selectSnapshot(ScreenModeSelectors.size)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Selects the current value of the available ScreenMode Size

\\n","line":41,"rawdescription":"\\nSelects the current value of the available ScreenMode Size","modifierKind":[144]}],"methodsClass":[{"name":"contact","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":47,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which opens the contact modal dialog box","description":"

A function which opens the contact modal dialog box

\\n"}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

A component for footer behavior which provides functionality for various buttons in footer

\\n","rawdescription":"\\nA component for footer behavior which provides functionality for various buttons in footer","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, inject } from \'@angular/core\';\\nimport { MatDialog, MatDialogConfig, MatDialogModule } from \'@angular/material/dialog\';\\nimport { dispatch, selectQuerySnapshot, selectSnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RR } from \'@hra-ui/cdk/state\';\\nimport { FooterComponent } from \'@hra-ui/components/molecules\';\\nimport { DownloadActions, DownloadSelectors, ResourceIds as Ids, LinkIds, ScreenModeSelectors } from \'@hra-ui/state\';\\nimport { ContactBehaviorComponent } from \'../contact-behavior/contact-behavior.component\';\\n\\n/** A component for footer behavior which provides functionality for various buttons in footer */\\n@Component({\\n selector: \'ftu-footer-behavior\',\\n standalone: true,\\n imports: [CommonModule, MatDialogModule, FooterComponent, ContactBehaviorComponent],\\n templateUrl: \'./footer-behavior.component.html\',\\n styleUrls: [\'./footer-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class FooterBehaviorComponent {\\n /** Input for product logo URL to displayed on the left side. */\\n readonly productLogoUrl = selectQuerySnapshot(RR.url, Ids.ProductLogoUrl);\\n\\n /** Input for product title to displayed on the left side. */\\n readonly productTitle = selectQuerySnapshot(RR.anyText, Ids.ProductTitle);\\n\\n /** Selects a snapshot of the current value of the available download formats */\\n readonly downloadFormats = selectSnapshot(DownloadSelectors.formats);\\n\\n /** Hra portal link routing after clicking on HRA Portal */\\n readonly hraPortal = LinkIds.Portal;\\n\\n /** Metadata page link routing after clicking on Illustration */\\n readonly illustrationMetadata = LinkIds.Illustration;\\n\\n /** Embed link routing after clicking on Embed */\\n readonly embed = LinkIds.Embed;\\n\\n /** A dispatcher function to download file in specified format */\\n readonly download = dispatch(DownloadActions.Download);\\n /** Selects the current value of the available ScreenMode Size */\\n readonly size = selectSnapshot(ScreenModeSelectors.size);\\n\\n /** A dialog box which shows contact modal after clicking on contact */\\n private readonly dialog = inject(MatDialog);\\n\\n /** A function which opens the contact modal dialog box */\\n contact(): void {\\n const dialogConfig = new MatDialogConfig();\\n dialogConfig.disableClose = true;\\n this.dialog.open(ContactBehaviorComponent, dialogConfig);\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n}\\n","styleUrl":"./footer-behavior.component.scss"}],"stylesData":"","templateData":"\\n\\n"},{"name":"HeaderBehaviorComponent","id":"component-HeaderBehaviorComponent-a76f74e70c7aacab4debd2492e1302dc534513cd4598dce499fc0d4f09bf0a16fc333bcb4bb100ffc9dbcb5427533473060400e0ae5eb7051dac7768474ae300","file":"src/lib/header-behavior/header-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-header-behavior","styleUrls":["./header-behavior.component.scss"],"styles":[],"templateUrl":["./header-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"aboutLink","defaultValue":"LinkIds.About","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for about link for user click action.

\\n","line":41,"rawdescription":"\\n\\nInput for about link for user click action.\\n","modifierKind":[144]},{"name":"appTitle","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.AppTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for app title to show on the left side.

\\n","line":31,"rawdescription":"\\n\\nInput for app title to show on the left side.\\n","modifierKind":[144]},{"name":"productLogoUrl","defaultValue":"selectQuerySnapshot(RR.url, Ids.ProductLogoUrl)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product logo URL to displayed on the left side.

\\n","line":21,"rawdescription":"\\n\\nInput for product logo URL to displayed on the left side.\\n","modifierKind":[144]},{"name":"productTitle","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.ProductTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product title to displayed on the left side.

\\n","line":26,"rawdescription":"\\n\\nInput for product title to displayed on the left side.\\n","modifierKind":[144]},{"name":"productTitleLink","defaultValue":"LinkIds.ProductTitle","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product title link for user click action

\\n","line":36,"rawdescription":"\\n\\nInput for product title link for user click action\\n","modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for Header Behavior

\\n","rawdescription":"\\nComponent for Header Behavior","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component } from \'@angular/core\';\\nimport { selectQuerySnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RR } from \'@hra-ui/cdk/state\';\\nimport { HeaderComponent } from \'@hra-ui/components/molecules\';\\nimport { ResourceIds as Ids, LinkIds } from \'@hra-ui/state\';\\n\\n/** Component for Header Behavior */\\n@Component({\\n selector: \'ftu-header-behavior\',\\n standalone: true,\\n imports: [CommonModule, HeaderComponent],\\n templateUrl: \'./header-behavior.component.html\',\\n styleUrls: [\'./header-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class HeaderBehaviorComponent {\\n /**\\n * Input for product logo URL to displayed on the left side.\\n */\\n readonly productLogoUrl = selectQuerySnapshot(RR.url, Ids.ProductLogoUrl);\\n\\n /**\\n * Input for product title to displayed on the left side.\\n */\\n readonly productTitle = selectQuerySnapshot(RR.anyText, Ids.ProductTitle);\\n\\n /**\\n * Input for app title to show on the left side.\\n */\\n readonly appTitle = selectQuerySnapshot(RR.anyText, Ids.AppTitle);\\n\\n /**\\n * Input for product title link for user click action\\n */\\n readonly productTitleLink = LinkIds.ProductTitle;\\n\\n /**\\n * Input for about link for user click action.\\n */\\n readonly aboutLink = LinkIds.About;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n}\\n","styleUrl":"./header-behavior.component.scss"}],"stylesData":"","templateData":"\\n\\n"},{"name":"HraLandingPageIntroWcBehaviourComponent","id":"component-HraLandingPageIntroWcBehaviourComponent-b8c2509d12b92bff8ab139855b712563f2a92e8aa91e8ecc05714063b91b1765ade0e9c6e691367a2eaa4724d94d6dfe4ade28c89da03cfcf6eae21630452b23","file":"src/lib/hra-landing-page-intro-wc-behaviour/hra-landing-page-intro-wc-behaviour.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-wc-intro","styleUrls":["./hra-landing-page-intro-wc-behaviour.component.scss"],"styles":[],"templateUrl":["./hra-landing-page-intro-wc-behaviour.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"landingPageIntroDescription","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPageDescription)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro description

\\n","line":21,"rawdescription":"\\nselect snapshot for landing page intro description","modifierKind":[144]},{"name":"landingPageIntroPartners","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPagePartners)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro partners

\\n","line":25,"rawdescription":"\\nselect snapshot for landing page intro partners","modifierKind":[144]},{"name":"landingPageIntroReadMore","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPageIntroReadMore)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro partners

\\n","line":23,"rawdescription":"\\nselect snapshot for landing page intro partners","modifierKind":[144]},{"name":"landingPageIntroTitle","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.LandingPageTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for Landing Page title

\\n","line":19,"rawdescription":"\\nselect snapshot for Landing Page title","modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for LandingPage Intro Behaviour: Web component

\\n","rawdescription":"\\nComponent for LandingPage Intro Behaviour: Web component","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { HraLandingPageIntroWcComponent } from \'@hra-ui/components/molecules\';\\nimport { ResourceRegistrySelectors as RRS } from \'@hra-ui/cdk/state\';\\nimport { selectQuerySnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceIds as RIds } from \'@hra-ui/state\';\\n\\n/** Component for LandingPage Intro Behaviour: Web component */\\n@Component({\\n selector: \'ftu-wc-intro\',\\n standalone: true,\\n imports: [CommonModule, HraLandingPageIntroWcComponent],\\n templateUrl: \'./hra-landing-page-intro-wc-behaviour.component.html\',\\n styleUrls: [\'./hra-landing-page-intro-wc-behaviour.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class HraLandingPageIntroWcBehaviourComponent {\\n /** select snapshot for Landing Page title */\\n readonly landingPageIntroTitle = selectQuerySnapshot(RRS.anyText, RIds.LandingPageTitle);\\n /** select snapshot for landing page intro description */\\n readonly landingPageIntroDescription = selectQuerySnapshot(RRS.markdown, RIds.LandingPageDescription);\\n /** select snapshot for landing page intro partners */\\n readonly landingPageIntroReadMore = selectQuerySnapshot(RRS.markdown, RIds.LandingPageIntroReadMore);\\n /** select snapshot for landing page intro partners */\\n readonly landingPageIntroPartners = selectQuerySnapshot(RRS.markdown, RIds.LandingPagePartners);\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n\\n .intro {\\n display: inline-grid;\\n border: 1px solid #e2e7e9;\\n padding: 24px 32px 24px 32px;\\n width: 71rem;\\n }\\n}\\n","styleUrl":"./hra-landing-page-intro-wc-behaviour.component.scss"}],"stylesData":"","templateData":"\\n"},{"name":"LandingPageContentComponent","id":"component-LandingPageContentComponent-d72615e2863b7f2f08c767452a75c71c9e079687610cd3e50b54f72f11546184f7ad55c5304741d79adb9bb9ea161cdac4253ae6fb1cbbf15040f2814110616a","file":"src/lib/landing-page-content/landing-page-content.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-landing-page-content","styleUrls":["./landing-page-content.component.scss"],"styles":[],"templateUrl":["./landing-page-content.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"intersectableEls","deprecated":false,"deprecationMessage":"","type":"QueryList","optional":false,"description":"

array of element refs for intersectables

\\n","line":34,"rawdescription":"\\narray of element refs for intersectables","decorators":[{"name":"ViewChildren","stringifiedArguments":"\'intersectable\', {read: ElementRef}"}],"modifierKind":[144]},{"name":"landingPageDepthDescription","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPageDepthDescription)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page depth description

\\n","line":57,"rawdescription":"\\nselect snapshot for landing page depth description","modifierKind":[144]},{"name":"landingPageDepthImg","defaultValue":"selectQuerySnapshot(RRS.url, RIds.LandingPageDepthImg)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page depth img

\\n","line":61,"rawdescription":"\\nselect snapshot for landing page depth img","modifierKind":[144]},{"name":"landingPageDepthMoreText","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.LandingPageDepthMoreText)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot forlanding page depth more text

\\n","line":59,"rawdescription":"\\nselect snapshot forlanding page depth more text","modifierKind":[144]},{"name":"landingPageDepthTitle","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.LandingPageDepthTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page depth title

\\n","line":55,"rawdescription":"\\nselect snapshot for landing page depth title","modifierKind":[144]},{"name":"landingPageIntroDescription","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPageDescription)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro description

\\n","line":40,"rawdescription":"\\nselect snapshot for landing page intro description","modifierKind":[144]},{"name":"landingPageIntroImg","defaultValue":"selectQuerySnapshot(RRS.url, RIds.LandingPageIntroImg)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro img

\\n","line":47,"rawdescription":"\\nselect snapshot for landing page intro img","modifierKind":[144]},{"name":"landingPageIntroMoreText","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.LandingPageIntroMoreText)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro more text

\\n","line":45,"rawdescription":"\\nselect snapshot for landing page intro more text","modifierKind":[144]},{"name":"landingPageIntroPartners","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPagePartners)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro partners

\\n","line":42,"rawdescription":"\\nselect snapshot for landing page intro partners","modifierKind":[144]},{"name":"landingPageIntroTitle","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.LandingPageTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for Landing Page title

\\n","line":37,"rawdescription":"\\nselect snapshot for Landing Page title","modifierKind":[144]},{"name":"LinkIds","defaultValue":"LinkIds","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Expose links for use it template

\\n","line":64,"rawdescription":"\\nExpose links for use it template","modifierKind":[144]},{"name":"metrics","defaultValue":"selectQuerySnapshot(RRS.field, RIds.Metrics, RTypes.Metrics, \'metrics\' as const, [])","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for metrics

\\n","line":49,"rawdescription":"\\nselect snapshot for metrics","modifierKind":[144]},{"name":"metricsLogo","defaultValue":"selectQuerySnapshot(RRS.url, RIds.MetricsLogo)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for metrics logo

\\n","line":53,"rawdescription":"\\nselect snapshot for metrics logo","modifierKind":[144]},{"name":"metricsTitle","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.MetricsTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for metrics title

\\n","line":51,"rawdescription":"\\nselect snapshot for metrics title","modifierKind":[144]}],"methodsClass":[{"name":"handleIntersection","args":[{"name":"entries","type":"IntersectionObserverEntry[]","deprecated":false,"deprecationMessage":""},{"name":"observer","type":"IntersectionObserver","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"void","typeParameters":[],"line":82,"deprecated":false,"deprecationMessage":"","rawdescription":"\\ncallback function for intersection observer","description":"

callback function for intersection observer

\\n","jsdoctags":[{"name":"entries","type":"IntersectionObserverEntry[]","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}},{"name":"observer","type":"IntersectionObserver","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for LandingPageContent Behavior

\\n","rawdescription":"\\nComponent for LandingPageContent Behavior","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport {\\n AfterViewInit,\\n ChangeDetectionStrategy,\\n Component,\\n ElementRef,\\n inject,\\n QueryList,\\n Renderer2,\\n ViewChildren,\\n} from \'@angular/core\';\\nimport { injectDestroy$, selectQuerySnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RRS } from \'@hra-ui/cdk/state\';\\nimport {\\n LandingPageInDepthComponent,\\n LandingPageIntroComponent,\\n MetricItem,\\n MetricsComponent,\\n} from \'@hra-ui/components/molecules\';\\nimport { LinkIds, ResourceIds as RIds, ResourceTypes as RTypes } from \'@hra-ui/state\';\\n\\n/** Component for LandingPageContent Behavior */\\n@Component({\\n selector: \'ftu-landing-page-content\',\\n standalone: true,\\n imports: [CommonModule, LandingPageIntroComponent, MetricsComponent, LandingPageInDepthComponent],\\n templateUrl: \'./landing-page-content.component.html\',\\n styleUrls: [\'./landing-page-content.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class LandingPageContentComponent implements AfterViewInit {\\n /** array of element refs for intersectables */\\n @ViewChildren(\'intersectable\', { read: ElementRef })\\n readonly intersectableEls!: QueryList;\\n\\n /** select snapshot for Landing Page title */\\n readonly landingPageIntroTitle = selectQuerySnapshot(RRS.anyText, RIds.LandingPageTitle);\\n\\n /** select snapshot for landing page intro description */\\n readonly landingPageIntroDescription = selectQuerySnapshot(RRS.markdown, RIds.LandingPageDescription);\\n /** select snapshot for landing page intro partners */\\n readonly landingPageIntroPartners = selectQuerySnapshot(RRS.markdown, RIds.LandingPagePartners);\\n\\n /** select snapshot for landing page intro more text */\\n readonly landingPageIntroMoreText = selectQuerySnapshot(RRS.anyText, RIds.LandingPageIntroMoreText);\\n /** select snapshot for landing page intro img */\\n readonly landingPageIntroImg = selectQuerySnapshot(RRS.url, RIds.LandingPageIntroImg);\\n /** select snapshot for metrics */\\n readonly metrics = selectQuerySnapshot(RRS.field, RIds.Metrics, RTypes.Metrics, \'metrics\' as const, []);\\n /** select snapshot for metrics title */\\n readonly metricsTitle = selectQuerySnapshot(RRS.anyText, RIds.MetricsTitle);\\n /** select snapshot for metrics logo */\\n readonly metricsLogo = selectQuerySnapshot(RRS.url, RIds.MetricsLogo);\\n /** select snapshot for landing page depth title */\\n readonly landingPageDepthTitle = selectQuerySnapshot(RRS.anyText, RIds.LandingPageDepthTitle);\\n /** select snapshot for landing page depth description */\\n readonly landingPageDepthDescription = selectQuerySnapshot(RRS.markdown, RIds.LandingPageDepthDescription);\\n /** select snapshot forlanding page depth more text */\\n readonly landingPageDepthMoreText = selectQuerySnapshot(RRS.anyText, RIds.LandingPageDepthMoreText);\\n /** select snapshot for landing page depth img */\\n readonly landingPageDepthImg = selectQuerySnapshot(RRS.url, RIds.LandingPageDepthImg);\\n\\n /** Expose links for use it template */\\n readonly LinkIds = LinkIds;\\n\\n /** Renderer to add class for animation */\\n private readonly renderer = inject(Renderer2);\\n /** destroys observer */\\n private readonly destroy$ = injectDestroy$();\\n\\n /** creates an observer after view init */\\n ngAfterViewInit(): void {\\n const observer = new IntersectionObserver(this.handleIntersection.bind(this), {\\n threshold: 0.18,\\n });\\n\\n this.intersectableEls.forEach((el) => observer.observe(el.nativeElement));\\n this.destroy$.subscribe(() => observer.disconnect());\\n }\\n\\n /** callback function for intersection observer */\\n handleIntersection(entries: IntersectionObserverEntry[], observer: IntersectionObserver): void {\\n for (const { isIntersecting, target } of entries) {\\n if (isIntersecting) {\\n this.renderer.addClass(target, \'visible\');\\n observer.unobserve(target);\\n }\\n }\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n overflow-x: hidden;\\n\\n .intro {\\n margin: 3.5rem 2rem;\\n }\\n\\n .metrics {\\n opacity: 0;\\n\\n &.visible {\\n animation: fadeIn 2s ease-in forwards;\\n }\\n }\\n\\n .in-depth {\\n opacity: 0;\\n\\n &.visible {\\n overflow: hidden;\\n animation: slideIn 2s ease-in-out forwards;\\n }\\n }\\n}\\n\\n@keyframes fadeIn {\\n 0% {\\n opacity: 0;\\n }\\n\\n 100% {\\n opacity: 1;\\n }\\n}\\n\\n@keyframes slideIn {\\n 0% {\\n transform: translateX(200%);\\n opacity: 1;\\n }\\n\\n 100% {\\n transform: translateX(0);\\n opacity: 1;\\n }\\n}\\n","styleUrl":"./landing-page-content.component.scss"}],"stylesData":"","implements":["AfterViewInit"],"templateData":"\\n\\n\\n\\n\\n\\n"},{"name":"MedicalIllustrationBehaviorComponent","id":"component-MedicalIllustrationBehaviorComponent-6fea78f0a6011315eef3ff0e9cf3f451130b68d93388f1b8ff7f362f6c7f2ec8bbad2f6518d0329f94a749b1e02a1018129acf2b8340f015397957c3e0fd985d","file":"src/lib/medical-illustration-behavior/medical-illustration-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-medical-illustration-behavior","styleUrls":["./medical-illustration-behavior.component.scss"],"styles":[],"templateUrl":["./medical-illustration-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"currentUrl","defaultValue":"selectSnapshot(IllustratorSelectors.url)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Current illustration url

\\n","line":23,"rawdescription":"\\n\\nCurrent illustration url\\n","modifierKind":[144]},{"name":"iri","defaultValue":"selectSnapshot(ActiveFtuSelectors.iri)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Iri of medical illustration behavior component

\\n","line":33,"rawdescription":"\\n\\nIri of medical illustration behavior component\\n","modifierKind":[144]},{"name":"mapping","defaultValue":"selectSnapshot(IllustratorSelectors.mapping)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Current mapping file

\\n","line":28,"rawdescription":"\\n\\nCurrent mapping file\\n","modifierKind":[144]},{"name":"tissues","defaultValue":"selectSnapshot(TissueLibrarySelectors.tissues)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Get all tissues

\\n","line":38,"rawdescription":"\\n\\nGet all tissues\\n","modifierKind":[144]},{"name":"updateNodeOnClicked","defaultValue":"dispatch(IllustratorActions.SetClicked)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Updates the active node on node click

\\n","line":57,"rawdescription":"\\n\\nUpdates the active node on node click\\n","modifierKind":[144]},{"name":"updateNodeOnHover","defaultValue":"dispatch(IllustratorActions.SetHover)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Updates the active node on node hover

\\n","line":52,"rawdescription":"\\n\\nUpdates the active node on node hover\\n","modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Behavior component for medical illustration component

\\n","rawdescription":"\\n\\nBehavior component for medical illustration component\\n","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component } from \'@angular/core\';\\nimport { dispatch, selectSnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { LabelBoxComponent } from \'@hra-ui/components/atoms\';\\nimport { InteractiveSvgComponent } from \'@hra-ui/components/molecules\';\\nimport { ActiveFtuSelectors, IllustratorActions, IllustratorSelectors, TissueLibrarySelectors } from \'@hra-ui/state\';\\n\\n/**\\n * Behavior component for medical illustration component\\n */\\n@Component({\\n selector: \'ftu-medical-illustration-behavior\',\\n standalone: true,\\n imports: [CommonModule, InteractiveSvgComponent, LabelBoxComponent],\\n templateUrl: \'./medical-illustration-behavior.component.html\',\\n styleUrls: [\'./medical-illustration-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class MedicalIllustrationBehaviorComponent {\\n /**\\n * Current illustration url\\n */\\n readonly currentUrl = selectSnapshot(IllustratorSelectors.url);\\n\\n /**\\n * Current mapping file\\n */\\n readonly mapping = selectSnapshot(IllustratorSelectors.mapping);\\n\\n /**\\n * Iri of medical illustration behavior component\\n */\\n readonly iri = selectSnapshot(ActiveFtuSelectors.iri);\\n\\n /**\\n * Get all tissues\\n */\\n readonly tissues = selectSnapshot(TissueLibrarySelectors.tissues);\\n\\n /**\\n * Gets tissue title from the list of tissues\\n */\\n get tissueTitle(): string {\\n const iri = this.iri();\\n const tissues = this.tissues();\\n return iri ? tissues[iri].label : \'\';\\n }\\n\\n /**\\n * Updates the active node on node hover\\n */\\n readonly updateNodeOnHover = dispatch(IllustratorActions.SetHover);\\n\\n /**\\n * Updates the active node on node click\\n */\\n readonly updateNodeOnClicked = dispatch(IllustratorActions.SetClicked);\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n hra-label-box {\\n border-bottom: 0.063rem solid #d3d3d3;\\n width: 100%;\\n height: 3.5rem;\\n }\\n}\\n","styleUrl":"./medical-illustration-behavior.component.scss"}],"stylesData":"","accessors":{"tissueTitle":{"name":"tissueTitle","getSignature":{"name":"tissueTitle","type":"string","returnType":"string","line":43,"rawdescription":"\\n\\nGets tissue title from the list of tissues\\n","description":"

Gets tissue title from the list of tissues

\\n"}}},"templateData":"{{ tissueTitle }}\\n\\n\\n"},{"name":"ScreenNoticeBehaviorComponent","id":"component-ScreenNoticeBehaviorComponent-de4fc156bf7f658d9ca0a8d114626d829387a03f3b206cb5439f1ad22b9e157cbc51e850b06eb8f0b9dd48a75acb723b42c7fd79d0c50694757e9d23cac9f416","file":"src/lib/screen-notice-behavior/screen-notice-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-ui-screen-notice-behavior","styleUrls":["./screen-notice-behavior.component.scss"],"styles":[],"templateUrl":["./screen-notice-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"content","defaultValue":"selectQuerySnapshot(RR.anyText, ResourceIds.ScreenSizeNoticeContent)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Content of screen notice behavior component

\\n","line":21,"rawdescription":"\\nContent of screen notice behavior component","modifierKind":[144]},{"name":"portal","defaultValue":"LinkIds.Portal","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Hra portal link routing after clicking on HRA Portal

\\n","line":24,"rawdescription":"\\nHra portal link routing after clicking on HRA Portal","modifierKind":[144]}],"methodsClass":[{"name":"close","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":33,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which closes the screen size notice dialog box","description":"

A function which closes the screen size notice dialog box

\\n"}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

A component for screen size notice behavior which provides the content to be displayed and provides functionality\\nfor the buttons on the notice modal

\\n","rawdescription":"\\nA component for screen size notice behavior which provides the content to be displayed and provides functionality\\nfor the buttons on the notice modal","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, inject } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { dispatch, selectQuerySnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RR, StorageActions, StorageId } from \'@hra-ui/cdk/state\';\\nimport { ResourceIds, LinkIds } from \'@hra-ui/state\';\\nimport { ScreenSizeNoticeComponent } from \'@hra-ui/components/molecules\';\\nimport { MatDialogRef } from \'@angular/material/dialog\';\\n\\n/** A component for screen size notice behavior which provides the content to be displayed and provides functionality\\n * for the buttons on the notice modal */\\n@Component({\\n selector: \'ftu-ui-screen-notice-behavior\',\\n standalone: true,\\n imports: [CommonModule, ScreenSizeNoticeComponent],\\n templateUrl: \'./screen-notice-behavior.component.html\',\\n styleUrls: [\'./screen-notice-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class ScreenNoticeBehaviorComponent {\\n /** Content of screen notice behavior component*/\\n readonly content = selectQuerySnapshot(RR.anyText, ResourceIds.ScreenSizeNoticeContent);\\n\\n /** Hra portal link routing after clicking on HRA Portal*/\\n readonly portal = LinkIds.Portal;\\n\\n /** Reference for the screen size notice dialog box*/\\n private readonly ref = inject(MatDialogRef, { optional: true });\\n\\n /** A dispatcher function that sets the Local Storage as \'shown\'*/\\n private readonly setScreenNoticeShown = dispatch(StorageActions.Set, StorageId.Local, \'screen-size-notice\', \'shown\');\\n\\n /** A function which closes the screen size notice dialog box*/\\n close(): void {\\n this.setScreenNoticeShown();\\n this.ref?.close();\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n}\\n","styleUrl":"./screen-notice-behavior.component.scss"}],"stylesData":"","templateData":" \\n"},{"name":"TissueLibraryBehaviorComponent","id":"component-TissueLibraryBehaviorComponent-1565978e9f70870b546b49f929236ee86c2eb9cc241e10b805863df59e4d66dca72495ffa8c27a7f282e396acc84f78b6724255570a4eab733a3af995543b47a","file":"src/lib/tissue-library-behavior/tissue-library-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-tissue-library-behavior","styleUrls":["./tissue-library-behavior.component.scss"],"styles":[],"templateUrl":["./tissue-library-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"list","deprecated":false,"deprecationMessage":"","type":"TissueTreeListComponent","optional":true,"description":"

Reference to the TissueTreeListComponent.

\\n","line":25,"rawdescription":"\\n\\nReference to the TissueTreeListComponent.\\n","decorators":[{"name":"ViewChild","stringifiedArguments":"\'list\', {static: true}"}],"modifierKind":[144]},{"name":"selected","deprecated":false,"deprecationMessage":"","type":"Tissue","optional":true,"description":"

Selected of tissue library behavior component

\\n","line":34,"rawdescription":"\\n\\nSelected of tissue library behavior component\\n"},{"name":"tissues","defaultValue":"selectSnapshot(TissueLibrarySelectors.tissues)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for tissues data

\\n","line":30,"rawdescription":"\\n\\nInput for tissues data\\n","modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for Tissue Library Behavior

\\n","rawdescription":"\\n\\nComponent for Tissue Library Behavior\\n","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, ViewChild } from \'@angular/core\';\\nimport { select$, selectSnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { TissueTreeListComponent } from \'@hra-ui/components/molecules\';\\nimport { Tissue } from \'@hra-ui/services\';\\nimport { ActiveFtuSelectors, TissueLibrarySelectors } from \'@hra-ui/state\';\\nimport { LabelBoxComponent } from \'@hra-ui/components/atoms\';\\n\\n/**\\n * Component for Tissue Library Behavior\\n */\\n@Component({\\n selector: \'ftu-tissue-library-behavior\',\\n standalone: true,\\n imports: [CommonModule, LabelBoxComponent, TissueTreeListComponent],\\n templateUrl: \'./tissue-library-behavior.component.html\',\\n styleUrls: [\'./tissue-library-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class TissueLibraryBehaviorComponent {\\n /**\\n * Reference to the TissueTreeListComponent.\\n */\\n @ViewChild(\'list\', { static: true })\\n readonly list?: TissueTreeListComponent;\\n\\n /**\\n * Input for tissues data\\n */\\n readonly tissues = selectSnapshot(TissueLibrarySelectors.tissues);\\n /**\\n * Selected of tissue library behavior component\\n */\\n selected?: Tissue;\\n\\n /**\\n * Sets the TissueItem instance as undefined if\\n * the url is undefined\\n */\\n constructor() {\\n /** Get iris from the observable else reset selection if\\n * iri is undefined\\n */\\n select$(ActiveFtuSelectors.iri).subscribe((iri) => {\\n this.selected = iri && this.tissues()[iri];\\n if (iri === undefined) {\\n this.list?.resetSelection();\\n }\\n });\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n .label {\\n border-bottom: 1px solid #e2e7e9;\\n width: 100%;\\n height: 3.5rem;\\n }\\n}\\n","styleUrl":"./tissue-library-behavior.component.scss"}],"stylesData":"","constructorObj":{"name":"constructor","description":"

Sets the TissueItem instance as undefined if\\nthe url is undefined

\\n","deprecated":false,"deprecationMessage":"","args":[],"line":34,"rawdescription":"\\n\\nSets the TissueItem instance as undefined if\\nthe url is undefined\\n"},"templateData":"FTU Library\\n \\n"}],"modules":[],"miscellaneous":{"variables":[{"name":"EMPTY_TISSUE_INFO","ctype":"miscellaneous","subtype":"variable","file":"src/lib/biomarker-details/biomarker-details.component.ts","deprecated":false,"deprecationMessage":"","type":"TissueInfo","defaultValue":"{\\n id: \'\',\\n label: \'\',\\n}","rawdescription":"PlaceHolder for Empty Tissue Info","description":"

PlaceHolder for Empty Tissue Info

\\n"},{"name":"EMPTY_TISSUE_INFO","ctype":"miscellaneous","subtype":"variable","file":"src/lib/biomarker-details-wc/biomarker-details-wc.component.ts","deprecated":false,"deprecationMessage":"","type":"TissueInfo","defaultValue":"{\\n id: \'\',\\n label: \'\',\\n}","rawdescription":"PlaceHolder for Empty Tissue Info","description":"

PlaceHolder for Empty Tissue Info

\\n"}],"functions":[],"typealiases":[],"enumerations":[],"groupedVariables":{"src/lib/biomarker-details/biomarker-details.component.ts":[{"name":"EMPTY_TISSUE_INFO","ctype":"miscellaneous","subtype":"variable","file":"src/lib/biomarker-details/biomarker-details.component.ts","deprecated":false,"deprecationMessage":"","type":"TissueInfo","defaultValue":"{\\n id: \'\',\\n label: \'\',\\n}","rawdescription":"PlaceHolder for Empty Tissue Info","description":"

PlaceHolder for Empty Tissue Info

\\n"}],"src/lib/biomarker-details-wc/biomarker-details-wc.component.ts":[{"name":"EMPTY_TISSUE_INFO","ctype":"miscellaneous","subtype":"variable","file":"src/lib/biomarker-details-wc/biomarker-details-wc.component.ts","deprecated":false,"deprecationMessage":"","type":"TissueInfo","defaultValue":"{\\n id: \'\',\\n label: \'\',\\n}","rawdescription":"PlaceHolder for Empty Tissue Info","description":"

PlaceHolder for Empty Tissue Info

\\n"}]},"groupedFunctions":{},"groupedEnumerations":{},"groupedTypeAliases":{}}}')},"./dist/compodoc/components-molecules/documentation.json":module=>{"use strict";module.exports=JSON.parse('{"pipes":[],"interfaces":[{"name":"ContactData","id":"interface-ContactData-309310b2740da63be5ea5aaa894ef73ced8bed2a86b50643af4dd031551d6cdb7b26ece6b3328d0e31c21e46f940bd8b901f5665c241ca2a4cb38f39631bd8a3","file":"src/lib/contact-modal/contact-modal.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EmailInputComponent, RequiredInputComponent, RequiredTextboxComponent } from \'@hra-ui/components/atoms\';\\nimport { produce } from \'immer\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/**\\n An interface representing contact data information which will be emitted if all the fields are in correct format.\\n */\\nexport interface ContactData {\\n /** The email address of the person submitting the form. */\\n email: string;\\n /** The subject line of the message being sent. */\\n subject: string;\\n /** The body of the message being sent. */\\n message: string;\\n}\\n\\n/** Initial empty contact data */\\nconst EMPTY_CONTACT_DATA: Partial = {\\n email: undefined,\\n subject: undefined,\\n message: undefined,\\n};\\n\\n/**\\n * Contact modal component.\\n */\\n@Component({\\n selector: \'hra-contact-modal\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatButtonModule,\\n MatIconModule,\\n EmailInputComponent,\\n MarkdownModule,\\n RequiredTextboxComponent,\\n RequiredInputComponent,\\n ],\\n templateUrl: \'./contact-modal.component.html\',\\n styleUrls: [\'./contact-modal.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class ContactModalComponent {\\n /** Input for product logo URL to displayed on the left side. */\\n @Input() productLogoUrl = \'\';\\n\\n /** Input for product title to displayed on the left side. */\\n @Input() productTitle = \'\';\\n\\n /** Emits when the submit button is clicked and all the values are appropriate. */\\n @Output() readonly submitClick = new EventEmitter();\\n\\n /** Emits when the cancel button or close icon is clicked */\\n @Output() readonly closeClick = new EventEmitter();\\n\\n /** A function to disable the submit button. If all the values are in approproiate format, then it will be enabled. */\\n get disableSubmit(): boolean {\\n return Object.values(this.contactData).some((value) => value === undefined);\\n }\\n\\n /** Asigns the undefined initially to all the input fields. */\\n contactData = EMPTY_CONTACT_DATA;\\n\\n /** Updates the contact data object with a new value for a given key. */\\n updateData(key: K, value?: ContactData[K]): void {\\n this.contactData = produce(this.contactData, (draft) => {\\n draft[key] = value;\\n });\\n }\\n\\n /** It emits the updated value of contact data */\\n submit(): void {\\n this.submitClick.emit(this.contactData as ContactData);\\n }\\n}\\n","properties":[{"name":"email","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

The email address of the person submitting the form.

\\n","line":14,"rawdescription":"\\nThe email address of the person submitting the form."},{"name":"message","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

The body of the message being sent.

\\n","line":18,"rawdescription":"\\nThe body of the message being sent."},{"name":"subject","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

The subject line of the message being sent.

\\n","line":16,"rawdescription":"\\nThe subject line of the message being sent."}],"indexSignatures":[],"kind":165,"description":"

An interface representing contact data information which will be emitted if all the fields are in correct format.

\\n","rawdescription":"\\n\\nAn interface representing contact data information which will be emitted if all the fields are in correct format.\\n","methods":[]},{"name":"DataItem","id":"interface-DataItem-dba50a1e9cbac5f9733930bd6b04d1ac5fda31ee6342e13da75314f7b5dbbf46c436aab104bfc47abdc323e9ff42aeeb0047ee89577f639d3979c6964344bbd7","file":"src/lib/biomarker-table-data-card/biomarker-table-data-card.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule } from \'@angular/material/table\';\\n\\n/** An item which defines a string label and a string value */\\nexport interface DataItem {\\n /** A string property that represents the label */\\n label: string;\\n /** A string property that represents the value */\\n value: string;\\n}\\n\\n/** An item which represents a section with a data item and an indicator for the last item in the section */\\nexport interface SectionItem {\\n /** A number property that represents the section number */\\n section: number;\\n /** A DateItem property that represents a section and its data */\\n data: DataItem;\\n /** A boolean property that represents the last item of a section */\\n isLastItem: boolean;\\n}\\n\\n/** This component displays a table with sections, where each section contains a list of items with a label and a value. */\\n@Component({\\n selector: \'hra-biomarker-table-data-card\',\\n standalone: true,\\n imports: [CommonModule, MatTableModule],\\n templateUrl: \'./biomarker-table-data-card.component.html\',\\n styleUrls: [\'./biomarker-table-data-card.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableDataCardComponent implements OnChanges {\\n /** Nested list of DataItems for each section which is displayed to the user */\\n @Input() data: DataItem[][] = [];\\n\\n /** Converted nested array of DataItem into Flat array of SectionItem */\\n sectionItems: SectionItem[] = [];\\n\\n /** Triggers an update on sectionItems array when data is changed */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.updateSectionItems();\\n }\\n }\\n\\n /** Updates sectionItems array when data is changed */\\n private updateSectionItems(): void {\\n const newSectionItems: SectionItem[] = [];\\n\\n this.data.forEach((section, sectionIndex) => {\\n section.forEach((item, itemIndex) => {\\n newSectionItems.push({\\n data: item,\\n section: sectionIndex,\\n isLastItem: itemIndex === section.length - 1,\\n });\\n });\\n });\\n\\n this.sectionItems = newSectionItems;\\n }\\n}\\n","properties":[{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

A string property that represents the label

\\n","line":8,"rawdescription":"\\nA string property that represents the label"},{"name":"value","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

A string property that represents the value

\\n","line":10,"rawdescription":"\\nA string property that represents the value"}],"indexSignatures":[],"kind":165,"description":"

An item which defines a string label and a string value

\\n","rawdescription":"\\nAn item which defines a string label and a string value","methods":[]},{"name":"DataNode","id":"interface-DataNode-8544338e8c5e11dd440f8b104bfa31552155bc5006289770258a8e940978177df7797adcb9bafb5b09a9943913ecf339692d528f868c6846be5c3de8a6270237","file":"src/lib/tissue-tree-list/tissue-tree-list.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { FlatTreeControl } from \'@angular/cdk/tree\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n Input,\\n OnChanges,\\n Output,\\n SimpleChanges,\\n} from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatRippleModule } from \'@angular/material/core\';\\nimport { MatExpansionModule } from \'@angular/material/expansion\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatTreeFlatDataSource, MatTreeFlattener, MatTreeModule } from \'@angular/material/tree\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { LinkId } from \'@hra-ui/cdk/state\';\\n\\n/** Base node type */\\nexport interface DataNode {\\n /** User readable label */\\n label: string;\\n /** Id to pass as a query parameter on navigation */\\n id?: string;\\n /** Link to navigate to on node click */\\n link?: LinkId;\\n /** Nested nodes */\\n children?: K[];\\n}\\n\\n/**\\n * Internal interface for flat tissue data hierarchy\\n */\\ninterface InternalNode> {\\n /** Displayed label */\\n label: string;\\n /** Whether the node can be expanded to display child nodes */\\n expandable: boolean;\\n /** Depth of node in the tree */\\n level: number;\\n /** Associated user node data */\\n data: T;\\n}\\n\\n/**\\n * Tabular View for hubMap tissue side-bar\\n */\\n@Component({\\n selector: \'hra-tissue-tree-list\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatButtonModule,\\n MatTreeModule,\\n MatIconModule,\\n MatExpansionModule,\\n MatRippleModule,\\n LinkDirective,\\n ],\\n templateUrl: \'./tissue-tree-list.component.html\',\\n styleUrls: [\'./tissue-tree-list.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class TissueTreeListComponent> implements OnChanges {\\n /**\\n * Input of tissue tree list component\\n */\\n @Input() nodes: Record = {} as Record;\\n\\n /**\\n * Node selected, to view the data associated with it\\n */\\n @Input() selected?: T = undefined;\\n\\n /**\\n * Output of tissue tree list component\\n */\\n @Output() readonly selectedChange = new EventEmitter();\\n\\n /**\\n * tree controller, used to control the nodes in the tree\\n */\\n readonly control = new FlatTreeControl>(\\n (node) => node.level,\\n (node) => node.expandable\\n );\\n\\n /**\\n * Flattener of tissue tree list component, returns flat-data structure\\n */\\n readonly flattener = new MatTreeFlattener>(\\n (node, level) => ({\\n label: node.label,\\n expandable: (node.children?.length ?? 0) > 0,\\n level,\\n data: node,\\n }),\\n (node) => node.level,\\n (node) => node.expandable,\\n (node) => node.children?.map((id) => this.nodes[id])\\n );\\n\\n /**\\n * Data source of tissue tree list component, defines the data in mat-tree\\n */\\n readonly dataSource = new MatTreeFlatDataSource(this.control, this.flattener);\\n\\n /**\\n * Take actions if any data changes\\n * @param changes changes in data\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'nodes\' in changes) {\\n this.dataSource.data = this.findRootNodes();\\n }\\n if (\'selected\' in changes) {\\n const path = this.selected ? this.dfsFindPath(this.findRootNodes(), this.selected) : [];\\n this.expandPath(path);\\n }\\n }\\n\\n /**\\n * check if the current node has children\\n * @param node current selected node\\n * @returns boolean, which means if node has children\\n */\\n hasChild(_: number, node: InternalNode): boolean {\\n return node.expandable;\\n }\\n\\n /**\\n * It selects the node, which is clicked.\\n * @param node Tissue Tree Item, which is clicked\\n */\\n selectNode(node: T): void {\\n if (this.selected !== node) {\\n this.selected = node;\\n this.selectedChange.emit(this.selected);\\n }\\n }\\n\\n /**\\n * Resets selection and collapes all nodes of the tree.\\n */\\n resetSelection(): void {\\n this.selected = undefined;\\n this.control.collapseAll();\\n }\\n\\n /**\\n * It creates a copy of the input nodes object.\\n * It iterates over it and removes all the children nodes from it.\\n * @returns remaining nodes which are root nodes.\\n */\\n private findRootNodes(): T[] {\\n const { nodes } = this;\\n const roots = { ...this.nodes };\\n for (const key in nodes) {\\n for (const child of nodes[key].children ?? []) {\\n delete roots[child];\\n }\\n }\\n\\n return Object.values(roots);\\n }\\n\\n /**\\n * expands the tree nodes based on the path provided.\\n * @param path is given as an input.\\n */\\n private expandPath(path: DataNode[]): void {\\n const nodes = this.control.dataNodes.filter((node) => path.includes(node.data));\\n nodes.forEach((node) => this.control.expand(node));\\n }\\n\\n /**\\n * It used the logic of depth first search to find the target node.\\n * returns the path to the target node.\\n */\\n private dfsFindPath(nodes: T[], target: T, path: T[] = []): T[] {\\n for (const node of nodes) {\\n path.push(node);\\n if (node === target) {\\n return path;\\n }\\n\\n const savedLength = path.length;\\n const children = node.children?.map((id) => this.nodes[id]) ?? [];\\n if (this.dfsFindPath(children, target, path).length > savedLength) {\\n return path;\\n }\\n\\n path.pop();\\n }\\n\\n return path;\\n }\\n}\\n","properties":[{"name":"children","deprecated":false,"deprecationMessage":"","type":"K[]","optional":true,"description":"

Nested nodes

\\n","line":29,"rawdescription":"\\nNested nodes"},{"name":"id","deprecated":false,"deprecationMessage":"","type":"string","optional":true,"description":"

Id to pass as a query parameter on navigation

\\n","line":25,"rawdescription":"\\nId to pass as a query parameter on navigation"},{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

User readable label

\\n","line":23,"rawdescription":"\\nUser readable label"},{"name":"link","deprecated":false,"deprecationMessage":"","type":"LinkId","optional":true,"description":"

Link to navigate to on node click

\\n","line":27,"rawdescription":"\\nLink to navigate to on node click"}],"indexSignatures":[],"kind":165,"description":"

Base node type

\\n","rawdescription":"\\nBase node type","methods":[]},{"name":"DownloadFormat","id":"interface-DownloadFormat-45c5a61fc5d68c201808fb76ff867f9a7cf8e42e6ef95ae08b440dbd37ce63eb4c77c3da0597ef90973854d65522a3ba496eeb5eccbe75750c1fd2f5abf52e6b","file":"src/lib/footer/footer.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { ConnectedPosition, OverlayModule } from \'@angular/cdk/overlay\';\\nimport { MatListModule } from \'@angular/material/list\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { EMPTY_LINK } from \'@hra-ui/cdk/state\';\\n\\n/**\\n * Base type for different download format options.\\n */\\nexport interface DownloadFormat {\\n /**\\n * User readable format label\\n */\\n label: string;\\n}\\n\\n/**\\n * Positioning value for the download list popup\\n */\\nconst DOWNLOADS_LIST_POSITION: ConnectedPosition[] = [\\n {\\n panelClass: \'above\',\\n originX: \'start\',\\n originY: \'top\',\\n overlayX: \'start\',\\n overlayY: \'bottom\',\\n offsetY: 0,\\n },\\n {\\n panelClass: \'below\',\\n originX: \'start\',\\n originY: \'bottom\',\\n overlayX: \'start\',\\n overlayY: \'top\',\\n },\\n];\\n\\n/**\\n * Component for footer that displays its content at the bottom of the page with different action buttons.\\n */\\n@Component({\\n selector: \'hra-footer\',\\n standalone: true,\\n imports: [CommonModule, MatButtonModule, MatIconModule, OverlayModule, MatListModule, LinkDirective],\\n templateUrl: \'./footer.component.html\',\\n styleUrls: [\'./footer.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class FooterComponent {\\n /** Host binding of footer component */\\n @HostBinding(\'class\')\\n @Input()\\n size: \'small\' | \'large\' = \'large\';\\n\\n /** Input for product logo URL to displayed on the left side. */\\n @Input() productLogoUrl = \'\';\\n\\n /** Input for product title to displayed on the left side. */\\n @Input() productTitle = \'\';\\n\\n /** Input for HRA Portal link */\\n @Input() hraPortal = EMPTY_LINK;\\n\\n /** Input for Illustration metadata page link in HRA Portal */\\n @Input() illustrationMetadata = EMPTY_LINK;\\n\\n /** Input for embed link in HRA Portal */\\n @Input() embed = EMPTY_LINK;\\n\\n /** Different download formats options displayed to the user */\\n @Input() downloadFormats: T[] = [];\\n\\n /** Emits the selected download format */\\n @Output() readonly download = new EventEmitter();\\n\\n /** Emits when the contact button is clicked */\\n @Output() readonly contactClick = new EventEmitter();\\n\\n /** Download list popup overlay positioning */\\n readonly DOWNLOADS_LIST_POSITION = DOWNLOADS_LIST_POSITION;\\n\\n /** Gets whether the footer required is small */\\n get isSmall(): boolean {\\n return this.size === \'small\';\\n }\\n\\n /** Whether the download list panel is open */\\n downloadListOpen = false;\\n}\\n","properties":[{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

User readable format label

\\n","line":17,"rawdescription":"\\n\\nUser readable format label\\n"}],"indexSignatures":[],"kind":165,"description":"

Base type for different download format options.

\\n","rawdescription":"\\n\\nBase type for different download format options.\\n","methods":[]},{"name":"InternalNode","id":"interface-InternalNode-8544338e8c5e11dd440f8b104bfa31552155bc5006289770258a8e940978177df7797adcb9bafb5b09a9943913ecf339692d528f868c6846be5c3de8a6270237","file":"src/lib/tissue-tree-list/tissue-tree-list.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { FlatTreeControl } from \'@angular/cdk/tree\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n Input,\\n OnChanges,\\n Output,\\n SimpleChanges,\\n} from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatRippleModule } from \'@angular/material/core\';\\nimport { MatExpansionModule } from \'@angular/material/expansion\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatTreeFlatDataSource, MatTreeFlattener, MatTreeModule } from \'@angular/material/tree\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { LinkId } from \'@hra-ui/cdk/state\';\\n\\n/** Base node type */\\nexport interface DataNode {\\n /** User readable label */\\n label: string;\\n /** Id to pass as a query parameter on navigation */\\n id?: string;\\n /** Link to navigate to on node click */\\n link?: LinkId;\\n /** Nested nodes */\\n children?: K[];\\n}\\n\\n/**\\n * Internal interface for flat tissue data hierarchy\\n */\\ninterface InternalNode> {\\n /** Displayed label */\\n label: string;\\n /** Whether the node can be expanded to display child nodes */\\n expandable: boolean;\\n /** Depth of node in the tree */\\n level: number;\\n /** Associated user node data */\\n data: T;\\n}\\n\\n/**\\n * Tabular View for hubMap tissue side-bar\\n */\\n@Component({\\n selector: \'hra-tissue-tree-list\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatButtonModule,\\n MatTreeModule,\\n MatIconModule,\\n MatExpansionModule,\\n MatRippleModule,\\n LinkDirective,\\n ],\\n templateUrl: \'./tissue-tree-list.component.html\',\\n styleUrls: [\'./tissue-tree-list.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class TissueTreeListComponent> implements OnChanges {\\n /**\\n * Input of tissue tree list component\\n */\\n @Input() nodes: Record = {} as Record;\\n\\n /**\\n * Node selected, to view the data associated with it\\n */\\n @Input() selected?: T = undefined;\\n\\n /**\\n * Output of tissue tree list component\\n */\\n @Output() readonly selectedChange = new EventEmitter();\\n\\n /**\\n * tree controller, used to control the nodes in the tree\\n */\\n readonly control = new FlatTreeControl>(\\n (node) => node.level,\\n (node) => node.expandable\\n );\\n\\n /**\\n * Flattener of tissue tree list component, returns flat-data structure\\n */\\n readonly flattener = new MatTreeFlattener>(\\n (node, level) => ({\\n label: node.label,\\n expandable: (node.children?.length ?? 0) > 0,\\n level,\\n data: node,\\n }),\\n (node) => node.level,\\n (node) => node.expandable,\\n (node) => node.children?.map((id) => this.nodes[id])\\n );\\n\\n /**\\n * Data source of tissue tree list component, defines the data in mat-tree\\n */\\n readonly dataSource = new MatTreeFlatDataSource(this.control, this.flattener);\\n\\n /**\\n * Take actions if any data changes\\n * @param changes changes in data\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'nodes\' in changes) {\\n this.dataSource.data = this.findRootNodes();\\n }\\n if (\'selected\' in changes) {\\n const path = this.selected ? this.dfsFindPath(this.findRootNodes(), this.selected) : [];\\n this.expandPath(path);\\n }\\n }\\n\\n /**\\n * check if the current node has children\\n * @param node current selected node\\n * @returns boolean, which means if node has children\\n */\\n hasChild(_: number, node: InternalNode): boolean {\\n return node.expandable;\\n }\\n\\n /**\\n * It selects the node, which is clicked.\\n * @param node Tissue Tree Item, which is clicked\\n */\\n selectNode(node: T): void {\\n if (this.selected !== node) {\\n this.selected = node;\\n this.selectedChange.emit(this.selected);\\n }\\n }\\n\\n /**\\n * Resets selection and collapes all nodes of the tree.\\n */\\n resetSelection(): void {\\n this.selected = undefined;\\n this.control.collapseAll();\\n }\\n\\n /**\\n * It creates a copy of the input nodes object.\\n * It iterates over it and removes all the children nodes from it.\\n * @returns remaining nodes which are root nodes.\\n */\\n private findRootNodes(): T[] {\\n const { nodes } = this;\\n const roots = { ...this.nodes };\\n for (const key in nodes) {\\n for (const child of nodes[key].children ?? []) {\\n delete roots[child];\\n }\\n }\\n\\n return Object.values(roots);\\n }\\n\\n /**\\n * expands the tree nodes based on the path provided.\\n * @param path is given as an input.\\n */\\n private expandPath(path: DataNode[]): void {\\n const nodes = this.control.dataNodes.filter((node) => path.includes(node.data));\\n nodes.forEach((node) => this.control.expand(node));\\n }\\n\\n /**\\n * It used the logic of depth first search to find the target node.\\n * returns the path to the target node.\\n */\\n private dfsFindPath(nodes: T[], target: T, path: T[] = []): T[] {\\n for (const node of nodes) {\\n path.push(node);\\n if (node === target) {\\n return path;\\n }\\n\\n const savedLength = path.length;\\n const children = node.children?.map((id) => this.nodes[id]) ?? [];\\n if (this.dfsFindPath(children, target, path).length > savedLength) {\\n return path;\\n }\\n\\n path.pop();\\n }\\n\\n return path;\\n }\\n}\\n","properties":[{"name":"data","deprecated":false,"deprecationMessage":"","type":"T","optional":false,"description":"

Associated user node data

\\n","line":43,"rawdescription":"\\nAssociated user node data"},{"name":"expandable","deprecated":false,"deprecationMessage":"","type":"boolean","optional":false,"description":"

Whether the node can be expanded to display child nodes

\\n","line":39,"rawdescription":"\\nWhether the node can be expanded to display child nodes"},{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Displayed label

\\n","line":37,"rawdescription":"\\nDisplayed label"},{"name":"level","deprecated":false,"deprecationMessage":"","type":"number","optional":false,"description":"

Depth of node in the tree

\\n","line":41,"rawdescription":"\\nDepth of node in the tree"}],"indexSignatures":[],"kind":165,"description":"

Internal interface for flat tissue data hierarchy

\\n","rawdescription":"\\n\\nInternal interface for flat tissue data hierarchy\\n","methods":[]},{"name":"MetricItem","id":"interface-MetricItem-e52c0a1cdf090042d1924c4907a4034774cbb442217faca9ec5035e76d2796116cf55644ecf49ae040fdea1168f9c5d99f6ce15b2079f70de3d853fece481b30","file":"src/lib/metrics/metrics.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\n\\n/**\\n An interface representing a single metric with an icon, value and description.\\n */\\nexport interface MetricItem {\\n /** Represents the icon associated with the metric. */\\n icon: string;\\n /** Describes the numberical value of the metric. */\\n value: string;\\n /** Describes the type of metric. */\\n description: string;\\n}\\n/**\\n * Describes the metrics for the HuBMAP project.\\n */\\n@Component({\\n selector: \'hra-metrics\',\\n standalone: true,\\n imports: [CommonModule],\\n templateUrl: \'./metrics.component.html\',\\n styleUrls: [\'./metrics.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class MetricsComponent {\\n /** Main title of metrics component. */\\n @Input() title = \'\';\\n\\n /** Logo of metrics component. */\\n @Input() logo = \'\';\\n\\n /** List of metrics that will be shown to the user. */\\n @Input() metrics: MetricItem[] = [];\\n}\\n","properties":[{"name":"description","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Describes the type of metric.

\\n","line":13,"rawdescription":"\\nDescribes the type of metric."},{"name":"icon","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Represents the icon associated with the metric.

\\n","line":9,"rawdescription":"\\nRepresents the icon associated with the metric."},{"name":"value","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Describes the numberical value of the metric.

\\n","line":11,"rawdescription":"\\nDescribes the numberical value of the metric."}],"indexSignatures":[],"kind":165,"description":"

An interface representing a single metric with an icon, value and description.

\\n","rawdescription":"\\n\\nAn interface representing a single metric with an icon, value and description.\\n","methods":[]},{"name":"NodeMapEntry","id":"interface-NodeMapEntry-34dafc0493fcadf92dd676bebad498e3798e87879ccd7ab9c56dfb6b52cf51b41a6b132fa4c00fa2f32867f3f84829bef3163da37de19cf480f10a8cd94e74f1","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ConnectedPosition, OverlayModule } from \'@angular/cdk/overlay\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n inject,\\n Input,\\n OnChanges,\\n OnDestroy,\\n Output,\\n Renderer2,\\n SimpleChanges,\\n ViewEncapsulation,\\n} from \'@angular/core\';\\nimport { TooltipComponent } from \'@hra-ui/components/atoms\';\\nimport { InlineSVGModule, SVGScriptEvalMode } from \'ng-inline-svg-2\';\\nimport { BehaviorSubject, debounce, fromEventPattern, Observable, Subject, takeUntil, timer } from \'rxjs\';\\nimport { NodeEventHandler } from \'rxjs/internal/observable/fromEvent\';\\n\\n/** Delay before tooltip becomes visible */\\nconst HOVER_DELAY = 200;\\n\\n/** Tooltip position settings */\\nconst TOOLTIP_POSITIONS: ConnectedPosition[] = [\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'start\',\\n overlayY: \'center\',\\n offsetX: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'end\',\\n overlayY: \'center\',\\n offsetX: -8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'top\',\\n offsetY: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'bottom\',\\n offsetY: -8,\\n },\\n];\\n\\n/** Node tooltip data */\\nexport interface NodeTooltipData {\\n /** Node name */\\n node: string;\\n /** Center point of hovered node in screen coordinates */\\n origin: { x: number; y: number };\\n}\\n\\n/** Interface for node entries */\\nexport interface NodeMapEntry {\\n /** Node label */\\n label: string;\\n /** Node id in svg */\\n id: string;\\n /** Ontology id of cell type */\\n ontologyId: string;\\n}\\n\\n/**\\n * Interactive SVG component\\n */\\n@Component({\\n selector: \'hra-interactive-svg\',\\n standalone: true,\\n imports: [CommonModule, InlineSVGModule, OverlayModule, TooltipComponent],\\n templateUrl: \'./interactive-svg.component.html\',\\n styleUrls: [\'./interactive-svg.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n encapsulation: ViewEncapsulation.ShadowDom,\\n})\\nexport class InteractiveSvgComponent implements OnChanges, OnDestroy {\\n /** SVG url */\\n @Input() url?: string;\\n\\n /** Mapping info */\\n @Input() mapping: T[] = [];\\n\\n /** Highlighted ontology id */\\n @Input() highlightId?: string;\\n\\n /** Emits node id when hovered */\\n @Output() readonly nodeHover = new EventEmitter();\\n\\n /** Emits node id when clicked */\\n @Output() readonly nodeClick = new EventEmitter();\\n\\n /** SVG script eval mode */\\n readonly NEVER_EVAL_SCRIPTS = SVGScriptEvalMode.NEVER;\\n\\n /** Tooltip position settings */\\n readonly TOOLTIP_POSITIONS = TOOLTIP_POSITIONS;\\n\\n /** Observable of node hover data or undefined when there is no active hover */\\n readonly nodeHoverData$ = new BehaviorSubject(undefined);\\n\\n /** Observable of node hover with a timer */\\n readonly nodeHoverDelayedData$ = this.nodeHoverData$.pipe(debounce((event) => timer(event ? HOVER_DELAY : 0)));\\n\\n /** Custom renderer */\\n private readonly renderer = inject(Renderer2);\\n\\n /** Destroys */\\n private destroy$ = new Subject();\\n\\n /** Crosswalk element of svg */\\n private crosswalkEl?: Element;\\n\\n /** List of highlighted svg elements */\\n private highlightedElements: Element[] = [];\\n\\n /**\\n * Updates the highlighting based on current highlight id\\n * @param changes\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'highlightId\' in changes) {\\n this.resetHighlight();\\n this.setHighlight();\\n }\\n }\\n\\n /**\\n * Highlights cells that match highlightId\\n */\\n private setHighlight() {\\n const { mapping, highlightId, crosswalkEl } = this;\\n const entry = mapping.find(({ ontologyId }) => ontologyId === highlightId);\\n if (!entry || !crosswalkEl) {\\n return;\\n }\\n\\n let id = this.encodeId(entry.id);\\n const element = crosswalkEl.querySelector(`#${id}`);\\n if (!element) {\\n return;\\n } else if (element.nodeName !== \'g\') {\\n id = element.parentElement?.id ?? \'\';\\n }\\n\\n const elements = crosswalkEl.querySelectorAll(`#${id} :is(path, polygon, polyline)`);\\n this.highlightedElements = Array.from(elements);\\n elements.forEach((el) => el.classList.add(\'click-active\'));\\n }\\n\\n /**\\n * Resets all highlighted elements in the svg\\n */\\n private resetHighlight(): void {\\n for (const el of this.highlightedElements) {\\n el.classList.remove(\'click-active\');\\n }\\n this.highlightedElements = [];\\n }\\n\\n /**\\n * Clears observables on destroy\\n */\\n ngOnDestroy(): void {\\n this.clear();\\n }\\n\\n /**\\n * Sets SVG element\\n * @param el SVG element\\n */\\n setSvgElement(el: SVGElement): void {\\n this.clear();\\n this.crosswalkEl = el.querySelector(\'[id^=\\"Crosswalk\\"]\') ?? undefined;\\n if (this.crosswalkEl) {\\n // Move to front (i.e. last child in svg)\\n this.renderer.appendChild(el, this.crosswalkEl);\\n this.attachCrosswalkHover(this.crosswalkEl);\\n }\\n }\\n\\n /**\\n * Removes underscores from id\\n * @param name Node name\\n * @returns node name without underscores\\n */\\n formatNodeName(name: string): string {\\n return name.replace(/_/g, \' \');\\n }\\n\\n /**\\n * Attaches crosswalk hover\\n * @param el element\\n */\\n private attachCrosswalkHover(el: Element): void {\\n this.attachEvent(el, \'mouseover\').subscribe((event) => this.onCrosswalkHover(event));\\n this.attachEvent(el, \'mouseout\').subscribe(() => this.onCrosswalkHover(undefined as never as MouseEvent));\\n this.attachEvent(el, \'click\').subscribe((event) => this.nodeClick.emit(this.getNode(event)));\\n }\\n\\n /**\\n * Finds matching node in data from a hovered element\\n * @param event Mouse event\\n */\\n private onCrosswalkHover(event: MouseEvent): void {\\n if (event) {\\n const node = this.getNode(event);\\n if (node) {\\n this.nodeHoverData$.next({\\n node: node.label,\\n origin: {\\n x: event.clientX,\\n y: event.clientY,\\n },\\n });\\n this.nodeHover.emit(node); //emits node entry\\n }\\n } else {\\n this.nodeHoverData$.next(undefined);\\n this.nodeHover.emit();\\n }\\n }\\n\\n /**\\n * Clears observables\\n */\\n private clear(): void {\\n this.destroy$.next();\\n this.destroy$.complete();\\n this.destroy$ = new Subject();\\n }\\n\\n /**\\n * Returns entry from mapping if target, parent, or grandparent id matches the node name\\n * @param event Event\\n * @returns Node entry that matches the target id\\n */\\n private getNode(event: Event): T | undefined {\\n const targetId = (event.target as Element).id;\\n const parentId = (event.target as Element).parentElement?.id ?? \'\';\\n const grandparentId = (event.target as Element).parentElement?.parentElement?.id ?? \'\';\\n const idCollection = [targetId, parentId, grandparentId];\\n for (const id of idCollection) {\\n const decodedID = this.decodeId(id);\\n const match = this.mapping.find(\\n (item) => item.id?.toLowerCase() === decodedID.toLowerCase() //search mapping by name for matching node entry\\n );\\n if (match) {\\n return match;\\n }\\n }\\n return undefined;\\n }\\n\\n /**\\n * Decodes id into a normal string\\n * @param id Undecoded ID\\n * @returns id\\n */\\n private decodeId(id: string): string {\\n const replacer = (_match: string, hex: string) => String.fromCharCode(Number.parseInt(hex, 16));\\n return id.replace(/_x([\\\\da-f]+)_/gi, replacer);\\n }\\n\\n /**\\n * Turns normal string into decoded SVG id\\n * @param id id\\n * @returns Encoded id\\n */\\n private encodeId(id: string): string {\\n const replacer = (match: string) => `_x${match.charCodeAt(0).toString(16).toUpperCase()}_`;\\n return id.replace(/[^a-z0-9-]/gi, replacer);\\n }\\n\\n /**\\n * Attaches an event listener\\n * @template K\\n * @param el Element\\n * @param event Event\\n * @returns Observable\\n */\\n private attachEvent(el: Element, event: K): Observable {\\n const { renderer, destroy$ } = this;\\n const add = (handler: NodeEventHandler) => renderer.listen(el, event, handler);\\n const remove = (_handler: NodeEventHandler, unlisten: () => void) => unlisten();\\n return fromEventPattern(add, remove).pipe(takeUntil(destroy$));\\n }\\n}\\n","properties":[{"name":"id","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Node id in svg

\\n","line":69,"rawdescription":"\\nNode id in svg"},{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Node label

\\n","line":67,"rawdescription":"\\nNode label"},{"name":"ontologyId","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Ontology id of cell type

\\n","line":71,"rawdescription":"\\nOntology id of cell type"}],"indexSignatures":[],"kind":165,"description":"

Interface for node entries

\\n","rawdescription":"\\nInterface for node entries","methods":[]},{"name":"NodeTooltipData","id":"interface-NodeTooltipData-34dafc0493fcadf92dd676bebad498e3798e87879ccd7ab9c56dfb6b52cf51b41a6b132fa4c00fa2f32867f3f84829bef3163da37de19cf480f10a8cd94e74f1","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ConnectedPosition, OverlayModule } from \'@angular/cdk/overlay\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n inject,\\n Input,\\n OnChanges,\\n OnDestroy,\\n Output,\\n Renderer2,\\n SimpleChanges,\\n ViewEncapsulation,\\n} from \'@angular/core\';\\nimport { TooltipComponent } from \'@hra-ui/components/atoms\';\\nimport { InlineSVGModule, SVGScriptEvalMode } from \'ng-inline-svg-2\';\\nimport { BehaviorSubject, debounce, fromEventPattern, Observable, Subject, takeUntil, timer } from \'rxjs\';\\nimport { NodeEventHandler } from \'rxjs/internal/observable/fromEvent\';\\n\\n/** Delay before tooltip becomes visible */\\nconst HOVER_DELAY = 200;\\n\\n/** Tooltip position settings */\\nconst TOOLTIP_POSITIONS: ConnectedPosition[] = [\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'start\',\\n overlayY: \'center\',\\n offsetX: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'end\',\\n overlayY: \'center\',\\n offsetX: -8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'top\',\\n offsetY: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'bottom\',\\n offsetY: -8,\\n },\\n];\\n\\n/** Node tooltip data */\\nexport interface NodeTooltipData {\\n /** Node name */\\n node: string;\\n /** Center point of hovered node in screen coordinates */\\n origin: { x: number; y: number };\\n}\\n\\n/** Interface for node entries */\\nexport interface NodeMapEntry {\\n /** Node label */\\n label: string;\\n /** Node id in svg */\\n id: string;\\n /** Ontology id of cell type */\\n ontologyId: string;\\n}\\n\\n/**\\n * Interactive SVG component\\n */\\n@Component({\\n selector: \'hra-interactive-svg\',\\n standalone: true,\\n imports: [CommonModule, InlineSVGModule, OverlayModule, TooltipComponent],\\n templateUrl: \'./interactive-svg.component.html\',\\n styleUrls: [\'./interactive-svg.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n encapsulation: ViewEncapsulation.ShadowDom,\\n})\\nexport class InteractiveSvgComponent implements OnChanges, OnDestroy {\\n /** SVG url */\\n @Input() url?: string;\\n\\n /** Mapping info */\\n @Input() mapping: T[] = [];\\n\\n /** Highlighted ontology id */\\n @Input() highlightId?: string;\\n\\n /** Emits node id when hovered */\\n @Output() readonly nodeHover = new EventEmitter();\\n\\n /** Emits node id when clicked */\\n @Output() readonly nodeClick = new EventEmitter();\\n\\n /** SVG script eval mode */\\n readonly NEVER_EVAL_SCRIPTS = SVGScriptEvalMode.NEVER;\\n\\n /** Tooltip position settings */\\n readonly TOOLTIP_POSITIONS = TOOLTIP_POSITIONS;\\n\\n /** Observable of node hover data or undefined when there is no active hover */\\n readonly nodeHoverData$ = new BehaviorSubject(undefined);\\n\\n /** Observable of node hover with a timer */\\n readonly nodeHoverDelayedData$ = this.nodeHoverData$.pipe(debounce((event) => timer(event ? HOVER_DELAY : 0)));\\n\\n /** Custom renderer */\\n private readonly renderer = inject(Renderer2);\\n\\n /** Destroys */\\n private destroy$ = new Subject();\\n\\n /** Crosswalk element of svg */\\n private crosswalkEl?: Element;\\n\\n /** List of highlighted svg elements */\\n private highlightedElements: Element[] = [];\\n\\n /**\\n * Updates the highlighting based on current highlight id\\n * @param changes\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'highlightId\' in changes) {\\n this.resetHighlight();\\n this.setHighlight();\\n }\\n }\\n\\n /**\\n * Highlights cells that match highlightId\\n */\\n private setHighlight() {\\n const { mapping, highlightId, crosswalkEl } = this;\\n const entry = mapping.find(({ ontologyId }) => ontologyId === highlightId);\\n if (!entry || !crosswalkEl) {\\n return;\\n }\\n\\n let id = this.encodeId(entry.id);\\n const element = crosswalkEl.querySelector(`#${id}`);\\n if (!element) {\\n return;\\n } else if (element.nodeName !== \'g\') {\\n id = element.parentElement?.id ?? \'\';\\n }\\n\\n const elements = crosswalkEl.querySelectorAll(`#${id} :is(path, polygon, polyline)`);\\n this.highlightedElements = Array.from(elements);\\n elements.forEach((el) => el.classList.add(\'click-active\'));\\n }\\n\\n /**\\n * Resets all highlighted elements in the svg\\n */\\n private resetHighlight(): void {\\n for (const el of this.highlightedElements) {\\n el.classList.remove(\'click-active\');\\n }\\n this.highlightedElements = [];\\n }\\n\\n /**\\n * Clears observables on destroy\\n */\\n ngOnDestroy(): void {\\n this.clear();\\n }\\n\\n /**\\n * Sets SVG element\\n * @param el SVG element\\n */\\n setSvgElement(el: SVGElement): void {\\n this.clear();\\n this.crosswalkEl = el.querySelector(\'[id^=\\"Crosswalk\\"]\') ?? undefined;\\n if (this.crosswalkEl) {\\n // Move to front (i.e. last child in svg)\\n this.renderer.appendChild(el, this.crosswalkEl);\\n this.attachCrosswalkHover(this.crosswalkEl);\\n }\\n }\\n\\n /**\\n * Removes underscores from id\\n * @param name Node name\\n * @returns node name without underscores\\n */\\n formatNodeName(name: string): string {\\n return name.replace(/_/g, \' \');\\n }\\n\\n /**\\n * Attaches crosswalk hover\\n * @param el element\\n */\\n private attachCrosswalkHover(el: Element): void {\\n this.attachEvent(el, \'mouseover\').subscribe((event) => this.onCrosswalkHover(event));\\n this.attachEvent(el, \'mouseout\').subscribe(() => this.onCrosswalkHover(undefined as never as MouseEvent));\\n this.attachEvent(el, \'click\').subscribe((event) => this.nodeClick.emit(this.getNode(event)));\\n }\\n\\n /**\\n * Finds matching node in data from a hovered element\\n * @param event Mouse event\\n */\\n private onCrosswalkHover(event: MouseEvent): void {\\n if (event) {\\n const node = this.getNode(event);\\n if (node) {\\n this.nodeHoverData$.next({\\n node: node.label,\\n origin: {\\n x: event.clientX,\\n y: event.clientY,\\n },\\n });\\n this.nodeHover.emit(node); //emits node entry\\n }\\n } else {\\n this.nodeHoverData$.next(undefined);\\n this.nodeHover.emit();\\n }\\n }\\n\\n /**\\n * Clears observables\\n */\\n private clear(): void {\\n this.destroy$.next();\\n this.destroy$.complete();\\n this.destroy$ = new Subject();\\n }\\n\\n /**\\n * Returns entry from mapping if target, parent, or grandparent id matches the node name\\n * @param event Event\\n * @returns Node entry that matches the target id\\n */\\n private getNode(event: Event): T | undefined {\\n const targetId = (event.target as Element).id;\\n const parentId = (event.target as Element).parentElement?.id ?? \'\';\\n const grandparentId = (event.target as Element).parentElement?.parentElement?.id ?? \'\';\\n const idCollection = [targetId, parentId, grandparentId];\\n for (const id of idCollection) {\\n const decodedID = this.decodeId(id);\\n const match = this.mapping.find(\\n (item) => item.id?.toLowerCase() === decodedID.toLowerCase() //search mapping by name for matching node entry\\n );\\n if (match) {\\n return match;\\n }\\n }\\n return undefined;\\n }\\n\\n /**\\n * Decodes id into a normal string\\n * @param id Undecoded ID\\n * @returns id\\n */\\n private decodeId(id: string): string {\\n const replacer = (_match: string, hex: string) => String.fromCharCode(Number.parseInt(hex, 16));\\n return id.replace(/_x([\\\\da-f]+)_/gi, replacer);\\n }\\n\\n /**\\n * Turns normal string into decoded SVG id\\n * @param id id\\n * @returns Encoded id\\n */\\n private encodeId(id: string): string {\\n const replacer = (match: string) => `_x${match.charCodeAt(0).toString(16).toUpperCase()}_`;\\n return id.replace(/[^a-z0-9-]/gi, replacer);\\n }\\n\\n /**\\n * Attaches an event listener\\n * @template K\\n * @param el Element\\n * @param event Event\\n * @returns Observable\\n */\\n private attachEvent(el: Element, event: K): Observable {\\n const { renderer, destroy$ } = this;\\n const add = (handler: NodeEventHandler) => renderer.listen(el, event, handler);\\n const remove = (_handler: NodeEventHandler, unlisten: () => void) => unlisten();\\n return fromEventPattern(add, remove).pipe(takeUntil(destroy$));\\n }\\n}\\n","properties":[{"name":"node","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Node name

\\n","line":59,"rawdescription":"\\nNode name"},{"name":"origin","deprecated":false,"deprecationMessage":"","type":"literal type","optional":false,"description":"

Center point of hovered node in screen coordinates

\\n","line":61,"rawdescription":"\\nCenter point of hovered node in screen coordinates"}],"indexSignatures":[],"kind":165,"description":"

Node tooltip data

\\n","rawdescription":"\\nNode tooltip data","methods":[]},{"name":"SectionItem","id":"interface-SectionItem-dba50a1e9cbac5f9733930bd6b04d1ac5fda31ee6342e13da75314f7b5dbbf46c436aab104bfc47abdc323e9ff42aeeb0047ee89577f639d3979c6964344bbd7","file":"src/lib/biomarker-table-data-card/biomarker-table-data-card.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule } from \'@angular/material/table\';\\n\\n/** An item which defines a string label and a string value */\\nexport interface DataItem {\\n /** A string property that represents the label */\\n label: string;\\n /** A string property that represents the value */\\n value: string;\\n}\\n\\n/** An item which represents a section with a data item and an indicator for the last item in the section */\\nexport interface SectionItem {\\n /** A number property that represents the section number */\\n section: number;\\n /** A DateItem property that represents a section and its data */\\n data: DataItem;\\n /** A boolean property that represents the last item of a section */\\n isLastItem: boolean;\\n}\\n\\n/** This component displays a table with sections, where each section contains a list of items with a label and a value. */\\n@Component({\\n selector: \'hra-biomarker-table-data-card\',\\n standalone: true,\\n imports: [CommonModule, MatTableModule],\\n templateUrl: \'./biomarker-table-data-card.component.html\',\\n styleUrls: [\'./biomarker-table-data-card.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableDataCardComponent implements OnChanges {\\n /** Nested list of DataItems for each section which is displayed to the user */\\n @Input() data: DataItem[][] = [];\\n\\n /** Converted nested array of DataItem into Flat array of SectionItem */\\n sectionItems: SectionItem[] = [];\\n\\n /** Triggers an update on sectionItems array when data is changed */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.updateSectionItems();\\n }\\n }\\n\\n /** Updates sectionItems array when data is changed */\\n private updateSectionItems(): void {\\n const newSectionItems: SectionItem[] = [];\\n\\n this.data.forEach((section, sectionIndex) => {\\n section.forEach((item, itemIndex) => {\\n newSectionItems.push({\\n data: item,\\n section: sectionIndex,\\n isLastItem: itemIndex === section.length - 1,\\n });\\n });\\n });\\n\\n this.sectionItems = newSectionItems;\\n }\\n}\\n","properties":[{"name":"data","deprecated":false,"deprecationMessage":"","type":"DataItem","optional":false,"description":"

A DateItem property that represents a section and its data

\\n","line":18,"rawdescription":"\\nA DateItem property that represents a section and its data"},{"name":"isLastItem","deprecated":false,"deprecationMessage":"","type":"boolean","optional":false,"description":"

A boolean property that represents the last item of a section

\\n","line":20,"rawdescription":"\\nA boolean property that represents the last item of a section"},{"name":"section","deprecated":false,"deprecationMessage":"","type":"number","optional":false,"description":"

A number property that represents the section number

\\n","line":16,"rawdescription":"\\nA number property that represents the section number"}],"indexSignatures":[],"kind":165,"description":"

An item which represents a section with a data item and an indicator for the last item in the section

\\n","rawdescription":"\\nAn item which represents a section with a data item and an indicator for the last item in the section","methods":[]},{"name":"SourceListItem","id":"interface-SourceListItem-f0d0464b044f898be3752719190f2d8ad8511283d4daafb2f8b17bd0f4dfa0290abbbeb293819664c07134fcaee5a64313aaf72d69e335a063e244c2ba1d7c0c","file":"src/lib/source-list/source-list.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule } from \'@angular/material/table\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EmptyBiomarkerComponent, LabelBoxComponent } from \'@hra-ui/components/atoms\';\\n\\n/** SourceListItem interface contains title and link to the dataset for the SourceList*/\\nexport interface SourceListItem {\\n /** Title of the dataset in the SourceList */\\n title: string;\\n\\n /** Label of the dataset in the SourceList */\\n label: string;\\n\\n /** Link to the dataset in the SourceList */\\n link: string;\\n}\\n\\n/** This component shows list of sources with title and links to the datasets */\\n@Component({\\n selector: \'hra-source-list\',\\n standalone: true,\\n imports: [CommonModule, MatTableModule, MatIconModule, LabelBoxComponent, EmptyBiomarkerComponent],\\n templateUrl: \'./source-list.component.html\',\\n styleUrls: [\'./source-list.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class SourceListComponent {\\n /** List of sources with titles and links displayed to the user */\\n @Input() sources: SourceListItem[] = [];\\n /**\\n * Input buttonon text of empty biomarker component.\\n */\\n @Input() collaborateText = \'\';\\n\\n /**\\n * Input message markdown of empty biomarker component.\\n */\\n @Input() message = \'\';\\n /**\\n * Show table of source list component which toggles to true or false\\n * based on click\\n */\\n showTable = true;\\n\\n /** Emits when the contact button is clicked */\\n @Output() readonly collaborateClick = new EventEmitter();\\n\\n /**\\n * It changes the value of showTable to false if value it true\\n * and vice versa\\n */\\n toggleTable(): void {\\n this.showTable = !this.showTable;\\n }\\n}\\n","properties":[{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Label of the dataset in the SourceList

\\n","line":13,"rawdescription":"\\nLabel of the dataset in the SourceList"},{"name":"link","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Link to the dataset in the SourceList

\\n","line":16,"rawdescription":"\\nLink to the dataset in the SourceList"},{"name":"title","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Title of the dataset in the SourceList

\\n","line":10,"rawdescription":"\\nTitle of the dataset in the SourceList"}],"indexSignatures":[],"kind":165,"description":"

SourceListItem interface contains title and link to the dataset for the SourceList

\\n","rawdescription":"\\nSourceListItem interface contains title and link to the dataset for the SourceList","methods":[]}],"injectables":[],"guards":[],"interceptors":[],"classes":[],"directives":[],"components":[{"name":"BiomarkerTableDataCardComponent","id":"component-BiomarkerTableDataCardComponent-dba50a1e9cbac5f9733930bd6b04d1ac5fda31ee6342e13da75314f7b5dbbf46c436aab104bfc47abdc323e9ff42aeeb0047ee89577f639d3979c6964344bbd7","file":"src/lib/biomarker-table-data-card/biomarker-table-data-card.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-biomarker-table-data-card","styleUrls":["./biomarker-table-data-card.component.scss"],"styles":[],"templateUrl":["./biomarker-table-data-card.component.html"],"viewProviders":[],"inputsClass":[{"name":"data","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nNested list of DataItems for each section which is displayed to the user","description":"

Nested list of DataItems for each section which is displayed to the user

\\n","line":34,"type":"DataItem[][]","decorators":[]}],"outputsClass":[],"propertiesClass":[{"name":"sectionItems","defaultValue":"[]","deprecated":false,"deprecationMessage":"","type":"SectionItem[]","optional":false,"description":"

Converted nested array of DataItem into Flat array of SectionItem

\\n","line":37,"rawdescription":"\\nConverted nested array of DataItem into Flat array of SectionItem"}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

This component displays a table with sections, where each section contains a list of items with a label and a value.

\\n","rawdescription":"\\nThis component displays a table with sections, where each section contains a list of items with a label and a value.","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule } from \'@angular/material/table\';\\n\\n/** An item which defines a string label and a string value */\\nexport interface DataItem {\\n /** A string property that represents the label */\\n label: string;\\n /** A string property that represents the value */\\n value: string;\\n}\\n\\n/** An item which represents a section with a data item and an indicator for the last item in the section */\\nexport interface SectionItem {\\n /** A number property that represents the section number */\\n section: number;\\n /** A DateItem property that represents a section and its data */\\n data: DataItem;\\n /** A boolean property that represents the last item of a section */\\n isLastItem: boolean;\\n}\\n\\n/** This component displays a table with sections, where each section contains a list of items with a label and a value. */\\n@Component({\\n selector: \'hra-biomarker-table-data-card\',\\n standalone: true,\\n imports: [CommonModule, MatTableModule],\\n templateUrl: \'./biomarker-table-data-card.component.html\',\\n styleUrls: [\'./biomarker-table-data-card.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableDataCardComponent implements OnChanges {\\n /** Nested list of DataItems for each section which is displayed to the user */\\n @Input() data: DataItem[][] = [];\\n\\n /** Converted nested array of DataItem into Flat array of SectionItem */\\n sectionItems: SectionItem[] = [];\\n\\n /** Triggers an update on sectionItems array when data is changed */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.updateSectionItems();\\n }\\n }\\n\\n /** Updates sectionItems array when data is changed */\\n private updateSectionItems(): void {\\n const newSectionItems: SectionItem[] = [];\\n\\n this.data.forEach((section, sectionIndex) => {\\n section.forEach((item, itemIndex) => {\\n newSectionItems.push({\\n data: item,\\n section: sectionIndex,\\n isLastItem: itemIndex === section.length - 1,\\n });\\n });\\n });\\n\\n this.sectionItems = newSectionItems;\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'utils\';\\n@use \'variables\' as vars;\\n\\n:host {\\n display: flex;\\n padding: 1rem 1.5rem;\\n border-radius: 0.5rem;\\n box-shadow: 0.063rem 0.125rem 1rem 0.125rem rgba(0, 0, 0, 0.16);\\n background-color: vars.$primary-contrast-rgb;\\n\\n .mat-mdc-cell {\\n padding: 0.25rem 0rem;\\n }\\n\\n .mat-mdc-row {\\n height: fit-content;\\n }\\n\\n .no-border {\\n border: none;\\n }\\n\\n .label {\\n color: #243142;\\n padding-right: 3rem;\\n }\\n\\n .value {\\n color: #4c5a69;\\n }\\n\\n .sr-only {\\n @include utils.sr-only();\\n }\\n}\\n","styleUrl":"./biomarker-table-data-card.component.scss"}],"stylesData":"","implements":["OnChanges"],"templateData":"
No data
\\n 0\\" [dataSource]=\\"sectionItems\\">\\n \\n\\n \x3c!-- Label Column --\x3e\\n \\n \\n \\n \\n\\n \x3c!-- Value Column --\x3e\\n \\n \\n \\n \\n\\n \\n
\\n Biomarker Table Data Card\\n
Item Label\\n {{ element.data.label }}\\n Item Value\\n {{ element.data.value }}\\n
\\n"},{"name":"BiomarkerTableDataIconComponent","id":"component-BiomarkerTableDataIconComponent-0fab04062dee70e0c4d57bfdc6f056400c9b82591b050c6912b9e59a896e1a5535f884a104c1d3f95c19721a049ca51f5b2a953512dc1d6a501c29d5399a063c","file":"src/lib/biomarker-table-data-icon/biomarker-table-data-icon.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-biomarker-table-data-icon","styleUrls":["./biomarker-table-data-icon.component.scss"],"styles":[],"template":"","templateUrl":[],"viewProviders":[],"inputsClass":[{"name":"color","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nRepresents the color of the icon","description":"

Represents the color of the icon

\\n","line":17,"type":"string","decorators":[]},{"name":"size","defaultValue":"0","deprecated":false,"deprecationMessage":"","rawdescription":"\\nRepresents the size of the icon","description":"

Represents the size of the icon

\\n","line":20,"type":"number","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Describes the data icon for the table

\\n","rawdescription":"\\n\\nDescribes the data icon for the table\\n","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, HostBinding, Input } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\n\\n/**\\n * Describes the data icon for the table\\n */\\n@Component({\\n selector: \'hra-biomarker-table-data-icon\',\\n standalone: true,\\n imports: [CommonModule],\\n template: \'\',\\n styleUrls: [\'./biomarker-table-data-icon.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableDataIconComponent {\\n /** Represents the color of the icon */\\n @HostBinding(\'style.background-color\') @Input() color = \'\';\\n\\n /** Represents the size of the icon */\\n @HostBinding(\'style.--radius.rem\') @Input() size = 0;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n border-radius: 50%;\\n --radius: 0.625rem;\\n width: var(--radius);\\n height: var(--radius);\\n}\\n","styleUrl":"./biomarker-table-data-icon.component.scss"}],"stylesData":""},{"name":"ContactModalComponent","id":"component-ContactModalComponent-309310b2740da63be5ea5aaa894ef73ced8bed2a86b50643af4dd031551d6cdb7b26ece6b3328d0e31c21e46f940bd8b901f5665c241ca2a4cb38f39631bd8a3","file":"src/lib/contact-modal/contact-modal.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-contact-modal","styleUrls":["./contact-modal.component.scss"],"styles":[],"templateUrl":["./contact-modal.component.html"],"viewProviders":[],"inputsClass":[{"name":"productLogoUrl","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for product logo URL to displayed on the left side.","description":"

Input for product logo URL to displayed on the left side.

\\n","line":49,"type":"string","decorators":[]},{"name":"productTitle","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for product title to displayed on the left side.","description":"

Input for product title to displayed on the left side.

\\n","line":52,"type":"string","decorators":[]}],"outputsClass":[{"name":"closeClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the cancel button or close icon is clicked","description":"

Emits when the cancel button or close icon is clicked

\\n","line":58,"type":"EventEmitter"},{"name":"submitClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the submit button is clicked and all the values are appropriate.","description":"

Emits when the submit button is clicked and all the values are appropriate.

\\n","line":55,"type":"EventEmitter"}],"propertiesClass":[{"name":"contactData","defaultValue":"EMPTY_CONTACT_DATA","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Asigns the undefined initially to all the input fields.

\\n","line":66,"rawdescription":"\\nAsigns the undefined initially to all the input fields."}],"methodsClass":[{"name":"submit","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":76,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nIt emits the updated value of contact data","description":"

It emits the updated value of contact data

\\n"},{"name":"updateData","args":[{"name":"key","type":"K","deprecated":false,"deprecationMessage":""},{"name":"value","type":"","deprecated":false,"deprecationMessage":"","optional":true}],"optional":false,"returnType":"void","typeParameters":["K"],"line":69,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nUpdates the contact data object with a new value for a given key.","description":"

Updates the contact data object with a new value for a given key.

\\n","jsdoctags":[{"name":"key","type":"K","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}},{"name":"value","type":"","deprecated":false,"deprecationMessage":"","optional":true,"tagName":{"text":"param"}}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Contact modal component.

\\n","rawdescription":"\\n\\nContact modal component.\\n","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EmailInputComponent, RequiredInputComponent, RequiredTextboxComponent } from \'@hra-ui/components/atoms\';\\nimport { produce } from \'immer\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/**\\n An interface representing contact data information which will be emitted if all the fields are in correct format.\\n */\\nexport interface ContactData {\\n /** The email address of the person submitting the form. */\\n email: string;\\n /** The subject line of the message being sent. */\\n subject: string;\\n /** The body of the message being sent. */\\n message: string;\\n}\\n\\n/** Initial empty contact data */\\nconst EMPTY_CONTACT_DATA: Partial = {\\n email: undefined,\\n subject: undefined,\\n message: undefined,\\n};\\n\\n/**\\n * Contact modal component.\\n */\\n@Component({\\n selector: \'hra-contact-modal\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatButtonModule,\\n MatIconModule,\\n EmailInputComponent,\\n MarkdownModule,\\n RequiredTextboxComponent,\\n RequiredInputComponent,\\n ],\\n templateUrl: \'./contact-modal.component.html\',\\n styleUrls: [\'./contact-modal.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class ContactModalComponent {\\n /** Input for product logo URL to displayed on the left side. */\\n @Input() productLogoUrl = \'\';\\n\\n /** Input for product title to displayed on the left side. */\\n @Input() productTitle = \'\';\\n\\n /** Emits when the submit button is clicked and all the values are appropriate. */\\n @Output() readonly submitClick = new EventEmitter();\\n\\n /** Emits when the cancel button or close icon is clicked */\\n @Output() readonly closeClick = new EventEmitter();\\n\\n /** A function to disable the submit button. If all the values are in approproiate format, then it will be enabled. */\\n get disableSubmit(): boolean {\\n return Object.values(this.contactData).some((value) => value === undefined);\\n }\\n\\n /** Asigns the undefined initially to all the input fields. */\\n contactData = EMPTY_CONTACT_DATA;\\n\\n /** Updates the contact data object with a new value for a given key. */\\n updateData(key: K, value?: ContactData[K]): void {\\n this.contactData = produce(this.contactData, (draft) => {\\n draft[key] = value;\\n });\\n }\\n\\n /** It emits the updated value of contact data */\\n submit(): void {\\n this.submitClick.emit(this.contactData as ContactData);\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n position: relative;\\n padding-top: 2rem;\\n margin-right: 1.5rem;\\n margin-left: 1.5rem;\\n font-family: \'Inter\';\\n\\n .product-logo {\\n display: flex;\\n align-items: center;\\n\\n .product-logo-image {\\n margin-right: 1rem;\\n }\\n\\n .product-title {\\n color: #990000;\\n margin: 0;\\n font-weight: 600;\\n }\\n }\\n\\n .close {\\n position: absolute;\\n top: 1.5rem;\\n right: 0rem;\\n }\\n\\n .submit {\\n margin-right: 1.5rem;\\n }\\n\\n .submit,\\n .cancel {\\n width: 7.5rem;\\n }\\n\\n .email {\\n margin-top: 1.25rem;\\n }\\n\\n .message-field {\\n margin-top: 1rem;\\n }\\n\\n .subject-field {\\n margin-top: 1rem;\\n }\\n\\n .desc {\\n margin-top: 1.5rem;\\n }\\n}\\n","styleUrl":"./contact-modal.component.scss"}],"stylesData":"","accessors":{"disableSubmit":{"name":"disableSubmit","getSignature":{"name":"disableSubmit","type":"boolean","returnType":"boolean","line":61,"rawdescription":"\\nA function to disable the submit button. If all the values are in approproiate format, then it will be enabled.","description":"

A function to disable the submit button. If all the values are in approproiate format, then it will be enabled.

\\n"}}},"templateData":"\\n \\"Prodoct\\n

{{ productTitle }}

\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n"},{"name":"FooterComponent","id":"component-FooterComponent-45c5a61fc5d68c201808fb76ff867f9a7cf8e42e6ef95ae08b440dbd37ce63eb4c77c3da0597ef90973854d65522a3ba496eeb5eccbe75750c1fd2f5abf52e6b","file":"src/lib/footer/footer.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-footer","styleUrls":["./footer.component.scss"],"styles":[],"templateUrl":["./footer.component.html"],"viewProviders":[],"inputsClass":[{"name":"downloadFormats","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nDifferent download formats options displayed to the user","description":"

Different download formats options displayed to the user

\\n","line":74,"type":"T[]","decorators":[]},{"name":"embed","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for embed link in HRA Portal","description":"

Input for embed link in HRA Portal

\\n","line":71,"type":"any","decorators":[]},{"name":"hraPortal","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for HRA Portal link","description":"

Input for HRA Portal link

\\n","line":65,"type":"any","decorators":[]},{"name":"illustrationMetadata","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for Illustration metadata page link in HRA Portal","description":"

Input for Illustration metadata page link in HRA Portal

\\n","line":68,"type":"any","decorators":[]},{"name":"productLogoUrl","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for product logo URL to displayed on the left side.","description":"

Input for product logo URL to displayed on the left side.

\\n","line":59,"type":"string","decorators":[]},{"name":"productTitle","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for product title to displayed on the left side.","description":"

Input for product title to displayed on the left side.

\\n","line":62,"type":"string","decorators":[]},{"name":"size","defaultValue":"\'large\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nHost binding of footer component","description":"

Host binding of footer component

\\n","line":56,"type":"\\"small\\" | \\"large\\"","decorators":[]}],"outputsClass":[{"name":"contactClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the contact button is clicked","description":"

Emits when the contact button is clicked

\\n","line":80,"type":"EventEmitter"},{"name":"download","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits the selected download format","description":"

Emits the selected download format

\\n","line":77,"type":"EventEmitter"}],"propertiesClass":[{"name":"downloadListOpen","defaultValue":"false","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Whether the download list panel is open

\\n","line":91,"rawdescription":"\\nWhether the download list panel is open"},{"name":"DOWNLOADS_LIST_POSITION","defaultValue":"DOWNLOADS_LIST_POSITION","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Download list popup overlay positioning

\\n","line":83,"rawdescription":"\\nDownload list popup overlay positioning","modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for footer that displays its content at the bottom of the page with different action buttons.

\\n","rawdescription":"\\n\\nComponent for footer that displays its content at the bottom of the page with different action buttons.\\n","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { ConnectedPosition, OverlayModule } from \'@angular/cdk/overlay\';\\nimport { MatListModule } from \'@angular/material/list\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { EMPTY_LINK } from \'@hra-ui/cdk/state\';\\n\\n/**\\n * Base type for different download format options.\\n */\\nexport interface DownloadFormat {\\n /**\\n * User readable format label\\n */\\n label: string;\\n}\\n\\n/**\\n * Positioning value for the download list popup\\n */\\nconst DOWNLOADS_LIST_POSITION: ConnectedPosition[] = [\\n {\\n panelClass: \'above\',\\n originX: \'start\',\\n originY: \'top\',\\n overlayX: \'start\',\\n overlayY: \'bottom\',\\n offsetY: 0,\\n },\\n {\\n panelClass: \'below\',\\n originX: \'start\',\\n originY: \'bottom\',\\n overlayX: \'start\',\\n overlayY: \'top\',\\n },\\n];\\n\\n/**\\n * Component for footer that displays its content at the bottom of the page with different action buttons.\\n */\\n@Component({\\n selector: \'hra-footer\',\\n standalone: true,\\n imports: [CommonModule, MatButtonModule, MatIconModule, OverlayModule, MatListModule, LinkDirective],\\n templateUrl: \'./footer.component.html\',\\n styleUrls: [\'./footer.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class FooterComponent {\\n /** Host binding of footer component */\\n @HostBinding(\'class\')\\n @Input()\\n size: \'small\' | \'large\' = \'large\';\\n\\n /** Input for product logo URL to displayed on the left side. */\\n @Input() productLogoUrl = \'\';\\n\\n /** Input for product title to displayed on the left side. */\\n @Input() productTitle = \'\';\\n\\n /** Input for HRA Portal link */\\n @Input() hraPortal = EMPTY_LINK;\\n\\n /** Input for Illustration metadata page link in HRA Portal */\\n @Input() illustrationMetadata = EMPTY_LINK;\\n\\n /** Input for embed link in HRA Portal */\\n @Input() embed = EMPTY_LINK;\\n\\n /** Different download formats options displayed to the user */\\n @Input() downloadFormats: T[] = [];\\n\\n /** Emits the selected download format */\\n @Output() readonly download = new EventEmitter();\\n\\n /** Emits when the contact button is clicked */\\n @Output() readonly contactClick = new EventEmitter();\\n\\n /** Download list popup overlay positioning */\\n readonly DOWNLOADS_LIST_POSITION = DOWNLOADS_LIST_POSITION;\\n\\n /** Gets whether the footer required is small */\\n get isSmall(): boolean {\\n return this.size === \'small\';\\n }\\n\\n /** Whether the download list panel is open */\\n downloadListOpen = false;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: flex;\\n padding: 1rem 2rem;\\n border-top: 0.063rem solid #e2e7e9;\\n align-items: center;\\n background-color: #f8f9fa;\\n gap: 1rem;\\n\\n --palette-primary-500: #abcdef;\\n\\n .controls {\\n display: flex;\\n justify-content: flex-end;\\n }\\n .filler {\\n flex-grow: 1;\\n }\\n\\n .product-title {\\n color: #990000;\\n margin-right: 0rem;\\n }\\n\\n a {\\n cursor: pointer;\\n display: flex;\\n }\\n\\n .product-logo-image {\\n height: 1.2rem;\\n margin-right: 1rem;\\n }\\n\\n button {\\n justify-content: center;\\n align-items: center;\\n min-width: 9rem;\\n min-height: 3rem;\\n gap: 0.5rem;\\n\\n --palette-primary-100-rgb: #4c5a69;\\n --palette-primary-500-rgb: #243142;\\n\\n &.mat-accent {\\n &:active {\\n --palette-primary-700-rgb: #4c5a69;\\n }\\n .mat-icon {\\n z-index: 1;\\n }\\n }\\n }\\n}\\n\\n::ng-deep {\\n .download-options-panel {\\n box-shadow: 0.1rem 0.1rem 0.4rem 0.2rem #dad7d7;\\n background-color: #ffffff;\\n }\\n}\\n::ng-deep .download-button {\\n .mdc-button__label {\\n display: flex;\\n gap: 0.5rem;\\n }\\n}\\n","styleUrl":"./footer.component.scss"}],"stylesData":"","accessors":{"isSmall":{"name":"isSmall","getSignature":{"name":"isSmall","type":"boolean","returnType":"boolean","line":86,"rawdescription":"\\nGets whether the footer required is small","description":"

Gets whether the footer required is small

\\n"}}},"templateData":"\\n
\\n\\n\\n\\n\\n download \\n Download\\n\\n\\n\\n\\n
\\n\\n\\n\\n\\n\\n\\n \\n \\n {{ format.label }}\\n \\n \\n\\n"},{"name":"FullscreenContainerComponent","id":"component-FullscreenContainerComponent-78edc2b37cbc90a17be0fcca4ed7291593d5f3d12c4ea823de3f9510c13bad4492bc5cd65823726fc7e333c874880c17093ff9d20096fd92e20137c8cc4f75af","file":"src/lib/fullscreen/fullscreen-container.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-fullscreen-container","styleUrls":[],"styles":["\\n :host {\\n display: block;\\n position: relative;\\n }\\n "],"template":"","templateUrl":[],"viewProviders":[],"inputsClass":[{"name":"fullscreen","defaultValue":"false","deprecated":false,"deprecationMessage":"","rawdescription":"\\nA boolean input property that controls the fullscreen mode","description":"

A boolean input property that controls the fullscreen mode

\\n","line":38,"type":"boolean","decorators":[]}],"outputsClass":[],"propertiesClass":[{"name":"content","deprecated":false,"deprecationMessage":"","type":"QueryList","optional":true,"description":"

A property that gets a reference to any child components of type FullscreenContentComponent that are projected into the component's content area

\\n","line":35,"rawdescription":"\\nA property that gets a reference to any child components of type FullscreenContentComponent that are projected into the component\'s content area","decorators":[{"name":"ContentChildren","stringifiedArguments":"FullscreenContentComponent"}],"modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

A component that wraps any child components of type FullscreenContentComponent and\\nsets their isFullScreen property to true or false based on its own fullscreen input property

\\n","rawdescription":"\\nA component that wraps any child components of type FullscreenContentComponent and\\nsets their isFullScreen property to true or false based on its own fullscreen input property\\n","type":"component","sourceCode":"import {\\n AfterContentInit,\\n ChangeDetectionStrategy,\\n Component,\\n ContentChildren,\\n Input,\\n OnChanges,\\n QueryList,\\n SimpleChanges,\\n} from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { FullscreenContentComponent } from \'./fullscreen-content.component\';\\n\\n/** A component that wraps any child components of type FullscreenContentComponent and\\n * sets their isFullScreen property to true or false based on its own fullscreen input property\\n */\\n@Component({\\n selector: \'hra-fullscreen-container\',\\n standalone: true,\\n imports: [CommonModule, FullscreenContentComponent],\\n template: \'\',\\n styles: [\\n `\\n :host {\\n display: block;\\n position: relative;\\n }\\n `,\\n ],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class FullscreenContainerComponent implements AfterContentInit, OnChanges {\\n /** A property that gets a reference to any child components of type FullscreenContentComponent that are projected into the component\'s content area */\\n @ContentChildren(FullscreenContentComponent)\\n readonly content?: QueryList;\\n\\n /** A boolean input property that controls the fullscreen mode */\\n @Input() fullscreen = false;\\n\\n /** It calls the updateFullscreenMode method to set the isFullScreen property of the child\\n * FullscreenContentComponent instances based on the value of the fullscreen input property\\n */\\n ngAfterContentInit(): void {\\n this.updateFullscreenMode();\\n }\\n\\n /** It checks if the fullscreen input property has changed, and calls the updateFullscreenMode method if it has */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'fullscreen\' in changes) {\\n this.updateFullscreenMode();\\n }\\n }\\n\\n /** A private method that sets the isFullScreen property of each child FullscreenContentComponent based on the value of the fullscreen */\\n private updateFullscreenMode(): void {\\n this.content?.forEach((content) => {\\n content.isFullScreen = this.fullscreen;\\n });\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":"","stylesData":"\\n :host {\\n display: block;\\n position: relative;\\n }\\n \\n","implements":["AfterContentInit","OnChanges"]},{"name":"FullscreenContentComponent","id":"component-FullscreenContentComponent-061cdd7c639f9c53e46272aaf23ed318885fbcf937978d8940b0f0baf165576129c5897204992603662d7b530bcd8d63a7d7a97602a18e97b7f1711f84c4725f","file":"src/lib/fullscreen/fullscreen-content.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-fullscreen-content","styleUrls":["./fullscreen-content.component.scss"],"styles":[],"template":"","templateUrl":[],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"isFullScreen","defaultValue":"false","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

This binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true

\\n","line":40,"rawdescription":"\\nThis binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true","decorators":[{"name":"HostBinding","stringifiedArguments":"\'class.fullscreen-on\'"},{"name":"HostBinding","stringifiedArguments":"\'@animateResize\'"}]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[{"name":"@animateResize","defaultValue":"false","deprecated":false,"deprecationMessage":"","rawdescription":"\\nThis binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true","description":"

This binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true

\\n","line":40,"type":"boolean","decorators":[]},{"name":"class.fullscreen-on","defaultValue":"false","deprecated":false,"deprecationMessage":"","rawdescription":"\\nThis binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true","description":"

This binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true

\\n","line":40,"type":"boolean","decorators":[]}],"hostListeners":[],"description":"

A component that displays its content in fullscreen mode when its isFullScreen property is set to true

\\n","rawdescription":"\\nA component that displays its content in fullscreen mode when its isFullScreen property is set to true","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, HostBinding } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { animate, state, style, transition, trigger } from \'@angular/animations\';\\n\\n/** A component that displays its content in fullscreen mode when its isFullScreen property is set to true */\\n@Component({\\n selector: \'hra-fullscreen-content\',\\n standalone: true,\\n imports: [CommonModule],\\n animations: [\\n trigger(\'animateResize\', [\\n state(\\n \'true\',\\n style({\\n width: \'100%\',\\n position: \'absolute\',\\n right: 0,\\n })\\n ),\\n state(\\n \'false\',\\n style({\\n width: \'50%\',\\n position: \'absolute\',\\n right: 0,\\n })\\n ),\\n transition(\'true <=> false\', [animate(\'0.5s ease\')]),\\n ]),\\n ],\\n template: \'\',\\n styleUrls: [\'./fullscreen-content.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class FullscreenContentComponent {\\n /** This binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true */\\n @HostBinding(\'class.fullscreen-on\')\\n /** This binds the isFullScreen property to the @animateResize when isFullScreen is true */\\n @HostBinding(\'@animateResize\')\\n isFullScreen = false;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n overflow-y: hidden;\\n transition: width 0.5s ease;\\n width: 50%;\\n\\n &.fullscreen-on {\\n z-index: 100;\\n background: #f8f9fa;\\n }\\n}\\n","styleUrl":"./fullscreen-content.component.scss"}],"stylesData":""},{"name":"HeaderComponent","id":"component-HeaderComponent-81f5689eacf69c8f1658a62e299bcad0df485f2cc8e6664f3f16cfa7d30400e53a54549f6aa8125abb2fc207fb428887c0a19dde695063a2d92611d78d9c6956","file":"src/lib/header/header.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-header","styleUrls":["./header.component.scss"],"styles":[],"templateUrl":["./header.component.html"],"viewProviders":[],"inputsClass":[{"name":"aboutLink","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for about link","description":"

Input for about link

\\n","line":40,"type":"any","decorators":[]},{"name":"appTitle","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput for app title to show on the left side.\\n","description":"

Input for app title to show on the left side.

\\n","line":34,"type":"string","decorators":[]},{"name":"productLogoUrl","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput for product logo URL to displayed on the left side.\\n","description":"

Input for product logo URL to displayed on the left side.

\\n","line":24,"type":"string","decorators":[]},{"name":"productTitle","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput for product title to displayed on the left side.\\n","description":"

Input for product title to displayed on the left side.

\\n","line":29,"type":"string","decorators":[]},{"name":"productTitleLink","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for Product Title link","description":"

Input for Product Title link

\\n","line":37,"type":"any","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Header component, displays on top of every page.

\\n","rawdescription":"\\n\\nHeader component, displays on top of every page.\\n","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatRippleModule } from \'@angular/material/core\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { EMPTY_LINK } from \'@hra-ui/cdk\';\\n\\n/**\\n * Header component, displays on top of every page.\\n */\\n@Component({\\n selector: \'hra-header\',\\n standalone: true,\\n imports: [CommonModule, MatButtonModule, MatIconModule, MatRippleModule, LinkDirective],\\n templateUrl: \'./header.component.html\',\\n styleUrls: [\'./header.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class HeaderComponent {\\n /**\\n * Input for product logo URL to displayed on the left side.\\n */\\n @Input() productLogoUrl = \'\';\\n\\n /**\\n * Input for product title to displayed on the left side.\\n */\\n @Input() productTitle = \'\';\\n\\n /**\\n * Input for app title to show on the left side.\\n */\\n @Input() appTitle = \'\';\\n\\n /** Input for Product Title link */\\n @Input() productTitleLink = EMPTY_LINK;\\n\\n /** Input for about link */\\n @Input() aboutLink = EMPTY_LINK;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'utils\';\\n@use \'variables\' as vars;\\n\\n:host {\\n display: flex;\\n align-items: center;\\n height: 5rem;\\n padding: 0 2rem 0 1rem;\\n\\n @include utils.define-flex-filler();\\n\\n h1 {\\n // Reset margins for h1 elements\\n margin: 0;\\n }\\n\\n .product {\\n display: flex;\\n align-items: center;\\n text-decoration: none;\\n // Style the ripple animation\\n padding: 0 1rem;\\n border-radius: 0.25rem;\\n\\n &:hover {\\n cursor: pointer;\\n }\\n\\n .text {\\n margin-left: 1rem;\\n font-weight: 600;\\n color: vars.$accent-rgb;\\n }\\n }\\n\\n .app {\\n margin-left: 0.5rem;\\n }\\n\\n .about {\\n width: 9rem;\\n height: 3rem;\\n text-decoration: none;\\n span {\\n border-bottom: 1px solid var(--palette-primary-500-rgb);\\n }\\n .icon {\\n width: 1.5rem;\\n height: 1.5rem;\\n font-size: 1.5rem;\\n }\\n }\\n\\n @media (max-width: 30rem) {\\n height: 4.5rem;\\n\\n .product .text,\\n .about .text {\\n @include utils.sr-only();\\n }\\n\\n .product {\\n height: 2.5rem;\\n padding: 0 0.25rem;\\n\\n .logo {\\n width: 1.5rem;\\n height: 1.5rem;\\n }\\n }\\n\\n .app {\\n font-size: 1rem;\\n line-height: 1.5rem;\\n }\\n\\n .about {\\n min-width: 2.5rem;\\n width: 2.5rem;\\n height: 2.5rem;\\n padding: 0;\\n\\n .icon {\\n margin: 0;\\n }\\n }\\n }\\n\\n @media (max-width: 20rem) {\\n padding: 0;\\n }\\n}\\n","styleUrl":"./header.component.scss"}],"stylesData":"","templateData":"\\n \\n

{{ productTitle }}

\\n\\n

{{ appTitle }}

\\n\\n
\\n\\n\\n info_outlined\\n About\\n\\n"},{"name":"HraLandingPageIntroWcComponent","id":"component-HraLandingPageIntroWcComponent-57ba89b5fa60bec2ad59de1cc52e4d3002935eab8da7f77895b1d7b507237df7df5d8fa2fec4dd3ba498b8d06fc5f70758beb2ba67ccbb24f2819798948e81d4","file":"src/lib/hra-landing-page-intro-wc/hra-landing-page-intro-wc.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-ui-hra-landing-page-intro-wc","styleUrls":["./hra-landing-page-intro-wc.component.scss"],"styles":[],"templateUrl":["./hra-landing-page-intro-wc.component.html"],"viewProviders":[],"inputsClass":[{"name":"description","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nDescription for FTU Explorer","description":"

Description for FTU Explorer

\\n","line":19,"type":"string","decorators":[]},{"name":"partners","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nThank you message to partners","description":"

Thank you message to partners

\\n","line":22,"type":"string","decorators":[]},{"name":"readMore","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nIntro Image file url","description":"

Intro Image file url

\\n","line":25,"type":"string","decorators":[]},{"name":"title","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nIntro title for FTU Explorer","description":"

Intro title for FTU Explorer

\\n","line":16,"type":"string","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for LandingPage Intro - Web coomponent

\\n","rawdescription":"\\nComponent for LandingPage Intro - Web coomponent","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/** Component for LandingPage Intro - Web coomponent */\\n@Component({\\n selector: \'hra-ui-hra-landing-page-intro-wc\',\\n standalone: true,\\n imports: [CommonModule, MarkdownModule],\\n templateUrl: \'./hra-landing-page-intro-wc.component.html\',\\n styleUrls: [\'./hra-landing-page-intro-wc.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class HraLandingPageIntroWcComponent {\\n /** Intro title for FTU Explorer */\\n @Input() title = \'\';\\n\\n /** Description for FTU Explorer */\\n @Input() description = \'\';\\n\\n /** Thank you message to partners */\\n @Input() partners = \'\';\\n\\n /** Intro Image file url */\\n @Input() readMore = \'\';\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n gap: 8px;\\n padding: 24px, 32px, 24px, 32px;\\n .title {\\n font-size: 20px;\\n font-family: Inter;\\n font-weight: 400;\\n line-height: 24px;\\n letter-spacing: 0em;\\n text-align: left;\\n }\\n\\n .description .partners .readMore {\\n font-family: Inter;\\n font-size: 16px;\\n font-weight: 400;\\n line-height: 24px;\\n letter-spacing: 0em;\\n text-align: left;\\n }\\n ::ng-deep a {\\n color: vars.$primary-rgb;\\n font-weight: 700;\\n }\\n ::ng-deep p {\\n margin: 0;\\n }\\n}\\n","styleUrl":"./hra-landing-page-intro-wc.component.scss"}],"stylesData":"","templateData":"

{{ title }}

\\n\\n\\n\\n\\n\\n\\n"},{"name":"InfoModalComponent","id":"component-InfoModalComponent-56dc03e6960f4005149bab8dbf6a5b713061505964f6b3cc7d33868ed7f83aff7dbf222ccf66999864c6313f218c20f849715b3ebcc4d2ea44285c6e07811662","file":"src/lib/info-modal/info-modal.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-info-modal","styleUrls":["./info-modal.component.scss"],"styles":[],"templateUrl":["./info-modal.component.html"],"viewProviders":[],"inputsClass":[{"name":"description","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInformation modal message to the user","description":"

Information modal message to the user

\\n","line":24,"type":"string","decorators":[]},{"name":"productLogoUrl","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nProduct logo shown to the user","description":"

Product logo shown to the user

\\n","line":21,"type":"string","decorators":[]},{"name":"productTitle","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nProduct title shown to the user","description":"

Product title shown to the user

\\n","line":18,"type":"string","decorators":[]}],"outputsClass":[{"name":"closeClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the close icon is clicked","description":"

Emits when the close icon is clicked

\\n","line":27,"type":"EventEmitter"}],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Displays an information modal to the user with the product title and logo and description

\\n","rawdescription":"\\nDisplays an information modal to the user with the product title and logo and description","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/** Displays an information modal to the user with the product title and logo and description */\\n@Component({\\n selector: \'hra-info-modal\',\\n standalone: true,\\n imports: [CommonModule, MatButtonModule, MatIconModule, MarkdownModule],\\n templateUrl: \'./info-modal.component.html\',\\n styleUrls: [\'./info-modal.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class InfoModalComponent {\\n /** Product title shown to the user */\\n @Input() productTitle = \'\';\\n\\n /** Product logo shown to the user */\\n @Input() productLogoUrl = \'\';\\n\\n /** Information modal message to the user */\\n @Input() description = \'\';\\n\\n /** Emits when the close icon is clicked */\\n @Output() readonly closeClick = new EventEmitter();\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n position: relative;\\n padding: 2rem 2rem 1.25rem 2rem;\\n\\n .close {\\n position: absolute;\\n top: 1.5rem;\\n right: 1.5rem;\\n }\\n\\n .title {\\n display: flex;\\n align-items: center;\\n\\n .product-logo-image {\\n height: 2.75rem;\\n margin-right: 1rem;\\n }\\n\\n .product-title {\\n margin: 0;\\n color: #990000;\\n }\\n }\\n\\n .description {\\n display: block;\\n margin-top: 1rem;\\n }\\n}\\n","styleUrl":"./info-modal.component.scss"}],"stylesData":"","templateData":"\\n \\"Prodoct\\n

{{ productTitle }}

\\n\\n\\n\\n\\n\\n"},{"name":"InteractiveSvgComponent","id":"component-InteractiveSvgComponent-34dafc0493fcadf92dd676bebad498e3798e87879ccd7ab9c56dfb6b52cf51b41a6b132fa4c00fa2f32867f3f84829bef3163da37de19cf480f10a8cd94e74f1","file":"src/lib/interactive-svg/interactive-svg.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":["ViewEncapsulation.ShadowDom"],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-interactive-svg","styleUrls":["./interactive-svg.component.scss"],"styles":[],"templateUrl":["./interactive-svg.component.html"],"viewProviders":[],"inputsClass":[{"name":"highlightId","deprecated":false,"deprecationMessage":"","rawdescription":"\\nHighlighted ontology id","description":"

Highlighted ontology id

\\n","line":94,"type":"string","decorators":[]},{"name":"mapping","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nMapping info","description":"

Mapping info

\\n","line":91,"type":"T[]","decorators":[]},{"name":"url","deprecated":false,"deprecationMessage":"","rawdescription":"\\nSVG url","description":"

SVG url

\\n","line":88,"type":"string","decorators":[]}],"outputsClass":[{"name":"nodeClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits node id when clicked","description":"

Emits node id when clicked

\\n","line":100,"type":"EventEmitter"},{"name":"nodeHover","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits node id when hovered","description":"

Emits node id when hovered

\\n","line":97,"type":"EventEmitter"}],"propertiesClass":[{"name":"NEVER_EVAL_SCRIPTS","defaultValue":"SVGScriptEvalMode.NEVER","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

SVG script eval mode

\\n","line":103,"rawdescription":"\\nSVG script eval mode","modifierKind":[144]},{"name":"nodeHoverData$","defaultValue":"new BehaviorSubject(undefined)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Observable of node hover data or undefined when there is no active hover

\\n","line":109,"rawdescription":"\\nObservable of node hover data or undefined when there is no active hover","modifierKind":[144]},{"name":"nodeHoverDelayedData$","defaultValue":"this.nodeHoverData$.pipe(debounce((event) => timer(event ? HOVER_DELAY : 0)))","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Observable of node hover with a timer

\\n","line":112,"rawdescription":"\\nObservable of node hover with a timer","modifierKind":[144]},{"name":"TOOLTIP_POSITIONS","defaultValue":"TOOLTIP_POSITIONS","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Tooltip position settings

\\n","line":106,"rawdescription":"\\nTooltip position settings","modifierKind":[144]}],"methodsClass":[{"name":"formatNodeName","args":[{"name":"name","type":"string","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"string","typeParameters":[],"line":196,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nRemoves underscores from id\\n","description":"

Removes underscores from id

\\n","jsdoctags":[{"name":{"pos":4993,"end":4997,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"name"},"type":"string","deprecated":false,"deprecationMessage":"","tagName":{"pos":4987,"end":4992,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":"

Node name

\\n"},{"tagName":{"pos":5014,"end":5021,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":"

node name without underscores

\\n"}]},{"name":"setSvgElement","args":[{"name":"el","type":"SVGElement","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"void","typeParameters":[],"line":181,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nSets SVG element\\n","description":"

Sets SVG element

\\n","jsdoctags":[{"name":{"pos":4595,"end":4597,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"el"},"type":"SVGElement","deprecated":false,"deprecationMessage":"","tagName":{"pos":4589,"end":4594,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":"

SVG element

\\n"}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Interactive SVG component

\\n","rawdescription":"\\n\\nInteractive SVG component\\n","type":"component","sourceCode":"import { ConnectedPosition, OverlayModule } from \'@angular/cdk/overlay\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n inject,\\n Input,\\n OnChanges,\\n OnDestroy,\\n Output,\\n Renderer2,\\n SimpleChanges,\\n ViewEncapsulation,\\n} from \'@angular/core\';\\nimport { TooltipComponent } from \'@hra-ui/components/atoms\';\\nimport { InlineSVGModule, SVGScriptEvalMode } from \'ng-inline-svg-2\';\\nimport { BehaviorSubject, debounce, fromEventPattern, Observable, Subject, takeUntil, timer } from \'rxjs\';\\nimport { NodeEventHandler } from \'rxjs/internal/observable/fromEvent\';\\n\\n/** Delay before tooltip becomes visible */\\nconst HOVER_DELAY = 200;\\n\\n/** Tooltip position settings */\\nconst TOOLTIP_POSITIONS: ConnectedPosition[] = [\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'start\',\\n overlayY: \'center\',\\n offsetX: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'end\',\\n overlayY: \'center\',\\n offsetX: -8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'top\',\\n offsetY: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'bottom\',\\n offsetY: -8,\\n },\\n];\\n\\n/** Node tooltip data */\\nexport interface NodeTooltipData {\\n /** Node name */\\n node: string;\\n /** Center point of hovered node in screen coordinates */\\n origin: { x: number; y: number };\\n}\\n\\n/** Interface for node entries */\\nexport interface NodeMapEntry {\\n /** Node label */\\n label: string;\\n /** Node id in svg */\\n id: string;\\n /** Ontology id of cell type */\\n ontologyId: string;\\n}\\n\\n/**\\n * Interactive SVG component\\n */\\n@Component({\\n selector: \'hra-interactive-svg\',\\n standalone: true,\\n imports: [CommonModule, InlineSVGModule, OverlayModule, TooltipComponent],\\n templateUrl: \'./interactive-svg.component.html\',\\n styleUrls: [\'./interactive-svg.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n encapsulation: ViewEncapsulation.ShadowDom,\\n})\\nexport class InteractiveSvgComponent implements OnChanges, OnDestroy {\\n /** SVG url */\\n @Input() url?: string;\\n\\n /** Mapping info */\\n @Input() mapping: T[] = [];\\n\\n /** Highlighted ontology id */\\n @Input() highlightId?: string;\\n\\n /** Emits node id when hovered */\\n @Output() readonly nodeHover = new EventEmitter();\\n\\n /** Emits node id when clicked */\\n @Output() readonly nodeClick = new EventEmitter();\\n\\n /** SVG script eval mode */\\n readonly NEVER_EVAL_SCRIPTS = SVGScriptEvalMode.NEVER;\\n\\n /** Tooltip position settings */\\n readonly TOOLTIP_POSITIONS = TOOLTIP_POSITIONS;\\n\\n /** Observable of node hover data or undefined when there is no active hover */\\n readonly nodeHoverData$ = new BehaviorSubject(undefined);\\n\\n /** Observable of node hover with a timer */\\n readonly nodeHoverDelayedData$ = this.nodeHoverData$.pipe(debounce((event) => timer(event ? HOVER_DELAY : 0)));\\n\\n /** Custom renderer */\\n private readonly renderer = inject(Renderer2);\\n\\n /** Destroys */\\n private destroy$ = new Subject();\\n\\n /** Crosswalk element of svg */\\n private crosswalkEl?: Element;\\n\\n /** List of highlighted svg elements */\\n private highlightedElements: Element[] = [];\\n\\n /**\\n * Updates the highlighting based on current highlight id\\n * @param changes\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'highlightId\' in changes) {\\n this.resetHighlight();\\n this.setHighlight();\\n }\\n }\\n\\n /**\\n * Highlights cells that match highlightId\\n */\\n private setHighlight() {\\n const { mapping, highlightId, crosswalkEl } = this;\\n const entry = mapping.find(({ ontologyId }) => ontologyId === highlightId);\\n if (!entry || !crosswalkEl) {\\n return;\\n }\\n\\n let id = this.encodeId(entry.id);\\n const element = crosswalkEl.querySelector(`#${id}`);\\n if (!element) {\\n return;\\n } else if (element.nodeName !== \'g\') {\\n id = element.parentElement?.id ?? \'\';\\n }\\n\\n const elements = crosswalkEl.querySelectorAll(`#${id} :is(path, polygon, polyline)`);\\n this.highlightedElements = Array.from(elements);\\n elements.forEach((el) => el.classList.add(\'click-active\'));\\n }\\n\\n /**\\n * Resets all highlighted elements in the svg\\n */\\n private resetHighlight(): void {\\n for (const el of this.highlightedElements) {\\n el.classList.remove(\'click-active\');\\n }\\n this.highlightedElements = [];\\n }\\n\\n /**\\n * Clears observables on destroy\\n */\\n ngOnDestroy(): void {\\n this.clear();\\n }\\n\\n /**\\n * Sets SVG element\\n * @param el SVG element\\n */\\n setSvgElement(el: SVGElement): void {\\n this.clear();\\n this.crosswalkEl = el.querySelector(\'[id^=\\"Crosswalk\\"]\') ?? undefined;\\n if (this.crosswalkEl) {\\n // Move to front (i.e. last child in svg)\\n this.renderer.appendChild(el, this.crosswalkEl);\\n this.attachCrosswalkHover(this.crosswalkEl);\\n }\\n }\\n\\n /**\\n * Removes underscores from id\\n * @param name Node name\\n * @returns node name without underscores\\n */\\n formatNodeName(name: string): string {\\n return name.replace(/_/g, \' \');\\n }\\n\\n /**\\n * Attaches crosswalk hover\\n * @param el element\\n */\\n private attachCrosswalkHover(el: Element): void {\\n this.attachEvent(el, \'mouseover\').subscribe((event) => this.onCrosswalkHover(event));\\n this.attachEvent(el, \'mouseout\').subscribe(() => this.onCrosswalkHover(undefined as never as MouseEvent));\\n this.attachEvent(el, \'click\').subscribe((event) => this.nodeClick.emit(this.getNode(event)));\\n }\\n\\n /**\\n * Finds matching node in data from a hovered element\\n * @param event Mouse event\\n */\\n private onCrosswalkHover(event: MouseEvent): void {\\n if (event) {\\n const node = this.getNode(event);\\n if (node) {\\n this.nodeHoverData$.next({\\n node: node.label,\\n origin: {\\n x: event.clientX,\\n y: event.clientY,\\n },\\n });\\n this.nodeHover.emit(node); //emits node entry\\n }\\n } else {\\n this.nodeHoverData$.next(undefined);\\n this.nodeHover.emit();\\n }\\n }\\n\\n /**\\n * Clears observables\\n */\\n private clear(): void {\\n this.destroy$.next();\\n this.destroy$.complete();\\n this.destroy$ = new Subject();\\n }\\n\\n /**\\n * Returns entry from mapping if target, parent, or grandparent id matches the node name\\n * @param event Event\\n * @returns Node entry that matches the target id\\n */\\n private getNode(event: Event): T | undefined {\\n const targetId = (event.target as Element).id;\\n const parentId = (event.target as Element).parentElement?.id ?? \'\';\\n const grandparentId = (event.target as Element).parentElement?.parentElement?.id ?? \'\';\\n const idCollection = [targetId, parentId, grandparentId];\\n for (const id of idCollection) {\\n const decodedID = this.decodeId(id);\\n const match = this.mapping.find(\\n (item) => item.id?.toLowerCase() === decodedID.toLowerCase() //search mapping by name for matching node entry\\n );\\n if (match) {\\n return match;\\n }\\n }\\n return undefined;\\n }\\n\\n /**\\n * Decodes id into a normal string\\n * @param id Undecoded ID\\n * @returns id\\n */\\n private decodeId(id: string): string {\\n const replacer = (_match: string, hex: string) => String.fromCharCode(Number.parseInt(hex, 16));\\n return id.replace(/_x([\\\\da-f]+)_/gi, replacer);\\n }\\n\\n /**\\n * Turns normal string into decoded SVG id\\n * @param id id\\n * @returns Encoded id\\n */\\n private encodeId(id: string): string {\\n const replacer = (match: string) => `_x${match.charCodeAt(0).toString(16).toUpperCase()}_`;\\n return id.replace(/[^a-z0-9-]/gi, replacer);\\n }\\n\\n /**\\n * Attaches an event listener\\n * @template K\\n * @param el Element\\n * @param event Event\\n * @returns Observable\\n */\\n private attachEvent(el: Element, event: K): Observable {\\n const { renderer, destroy$ } = this;\\n const add = (handler: NodeEventHandler) => renderer.listen(el, event, handler);\\n const remove = (_handler: NodeEventHandler, unlisten: () => void) => unlisten();\\n return fromEventPattern(add, remove).pipe(takeUntil(destroy$));\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":".svg {\\n max-height: calc(100vh - 14rem);\\n overflow-y: auto;\\n}\\nsvg {\\n max-height: calc(100vh - 10rem);\\n width: 100%;\\n}\\n\\n[id^=\'Crosswalk\'] {\\n :is(path, polygon, polyline) {\\n fill: transparent;\\n stroke: transparent;\\n }\\n\\n .hover-active & g:hover > :is(path, polygon, polyline),\\n .hover-active & g > g:hover > :is(path, polygon, polyline),\\n .click-active {\\n fill: hsl(0deg 100% 50%);\\n mix-blend-mode: saturation;\\n }\\n}\\n\\n::-webkit-scrollbar {\\n width: 0.5rem;\\n height: 0.5rem;\\n}\\n\\n::-webkit-scrollbar-track {\\n background: #f8f9fa;\\n border: 0.063rem solid #d3d3d3;\\n}\\n\\n::-webkit-scrollbar-thumb {\\n background: #a0abb4;\\n border-radius: 0.5rem;\\n}\\n","styleUrl":"./interactive-svg.component.scss"}],"stylesData":"","implements":["OnChanges","OnDestroy"],"templateData":"\\n\\n\\n \\n \\n \\n\\n"},{"name":"LandingPageInDepthComponent","id":"component-LandingPageInDepthComponent-266cc77d12f81268af62a259a42675f25c0be65e3cab6881ce7afcd3dbaa4ab87e767f669fc822ea592327de677787a00c9eb4a5b9b1171d78fe6aefc8cc439b","file":"src/lib/landing-page-in-depth/landing-page-in-depth.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-landing-page-in-depth","styleUrls":["./landing-page-in-depth.component.scss"],"styles":[],"templateUrl":["./landing-page-in-depth.component.html"],"viewProviders":[],"inputsClass":[{"name":"description","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nImage description shown to the user","description":"

Image description shown to the user

\\n","line":24,"type":"string","decorators":[]},{"name":"img","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nImage shown to the user","description":"

Image shown to the user

\\n","line":27,"type":"string","decorators":[]},{"name":"moreLink","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nLink to navigate to on more button click","description":"

Link to navigate to on more button click

\\n","line":33,"type":"any","decorators":[]},{"name":"moreText","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nText for more button","description":"

Text for more button

\\n","line":30,"type":"string","decorators":[]},{"name":"title","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nImage title shown to the user","description":"

Image title shown to the user

\\n","line":21,"type":"string","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Displays the image and also corresponding title and text along with a button to read more

\\n","rawdescription":"\\n\\nDisplays the image and also corresponding title and text along with a button to read more\\n","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EMPTY_LINK, LinkDirective } from \'@hra-ui/cdk\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/**\\n * Displays the image and also corresponding title and text along with a button to read more\\n */\\n@Component({\\n selector: \'hra-landing-page-in-depth\',\\n standalone: true,\\n imports: [CommonModule, MarkdownModule, MatButtonModule, MatIconModule, LinkDirective],\\n templateUrl: \'./landing-page-in-depth.component.html\',\\n styleUrls: [\'./landing-page-in-depth.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class LandingPageInDepthComponent {\\n /** Image title shown to the user */\\n @Input() title = \'\';\\n\\n /** Image description shown to the user */\\n @Input() description = \'\';\\n\\n /** Image shown to the user */\\n @Input() img = \'\';\\n\\n /** Text for more button */\\n @Input() moreText = \'\';\\n\\n /** Link to navigate to on more button click */\\n @Input() moreLink = EMPTY_LINK;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n display: grid;\\n grid-template-columns: 2fr 3fr;\\n grid-template-rows: auto auto 1fr;\\n column-gap: 2rem;\\n row-gap: 2rem;\\n padding: 3.5rem 2rem;\\n\\n .image {\\n grid-column: 1;\\n grid-row: 1 / span 3;\\n width: 100%;\\n height: auto;\\n align-self: center;\\n border-radius: 1rem;\\n box-shadow: 0.06rem 0.13rem 1rem 0.13rem #00000029;\\n }\\n\\n .title {\\n font-size: 2rem;\\n line-height: 2.5rem;\\n margin: 0;\\n }\\n\\n .description {\\n font-size: 1rem;\\n line-height: 1.5rem;\\n\\n ::ng-deep p {\\n margin: 0;\\n }\\n\\n ::ng-deep a {\\n color: vars.$primary-rgb;\\n font-weight: 700;\\n }\\n }\\n\\n .more-button {\\n width: fit-content;\\n height: 3rem;\\n }\\n}\\n","styleUrl":"./landing-page-in-depth.component.scss"}],"stylesData":"","templateData":"\\"\\"\\n

{{ title }}

\\n\\n\\n"},{"name":"LandingPageIntroComponent","id":"component-LandingPageIntroComponent-8e48a2ad3d32eea60c9dee7976b3dbc195b3a8107a3c174ac68b4696362903f19522bad089b509daae23505334aa5361945e7a8124fd32f17a6834c349c87aed","file":"src/lib/landing-page-intro/landing-page-intro.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-landing-page-intro","styleUrls":["./landing-page-intro.component.scss"],"styles":[],"templateUrl":["./landing-page-intro.component.html"],"viewProviders":[],"inputsClass":[{"name":"description","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nDescription for FTU Explorer","description":"

Description for FTU Explorer

\\n","line":22,"type":"string","decorators":[]},{"name":"img","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nIntro Image file url","description":"

Intro Image file url

\\n","line":28,"type":"string","decorators":[]},{"name":"moreLink","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nLink to navigate to on more button click","description":"

Link to navigate to on more button click

\\n","line":34,"type":"any","decorators":[]},{"name":"moreText","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nText for more button","description":"

Text for more button

\\n","line":31,"type":"string","decorators":[]},{"name":"partners","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nThank you message to partners","description":"

Thank you message to partners

\\n","line":25,"type":"string","decorators":[]},{"name":"title","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nIntro title for FTU Explorer","description":"

Intro title for FTU Explorer

\\n","line":19,"type":"string","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for LandingPage Intro

\\n","rawdescription":"\\nComponent for LandingPage Intro","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EMPTY_LINK, LinkDirective } from \'@hra-ui/cdk\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/** Component for LandingPage Intro */\\n@Component({\\n selector: \'hra-landing-page-intro\',\\n standalone: true,\\n imports: [CommonModule, MatButtonModule, MatIconModule, MarkdownModule, LinkDirective],\\n templateUrl: \'./landing-page-intro.component.html\',\\n styleUrls: [\'./landing-page-intro.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class LandingPageIntroComponent {\\n /** Intro title for FTU Explorer */\\n @Input() title = \'\';\\n\\n /** Description for FTU Explorer */\\n @Input() description = \'\';\\n\\n /** Thank you message to partners */\\n @Input() partners = \'\';\\n\\n /** Intro Image file url */\\n @Input() img = \'\';\\n\\n /** Text for more button */\\n @Input() moreText = \'\';\\n\\n /** Link to navigate to on more button click */\\n @Input() moreLink = EMPTY_LINK;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n display: grid;\\n grid-template-columns: 3fr 2fr;\\n grid-template-rows: auto auto 3rem 1fr;\\n align-items: start;\\n column-gap: 2rem;\\n row-gap: 2rem;\\n\\n .title {\\n font-size: 3rem;\\n line-height: 4rem;\\n margin: 0;\\n }\\n\\n .more-button {\\n width: fit-content;\\n height: 3rem;\\n }\\n\\n .image {\\n grid-column: 2;\\n grid-row: 1 / span 4;\\n place-self: center;\\n width: 100%;\\n height: auto;\\n }\\n\\n .description,\\n .partners {\\n ::ng-deep p {\\n margin: 0;\\n }\\n\\n ::ng-deep a {\\n color: vars.$primary-rgb;\\n font-weight: 700;\\n }\\n }\\n\\n .red-theme {\\n background-color: #990000;\\n border-color: #990000;\\n &:hover {\\n background-color: #990000;\\n border-color: #990000;\\n\\n mat-icon {\\n transform: translateX(30%);\\n transition: 0.5s;\\n }\\n }\\n\\n &:active,\\n &:focus,\\n &:focus:not(:hover) {\\n background-color: #990000;\\n border-color: #990000;\\n\\n ::ng-deep .mat-mdc-focus-indicator {\\n background-color: #990000 !important;\\n border-color: #990000;\\n }\\n }\\n }\\n}\\n","styleUrl":"./landing-page-intro.component.scss"}],"stylesData":"","templateData":"

{{ title }}

\\n\\n\\n\\n\\n\\n\\"alt\\"\\n"},{"name":"MetricsComponent","id":"component-MetricsComponent-e52c0a1cdf090042d1924c4907a4034774cbb442217faca9ec5035e76d2796116cf55644ecf49ae040fdea1168f9c5d99f6ce15b2079f70de3d853fece481b30","file":"src/lib/metrics/metrics.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-metrics","styleUrls":["./metrics.component.scss"],"styles":[],"templateUrl":["./metrics.component.html"],"viewProviders":[],"inputsClass":[{"name":"logo","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nLogo of metrics component.","description":"

Logo of metrics component.

\\n","line":31,"type":"string","decorators":[]},{"name":"metrics","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nList of metrics that will be shown to the user.","description":"

List of metrics that will be shown to the user.

\\n","line":34,"type":"MetricItem[]","decorators":[]},{"name":"title","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nMain title of metrics component.","description":"

Main title of metrics component.

\\n","line":28,"type":"string","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Describes the metrics for the HuBMAP project.

\\n","rawdescription":"\\n\\nDescribes the metrics for the HuBMAP project.\\n","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\n\\n/**\\n An interface representing a single metric with an icon, value and description.\\n */\\nexport interface MetricItem {\\n /** Represents the icon associated with the metric. */\\n icon: string;\\n /** Describes the numberical value of the metric. */\\n value: string;\\n /** Describes the type of metric. */\\n description: string;\\n}\\n/**\\n * Describes the metrics for the HuBMAP project.\\n */\\n@Component({\\n selector: \'hra-metrics\',\\n standalone: true,\\n imports: [CommonModule],\\n templateUrl: \'./metrics.component.html\',\\n styleUrls: [\'./metrics.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class MetricsComponent {\\n /** Main title of metrics component. */\\n @Input() title = \'\';\\n\\n /** Logo of metrics component. */\\n @Input() logo = \'\';\\n\\n /** List of metrics that will be shown to the user. */\\n @Input() metrics: MetricItem[] = [];\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n padding: 2rem 0 0 0;\\n background: #f8f9fa;\\n gap: 0.5rem;\\n\\n .logo {\\n height: 2.75rem;\\n }\\n\\n .header-title {\\n font-size: 2rem;\\n line-height: 2.5rem;\\n }\\n\\n .metrics {\\n display: flex;\\n flex-direction: row;\\n overflow-x: auto;\\n max-width: 100%;\\n gap: 2rem;\\n padding: 2rem 1.75rem;\\n\\n .metric {\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n min-width: 14.25rem;\\n height: 14.75rem;\\n padding-top: 2rem;\\n padding-bottom: 2rem;\\n\\n .logo {\\n margin-bottom: 2rem;\\n }\\n\\n .value {\\n font-size: 3rem;\\n line-height: 4rem;\\n margin-bottom: 0.25rem;\\n }\\n\\n .description {\\n font-size: 1rem;\\n text-align: center;\\n }\\n }\\n }\\n}\\n","styleUrl":"./metrics.component.scss"}],"stylesData":"","templateData":"\\"\\"\\n{{ title }}\\n\\n
\\n
\\n \\"\\"\\n {{ item.value }} \\n {{ item.description }} \\n
\\n
\\n"},{"name":"ScreenSizeNoticeComponent","id":"component-ScreenSizeNoticeComponent-6b641a220201d969fb228ecf72f5e7a8fc87da742b8a53350bc9c27cea9c54a6493313826b99ec8c34dfd7004772a27748e45af5b0c9ead80bdf168a781117f8","file":"src/lib/screen-size-notice/screen-size-notice.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-screen-size-notice","styleUrls":["./screen-size-notice.component.scss"],"styles":[],"templateUrl":["./screen-size-notice.component.html"],"viewProviders":[],"inputsClass":[{"name":"content","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput for passing screen size notice content\\n","description":"

Input for passing screen size notice content

\\n","line":23,"type":"string","decorators":[]},{"name":"portal","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput of screen size notice component\\n","description":"

Input of screen size notice component

\\n","line":28,"type":"any","decorators":[]}],"outputsClass":[{"name":"proceedClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the proceed button is clicked","description":"

Emits when the proceed button is clicked

\\n","line":31,"type":"EventEmitter"}],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

The screen size notice component displays a notice for the users specifying the required screen size

\\n","rawdescription":"\\n\\nThe screen size notice component displays a notice for the users specifying the required screen size\\n","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EMPTY_LINK, LinkDirective } from \'@hra-ui/cdk\';\\n\\n/**\\n * The screen size notice component displays a notice for the users specifying the required screen size\\n */\\n@Component({\\n selector: \'hra-screen-size-notice\',\\n standalone: true,\\n imports: [CommonModule, MarkdownModule, MatButtonModule, MatIconModule, LinkDirective],\\n templateUrl: \'./screen-size-notice.component.html\',\\n styleUrls: [\'./screen-size-notice.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class ScreenSizeNoticeComponent {\\n /**\\n * Input for passing screen size notice content\\n */\\n @Input() content = \'\';\\n\\n /**\\n * Input of screen size notice component\\n */\\n @Input() portal = EMPTY_LINK;\\n\\n /** Emits when the proceed button is clicked */\\n @Output() readonly proceedClick = new EventEmitter();\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: none;\\n position: relative;\\n border-radius: 0.5rem;\\n padding: 1.5rem;\\n flex-direction: column;\\n\\n .header-close {\\n position: absolute;\\n top: 0.625rem;\\n right: 1rem;\\n }\\n\\n h3 {\\n margin: 0 0 1rem 0;\\n font-weight: 700;\\n }\\n\\n .btn-stroked {\\n font-weight: 700;\\n margin-bottom: 1rem;\\n margin-top: 1rem;\\n padding: 0.75rem 0;\\n letter-spacing: 0.5px;\\n }\\n\\n .btn-flat {\\n font-weight: 700;\\n font-size: 16px;\\n padding: 0.75rem 0;\\n letter-spacing: 0.5px;\\n color: white;\\n }\\n\\n .content {\\n font-size: 1rem;\\n line-height: 1.5rem;\\n letter-spacing: 0.5px;\\n }\\n\\n @media (max-width: 480px) {\\n display: flex;\\n }\\n}\\n","styleUrl":"./screen-size-notice.component.scss"}],"stylesData":"","templateData":"

Screen Size Notice

\\n\\n\\n\\n Human Reference Atlas Portal \\n"},{"name":"SourceListComponent","id":"component-SourceListComponent-f0d0464b044f898be3752719190f2d8ad8511283d4daafb2f8b17bd0f4dfa0290abbbeb293819664c07134fcaee5a64313aaf72d69e335a063e244c2ba1d7c0c","file":"src/lib/source-list/source-list.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-source-list","styleUrls":["./source-list.component.scss"],"styles":[],"templateUrl":["./source-list.component.html"],"viewProviders":[],"inputsClass":[{"name":"collaborateText","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput buttonon text of empty biomarker component.\\n","description":"

Input buttonon text of empty biomarker component.

\\n","line":34,"type":"string","decorators":[]},{"name":"message","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput message markdown of empty biomarker component.\\n","description":"

Input message markdown of empty biomarker component.

\\n","line":39,"type":"string","decorators":[]},{"name":"sources","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nList of sources with titles and links displayed to the user","description":"

List of sources with titles and links displayed to the user

\\n","line":30,"type":"SourceListItem[]","decorators":[]}],"outputsClass":[{"name":"collaborateClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the contact button is clicked","description":"

Emits when the contact button is clicked

\\n","line":47,"type":"EventEmitter"}],"propertiesClass":[{"name":"showTable","defaultValue":"true","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Show table of source list component which toggles to true or false\\nbased on click

\\n","line":44,"rawdescription":"\\n\\nShow table of source list component which toggles to true or false\\nbased on click\\n"}],"methodsClass":[{"name":"toggleTable","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":53,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nIt changes the value of showTable to false if value it true\\nand vice versa\\n","description":"

It changes the value of showTable to false if value it true\\nand vice versa

\\n"}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

This component shows list of sources with title and links to the datasets

\\n","rawdescription":"\\nThis component shows list of sources with title and links to the datasets","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule } from \'@angular/material/table\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EmptyBiomarkerComponent, LabelBoxComponent } from \'@hra-ui/components/atoms\';\\n\\n/** SourceListItem interface contains title and link to the dataset for the SourceList*/\\nexport interface SourceListItem {\\n /** Title of the dataset in the SourceList */\\n title: string;\\n\\n /** Label of the dataset in the SourceList */\\n label: string;\\n\\n /** Link to the dataset in the SourceList */\\n link: string;\\n}\\n\\n/** This component shows list of sources with title and links to the datasets */\\n@Component({\\n selector: \'hra-source-list\',\\n standalone: true,\\n imports: [CommonModule, MatTableModule, MatIconModule, LabelBoxComponent, EmptyBiomarkerComponent],\\n templateUrl: \'./source-list.component.html\',\\n styleUrls: [\'./source-list.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class SourceListComponent {\\n /** List of sources with titles and links displayed to the user */\\n @Input() sources: SourceListItem[] = [];\\n /**\\n * Input buttonon text of empty biomarker component.\\n */\\n @Input() collaborateText = \'\';\\n\\n /**\\n * Input message markdown of empty biomarker component.\\n */\\n @Input() message = \'\';\\n /**\\n * Show table of source list component which toggles to true or false\\n * based on click\\n */\\n showTable = true;\\n\\n /** Emits when the contact button is clicked */\\n @Output() readonly collaborateClick = new EventEmitter();\\n\\n /**\\n * It changes the value of showTable to false if value it true\\n * and vice versa\\n */\\n toggleTable(): void {\\n this.showTable = !this.showTable;\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'utils\';\\n@use \'variables\' as vars;\\n\\n:host {\\n display: block;\\n height: 100%;\\n\\n .sr-only {\\n @include utils.sr-only();\\n }\\n\\n .toggle {\\n display: flex;\\n align-items: center;\\n height: 3.5rem;\\n grid-area: source-list-header;\\n color: var(--dark-primary-text);\\n border-top: 0.063rem solid #d3d3d3;\\n border-bottom: 0.063rem solid #d3d3d3;\\n }\\n\\n .table-content {\\n height: calc(100% - 3.5rem);\\n overflow: auto;\\n\\n &.hidden {\\n display: none;\\n }\\n\\n table {\\n height: 100%;\\n }\\n\\n .mat-mdc-cell {\\n vertical-align: top;\\n border: none;\\n padding: 0.25rem 0.875rem;\\n font-size: 1rem;\\n }\\n\\n ::ng-deep .mdc-data-table__content {\\n display: block;\\n padding: 1rem 0rem;\\n }\\n }\\n}\\n","styleUrl":"./source-list.component.scss"}],"stylesData":"","templateData":"\\n Source Data\\n \\n {{ showTable ? \'keyboard_arrow_down\' : \'keyboard_arrow_up\' }}\\n \\n\\n\\n
\\n \\n \\n\\n \x3c!-- Position Column --\x3e\\n \\n \\n \\n \\n\\n \x3c!-- Data Column --\x3e\\n \\n \\n \\n \\n\\n \\n
\\n Source List Table with Title and Links\\n
Item Number{{ i + 1 }}.Title and Link\\n {{ element.title }}\\n
\\n {{ element.label }}\\n
\\n \\n
\\n"},{"name":"TissueTreeListComponent","id":"component-TissueTreeListComponent-8544338e8c5e11dd440f8b104bfa31552155bc5006289770258a8e940978177df7797adcb9bafb5b09a9943913ecf339692d528f868c6846be5c3de8a6270237","file":"src/lib/tissue-tree-list/tissue-tree-list.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-tissue-tree-list","styleUrls":["./tissue-tree-list.component.scss"],"styles":[],"templateUrl":["./tissue-tree-list.component.html"],"viewProviders":[],"inputsClass":[{"name":"nodes","defaultValue":"{} as Record","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput of tissue tree list component\\n","description":"

Input of tissue tree list component

\\n","line":69,"type":"Record","decorators":[]},{"name":"selected","defaultValue":"undefined","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nNode selected, to view the data associated with it\\n","description":"

Node selected, to view the data associated with it

\\n","line":74,"type":"T","decorators":[]}],"outputsClass":[{"name":"selectedChange","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nOutput of tissue tree list component\\n","description":"

Output of tissue tree list component

\\n","line":79,"type":"EventEmitter"}],"propertiesClass":[{"name":"control","defaultValue":"new FlatTreeControl>(\\n (node) => node.level,\\n (node) => node.expandable\\n )","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

tree controller, used to control the nodes in the tree

\\n","line":84,"rawdescription":"\\n\\ntree controller, used to control the nodes in the tree\\n","modifierKind":[144]},{"name":"dataSource","defaultValue":"new MatTreeFlatDataSource(this.control, this.flattener)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Data source of tissue tree list component, defines the data in mat-tree

\\n","line":107,"rawdescription":"\\n\\nData source of tissue tree list component, defines the data in mat-tree\\n","modifierKind":[144]},{"name":"flattener","defaultValue":"new MatTreeFlattener>(\\n (node, level) => ({\\n label: node.label,\\n expandable: (node.children?.length ?? 0) > 0,\\n level,\\n data: node,\\n }),\\n (node) => node.level,\\n (node) => node.expandable,\\n (node) => node.children?.map((id) => this.nodes[id])\\n )","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Flattener of tissue tree list component, returns flat-data structure

\\n","line":92,"rawdescription":"\\n\\nFlattener of tissue tree list component, returns flat-data structure\\n","modifierKind":[144]}],"methodsClass":[{"name":"hasChild","args":[{"name":"_","type":"number","deprecated":false,"deprecationMessage":""},{"name":"node","type":"InternalNode","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"boolean","typeParameters":[],"line":128,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\ncheck if the current node has children\\n","description":"

check if the current node has children

\\n","jsdoctags":[{"name":"_","type":"number","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}},{"name":{"pos":3422,"end":3426,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"node"},"type":"InternalNode","deprecated":false,"deprecationMessage":"","tagName":{"pos":3416,"end":3421,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":"

current selected node

\\n"},{"tagName":{"pos":3455,"end":3462,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":"

boolean, which means if node has children

\\n"}]},{"name":"resetSelection","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":146,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nResets selection and collapes all nodes of the tree.\\n","description":"

Resets selection and collapes all nodes of the tree.

\\n"},{"name":"selectNode","args":[{"name":"node","type":"T","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"void","typeParameters":[],"line":136,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nIt selects the node, which is clicked.\\n","description":"

It selects the node, which is clicked.

\\n","jsdoctags":[{"name":{"pos":3665,"end":3669,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"node"},"type":"T","deprecated":false,"deprecationMessage":"","tagName":{"pos":3659,"end":3664,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":"

Tissue Tree Item, which is clicked

\\n"}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Tabular View for hubMap tissue side-bar

\\n","rawdescription":"\\n\\nTabular View for hubMap tissue side-bar\\n","type":"component","sourceCode":"import { FlatTreeControl } from \'@angular/cdk/tree\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n Input,\\n OnChanges,\\n Output,\\n SimpleChanges,\\n} from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatRippleModule } from \'@angular/material/core\';\\nimport { MatExpansionModule } from \'@angular/material/expansion\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatTreeFlatDataSource, MatTreeFlattener, MatTreeModule } from \'@angular/material/tree\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { LinkId } from \'@hra-ui/cdk/state\';\\n\\n/** Base node type */\\nexport interface DataNode {\\n /** User readable label */\\n label: string;\\n /** Id to pass as a query parameter on navigation */\\n id?: string;\\n /** Link to navigate to on node click */\\n link?: LinkId;\\n /** Nested nodes */\\n children?: K[];\\n}\\n\\n/**\\n * Internal interface for flat tissue data hierarchy\\n */\\ninterface InternalNode> {\\n /** Displayed label */\\n label: string;\\n /** Whether the node can be expanded to display child nodes */\\n expandable: boolean;\\n /** Depth of node in the tree */\\n level: number;\\n /** Associated user node data */\\n data: T;\\n}\\n\\n/**\\n * Tabular View for hubMap tissue side-bar\\n */\\n@Component({\\n selector: \'hra-tissue-tree-list\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatButtonModule,\\n MatTreeModule,\\n MatIconModule,\\n MatExpansionModule,\\n MatRippleModule,\\n LinkDirective,\\n ],\\n templateUrl: \'./tissue-tree-list.component.html\',\\n styleUrls: [\'./tissue-tree-list.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class TissueTreeListComponent> implements OnChanges {\\n /**\\n * Input of tissue tree list component\\n */\\n @Input() nodes: Record = {} as Record;\\n\\n /**\\n * Node selected, to view the data associated with it\\n */\\n @Input() selected?: T = undefined;\\n\\n /**\\n * Output of tissue tree list component\\n */\\n @Output() readonly selectedChange = new EventEmitter();\\n\\n /**\\n * tree controller, used to control the nodes in the tree\\n */\\n readonly control = new FlatTreeControl>(\\n (node) => node.level,\\n (node) => node.expandable\\n );\\n\\n /**\\n * Flattener of tissue tree list component, returns flat-data structure\\n */\\n readonly flattener = new MatTreeFlattener>(\\n (node, level) => ({\\n label: node.label,\\n expandable: (node.children?.length ?? 0) > 0,\\n level,\\n data: node,\\n }),\\n (node) => node.level,\\n (node) => node.expandable,\\n (node) => node.children?.map((id) => this.nodes[id])\\n );\\n\\n /**\\n * Data source of tissue tree list component, defines the data in mat-tree\\n */\\n readonly dataSource = new MatTreeFlatDataSource(this.control, this.flattener);\\n\\n /**\\n * Take actions if any data changes\\n * @param changes changes in data\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'nodes\' in changes) {\\n this.dataSource.data = this.findRootNodes();\\n }\\n if (\'selected\' in changes) {\\n const path = this.selected ? this.dfsFindPath(this.findRootNodes(), this.selected) : [];\\n this.expandPath(path);\\n }\\n }\\n\\n /**\\n * check if the current node has children\\n * @param node current selected node\\n * @returns boolean, which means if node has children\\n */\\n hasChild(_: number, node: InternalNode): boolean {\\n return node.expandable;\\n }\\n\\n /**\\n * It selects the node, which is clicked.\\n * @param node Tissue Tree Item, which is clicked\\n */\\n selectNode(node: T): void {\\n if (this.selected !== node) {\\n this.selected = node;\\n this.selectedChange.emit(this.selected);\\n }\\n }\\n\\n /**\\n * Resets selection and collapes all nodes of the tree.\\n */\\n resetSelection(): void {\\n this.selected = undefined;\\n this.control.collapseAll();\\n }\\n\\n /**\\n * It creates a copy of the input nodes object.\\n * It iterates over it and removes all the children nodes from it.\\n * @returns remaining nodes which are root nodes.\\n */\\n private findRootNodes(): T[] {\\n const { nodes } = this;\\n const roots = { ...this.nodes };\\n for (const key in nodes) {\\n for (const child of nodes[key].children ?? []) {\\n delete roots[child];\\n }\\n }\\n\\n return Object.values(roots);\\n }\\n\\n /**\\n * expands the tree nodes based on the path provided.\\n * @param path is given as an input.\\n */\\n private expandPath(path: DataNode[]): void {\\n const nodes = this.control.dataNodes.filter((node) => path.includes(node.data));\\n nodes.forEach((node) => this.control.expand(node));\\n }\\n\\n /**\\n * It used the logic of depth first search to find the target node.\\n * returns the path to the target node.\\n */\\n private dfsFindPath(nodes: T[], target: T, path: T[] = []): T[] {\\n for (const node of nodes) {\\n path.push(node);\\n if (node === target) {\\n return path;\\n }\\n\\n const savedLength = path.length;\\n const children = node.children?.map((id) => this.nodes[id]) ?? [];\\n if (this.dfsFindPath(children, target, path).length > savedLength) {\\n return path;\\n }\\n\\n path.pop();\\n }\\n\\n return path;\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n display: block;\\n height: calc(100% - 5rem);\\n overflow-y: auto;\\n .row {\\n min-height: 2rem;\\n &.child {\\n padding: 5px 0 5px 64px;\\n }\\n &.selected {\\n background-color: vars.$accent-lighter-rgb;\\n }\\n\\n .toggle {\\n width: 2rem;\\n height: 2rem;\\n padding: 0.25rem;\\n }\\n\\n .label-container {\\n display: flex;\\n align-items: center;\\n height: 2rem;\\n padding: 0 1rem;\\n border-radius: 0.25rem;\\n\\n .link {\\n cursor: pointer;\\n text-decoration: none;\\n color: rgba(vars.$dark-primary-text);\\n }\\n }\\n\\n &.selected .label-container .link {\\n color: vars.$accent-rgb;\\n }\\n }\\n}\\n","styleUrl":"./tissue-tree-list.component.scss"}],"stylesData":"","implements":["OnChanges"],"templateData":"\\n \\n \\n \\n\\n \\n \\n\\n \\n \\n\\n\\n\\n
\\n \\n {{ label }}\\n \\n \\n {{ label }}\\n \\n
\\n\\n"},{"name":"TitleCardComponent","id":"component-TitleCardComponent-dda33e0370aff82797f5b3494c98b25f59e8b87daefd03e828cec8116928222c19885f73255625acfce7c66d590784fd1ad8faa664dac65130f8119fc2670670","file":"src/lib/title-card/title-card.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-title-card","styleUrls":["./title-card.component.scss"],"styles":[],"templateUrl":["./title-card.component.html"],"viewProviders":[],"inputsClass":[{"name":"description","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nDescription for the title card shown to the user","description":"

Description for the title card shown to the user

\\n","line":19,"type":"string","decorators":[]},{"name":"title","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nTitle for the title card shown to the user","description":"

Title for the title card shown to the user

\\n","line":16,"type":"string","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Displays title card to the user with title and description

\\n","rawdescription":"\\nDisplays title card to the user with title and description","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/** Displays title card to the user with title and description */\\n@Component({\\n selector: \'hra-title-card\',\\n standalone: true,\\n imports: [CommonModule, MarkdownModule],\\n templateUrl: \'./title-card.component.html\',\\n styleUrls: [\'./title-card.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class TitleCardComponent {\\n /** Title for the title card shown to the user*/\\n @Input() title = \'\';\\n\\n /** Description for the title card shown to the user*/\\n @Input() description = \'\';\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n\\n .title {\\n margin-bottom: 0.5rem;\\n }\\n}\\n","styleUrl":"./title-card.component.scss"}],"stylesData":"","templateData":"

{{ title }}

\\n\\n"}],"modules":[],"miscellaneous":{"variables":[{"name":"DOWNLOADS_LIST_POSITION","ctype":"miscellaneous","subtype":"variable","file":"src/lib/footer/footer.component.ts","deprecated":false,"deprecationMessage":"","type":"ConnectedPosition[]","defaultValue":"[\\n {\\n panelClass: \'above\',\\n originX: \'start\',\\n originY: \'top\',\\n overlayX: \'start\',\\n overlayY: \'bottom\',\\n offsetY: 0,\\n },\\n {\\n panelClass: \'below\',\\n originX: \'start\',\\n originY: \'bottom\',\\n overlayX: \'start\',\\n overlayY: \'top\',\\n },\\n]","rawdescription":"Positioning value for the download list popup","description":"

Positioning value for the download list popup

\\n"},{"name":"EMPTY_CONTACT_DATA","ctype":"miscellaneous","subtype":"variable","file":"src/lib/contact-modal/contact-modal.component.ts","deprecated":false,"deprecationMessage":"","type":"Partial","defaultValue":"{\\n email: undefined,\\n subject: undefined,\\n message: undefined,\\n}","rawdescription":"Initial empty contact data","description":"

Initial empty contact data

\\n"},{"name":"HOVER_DELAY","ctype":"miscellaneous","subtype":"variable","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"number","defaultValue":"200","rawdescription":"Delay before tooltip becomes visible","description":"

Delay before tooltip becomes visible

\\n"},{"name":"TOOLTIP_POSITIONS","ctype":"miscellaneous","subtype":"variable","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"ConnectedPosition[]","defaultValue":"[\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'start\',\\n overlayY: \'center\',\\n offsetX: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'end\',\\n overlayY: \'center\',\\n offsetX: -8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'top\',\\n offsetY: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'bottom\',\\n offsetY: -8,\\n },\\n]","rawdescription":"Tooltip position settings","description":"

Tooltip position settings

\\n"}],"functions":[],"typealiases":[],"enumerations":[],"groupedVariables":{"src/lib/footer/footer.component.ts":[{"name":"DOWNLOADS_LIST_POSITION","ctype":"miscellaneous","subtype":"variable","file":"src/lib/footer/footer.component.ts","deprecated":false,"deprecationMessage":"","type":"ConnectedPosition[]","defaultValue":"[\\n {\\n panelClass: \'above\',\\n originX: \'start\',\\n originY: \'top\',\\n overlayX: \'start\',\\n overlayY: \'bottom\',\\n offsetY: 0,\\n },\\n {\\n panelClass: \'below\',\\n originX: \'start\',\\n originY: \'bottom\',\\n overlayX: \'start\',\\n overlayY: \'top\',\\n },\\n]","rawdescription":"Positioning value for the download list popup","description":"

Positioning value for the download list popup

\\n"}],"src/lib/contact-modal/contact-modal.component.ts":[{"name":"EMPTY_CONTACT_DATA","ctype":"miscellaneous","subtype":"variable","file":"src/lib/contact-modal/contact-modal.component.ts","deprecated":false,"deprecationMessage":"","type":"Partial","defaultValue":"{\\n email: undefined,\\n subject: undefined,\\n message: undefined,\\n}","rawdescription":"Initial empty contact data","description":"

Initial empty contact data

\\n"}],"src/lib/interactive-svg/interactive-svg.component.ts":[{"name":"HOVER_DELAY","ctype":"miscellaneous","subtype":"variable","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"number","defaultValue":"200","rawdescription":"Delay before tooltip becomes visible","description":"

Delay before tooltip becomes visible

\\n"},{"name":"TOOLTIP_POSITIONS","ctype":"miscellaneous","subtype":"variable","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"ConnectedPosition[]","defaultValue":"[\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'start\',\\n overlayY: \'center\',\\n offsetX: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'end\',\\n overlayY: \'center\',\\n offsetX: -8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'top\',\\n offsetY: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'bottom\',\\n offsetY: -8,\\n },\\n]","rawdescription":"Tooltip position settings","description":"

Tooltip position settings

\\n"}]},"groupedFunctions":{},"groupedEnumerations":{},"groupedTypeAliases":{}}}')},"./dist/compodoc/components-organisms/documentation.json":module=>{"use strict";module.exports=JSON.parse('{"pipes":[],"interfaces":[{"name":"DataCell","id":"interface-DataCell-1a11b32dee89b55746dd02d393406aa7ea06e3d180099074510a109749d06241410786b045f3a9d570f4479be6442014b194d68f340724b0e76b4b0983b59760","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule, MatTableDataSource } from \'@angular/material/table\';\\nimport {\\n BiomarkerTableDataCardComponent,\\n BiomarkerTableDataIconComponent,\\n DataItem,\\n} from \'@hra-ui/components/molecules\';\\nimport { HoverDirective } from \'@hra-ui/cdk\';\\nimport { GradientPoint, SizeLegend } from \'@hra-ui/components/atoms\';\\n\\n/**\\n * RGBTriblet of type RGB to store color\\n */\\ntype RGBTriplet = [number, number, number];\\n\\n/**\\n * An interface representing a single cell of the table.\\n */\\nexport interface DataCell {\\n /** Represents the color of the icon */\\n color: string;\\n /** Represents the size of the icon */\\n size: number;\\n /** Represents the data for the data card */\\n data: {\\n cell: string;\\n biomarker: string;\\n meanExpression: number;\\n /** Number of datasets for this Tissue */\\n dataset_count: number;\\n };\\n}\\n\\n/**\\n * Details of the Tissue\\n */\\nexport interface TissueInfo {\\n /** ID of the Tissue */\\n id: string;\\n /** Name of the Tissue */\\n label: string;\\n}\\n\\n/** Describes the composition of a single row in the table */\\nexport type DataRow = [string, number | undefined, ...(T | undefined)[]];\\n\\n/** Cell types table, describing the types and quanitites of cells for a specific organ */\\n@Component({\\n selector: \'hra-biomarker-table\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatTableModule,\\n BiomarkerTableDataIconComponent,\\n HoverDirective,\\n BiomarkerTableDataCardComponent,\\n ],\\n templateUrl: \'./biomarker-table.component.html\',\\n styleUrls: [\'./biomarker-table.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableComponent implements OnChanges {\\n /**\\n * Input: TissueInfo carrying the details of the tissue open\\n */\\n @Input() tissueInfo: TissueInfo = {\\n id: \'\',\\n label: \'\',\\n };\\n\\n /** Columns for the table */\\n @Input() columns: string[] = [];\\n\\n /** Rows of the table */\\n @Input() data: DataRow[] = [];\\n\\n /** Gradient colors along with their stop points */\\n @Input() gradient: GradientPoint[] = [];\\n\\n /** Taking input for the radius of the circle and the label to be displayed. */\\n @Input() sizes: SizeLegend[] = [];\\n\\n /**Cell name which is hovered, used for highlighting */\\n @Input() hightlightedCellName = \'\';\\n\\n /** Getter method to provide the definations of the columns */\\n get columnsWithTypeAndCount(): string[] {\\n return [\'type\', \'count\', ...this.columns];\\n }\\n\\n /** Source for the table */\\n readonly dataSource = new MatTableDataSource>([]);\\n\\n /**\\n * sets the data source for the table on every change\\n * @param changes object consisting of change in the Input\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.dataSource.data = this.data;\\n }\\n }\\n\\n /** Lerp function to give value beween min and max value based on the given value\\n *\\n * @param value\\n * @param min\\n * @param max\\n * @returns\\n */\\n lerp(value: number, min: number, max: number): number {\\n return min * (1 - value) + max * value;\\n }\\n\\n /**\\n * Converts HexCode to RGB\\n * @param hex\\n * @returns\\n */\\n hex2rgb(hex: string): RGBTriplet {\\n const r = parseInt(hex.slice(1, 3), 16);\\n const g = parseInt(hex.slice(3, 5), 16);\\n const b = parseInt(hex.slice(5, 7), 16);\\n return [r, g, b];\\n }\\n\\n /**\\n * Gets Min and Max color grade based on the meanExpression value\\n * @param meanExpression\\n * @returns\\n */\\n getMinMaxColor(meanExpression: number): { minColor: RGBTriplet; maxColor: RGBTriplet } {\\n const index = this.gradient.findIndex((item, i, arr) => {\\n return meanExpression >= item.percentage && meanExpression <= arr[i + 1]?.percentage;\\n });\\n\\n const minColor: RGBTriplet = this.hex2rgb(this.gradient[index]?.color ?? this.gradient[0].color);\\n const maxColor: RGBTriplet = this.hex2rgb(\\n this.gradient[index + 1]?.color ?? this.gradient[this.gradient.length - 1].color\\n );\\n\\n return { minColor, maxColor };\\n }\\n\\n /**\\n * Gets Min and Max size grade based on the Percentage value\\n * @param percentage\\n * @returns\\n */\\n getMinMaxSize(percentage: number): { minSize: number; maxSize: number } {\\n const index = this.sizes.findIndex((item, i, arr) => {\\n return percentage >= parseFloat(item.label) / 100 && percentage <= parseFloat(arr[i + 1]?.label) / 100;\\n });\\n const minSize: number = this.sizes[index]?.radius ?? this.sizes[0].radius;\\n const maxSize: number = this.sizes[index + 1]?.radius ?? this.sizes[this.sizes.length - 1].radius;\\n return { minSize, maxSize };\\n }\\n\\n /**\\n * Calculates the color of this value on this gradient\\n * @param value\\n * @returns\\n */\\n getColor(value: number): string {\\n const { minColor, maxColor } = this.getMinMaxColor(value);\\n return (\\n \'#\' +\\n minColor\\n .map((min, index) => this.lerp(value, min, maxColor[index]))\\n .map((component) => Math.round(component).toString(16))\\n .join(\'\')\\n );\\n }\\n\\n /**\\n * gets Size of the Cell based on the percentage value\\n * @param value\\n * @returns\\n */\\n getSize(value: number): number {\\n const { minSize, maxSize } = this.getMinMaxSize(value);\\n return this.lerp(value, minSize, maxSize);\\n }\\n\\n /**\\n * rocesses the object for hover data for Table Cell\\n * @param index index of the row of the datasource\\n * @param row row of the datasource\\n * @returns\\n */\\n getHoverData([index, row]: [number, DataRow]): DataItem[][] {\\n if (row[index] === undefined) {\\n return [];\\n }\\n\\n const {\\n tissueInfo: { id, label },\\n } = this;\\n const {\\n data: { cell, biomarker, meanExpression, dataset_count },\\n } = row[index] as T;\\n\\n return [\\n [\\n { label: \'Functional Tissue Unit Name\', value: label },\\n { label: \'Uberon ID\', value: id },\\n { label: \'#Datasets\', value: `${dataset_count ?? 0}` },\\n ],\\n [\\n { label: \'Cell Type Name\', value: row[0] },\\n { label: \'CL ID\', value: cell },\\n { label: \'Number of Cells\', value: `${row[1]}` },\\n ],\\n [\\n { label: \'Gene Name\', value: this.columns[index - 2] },\\n { label: \'HGNC ID\', value: biomarker },\\n { label: \'Mean Expression Value\', value: meanExpression.toFixed(6) },\\n ],\\n ];\\n }\\n}\\n","properties":[{"name":"color","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Represents the color of the icon

\\n","line":22,"rawdescription":"\\nRepresents the color of the icon"},{"name":"data","deprecated":false,"deprecationMessage":"","type":"literal type","optional":false,"description":"

Represents the data for the data card

\\n","line":26,"rawdescription":"\\nRepresents the data for the data card"},{"name":"size","deprecated":false,"deprecationMessage":"","type":"number","optional":false,"description":"

Represents the size of the icon

\\n","line":24,"rawdescription":"\\nRepresents the size of the icon"}],"indexSignatures":[],"kind":165,"description":"

An interface representing a single cell of the table.

\\n","rawdescription":"\\n\\nAn interface representing a single cell of the table.\\n","methods":[]},{"name":"TissueInfo","id":"interface-TissueInfo-1a11b32dee89b55746dd02d393406aa7ea06e3d180099074510a109749d06241410786b045f3a9d570f4479be6442014b194d68f340724b0e76b4b0983b59760","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule, MatTableDataSource } from \'@angular/material/table\';\\nimport {\\n BiomarkerTableDataCardComponent,\\n BiomarkerTableDataIconComponent,\\n DataItem,\\n} from \'@hra-ui/components/molecules\';\\nimport { HoverDirective } from \'@hra-ui/cdk\';\\nimport { GradientPoint, SizeLegend } from \'@hra-ui/components/atoms\';\\n\\n/**\\n * RGBTriblet of type RGB to store color\\n */\\ntype RGBTriplet = [number, number, number];\\n\\n/**\\n * An interface representing a single cell of the table.\\n */\\nexport interface DataCell {\\n /** Represents the color of the icon */\\n color: string;\\n /** Represents the size of the icon */\\n size: number;\\n /** Represents the data for the data card */\\n data: {\\n cell: string;\\n biomarker: string;\\n meanExpression: number;\\n /** Number of datasets for this Tissue */\\n dataset_count: number;\\n };\\n}\\n\\n/**\\n * Details of the Tissue\\n */\\nexport interface TissueInfo {\\n /** ID of the Tissue */\\n id: string;\\n /** Name of the Tissue */\\n label: string;\\n}\\n\\n/** Describes the composition of a single row in the table */\\nexport type DataRow = [string, number | undefined, ...(T | undefined)[]];\\n\\n/** Cell types table, describing the types and quanitites of cells for a specific organ */\\n@Component({\\n selector: \'hra-biomarker-table\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatTableModule,\\n BiomarkerTableDataIconComponent,\\n HoverDirective,\\n BiomarkerTableDataCardComponent,\\n ],\\n templateUrl: \'./biomarker-table.component.html\',\\n styleUrls: [\'./biomarker-table.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableComponent implements OnChanges {\\n /**\\n * Input: TissueInfo carrying the details of the tissue open\\n */\\n @Input() tissueInfo: TissueInfo = {\\n id: \'\',\\n label: \'\',\\n };\\n\\n /** Columns for the table */\\n @Input() columns: string[] = [];\\n\\n /** Rows of the table */\\n @Input() data: DataRow[] = [];\\n\\n /** Gradient colors along with their stop points */\\n @Input() gradient: GradientPoint[] = [];\\n\\n /** Taking input for the radius of the circle and the label to be displayed. */\\n @Input() sizes: SizeLegend[] = [];\\n\\n /**Cell name which is hovered, used for highlighting */\\n @Input() hightlightedCellName = \'\';\\n\\n /** Getter method to provide the definations of the columns */\\n get columnsWithTypeAndCount(): string[] {\\n return [\'type\', \'count\', ...this.columns];\\n }\\n\\n /** Source for the table */\\n readonly dataSource = new MatTableDataSource>([]);\\n\\n /**\\n * sets the data source for the table on every change\\n * @param changes object consisting of change in the Input\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.dataSource.data = this.data;\\n }\\n }\\n\\n /** Lerp function to give value beween min and max value based on the given value\\n *\\n * @param value\\n * @param min\\n * @param max\\n * @returns\\n */\\n lerp(value: number, min: number, max: number): number {\\n return min * (1 - value) + max * value;\\n }\\n\\n /**\\n * Converts HexCode to RGB\\n * @param hex\\n * @returns\\n */\\n hex2rgb(hex: string): RGBTriplet {\\n const r = parseInt(hex.slice(1, 3), 16);\\n const g = parseInt(hex.slice(3, 5), 16);\\n const b = parseInt(hex.slice(5, 7), 16);\\n return [r, g, b];\\n }\\n\\n /**\\n * Gets Min and Max color grade based on the meanExpression value\\n * @param meanExpression\\n * @returns\\n */\\n getMinMaxColor(meanExpression: number): { minColor: RGBTriplet; maxColor: RGBTriplet } {\\n const index = this.gradient.findIndex((item, i, arr) => {\\n return meanExpression >= item.percentage && meanExpression <= arr[i + 1]?.percentage;\\n });\\n\\n const minColor: RGBTriplet = this.hex2rgb(this.gradient[index]?.color ?? this.gradient[0].color);\\n const maxColor: RGBTriplet = this.hex2rgb(\\n this.gradient[index + 1]?.color ?? this.gradient[this.gradient.length - 1].color\\n );\\n\\n return { minColor, maxColor };\\n }\\n\\n /**\\n * Gets Min and Max size grade based on the Percentage value\\n * @param percentage\\n * @returns\\n */\\n getMinMaxSize(percentage: number): { minSize: number; maxSize: number } {\\n const index = this.sizes.findIndex((item, i, arr) => {\\n return percentage >= parseFloat(item.label) / 100 && percentage <= parseFloat(arr[i + 1]?.label) / 100;\\n });\\n const minSize: number = this.sizes[index]?.radius ?? this.sizes[0].radius;\\n const maxSize: number = this.sizes[index + 1]?.radius ?? this.sizes[this.sizes.length - 1].radius;\\n return { minSize, maxSize };\\n }\\n\\n /**\\n * Calculates the color of this value on this gradient\\n * @param value\\n * @returns\\n */\\n getColor(value: number): string {\\n const { minColor, maxColor } = this.getMinMaxColor(value);\\n return (\\n \'#\' +\\n minColor\\n .map((min, index) => this.lerp(value, min, maxColor[index]))\\n .map((component) => Math.round(component).toString(16))\\n .join(\'\')\\n );\\n }\\n\\n /**\\n * gets Size of the Cell based on the percentage value\\n * @param value\\n * @returns\\n */\\n getSize(value: number): number {\\n const { minSize, maxSize } = this.getMinMaxSize(value);\\n return this.lerp(value, minSize, maxSize);\\n }\\n\\n /**\\n * rocesses the object for hover data for Table Cell\\n * @param index index of the row of the datasource\\n * @param row row of the datasource\\n * @returns\\n */\\n getHoverData([index, row]: [number, DataRow]): DataItem[][] {\\n if (row[index] === undefined) {\\n return [];\\n }\\n\\n const {\\n tissueInfo: { id, label },\\n } = this;\\n const {\\n data: { cell, biomarker, meanExpression, dataset_count },\\n } = row[index] as T;\\n\\n return [\\n [\\n { label: \'Functional Tissue Unit Name\', value: label },\\n { label: \'Uberon ID\', value: id },\\n { label: \'#Datasets\', value: `${dataset_count ?? 0}` },\\n ],\\n [\\n { label: \'Cell Type Name\', value: row[0] },\\n { label: \'CL ID\', value: cell },\\n { label: \'Number of Cells\', value: `${row[1]}` },\\n ],\\n [\\n { label: \'Gene Name\', value: this.columns[index - 2] },\\n { label: \'HGNC ID\', value: biomarker },\\n { label: \'Mean Expression Value\', value: meanExpression.toFixed(6) },\\n ],\\n ];\\n }\\n}\\n","properties":[{"name":"id","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

ID of the Tissue

\\n","line":40,"rawdescription":"\\nID of the Tissue"},{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Name of the Tissue

\\n","line":42,"rawdescription":"\\nName of the Tissue"}],"indexSignatures":[],"kind":165,"description":"

Details of the Tissue

\\n","rawdescription":"\\n\\nDetails of the Tissue\\n","methods":[]}],"injectables":[],"guards":[],"interceptors":[],"classes":[],"directives":[],"components":[{"name":"BiomarkerTableComponent","id":"component-BiomarkerTableComponent-1a11b32dee89b55746dd02d393406aa7ea06e3d180099074510a109749d06241410786b045f3a9d570f4479be6442014b194d68f340724b0e76b4b0983b59760","file":"src/lib/biomarker-table/biomarker-table.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-biomarker-table","styleUrls":["./biomarker-table.component.scss"],"styles":[],"templateUrl":["./biomarker-table.component.html"],"viewProviders":[],"inputsClass":[{"name":"columns","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nColumns for the table","description":"

Columns for the table

\\n","line":73,"type":"string[]","decorators":[]},{"name":"data","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nRows of the table","description":"

Rows of the table

\\n","line":76,"type":"DataRow[]","decorators":[]},{"name":"gradient","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nGradient colors along with their stop points","description":"

Gradient colors along with their stop points

\\n","line":79,"type":"GradientPoint[]","decorators":[]},{"name":"hightlightedCellName","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nCell name which is hovered, used for highlighting","description":"

Cell name which is hovered, used for highlighting

\\n","line":85,"type":"string","decorators":[]},{"name":"sizes","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nTaking input for the radius of the circle and the label to be displayed.","description":"

Taking input for the radius of the circle and the label to be displayed.

\\n","line":82,"type":"SizeLegend[]","decorators":[]},{"name":"tissueInfo","defaultValue":"{\\n id: \'\',\\n label: \'\',\\n }","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput: TissueInfo carrying the details of the tissue open\\n","description":"

Input: TissueInfo carrying the details of the tissue open

\\n","line":67,"type":"TissueInfo","decorators":[]}],"outputsClass":[],"propertiesClass":[{"name":"dataSource","defaultValue":"new MatTableDataSource>([])","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Source for the table

\\n","line":93,"rawdescription":"\\nSource for the table","modifierKind":[144]}],"methodsClass":[{"name":"getColor","args":[{"name":"value","type":"number","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"string","typeParameters":[],"line":165,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nCalculates the color of this value on this gradient\\n","description":"

Calculates the color of this value on this gradient

\\n","jsdoctags":[{"name":{"pos":4778,"end":4783,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"value"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":4772,"end":4777,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":4790,"end":4797,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"getHoverData","args":[{"type":"[number, DataRow]","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"[][]","typeParameters":[],"line":192,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nrocesses the object for hover data for Table Cell\\n","description":"

rocesses the object for hover data for Table Cell

\\n","jsdoctags":[{"type":"[number, DataRow]","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}},{"tagName":{"pos":5512,"end":5519,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"getMinMaxColor","args":[{"name":"meanExpression","type":"number","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"literal type","typeParameters":[],"line":133,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nGets Min and Max color grade based on the meanExpression value\\n","description":"

Gets Min and Max color grade based on the meanExpression value

\\n","jsdoctags":[{"name":{"pos":3545,"end":3559,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"meanExpression"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":3539,"end":3544,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":3566,"end":3573,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"getMinMaxSize","args":[{"name":"percentage","type":"number","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"literal type","typeParameters":[],"line":151,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nGets Min and Max size grade based on the Percentage value\\n","description":"

Gets Min and Max size grade based on the Percentage value

\\n","jsdoctags":[{"name":{"pos":4199,"end":4209,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"percentage"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":4193,"end":4198,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":4216,"end":4223,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"getSize","args":[{"name":"value","type":"number","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"number","typeParameters":[],"line":181,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\ngets Size of the Cell based on the percentage value\\n","description":"

gets Size of the Cell based on the percentage value

\\n","jsdoctags":[{"name":{"pos":5181,"end":5186,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"value"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":5175,"end":5180,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":5193,"end":5200,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"hex2rgb","args":[{"name":"hex","type":"string","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"RGBTriplet","typeParameters":[],"line":121,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nConverts HexCode to RGB\\n","description":"

Converts HexCode to RGB

\\n","jsdoctags":[{"name":{"pos":3236,"end":3239,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"hex"},"type":"string","deprecated":false,"deprecationMessage":"","tagName":{"pos":3230,"end":3235,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":3246,"end":3253,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"lerp","args":[{"name":"value","type":"number","deprecated":false,"deprecationMessage":""},{"name":"min","type":"number","deprecated":false,"deprecationMessage":""},{"name":"max","type":"number","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"number","typeParameters":[],"line":112,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nLerp function to give value beween min and max value based on the given value\\n\\n","description":"

Lerp function to give value beween min and max value based on the given value

\\n","jsdoctags":[{"name":{"pos":3024,"end":3029,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"value"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":3018,"end":3023,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"name":{"pos":3042,"end":3045,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"min"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":3036,"end":3041,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"name":{"pos":3058,"end":3061,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"max"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":3052,"end":3057,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":3068,"end":3075,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Cell types table, describing the types and quanitites of cells for a specific organ

\\n","rawdescription":"\\nCell types table, describing the types and quanitites of cells for a specific organ","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule, MatTableDataSource } from \'@angular/material/table\';\\nimport {\\n BiomarkerTableDataCardComponent,\\n BiomarkerTableDataIconComponent,\\n DataItem,\\n} from \'@hra-ui/components/molecules\';\\nimport { HoverDirective } from \'@hra-ui/cdk\';\\nimport { GradientPoint, SizeLegend } from \'@hra-ui/components/atoms\';\\n\\n/**\\n * RGBTriblet of type RGB to store color\\n */\\ntype RGBTriplet = [number, number, number];\\n\\n/**\\n * An interface representing a single cell of the table.\\n */\\nexport interface DataCell {\\n /** Represents the color of the icon */\\n color: string;\\n /** Represents the size of the icon */\\n size: number;\\n /** Represents the data for the data card */\\n data: {\\n cell: string;\\n biomarker: string;\\n meanExpression: number;\\n /** Number of datasets for this Tissue */\\n dataset_count: number;\\n };\\n}\\n\\n/**\\n * Details of the Tissue\\n */\\nexport interface TissueInfo {\\n /** ID of the Tissue */\\n id: string;\\n /** Name of the Tissue */\\n label: string;\\n}\\n\\n/** Describes the composition of a single row in the table */\\nexport type DataRow = [string, number | undefined, ...(T | undefined)[]];\\n\\n/** Cell types table, describing the types and quanitites of cells for a specific organ */\\n@Component({\\n selector: \'hra-biomarker-table\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatTableModule,\\n BiomarkerTableDataIconComponent,\\n HoverDirective,\\n BiomarkerTableDataCardComponent,\\n ],\\n templateUrl: \'./biomarker-table.component.html\',\\n styleUrls: [\'./biomarker-table.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableComponent implements OnChanges {\\n /**\\n * Input: TissueInfo carrying the details of the tissue open\\n */\\n @Input() tissueInfo: TissueInfo = {\\n id: \'\',\\n label: \'\',\\n };\\n\\n /** Columns for the table */\\n @Input() columns: string[] = [];\\n\\n /** Rows of the table */\\n @Input() data: DataRow[] = [];\\n\\n /** Gradient colors along with their stop points */\\n @Input() gradient: GradientPoint[] = [];\\n\\n /** Taking input for the radius of the circle and the label to be displayed. */\\n @Input() sizes: SizeLegend[] = [];\\n\\n /**Cell name which is hovered, used for highlighting */\\n @Input() hightlightedCellName = \'\';\\n\\n /** Getter method to provide the definations of the columns */\\n get columnsWithTypeAndCount(): string[] {\\n return [\'type\', \'count\', ...this.columns];\\n }\\n\\n /** Source for the table */\\n readonly dataSource = new MatTableDataSource>([]);\\n\\n /**\\n * sets the data source for the table on every change\\n * @param changes object consisting of change in the Input\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.dataSource.data = this.data;\\n }\\n }\\n\\n /** Lerp function to give value beween min and max value based on the given value\\n *\\n * @param value\\n * @param min\\n * @param max\\n * @returns\\n */\\n lerp(value: number, min: number, max: number): number {\\n return min * (1 - value) + max * value;\\n }\\n\\n /**\\n * Converts HexCode to RGB\\n * @param hex\\n * @returns\\n */\\n hex2rgb(hex: string): RGBTriplet {\\n const r = parseInt(hex.slice(1, 3), 16);\\n const g = parseInt(hex.slice(3, 5), 16);\\n const b = parseInt(hex.slice(5, 7), 16);\\n return [r, g, b];\\n }\\n\\n /**\\n * Gets Min and Max color grade based on the meanExpression value\\n * @param meanExpression\\n * @returns\\n */\\n getMinMaxColor(meanExpression: number): { minColor: RGBTriplet; maxColor: RGBTriplet } {\\n const index = this.gradient.findIndex((item, i, arr) => {\\n return meanExpression >= item.percentage && meanExpression <= arr[i + 1]?.percentage;\\n });\\n\\n const minColor: RGBTriplet = this.hex2rgb(this.gradient[index]?.color ?? this.gradient[0].color);\\n const maxColor: RGBTriplet = this.hex2rgb(\\n this.gradient[index + 1]?.color ?? this.gradient[this.gradient.length - 1].color\\n );\\n\\n return { minColor, maxColor };\\n }\\n\\n /**\\n * Gets Min and Max size grade based on the Percentage value\\n * @param percentage\\n * @returns\\n */\\n getMinMaxSize(percentage: number): { minSize: number; maxSize: number } {\\n const index = this.sizes.findIndex((item, i, arr) => {\\n return percentage >= parseFloat(item.label) / 100 && percentage <= parseFloat(arr[i + 1]?.label) / 100;\\n });\\n const minSize: number = this.sizes[index]?.radius ?? this.sizes[0].radius;\\n const maxSize: number = this.sizes[index + 1]?.radius ?? this.sizes[this.sizes.length - 1].radius;\\n return { minSize, maxSize };\\n }\\n\\n /**\\n * Calculates the color of this value on this gradient\\n * @param value\\n * @returns\\n */\\n getColor(value: number): string {\\n const { minColor, maxColor } = this.getMinMaxColor(value);\\n return (\\n \'#\' +\\n minColor\\n .map((min, index) => this.lerp(value, min, maxColor[index]))\\n .map((component) => Math.round(component).toString(16))\\n .join(\'\')\\n );\\n }\\n\\n /**\\n * gets Size of the Cell based on the percentage value\\n * @param value\\n * @returns\\n */\\n getSize(value: number): number {\\n const { minSize, maxSize } = this.getMinMaxSize(value);\\n return this.lerp(value, minSize, maxSize);\\n }\\n\\n /**\\n * rocesses the object for hover data for Table Cell\\n * @param index index of the row of the datasource\\n * @param row row of the datasource\\n * @returns\\n */\\n getHoverData([index, row]: [number, DataRow]): DataItem[][] {\\n if (row[index] === undefined) {\\n return [];\\n }\\n\\n const {\\n tissueInfo: { id, label },\\n } = this;\\n const {\\n data: { cell, biomarker, meanExpression, dataset_count },\\n } = row[index] as T;\\n\\n return [\\n [\\n { label: \'Functional Tissue Unit Name\', value: label },\\n { label: \'Uberon ID\', value: id },\\n { label: \'#Datasets\', value: `${dataset_count ?? 0}` },\\n ],\\n [\\n { label: \'Cell Type Name\', value: row[0] },\\n { label: \'CL ID\', value: cell },\\n { label: \'Number of Cells\', value: `${row[1]}` },\\n ],\\n [\\n { label: \'Gene Name\', value: this.columns[index - 2] },\\n { label: \'HGNC ID\', value: biomarker },\\n { label: \'Mean Expression Value\', value: meanExpression.toFixed(6) },\\n ],\\n ];\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'utils\';\\n@use \'variables\' as vars;\\n\\n:host {\\n display: block;\\n\\n .sr-only {\\n @include utils.sr-only();\\n }\\n\\n .table {\\n margin-left: -1px;\\n\\n .highlight {\\n background-color: #f8f9fa;\\n }\\n td.type {\\n text-transform: lowercase;\\n }\\n }\\n\\n .table th {\\n background-color: #fff7f8;\\n color: #59264d;\\n text-align: right;\\n }\\n\\n .table td {\\n border-bottom: 0.063rem solid #d3d3d3;\\n border-left: 0.063rem solid #d3d3d3;\\n }\\n\\n .table tr:first-child td {\\n border-top: 0rem solid #d3d3d3;\\n }\\n\\n tr > td:first-child {\\n text-align: left;\\n padding: 0 2rem;\\n }\\n\\n tr > th:first-child {\\n text-align: left;\\n padding: 0 2rem;\\n }\\n\\n tr > td:last-of-type {\\n border-right: 0.063rem solid #d3d3d3;\\n }\\n\\n tr > th:last-of-type {\\n border-right: 0.063rem solid #d3d3d3;\\n border-left: solid #d3d3d3 1px;\\n }\\n\\n .type {\\n height: 3rem;\\n max-width: 26rem;\\n min-width: 17rem;\\n border-radius: 0rem;\\n white-space: nowrap;\\n }\\n\\n .count {\\n text-align: right;\\n height: 3rem;\\n min-width: 6.5rem;\\n }\\n\\n .count:not(:first-child) {\\n border-left: solid #d3d3d3 1px;\\n }\\n\\n .icon-header {\\n max-width: 5rem;\\n white-space: nowrap;\\n overflow: hidden;\\n text-overflow: ellipsis;\\n }\\n\\n .icon-cell {\\n max-width: 5rem;\\n min-height: 3rem;\\n\\n .icon {\\n margin: auto;\\n }\\n }\\n}\\n\\n::ng-deep .mat-mdc-tab-header {\\n margin-left: -1px !important;\\n}\\n\\n::ng-deep .biomarker-table-hover.full-column-name {\\n display: flex;\\n padding: 1rem 1.5rem;\\n border-radius: 0.5rem;\\n box-shadow: 0.063rem 0.125rem 1rem 0.125rem rgba(0, 0, 0, 0.16);\\n background-color: vars.$primary-contrast-rgb;\\n overflow: auto;\\n max-width: fit-content;\\n}\\n","styleUrl":"./biomarker-table.component.scss"}],"stylesData":"","implements":["OnChanges"],"accessors":{"columnsWithTypeAndCount":{"name":"columnsWithTypeAndCount","getSignature":{"name":"columnsWithTypeAndCount","type":"[]","returnType":"string[]","line":88,"rawdescription":"\\nGetter method to provide the definations of the columns","description":"

Getter method to provide the definations of the columns

\\n"}}},"templateData":"\\n \\n\\n \\n \\n\\n \\n \\n\\n \\n \\n\\n \\n \\n\\n \\n \\n\\n \\n \\n\\n \\n \\n
\\n Cell type table by Biomarker\\n
Cell Type\\n {{ element[0] }}\\n Cell Count\\n {{ element[1] !== undefined ? (element[1] | number) : \'no data\' }}\\n \\n {{ column }}\\n \\n \\n \\n\\n \\n
\\n \\n
\\n\\n\\n
\\n {{ columnName }}\\n
\\n\\n\\n\\n \\n\\n"}],"modules":[],"miscellaneous":{"variables":[],"functions":[],"typealiases":[{"name":"DataRow","ctype":"miscellaneous","subtype":"typealias","rawtype":"[string, , ...[]]","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","description":"

Describes the composition of a single row in the table

\\n","kind":183},{"name":"RGBTriplet","ctype":"miscellaneous","subtype":"typealias","rawtype":"[number, number, number]","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","description":"

RGBTriblet of type RGB to store color

\\n","kind":183}],"enumerations":[],"groupedVariables":{},"groupedFunctions":{},"groupedEnumerations":{},"groupedTypeAliases":{"src/lib/biomarker-table/biomarker-table.component.ts":[{"name":"DataRow","ctype":"miscellaneous","subtype":"typealias","rawtype":"[string, , ...[]]","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","description":"

Describes the composition of a single row in the table

\\n","kind":183},{"name":"RGBTriplet","ctype":"miscellaneous","subtype":"typealias","rawtype":"[number, number, number]","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","description":"

RGBTriblet of type RGB to store color

\\n","kind":183}]}}}')}},__webpack_require__=>{var __webpack_exec__=moduleId=>__webpack_require__(__webpack_require__.s=moduleId);__webpack_require__.O(0,[758],(()=>(__webpack_exec__("./storybook-config-entry.js"),__webpack_exec__("./.storybook/styles.scss?ngGlobalStyle"))));__webpack_require__.O()}]); \ No newline at end of file diff --git a/storybook/components-behavioral/project.json b/storybook/components-behavioral/project.json index d9d41fae2..dc7e94a09 100644 --- a/storybook/components-behavioral/project.json +++ b/storybook/components-behavioral/project.json @@ -1 +1 @@ -{"generatedAt":1694197648966,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"nx","packageName":"@nrwl/storybook","version":"15.9.2"},"monorepo":"Nx","packageManager":{"type":"npm","version":"8.19.4"},"framework":{"name":"@storybook/angular","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/angular","storybookVersion":"7.0.2","storybookVersionSpecifier":"^7.0.2","language":"typescript","storybookPackages":{"@nrwl/storybook":{"version":"15.9.2"},"@storybook/angular":{"version":"7.0.2"},"@storybook/core-common":{"version":"7.0.2"},"@storybook/core-server":{"version":"7.0.2"},"@storybook/test-runner":{"version":"0.10.0"},"eslint-plugin-storybook":{"version":"0.6.11"}},"addons":{"@storybook/addon-essentials":{"version":"7.0.2"}}} +{"generatedAt":1694200660673,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"nx","packageName":"@nrwl/storybook","version":"15.9.2"},"monorepo":"Nx","packageManager":{"type":"npm","version":"8.19.4"},"framework":{"name":"@storybook/angular","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/angular","storybookVersion":"7.0.2","storybookVersionSpecifier":"^7.0.2","language":"typescript","storybookPackages":{"@nrwl/storybook":{"version":"15.9.2"},"@storybook/angular":{"version":"7.0.2"},"@storybook/core-common":{"version":"7.0.2"},"@storybook/core-server":{"version":"7.0.2"},"@storybook/test-runner":{"version":"0.10.0"},"eslint-plugin-storybook":{"version":"0.6.11"}},"addons":{"@storybook/addon-essentials":{"version":"7.0.2"}}} diff --git a/storybook/components-behavioral/runtime~main.c00da90f.iframe.bundle.js b/storybook/components-behavioral/runtime~main.7d6010d9.iframe.bundle.js similarity index 99% rename from storybook/components-behavioral/runtime~main.c00da90f.iframe.bundle.js rename to storybook/components-behavioral/runtime~main.7d6010d9.iframe.bundle.js index 06f4dc2ea..ea018acb6 100644 --- a/storybook/components-behavioral/runtime~main.c00da90f.iframe.bundle.js +++ b/storybook/components-behavioral/runtime~main.7d6010d9.iframe.bundle.js @@ -1 +1 @@ -(()=>{"use strict";var deferred,leafPrototypes,getProto,inProgress,__webpack_modules__={},__webpack_module_cache__={};function __webpack_require__(moduleId){var cachedModule=__webpack_module_cache__[moduleId];if(void 0!==cachedModule)return cachedModule.exports;var module=__webpack_module_cache__[moduleId]={id:moduleId,loaded:!1,exports:{}};return __webpack_modules__[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.loaded=!0,module.exports}__webpack_require__.m=__webpack_modules__,__webpack_require__.amdO={},deferred=[],__webpack_require__.O=(result,chunkIds,fn,priority)=>{if(!chunkIds){var notFulfilled=1/0;for(i=0;i=priority)&&Object.keys(__webpack_require__.O).every((key=>__webpack_require__.O[key](chunkIds[j])))?chunkIds.splice(j--,1):(fulfilled=!1,priority0&&deferred[i-1][2]>priority;i--)deferred[i]=deferred[i-1];deferred[i]=[chunkIds,fn,priority]},__webpack_require__.n=module=>{var getter=module&&module.__esModule?()=>module.default:()=>module;return __webpack_require__.d(getter,{a:getter}),getter},getProto=Object.getPrototypeOf?obj=>Object.getPrototypeOf(obj):obj=>obj.__proto__,__webpack_require__.t=function(value,mode){if(1&mode&&(value=this(value)),8&mode)return value;if("object"==typeof value&&value){if(4&mode&&value.__esModule)return value;if(16&mode&&"function"==typeof value.then)return value}var ns=Object.create(null);__webpack_require__.r(ns);var def={};leafPrototypes=leafPrototypes||[null,getProto({}),getProto([]),getProto(getProto)];for(var current=2&mode&&value;"object"==typeof current&&!~leafPrototypes.indexOf(current);current=getProto(current))Object.getOwnPropertyNames(current).forEach((key=>def[key]=()=>value[key]));return def.default=()=>value,__webpack_require__.d(ns,def),ns},__webpack_require__.d=(exports,definition)=>{for(var key in definition)__webpack_require__.o(definition,key)&&!__webpack_require__.o(exports,key)&&Object.defineProperty(exports,key,{enumerable:!0,get:definition[key]})},__webpack_require__.f={},__webpack_require__.e=chunkId=>Promise.all(Object.keys(__webpack_require__.f).reduce(((promises,key)=>(__webpack_require__.f[key](chunkId,promises),promises)),[])),__webpack_require__.u=chunkId=>(({57:"src-lib-footer-behavior-footer-behavior-component-stories",430:"src-lib-medical-illustration-behavior-medical-illustration-behavior-component-stories",487:"src-lib-landing-page-content-landing-page-content-component-stories",587:"src-lib-tissue-library-behavior-tissue-library-behavior-component-stories",805:"src-lib-contact-behavior-contact-behavior-component-stories",854:"src-lib-header-behavior-header-behavior-component-stories",971:"src-lib-biomarker-details-biomarker-details-component-stories",983:"src-lib-hra-landing-page-intro-wc-behaviour-landing-page-content-component-stories"}[chunkId]||chunkId)+"."+{57:"cf3b3f56",111:"a44cf6e0",140:"d67f4659",254:"b81e5402",256:"711330bc",384:"c0a7ed0c",390:"dbcab398",415:"d2a35c2f",430:"f4996342",487:"b90d5393",552:"d7440bd5",562:"c8cd5c23",583:"54f984a3",587:"1fefb692",617:"2f2b618c",678:"320ddf79",724:"a6c8add2",801:"d5ec94e5",805:"b247b0c5",828:"003b1424",839:"26933d95",854:"2ce55232",882:"54d736c3",913:"d800162e",930:"037fa429",948:"defe7b1d",971:"6dc18d06",977:"3ab5e643",983:"54a666d6"}[chunkId]+".iframe.bundle.js"),__webpack_require__.miniCssF=chunkId=>{},__webpack_require__.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),__webpack_require__.o=(obj,prop)=>Object.prototype.hasOwnProperty.call(obj,prop),inProgress={},__webpack_require__.l=(url,done,key,chunkId)=>{if(inProgress[url])inProgress[url].push(done);else{var script,needAttach;if(void 0!==key)for(var scripts=document.getElementsByTagName("script"),i=0;i{script.onerror=script.onload=null,clearTimeout(timeout);var doneFns=inProgress[url];if(delete inProgress[url],script.parentNode&&script.parentNode.removeChild(script),doneFns&&doneFns.forEach((fn=>fn(event))),prev)return prev(event)},timeout=setTimeout(onScriptComplete.bind(null,void 0,{type:"timeout",target:script}),12e4);script.onerror=onScriptComplete.bind(null,script.onerror),script.onload=onScriptComplete.bind(null,script.onload),needAttach&&document.head.appendChild(script)}},__webpack_require__.r=exports=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.nmd=module=>(module.paths=[],module.children||(module.children=[]),module),__webpack_require__.p="",(()=>{var installedChunks={303:0};__webpack_require__.f.j=(chunkId,promises)=>{var installedChunkData=__webpack_require__.o(installedChunks,chunkId)?installedChunks[chunkId]:void 0;if(0!==installedChunkData)if(installedChunkData)promises.push(installedChunkData[2]);else if(303!=chunkId){var promise=new Promise(((resolve,reject)=>installedChunkData=installedChunks[chunkId]=[resolve,reject]));promises.push(installedChunkData[2]=promise);var url=__webpack_require__.p+__webpack_require__.u(chunkId),error=new Error;__webpack_require__.l(url,(event=>{if(__webpack_require__.o(installedChunks,chunkId)&&(0!==(installedChunkData=installedChunks[chunkId])&&(installedChunks[chunkId]=void 0),installedChunkData)){var errorType=event&&("load"===event.type?"missing":event.type),realSrc=event&&event.target&&event.target.src;error.message="Loading chunk "+chunkId+" failed.\n("+errorType+": "+realSrc+")",error.name="ChunkLoadError",error.type=errorType,error.request=realSrc,installedChunkData[1](error)}}),"chunk-"+chunkId,chunkId)}else installedChunks[chunkId]=0},__webpack_require__.O.j=chunkId=>0===installedChunks[chunkId];var webpackJsonpCallback=(parentChunkLoadingFunction,data)=>{var moduleId,chunkId,[chunkIds,moreModules,runtime]=data,i=0;if(chunkIds.some((id=>0!==installedChunks[id]))){for(moduleId in moreModules)__webpack_require__.o(moreModules,moduleId)&&(__webpack_require__.m[moduleId]=moreModules[moduleId]);if(runtime)var result=runtime(__webpack_require__)}for(parentChunkLoadingFunction&&parentChunkLoadingFunction(data);i{"use strict";var deferred,leafPrototypes,getProto,inProgress,__webpack_modules__={},__webpack_module_cache__={};function __webpack_require__(moduleId){var cachedModule=__webpack_module_cache__[moduleId];if(void 0!==cachedModule)return cachedModule.exports;var module=__webpack_module_cache__[moduleId]={id:moduleId,loaded:!1,exports:{}};return __webpack_modules__[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.loaded=!0,module.exports}__webpack_require__.m=__webpack_modules__,__webpack_require__.amdO={},deferred=[],__webpack_require__.O=(result,chunkIds,fn,priority)=>{if(!chunkIds){var notFulfilled=1/0;for(i=0;i=priority)&&Object.keys(__webpack_require__.O).every((key=>__webpack_require__.O[key](chunkIds[j])))?chunkIds.splice(j--,1):(fulfilled=!1,priority0&&deferred[i-1][2]>priority;i--)deferred[i]=deferred[i-1];deferred[i]=[chunkIds,fn,priority]},__webpack_require__.n=module=>{var getter=module&&module.__esModule?()=>module.default:()=>module;return __webpack_require__.d(getter,{a:getter}),getter},getProto=Object.getPrototypeOf?obj=>Object.getPrototypeOf(obj):obj=>obj.__proto__,__webpack_require__.t=function(value,mode){if(1&mode&&(value=this(value)),8&mode)return value;if("object"==typeof value&&value){if(4&mode&&value.__esModule)return value;if(16&mode&&"function"==typeof value.then)return value}var ns=Object.create(null);__webpack_require__.r(ns);var def={};leafPrototypes=leafPrototypes||[null,getProto({}),getProto([]),getProto(getProto)];for(var current=2&mode&&value;"object"==typeof current&&!~leafPrototypes.indexOf(current);current=getProto(current))Object.getOwnPropertyNames(current).forEach((key=>def[key]=()=>value[key]));return def.default=()=>value,__webpack_require__.d(ns,def),ns},__webpack_require__.d=(exports,definition)=>{for(var key in definition)__webpack_require__.o(definition,key)&&!__webpack_require__.o(exports,key)&&Object.defineProperty(exports,key,{enumerable:!0,get:definition[key]})},__webpack_require__.f={},__webpack_require__.e=chunkId=>Promise.all(Object.keys(__webpack_require__.f).reduce(((promises,key)=>(__webpack_require__.f[key](chunkId,promises),promises)),[])),__webpack_require__.u=chunkId=>(({57:"src-lib-footer-behavior-footer-behavior-component-stories",430:"src-lib-medical-illustration-behavior-medical-illustration-behavior-component-stories",487:"src-lib-landing-page-content-landing-page-content-component-stories",587:"src-lib-tissue-library-behavior-tissue-library-behavior-component-stories",805:"src-lib-contact-behavior-contact-behavior-component-stories",854:"src-lib-header-behavior-header-behavior-component-stories",971:"src-lib-biomarker-details-biomarker-details-component-stories",983:"src-lib-hra-landing-page-intro-wc-behaviour-landing-page-content-component-stories"}[chunkId]||chunkId)+"."+{57:"cf3b3f56",111:"a44cf6e0",140:"d67f4659",254:"b81e5402",256:"711330bc",384:"c0a7ed0c",390:"dbcab398",415:"d2a35c2f",430:"f4996342",487:"b90d5393",552:"d7440bd5",562:"c8cd5c23",583:"54f984a3",587:"1fefb692",617:"2f2b618c",678:"320ddf79",724:"a6c8add2",801:"d5ec94e5",805:"b247b0c5",828:"003b1424",839:"26933d95",854:"2ce55232",882:"54d736c3",913:"d800162e",930:"037fa429",948:"defe7b1d",971:"e300aa33",977:"3ab5e643",983:"54a666d6"}[chunkId]+".iframe.bundle.js"),__webpack_require__.miniCssF=chunkId=>{},__webpack_require__.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),__webpack_require__.o=(obj,prop)=>Object.prototype.hasOwnProperty.call(obj,prop),inProgress={},__webpack_require__.l=(url,done,key,chunkId)=>{if(inProgress[url])inProgress[url].push(done);else{var script,needAttach;if(void 0!==key)for(var scripts=document.getElementsByTagName("script"),i=0;i{script.onerror=script.onload=null,clearTimeout(timeout);var doneFns=inProgress[url];if(delete inProgress[url],script.parentNode&&script.parentNode.removeChild(script),doneFns&&doneFns.forEach((fn=>fn(event))),prev)return prev(event)},timeout=setTimeout(onScriptComplete.bind(null,void 0,{type:"timeout",target:script}),12e4);script.onerror=onScriptComplete.bind(null,script.onerror),script.onload=onScriptComplete.bind(null,script.onload),needAttach&&document.head.appendChild(script)}},__webpack_require__.r=exports=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.nmd=module=>(module.paths=[],module.children||(module.children=[]),module),__webpack_require__.p="",(()=>{var installedChunks={303:0};__webpack_require__.f.j=(chunkId,promises)=>{var installedChunkData=__webpack_require__.o(installedChunks,chunkId)?installedChunks[chunkId]:void 0;if(0!==installedChunkData)if(installedChunkData)promises.push(installedChunkData[2]);else if(303!=chunkId){var promise=new Promise(((resolve,reject)=>installedChunkData=installedChunks[chunkId]=[resolve,reject]));promises.push(installedChunkData[2]=promise);var url=__webpack_require__.p+__webpack_require__.u(chunkId),error=new Error;__webpack_require__.l(url,(event=>{if(__webpack_require__.o(installedChunks,chunkId)&&(0!==(installedChunkData=installedChunks[chunkId])&&(installedChunks[chunkId]=void 0),installedChunkData)){var errorType=event&&("load"===event.type?"missing":event.type),realSrc=event&&event.target&&event.target.src;error.message="Loading chunk "+chunkId+" failed.\n("+errorType+": "+realSrc+")",error.name="ChunkLoadError",error.type=errorType,error.request=realSrc,installedChunkData[1](error)}}),"chunk-"+chunkId,chunkId)}else installedChunks[chunkId]=0},__webpack_require__.O.j=chunkId=>0===installedChunks[chunkId];var webpackJsonpCallback=(parentChunkLoadingFunction,data)=>{var moduleId,chunkId,[chunkIds,moreModules,runtime]=data,i=0;if(chunkIds.some((id=>0!==installedChunks[id]))){for(moduleId in moreModules)__webpack_require__.o(moreModules,moduleId)&&(__webpack_require__.m[moduleId]=moreModules[moduleId]);if(runtime)var result=runtime(__webpack_require__)}for(parentChunkLoadingFunction&&parentChunkLoadingFunction(data);i{"use strict";__webpack_require__.d(__webpack_exports__,{b:()=>IllustratorSelectors});var tslib__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/tslib/tslib.es6.js"),_ngxs_store__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@ngxs/store/fesm2015/ngxs-store.js"),_illustrator_state__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./libs/state/src/lib/illustrator/illustrator.state.ts");class IllustratorSelectors{static url({url}){return url}static selectedOnHovered({selectedOnHover}){return selectedOnHover}static selectedOnClicked({selectedOnClick}){return selectedOnClick}static mapping({mapping}){return mapping}}(0,tslib__WEBPACK_IMPORTED_MODULE_1__.gn)([(0,_ngxs_store__WEBPACK_IMPORTED_MODULE_0__.Qf)([_illustrator_state__WEBPACK_IMPORTED_MODULE_2__.K]),(0,tslib__WEBPACK_IMPORTED_MODULE_1__.w6)("design:type",Function),(0,tslib__WEBPACK_IMPORTED_MODULE_1__.w6)("design:paramtypes",[Object]),(0,tslib__WEBPACK_IMPORTED_MODULE_1__.w6)("design:returntype",Object)],IllustratorSelectors,"url",null),(0,tslib__WEBPACK_IMPORTED_MODULE_1__.gn)([(0,_ngxs_store__WEBPACK_IMPORTED_MODULE_0__.Qf)([_illustrator_state__WEBPACK_IMPORTED_MODULE_2__.K]),(0,tslib__WEBPACK_IMPORTED_MODULE_1__.w6)("design:type",Function),(0,tslib__WEBPACK_IMPORTED_MODULE_1__.w6)("design:paramtypes",[Object]),(0,tslib__WEBPACK_IMPORTED_MODULE_1__.w6)("design:returntype",Object)],IllustratorSelectors,"selectedOnHovered",null),(0,tslib__WEBPACK_IMPORTED_MODULE_1__.gn)([(0,_ngxs_store__WEBPACK_IMPORTED_MODULE_0__.Qf)([_illustrator_state__WEBPACK_IMPORTED_MODULE_2__.K]),(0,tslib__WEBPACK_IMPORTED_MODULE_1__.w6)("design:type",Function),(0,tslib__WEBPACK_IMPORTED_MODULE_1__.w6)("design:paramtypes",[Object]),(0,tslib__WEBPACK_IMPORTED_MODULE_1__.w6)("design:returntype",Object)],IllustratorSelectors,"selectedOnClicked",null),(0,tslib__WEBPACK_IMPORTED_MODULE_1__.gn)([(0,_ngxs_store__WEBPACK_IMPORTED_MODULE_0__.Qf)([_illustrator_state__WEBPACK_IMPORTED_MODULE_2__.K]),(0,tslib__WEBPACK_IMPORTED_MODULE_1__.w6)("design:type",Function),(0,tslib__WEBPACK_IMPORTED_MODULE_1__.w6)("design:paramtypes",[Object]),(0,tslib__WEBPACK_IMPORTED_MODULE_1__.w6)("design:returntype",Array)],IllustratorSelectors,"mapping",null)},"./libs/state/src/lib/resource-types.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{$u:()=>Size,C3:()=>Metrics,ph:()=>Gradient});var _hra_ui_cdk_state__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./libs/cdk/state/src/resource-registry/resource-registry.model.ts");const Metrics=(0,_hra_ui_cdk_state__WEBPACK_IMPORTED_MODULE_0__.h_)("metrics",(0,_hra_ui_cdk_state__WEBPACK_IMPORTED_MODULE_0__.xm)()),Gradient=(0,_hra_ui_cdk_state__WEBPACK_IMPORTED_MODULE_0__.h_)("gradient",(0,_hra_ui_cdk_state__WEBPACK_IMPORTED_MODULE_0__.xm)()),Size=(0,_hra_ui_cdk_state__WEBPACK_IMPORTED_MODULE_0__.h_)("size",(0,_hra_ui_cdk_state__WEBPACK_IMPORTED_MODULE_0__.xm)())},"./libs/state/src/lib/screen-mode/screen-mode.actions.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{R:()=>SetSize,l:()=>Set});var _hra_ui_cdk_state__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./libs/cdk/state/src/actions/actions.ts");class Set extends((0,_hra_ui_cdk_state__WEBPACK_IMPORTED_MODULE_0__.a)("[Screenmode] Set Screenmode")){constructor(isFullScreen){super(),this.isFullScreen=isFullScreen}}class SetSize extends((0,_hra_ui_cdk_state__WEBPACK_IMPORTED_MODULE_0__.a)("[Screenmode] Set Size")){constructor(size){super(),this.size=size}}},"./libs/components/atoms/src/lib/empty-biomarker/empty-biomarker.component.scss?ngResource":(module,__unused_webpack_exports,__webpack_require__)=>{var ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/noSourceMaps.js"),___CSS_LOADER_EXPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js")(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);___CSS_LOADER_EXPORT___.push([module.id,":host {\n display: block;\n padding: 2.625rem 2rem 2.625rem 2rem;\n}\n:host .message {\n color: #243142;\n}\n:host .collaborate-button {\n margin-top: 2rem;\n font-weight: 700;\n color: #fff;\n width: 100%;\n max-width: 20rem;\n height: 3rem;\n}",""]),module.exports=___CSS_LOADER_EXPORT___.toString()},"./libs/components/atoms/src/lib/gradient-legend/gradient-legend.component.scss?ngResource":(module,__unused_webpack_exports,__webpack_require__)=>{var ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/noSourceMaps.js"),___CSS_LOADER_EXPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js")(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);___CSS_LOADER_EXPORT___.push([module.id,":host {\n display: block;\n}\n:host .gradient-bar {\n height: 1.5rem;\n width: 100%;\n}\n:host .legend {\n display: flex;\n}\n:host .legend .filler {\n flex-grow: 1;\n}",""]),module.exports=___CSS_LOADER_EXPORT___.toString()},"./libs/components/atoms/src/lib/size-legend/size-legend.component.scss?ngResource":(module,__unused_webpack_exports,__webpack_require__)=>{var ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/noSourceMaps.js"),___CSS_LOADER_EXPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js")(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);___CSS_LOADER_EXPORT___.push([module.id,":host {\n display: flex;\n flex-direction: row;\n column-gap: 2rem;\n}\n:host .item {\n display: flex;\n flex-direction: column;\n align-items: center;\n line-height: 0.5rem;\n}\n:host .item .circle {\n height: var(--size);\n width: var(--size);\n border-radius: 50%;\n border: 0.125rem solid #75838f;\n}\n:host .item .label {\n margin-top: 0.5rem;\n}\n:host .item .filler {\n flex-grow: 1;\n}",""]),module.exports=___CSS_LOADER_EXPORT___.toString()},"./libs/components/behavioral/src/lib/biomarker-details/biomarker-details.component.scss?ngResource":(module,__unused_webpack_exports,__webpack_require__)=>{var ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/noSourceMaps.js"),___CSS_LOADER_EXPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js")(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);___CSS_LOADER_EXPORT___.push([module.id,':host {\n display: grid;\n grid-template-columns: 1fr 1fr auto;\n grid-template-rows: 3.5rem minmax(5rem, 2fr) 3rem 5rem minmax(5rem, 1fr);\n grid-template-areas: "table-header table-header table-header" "table table table" "gradient-legend-header size-legend-header ." "gradient-legend size-legend ." "source-list source-list source-list";\n overflow-y: auto;\n}\n:host .table-header {\n grid-area: table-header;\n border-bottom: 0.063rem solid #d3d3d3;\n height: 3.5rem;\n}\n:host .table {\n grid-area: table;\n max-width: 100%;\n overflow: auto;\n border-bottom: 0.063rem solid #d3d3d3;\n}\n:host .table ::ng-deep .table-tab-header {\n padding-left: 1rem;\n padding-right: 1rem;\n border-left: 0.063rem solid #d3d3d3;\n border-bottom: 0.063rem solid #d3d3d3;\n background-color: white;\n}\n:host .table ::ng-deep .table-tab-header:last-child {\n border-right: 0.063rem solid #d3d3d3;\n}\n:host .table ::ng-deep .table-tab-header.mdc-tab-indicator--active {\n background-color: #f8f9fa;\n}\n:host .table ::ng-deep .table-tab-header:hover {\n background-color: #f8f9fa;\n}\n:host .legend-header {\n color: var(--dark-primary-text);\n border-top: 0.063rem solid #d3d3d3;\n border-bottom: 0.063rem solid #d3d3d3;\n border-right: 0.063rem solid #d3d3d3;\n}\n:host .legend-header.gradient {\n grid-area: gradient-legend-header;\n}\n:host .legend-header.size {\n grid-area: size-legend-header;\n}\n:host .legend-header .icon {\n margin-left: 0.6rem;\n width: unset;\n}\n:host .legend {\n padding: 1rem 2rem;\n border-right: 0.063rem solid #d3d3d3;\n}\n:host .legend.gradient {\n grid-area: gradient-legend;\n}\n:host .legend.gradient .content {\n width: 10rem;\n}\n:host .legend.size {\n grid-area: size-legend;\n}\n:host .source-list {\n grid-area: source-list;\n}\n:host .cursor {\n cursor: default;\n}\n\n::ng-deep .biomarker-details.info-tooltip {\n display: flex;\n padding: 1rem;\n border: 1px solid #a8a3a3;\n border-radius: 0.5rem;\n box-shadow: 1px 2px 16px 2px rgba(0, 0, 0, 0.1607843137);\n background-color: var(--palette-primary-contrast-500-rgb);\n max-width: 21rem;\n font-size: small;\n font-family: Inter;\n}',""]),module.exports=___CSS_LOADER_EXPORT___.toString()},"./libs/components/molecules/src/lib/biomarker-table-data-card/biomarker-table-data-card.component.scss?ngResource":(module,__unused_webpack_exports,__webpack_require__)=>{var ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/noSourceMaps.js"),___CSS_LOADER_EXPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js")(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);___CSS_LOADER_EXPORT___.push([module.id,":host {\n display: flex;\n padding: 1rem 1.5rem;\n border-radius: 0.5rem;\n box-shadow: 0.063rem 0.125rem 1rem 0.125rem rgba(0, 0, 0, 0.16);\n background-color: var(--palette-primary-contrast-500-rgb);\n}\n:host .mat-mdc-cell {\n padding: 0.25rem 0rem;\n}\n:host .mat-mdc-row {\n height: -moz-fit-content;\n height: fit-content;\n}\n:host .no-border {\n border: none;\n}\n:host .label {\n color: #243142;\n padding-right: 3rem;\n}\n:host .value {\n color: #4c5a69;\n}\n:host .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}",""]),module.exports=___CSS_LOADER_EXPORT___.toString()},"./libs/components/molecules/src/lib/biomarker-table-data-icon/biomarker-table-data-icon.component.scss?ngResource":(module,__unused_webpack_exports,__webpack_require__)=>{var ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/noSourceMaps.js"),___CSS_LOADER_EXPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js")(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);___CSS_LOADER_EXPORT___.push([module.id,":host {\n display: block;\n border-radius: 50%;\n --radius: 0.625rem;\n width: var(--radius);\n height: var(--radius);\n}",""]),module.exports=___CSS_LOADER_EXPORT___.toString()},"./libs/components/molecules/src/lib/source-list/source-list.component.scss?ngResource":(module,__unused_webpack_exports,__webpack_require__)=>{var ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/noSourceMaps.js"),___CSS_LOADER_EXPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js")(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);___CSS_LOADER_EXPORT___.push([module.id,":host {\n display: block;\n height: 100%;\n}\n:host .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n:host .toggle {\n display: flex;\n align-items: center;\n height: 3.5rem;\n grid-area: source-list-header;\n color: var(--dark-primary-text);\n border-top: 0.063rem solid #d3d3d3;\n border-bottom: 0.063rem solid #d3d3d3;\n}\n:host .table-content {\n height: calc(100% - 3.5rem);\n overflow: auto;\n}\n:host .table-content.hidden {\n display: none;\n}\n:host .table-content table {\n height: 100%;\n}\n:host .table-content .mat-mdc-cell {\n vertical-align: top;\n border: none;\n padding: 0.25rem 0.875rem;\n font-size: 1rem;\n}\n:host .table-content ::ng-deep .mdc-data-table__content {\n display: block;\n padding: 1rem 0rem;\n}",""]),module.exports=___CSS_LOADER_EXPORT___.toString()},"./libs/components/organisms/src/lib/biomarker-table/biomarker-table.component.scss?ngResource":(module,__unused_webpack_exports,__webpack_require__)=>{var ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/noSourceMaps.js"),___CSS_LOADER_EXPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js")(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);___CSS_LOADER_EXPORT___.push([module.id,":host {\n display: block;\n}\n:host .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n:host .table {\n margin-left: -1px;\n}\n:host .table .highlight {\n background-color: #f8f9fa;\n}\n:host .table td.type {\n text-transform: lowercase;\n}\n:host .table th {\n background-color: #fff7f8;\n color: #59264d;\n text-align: right;\n}\n:host .table td {\n border-bottom: 0.063rem solid #d3d3d3;\n border-left: 0.063rem solid #d3d3d3;\n}\n:host .table tr:first-child td {\n border-top: 0rem solid #d3d3d3;\n}\n:host tr > td:first-child {\n text-align: left;\n padding: 0 2rem;\n}\n:host tr > th:first-child {\n text-align: left;\n padding: 0 2rem;\n}\n:host tr > td:last-of-type {\n border-right: 0.063rem solid #d3d3d3;\n}\n:host tr > th:last-of-type {\n border-right: 0.063rem solid #d3d3d3;\n border-left: solid #d3d3d3 1px;\n}\n:host .type {\n height: 3rem;\n max-width: 26rem;\n min-width: 17rem;\n border-radius: 0rem;\n white-space: nowrap;\n}\n:host .count {\n text-align: right;\n height: 3rem;\n min-width: 6.5rem;\n}\n:host .count:not(:first-child) {\n border-left: solid #d3d3d3 1px;\n}\n:host .icon-header {\n max-width: 5rem;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n:host .icon-cell {\n max-width: 5rem;\n min-height: 3rem;\n}\n:host .icon-cell .icon {\n margin: auto;\n}\n\n::ng-deep .mat-mdc-tab-header {\n margin-left: -1px !important;\n}\n\n::ng-deep .biomarker-table-hover.full-column-name {\n display: flex;\n padding: 1rem 1.5rem;\n border-radius: 0.5rem;\n box-shadow: 0.063rem 0.125rem 1rem 0.125rem rgba(0, 0, 0, 0.16);\n background-color: var(--palette-primary-contrast-500-rgb);\n overflow: auto;\n max-width: -moz-fit-content;\n max-width: fit-content;\n}",""]),module.exports=___CSS_LOADER_EXPORT___.toString()},"./libs/components/behavioral/src/lib/biomarker-details/biomarker-details.component.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Primary:()=>Primary,createDataItem:()=>createDataItem,default:()=>biomarker_details_component_stories});var icon=__webpack_require__("./node_modules/@angular/material/fesm2020/icon.mjs"),resource_registry_state=__webpack_require__("./libs/cdk/state/src/resource-registry/resource-registry.state.ts"),resource_registry_actions=__webpack_require__("./libs/cdk/state/src/resource-registry/resource-registry.actions.ts"),source_refs_state=__webpack_require__("./libs/state/src/lib/source-refs/source-refs.state.ts"),dist=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js");var _class,biomarker_details_componentngResource=__webpack_require__("./libs/components/behavioral/src/lib/biomarker-details/biomarker-details.component.scss?ngResource"),biomarker_details_componentngResource_default=__webpack_require__.n(biomarker_details_componentngResource),common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),tabs=__webpack_require__("./node_modules/@angular/material/fesm2020/tabs.mjs"),overlay=__webpack_require__("./node_modules/@angular/cdk/fesm2020/overlay.mjs"),portal=__webpack_require__("./node_modules/@angular/cdk/fesm2020/portal.mjs");let HoverDirective=((_class=class HoverDirective{constructor(){this.el=(0,core.inject)(core.ElementRef).nativeElement,this.overlayRef=(0,core.inject)(overlay.aV).create({positionStrategy:(0,core.inject)(overlay.aV).position().flexibleConnectedTo(this.el).withPositions([new overlay.tR({originX:"end",originY:"bottom"},{overlayX:"end",overlayY:"top"}),new overlay.tR({originX:"start",originY:"top"},{overlayX:"start",overlayY:"bottom"}),new overlay.tR({originX:"start",originY:"bottom"},{overlayX:"start",overlayY:"top"}),new overlay.tR({originX:"end",originY:"top"},{overlayX:"end",overlayY:"bottom"})]).withPush(!0)}),this.viewContainerRef=(0,core.inject)(core.ViewContainerRef)}set content(content){this.portal=new portal.UE(content,this.viewContainerRef,this._data),this.updateContent()}set data(data){this._data={$implicit:data},this.portal&&(this.portal.context=this._data,this.updateContent())}startHover(){const{overlayRef,portal}=this;!overlayRef.hasAttached()&&portal&&overlayRef.attach(portal)}endHover(){const{overlayRef}=this;overlayRef.hasAttached()&&overlayRef.detach()}updateContent(){const{overlayRef,portal}=this;overlayRef.hasAttached()&&portal&&(overlayRef.detach(),overlayRef.attach(portal))}}).propDecorators={content:[{type:core.Input,args:["hraHover"]}],data:[{type:core.Input,args:["hraHoverData"]}],startHover:[{type:core.HostListener,args:["mouseover"]}],endHover:[{type:core.HostListener,args:["mouseout"]}]},_class);HoverDirective=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[hraHover]",standalone:!0})],HoverDirective);var select_snapshot=__webpack_require__("./libs/cdk/injectors/src/lib/select/select-snapshot.ts"),dispatch=__webpack_require__("./libs/cdk/injectors/src/lib/dispatch/dispatch.ts"),resource_registry_selectors=__webpack_require__("./libs/cdk/state/src/resource-registry/resource-registry.selectors.ts"),active_ftu_selectors=__webpack_require__("./libs/state/src/lib/active-ftu/active-ftu.selectors.ts"),tissue_library_selectors=__webpack_require__("./libs/state/src/lib/tissue-library/tissue-library.selectors.ts"),illustrator_selectors=__webpack_require__("./libs/state/src/lib/illustrator/illustrator.selectors.ts"),screen_mode_actions=__webpack_require__("./libs/state/src/lib/screen-mode/screen-mode.actions.ts");var gradient_legend_component_class,gradient_legend_componentngResource=__webpack_require__("./libs/components/atoms/src/lib/gradient-legend/gradient-legend.component.scss?ngResource"),gradient_legend_componentngResource_default=__webpack_require__.n(gradient_legend_componentngResource);let GradientLegendComponent=((gradient_legend_component_class=class GradientLegendComponent{constructor(){this.gradient=[]}get gradientCss(){return`linear-gradient(90deg, ${this.gradient.map((({color,percentage})=>`${color} ${percentage}%`)).join(",")})`}}).propDecorators={gradient:[{type:core.Input}]},gradient_legend_component_class);GradientLegendComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"hra-gradient-legend",standalone:!0,imports:[common.CommonModule],template:'
\n
\n
0.0
\n
\n
1.0
\n
\n',changeDetection:core.ChangeDetectionStrategy.OnPush,styles:[gradient_legend_componentngResource_default()]})],GradientLegendComponent);var label_box_component=__webpack_require__("./libs/components/atoms/src/lib/label-box/label-box.component.ts");var size_legend_component_class,size_legend_componentngResource=__webpack_require__("./libs/components/atoms/src/lib/size-legend/size-legend.component.scss?ngResource"),size_legend_componentngResource_default=__webpack_require__.n(size_legend_componentngResource);let SizeLegendComponent=((size_legend_component_class=class SizeLegendComponent{constructor(){this.sizes=[]}}).propDecorators={sizes:[{type:core.Input}]},size_legend_component_class);SizeLegendComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"hra-size-legend",standalone:!0,imports:[common.CommonModule],template:'
\n
\n
\n
\n
{{ text.label }}
\n
\n',changeDetection:core.ChangeDetectionStrategy.OnPush,styles:[size_legend_componentngResource_default()]})],SizeLegendComponent);var empty_biomarker_component_class,empty_biomarker_componentngResource=__webpack_require__("./libs/components/atoms/src/lib/empty-biomarker/empty-biomarker.component.scss?ngResource"),empty_biomarker_componentngResource_default=__webpack_require__.n(empty_biomarker_componentngResource),fesm2020_button=__webpack_require__("./node_modules/@angular/material/fesm2020/button.mjs"),ngx_markdown=__webpack_require__("./node_modules/ngx-markdown/fesm2020/ngx-markdown.mjs");let EmptyBiomarkerComponent=((empty_biomarker_component_class=class EmptyBiomarkerComponent{constructor(){this.collaborateText="",this.message="",this.collaborateClick=new core.EventEmitter}}).propDecorators={collaborateText:[{type:core.Input}],message:[{type:core.Input}],collaborateClick:[{type:core.Output}]},empty_biomarker_component_class);EmptyBiomarkerComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"hra-empty-biomarker",standalone:!0,imports:[common.CommonModule,fesm2020_button.ot,ngx_markdown.JP],template:'\n\n',changeDetection:core.ChangeDetectionStrategy.OnPush,styles:[empty_biomarker_componentngResource_default()]})],EmptyBiomarkerComponent);var biomarker_table_data_card_component_class,biomarker_table_data_card_componentngResource=__webpack_require__("./libs/components/molecules/src/lib/biomarker-table-data-card/biomarker-table-data-card.component.scss?ngResource"),biomarker_table_data_card_componentngResource_default=__webpack_require__.n(biomarker_table_data_card_componentngResource),table=__webpack_require__("./node_modules/@angular/material/fesm2020/table.mjs");let BiomarkerTableDataCardComponent=((biomarker_table_data_card_component_class=class BiomarkerTableDataCardComponent{constructor(){this.data=[],this.sectionItems=[]}ngOnChanges(changes){"data"in changes&&this.updateSectionItems()}updateSectionItems(){const newSectionItems=[];this.data.forEach(((section,sectionIndex)=>{section.forEach(((item,itemIndex)=>{newSectionItems.push({data:item,section:sectionIndex,isLastItem:itemIndex===section.length-1})}))})),this.sectionItems=newSectionItems}}).propDecorators={data:[{type:core.Input}]},biomarker_table_data_card_component_class);BiomarkerTableDataCardComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"hra-biomarker-table-data-card",standalone:!0,imports:[common.CommonModule,table.p0],template:'
No data
\n\n \n\n \x3c!-- Label Column --\x3e\n \n \n \n \n\n \x3c!-- Value Column --\x3e\n \n \n \n \n\n \n
\n Biomarker Table Data Card\n
Item Label\n {{ element.data.label }}\n Item Value\n {{ element.data.value }}\n
\n',changeDetection:core.ChangeDetectionStrategy.OnPush,styles:[biomarker_table_data_card_componentngResource_default()]})],BiomarkerTableDataCardComponent);var source_list_component_class,source_list_componentngResource=__webpack_require__("./libs/components/molecules/src/lib/source-list/source-list.component.scss?ngResource"),source_list_componentngResource_default=__webpack_require__.n(source_list_componentngResource);let SourceListComponent=((source_list_component_class=class SourceListComponent{constructor(){this.sources=[],this.collaborateText="",this.message="",this.showTable=!0,this.collaborateClick=new core.EventEmitter}toggleTable(){this.showTable=!this.showTable}}).propDecorators={sources:[{type:core.Input}],collaborateText:[{type:core.Input}],message:[{type:core.Input}],collaborateClick:[{type:core.Output}]},source_list_component_class);SourceListComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"hra-source-list",standalone:!0,imports:[common.CommonModule,table.p0,icon.Ps,label_box_component.d,EmptyBiomarkerComponent],template:'\n Source Data\n \n {{ showTable ? \'keyboard_arrow_down\' : \'keyboard_arrow_up\' }}\n \n\n\n
\n \n \n\n \x3c!-- Position Column --\x3e\n \n \n \n \n\n \x3c!-- Data Column --\x3e\n \n \n \n \n\n \n
\n Source List Table with Title and Links\n
Item Number{{ i + 1 }}.Title and Link\n {{ element.title }}\n
\n {{ element.label }}\n
\n \n
\n',changeDetection:core.ChangeDetectionStrategy.OnPush,styles:[source_list_componentngResource_default()]})],SourceListComponent);var biomarker_table_data_icon_component_class,biomarker_table_componentngResource=__webpack_require__("./libs/components/organisms/src/lib/biomarker-table/biomarker-table.component.scss?ngResource"),biomarker_table_componentngResource_default=__webpack_require__.n(biomarker_table_componentngResource),biomarker_table_data_icon_componentngResource=__webpack_require__("./libs/components/molecules/src/lib/biomarker-table-data-icon/biomarker-table-data-icon.component.scss?ngResource"),biomarker_table_data_icon_componentngResource_default=__webpack_require__.n(biomarker_table_data_icon_componentngResource);let BiomarkerTableDataIconComponent=((biomarker_table_data_icon_component_class=class BiomarkerTableDataIconComponent{constructor(){this.color="",this.size=0}}).propDecorators={color:[{type:core.HostBinding,args:["style.background-color"]},{type:core.Input}],size:[{type:core.HostBinding,args:["style.--radius.rem"]},{type:core.Input}]},biomarker_table_data_icon_component_class);var biomarker_table_component_class;BiomarkerTableDataIconComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"hra-biomarker-table-data-icon",standalone:!0,imports:[common.CommonModule],template:"",changeDetection:core.ChangeDetectionStrategy.OnPush,styles:[biomarker_table_data_icon_componentngResource_default()]})],BiomarkerTableDataIconComponent);let BiomarkerTableComponent=((biomarker_table_component_class=class BiomarkerTableComponent{constructor(){this.tissueInfo={id:"",label:""},this.columns=[],this.data=[],this.gradient=[],this.sizes=[],this.hightlightedCellName="",this.dataSource=new table.by([])}get columnsWithTypeAndCount(){return["type","count",...this.columns]}ngOnChanges(changes){"data"in changes&&(this.dataSource.data=this.data)}lerp(value,min,max){return min*(1-value)+max*value}hex2rgb(hex){return[parseInt(hex.slice(1,3),16),parseInt(hex.slice(3,5),16),parseInt(hex.slice(5,7),16)]}getMinMaxColor(meanExpression){const index=this.gradient.findIndex(((item,i,arr)=>meanExpression>=item.percentage&&meanExpression<=arr[i+1]?.percentage));return{minColor:this.hex2rgb(this.gradient[index]?.color??this.gradient[0].color),maxColor:this.hex2rgb(this.gradient[index+1]?.color??this.gradient[this.gradient.length-1].color)}}getMinMaxSize(percentage){const index=this.sizes.findIndex(((item,i,arr)=>percentage>=parseFloat(item.label)/100&&percentage<=parseFloat(arr[i+1]?.label)/100));return{minSize:this.sizes[index]?.radius??this.sizes[0].radius,maxSize:this.sizes[index+1]?.radius??this.sizes[this.sizes.length-1].radius}}getColor(value){const{minColor,maxColor}=this.getMinMaxColor(value);return"#"+minColor.map(((min,index)=>this.lerp(value,min,maxColor[index]))).map((component=>Math.round(component).toString(16))).join("")}getSize(value){const{minSize,maxSize}=this.getMinMaxSize(value);return this.lerp(value,minSize,maxSize)}getHoverData([index,row]){if(void 0===row[index])return[];const{tissueInfo:{id,label}}=this,{data:{cell,biomarker,meanExpression,dataset_count}}=row[index];return[[{label:"Functional Tissue Unit Name",value:label},{label:"Uberon ID",value:id},{label:"#Datasets",value:`${dataset_count??0}`}],[{label:"Cell Type Name",value:row[0]},{label:"CL ID",value:cell},{label:"Number of Cells",value:`${row[1]}`}],[{label:"Gene Name",value:this.columns[index-2]},{label:"HGNC ID",value:biomarker},{label:"Mean Expression Value",value:meanExpression.toFixed(6)}]]}}).propDecorators={tissueInfo:[{type:core.Input}],columns:[{type:core.Input}],data:[{type:core.Input}],gradient:[{type:core.Input}],sizes:[{type:core.Input}],hightlightedCellName:[{type:core.Input}]},biomarker_table_component_class);BiomarkerTableComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"hra-biomarker-table",standalone:!0,imports:[common.CommonModule,table.p0,BiomarkerTableDataIconComponent,HoverDirective,BiomarkerTableDataCardComponent],template:'\n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n
\n Cell type table by Biomarker\n
Cell Type\n {{ element[0] }}\n Cell Count\n {{ element[1] !== undefined ? (element[1] | number) : \'no data\' }}\n \n {{ column }}\n \n \n \n\n \n
\n \n
\n\n\n
\n {{ columnName }}\n
\n\n\n\n \n\n',changeDetection:core.ChangeDetectionStrategy.OnPush,styles:[biomarker_table_componentngResource_default()]})],BiomarkerTableComponent);var ngxs_store=__webpack_require__("./node_modules/@ngxs/store/fesm2015/ngxs-store.js"),cell_summary_state=__webpack_require__("./libs/state/src/lib/cell-summary/cell-summary.state.ts");class CellSummarySelectors{static aggregates(state){return state.aggregates}static summaries(state){return state.summaries}}(0,tslib_es6.gn)([(0,ngxs_store.Qf)([cell_summary_state.x]),(0,tslib_es6.w6)("design:type",Function),(0,tslib_es6.w6)("design:paramtypes",[Object]),(0,tslib_es6.w6)("design:returntype",Array)],CellSummarySelectors,"aggregates",null),(0,tslib_es6.gn)([(0,ngxs_store.Qf)([cell_summary_state.x]),(0,tslib_es6.w6)("design:type",Function),(0,tslib_es6.w6)("design:paramtypes",[Object]),(0,tslib_es6.w6)("design:returntype",Array)],CellSummarySelectors,"summaries",null);var resource_ids=__webpack_require__("./libs/state/src/lib/resource-ids.ts"),resource_types=__webpack_require__("./libs/state/src/lib/resource-types.ts");class SourceRefsSelectors{static sourceReferences(refs){return refs}}(0,tslib_es6.gn)([(0,ngxs_store.Qf)([source_refs_state.b]),(0,tslib_es6.w6)("design:type",Function),(0,tslib_es6.w6)("design:paramtypes",[Array]),(0,tslib_es6.w6)("design:returntype",Array)],SourceRefsSelectors,"sourceReferences",null);var dialog=__webpack_require__("./node_modules/@angular/material/fesm2020/dialog.mjs"),contact_behavior_component=__webpack_require__("./libs/components/behavioral/src/lib/contact-behavior/contact-behavior.component.ts");const EMPTY_TISSUE_INFO={id:"",label:""};let BiomarkerDetailsComponent=class BiomarkerDetailsComponent{constructor(){this.tabs=(0,select_snapshot.g)(CellSummarySelectors.aggregates),this.gradientHoverInfo=(0,select_snapshot.w)(resource_registry_selectors.S.anyText,resource_ids.IO),this.sizeHoverInfo=(0,select_snapshot.w)(resource_registry_selectors.S.anyText,resource_ids.Z9),this.isTableFullScreen=!1,this.gradients=(0,select_snapshot.w)(resource_registry_selectors.S.field,resource_ids.Aq,resource_types.ph,"points",[]),this.sizes=(0,select_snapshot.w)(resource_registry_selectors.S.field,resource_ids.MO,resource_types.$u,"sizes",[]),this.source=(0,select_snapshot.g)(SourceRefsSelectors.sourceReferences),this.iri=(0,select_snapshot.g)(active_ftu_selectors.K.iri),this.tissues=(0,select_snapshot.g)(tissue_library_selectors.N.tissues),this.selectedOnHovered=(0,select_snapshot.g)(illustrator_selectors.b.selectedOnHovered),this.collaborateText="Collaborate with the HRA Team",this.message="We currently do not have cell type data for this biomarker.\n

Please contact us to discuss your dataset.",this.setScreenMode=(0,dispatch.WI)(screen_mode_actions.l),this.dialog=(0,core.inject)(dialog.uw)}get tissueInfo(){const iri=this.iri(),tissues=this.tissues();if(void 0===iri)return EMPTY_TISSUE_INFO;const{id,label}=tissues[iri];return{id,label}}toggleFullscreen(){this.isTableFullScreen=!this.isTableFullScreen,this.setScreenMode(this.isTableFullScreen)}collaborate(){const dialogConfig=new dialog.vA;dialogConfig.disableClose=!0,this.dialog.open(contact_behavior_component.Q,dialogConfig)}};function createDataItem(label,value){return{label,value}}BiomarkerDetailsComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"ftu-biomarker-details",standalone:!0,imports:[common.CommonModule,icon.Ps,tabs.Nh,dialog.Is,BiomarkerTableComponent,BiomarkerTableDataCardComponent,GradientLegendComponent,HoverDirective,label_box_component.d,SizeLegendComponent,SourceListComponent,EmptyBiomarkerComponent],template:'\n Cell Types by Gene Biomarkers\n \n {{ isTableFullScreen ? \'close_fullscreen\' : \'open_in_full\' }}\n \n\n\n\n \n \n \n \n\n\n\n Biomarker Expression Mean in FTU\n info_outlined\n\n
\n \n
\n\n\n Percentage of Cells in FTU\n info_outlined\n\n
\n \n
\n\n
\n \n
\n\n\n
\n {{ tooltip }}\n
\n\n',changeDetection:core.ChangeDetectionStrategy.OnPush,styles:[biomarker_details_componentngResource_default()]})],BiomarkerDetailsComponent);const biomarker_details_component_stories={title:"BiomarkerDetailsComponent",component:BiomarkerDetailsComponent,parameters:{state:{states:[resource_registry_state.E,source_refs_state.b],actions:[new resource_registry_actions.AU("assets/resources/gradient.yml"),new resource_registry_actions.AU("assets/resources/size.yml")]}},decorators:[(0,dist.moduleMetadata)({imports:[icon.Ps]})]},Primary=(args=>({props:args})).bind({});Primary.args={},createDataItem.parameters={...createDataItem.parameters,docs:{...createDataItem.parameters?.docs,source:{originalSource:"function createDataItem(label, value) {\n return {\n label,\n value\n };\n}",...createDataItem.parameters?.docs?.source}}},Primary.parameters={...Primary.parameters,docs:{...Primary.parameters?.docs,source:{originalSource:"args => ({\n props: args\n})",...Primary.parameters?.docs?.source}}}}}]); \ No newline at end of file diff --git a/storybook/components-behavioral/src-lib-biomarker-details-biomarker-details-component-stories.e300aa33.iframe.bundle.js b/storybook/components-behavioral/src-lib-biomarker-details-biomarker-details-component-stories.e300aa33.iframe.bundle.js new file mode 100644 index 000000000..0c61a61ad --- /dev/null +++ b/storybook/components-behavioral/src-lib-biomarker-details-biomarker-details-component-stories.e300aa33.iframe.bundle.js @@ -0,0 +1 @@ +(self.webpackChunkhra_ui=self.webpackChunkhra_ui||[]).push([[971],{"./libs/state/src/lib/illustrator/illustrator.selectors.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{b:()=>IllustratorSelectors});var tslib__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/tslib/tslib.es6.js"),_ngxs_store__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@ngxs/store/fesm2015/ngxs-store.js"),_illustrator_state__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./libs/state/src/lib/illustrator/illustrator.state.ts");class IllustratorSelectors{static url({url}){return url}static selectedOnHovered({selectedOnHover}){return selectedOnHover}static selectedOnClicked({selectedOnClick}){return selectedOnClick}static mapping({mapping}){return mapping}}(0,tslib__WEBPACK_IMPORTED_MODULE_1__.gn)([(0,_ngxs_store__WEBPACK_IMPORTED_MODULE_0__.Qf)([_illustrator_state__WEBPACK_IMPORTED_MODULE_2__.K]),(0,tslib__WEBPACK_IMPORTED_MODULE_1__.w6)("design:type",Function),(0,tslib__WEBPACK_IMPORTED_MODULE_1__.w6)("design:paramtypes",[Object]),(0,tslib__WEBPACK_IMPORTED_MODULE_1__.w6)("design:returntype",Object)],IllustratorSelectors,"url",null),(0,tslib__WEBPACK_IMPORTED_MODULE_1__.gn)([(0,_ngxs_store__WEBPACK_IMPORTED_MODULE_0__.Qf)([_illustrator_state__WEBPACK_IMPORTED_MODULE_2__.K]),(0,tslib__WEBPACK_IMPORTED_MODULE_1__.w6)("design:type",Function),(0,tslib__WEBPACK_IMPORTED_MODULE_1__.w6)("design:paramtypes",[Object]),(0,tslib__WEBPACK_IMPORTED_MODULE_1__.w6)("design:returntype",Object)],IllustratorSelectors,"selectedOnHovered",null),(0,tslib__WEBPACK_IMPORTED_MODULE_1__.gn)([(0,_ngxs_store__WEBPACK_IMPORTED_MODULE_0__.Qf)([_illustrator_state__WEBPACK_IMPORTED_MODULE_2__.K]),(0,tslib__WEBPACK_IMPORTED_MODULE_1__.w6)("design:type",Function),(0,tslib__WEBPACK_IMPORTED_MODULE_1__.w6)("design:paramtypes",[Object]),(0,tslib__WEBPACK_IMPORTED_MODULE_1__.w6)("design:returntype",Object)],IllustratorSelectors,"selectedOnClicked",null),(0,tslib__WEBPACK_IMPORTED_MODULE_1__.gn)([(0,_ngxs_store__WEBPACK_IMPORTED_MODULE_0__.Qf)([_illustrator_state__WEBPACK_IMPORTED_MODULE_2__.K]),(0,tslib__WEBPACK_IMPORTED_MODULE_1__.w6)("design:type",Function),(0,tslib__WEBPACK_IMPORTED_MODULE_1__.w6)("design:paramtypes",[Object]),(0,tslib__WEBPACK_IMPORTED_MODULE_1__.w6)("design:returntype",Array)],IllustratorSelectors,"mapping",null)},"./libs/state/src/lib/resource-types.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{$u:()=>Size,C3:()=>Metrics,ph:()=>Gradient});var _hra_ui_cdk_state__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./libs/cdk/state/src/resource-registry/resource-registry.model.ts");const Metrics=(0,_hra_ui_cdk_state__WEBPACK_IMPORTED_MODULE_0__.h_)("metrics",(0,_hra_ui_cdk_state__WEBPACK_IMPORTED_MODULE_0__.xm)()),Gradient=(0,_hra_ui_cdk_state__WEBPACK_IMPORTED_MODULE_0__.h_)("gradient",(0,_hra_ui_cdk_state__WEBPACK_IMPORTED_MODULE_0__.xm)()),Size=(0,_hra_ui_cdk_state__WEBPACK_IMPORTED_MODULE_0__.h_)("size",(0,_hra_ui_cdk_state__WEBPACK_IMPORTED_MODULE_0__.xm)())},"./libs/state/src/lib/screen-mode/screen-mode.actions.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{R:()=>SetSize,l:()=>Set});var _hra_ui_cdk_state__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./libs/cdk/state/src/actions/actions.ts");class Set extends((0,_hra_ui_cdk_state__WEBPACK_IMPORTED_MODULE_0__.a)("[Screenmode] Set Screenmode")){constructor(isFullScreen){super(),this.isFullScreen=isFullScreen}}class SetSize extends((0,_hra_ui_cdk_state__WEBPACK_IMPORTED_MODULE_0__.a)("[Screenmode] Set Size")){constructor(size){super(),this.size=size}}},"./libs/components/atoms/src/lib/empty-biomarker/empty-biomarker.component.scss?ngResource":(module,__unused_webpack_exports,__webpack_require__)=>{var ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/noSourceMaps.js"),___CSS_LOADER_EXPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js")(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);___CSS_LOADER_EXPORT___.push([module.id,":host {\n display: block;\n padding: 2.625rem 2rem 2.625rem 2rem;\n}\n:host .message {\n color: #243142;\n}\n:host .collaborate-button {\n margin-top: 2rem;\n font-weight: 700;\n color: #fff;\n width: 100%;\n max-width: 20rem;\n height: 3rem;\n}",""]),module.exports=___CSS_LOADER_EXPORT___.toString()},"./libs/components/atoms/src/lib/gradient-legend/gradient-legend.component.scss?ngResource":(module,__unused_webpack_exports,__webpack_require__)=>{var ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/noSourceMaps.js"),___CSS_LOADER_EXPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js")(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);___CSS_LOADER_EXPORT___.push([module.id,":host {\n display: block;\n}\n:host .gradient-bar {\n height: 1.5rem;\n width: 100%;\n}\n:host .legend {\n display: flex;\n}\n:host .legend .filler {\n flex-grow: 1;\n}",""]),module.exports=___CSS_LOADER_EXPORT___.toString()},"./libs/components/atoms/src/lib/size-legend/size-legend.component.scss?ngResource":(module,__unused_webpack_exports,__webpack_require__)=>{var ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/noSourceMaps.js"),___CSS_LOADER_EXPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js")(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);___CSS_LOADER_EXPORT___.push([module.id,":host {\n display: flex;\n flex-direction: row;\n column-gap: 2rem;\n}\n:host .item {\n display: flex;\n flex-direction: column;\n align-items: center;\n line-height: 0.5rem;\n}\n:host .item .circle {\n height: var(--size);\n width: var(--size);\n border-radius: 50%;\n border: 0.125rem solid #75838f;\n}\n:host .item .label {\n margin-top: 0.5rem;\n}\n:host .item .filler {\n flex-grow: 1;\n}",""]),module.exports=___CSS_LOADER_EXPORT___.toString()},"./libs/components/behavioral/src/lib/biomarker-details/biomarker-details.component.scss?ngResource":(module,__unused_webpack_exports,__webpack_require__)=>{var ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/noSourceMaps.js"),___CSS_LOADER_EXPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js")(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);___CSS_LOADER_EXPORT___.push([module.id,':host {\n display: grid;\n grid-template-columns: 1fr 1fr auto;\n grid-template-rows: 3.5rem minmax(5rem, 2fr) 3rem 5rem minmax(5rem, 1fr);\n grid-template-areas: "table-header table-header table-header" "table table table" "gradient-legend-header size-legend-header ." "gradient-legend size-legend ." "source-list source-list source-list";\n overflow-y: auto;\n}\n:host .table-header {\n grid-area: table-header;\n border-bottom: 0.063rem solid #d3d3d3;\n height: 3.5rem;\n font-weight: 400;\n}\n:host .table {\n grid-area: table;\n max-width: 100%;\n overflow: auto;\n border-bottom: 0.063rem solid #d3d3d3;\n}\n:host .table ::ng-deep .table-tab-header {\n padding-left: 1rem;\n padding-right: 1rem;\n border-left: 0.063rem solid #d3d3d3;\n border-bottom: 0.063rem solid #d3d3d3;\n background-color: white;\n font-weight: 400;\n letter-spacing: 0;\n}\n:host .table ::ng-deep .table-tab-header:last-child {\n border-right: 0.063rem solid #d3d3d3;\n}\n:host .table ::ng-deep .table-tab-header.mdc-tab-indicator--active {\n background-color: #f8f9fa;\n}\n:host .table ::ng-deep .table-tab-header:hover {\n background-color: #f8f9fa;\n}\n:host .table ::ng-deep .table-tab-header .mat-tab__text-label {\n --palette-accent-500-rgb: #243142;\n}\n:host ::ng-deep .table-tab-header > .mdc-tab__content > span {\n color: var(--palette-primary-500);\n}\n:host ::ng-deep .mat-mdc-tab-group.mat-accent .mat-mdc-tab:not(.mat-mdc-tab-disabled).mdc-tab--active .mdc-tab__text-label {\n color: var(--palette-primary-500);\n}\n:host .legend-header {\n color: var(--dark-primary-text);\n border-top: 0.063rem solid #d3d3d3;\n border-bottom: 0.063rem solid #d3d3d3;\n border-right: 0.063rem solid #d3d3d3;\n}\n:host .legend-header.gradient {\n grid-area: gradient-legend-header;\n}\n:host .legend-header.size {\n grid-area: size-legend-header;\n}\n:host .legend-header .icon {\n margin-left: 0.6rem;\n width: unset;\n}\n:host .legend {\n padding: 1rem 2rem;\n border-right: 0.063rem solid #d3d3d3;\n}\n:host .legend.gradient {\n grid-area: gradient-legend;\n}\n:host .legend.gradient .content {\n width: 10rem;\n}\n:host .legend.size {\n grid-area: size-legend;\n}\n:host .source-list {\n grid-area: source-list;\n}\n:host .cursor {\n cursor: default;\n}\n\n::ng-deep .biomarker-details.info-tooltip {\n display: flex;\n padding: 1rem;\n border: 1px solid #a8a3a3;\n border-radius: 0.5rem;\n box-shadow: 1px 2px 16px 2px rgba(0, 0, 0, 0.1607843137);\n background-color: var(--palette-primary-contrast-500-rgb);\n max-width: 21rem;\n font-size: small;\n font-family: Inter;\n}',""]),module.exports=___CSS_LOADER_EXPORT___.toString()},"./libs/components/molecules/src/lib/biomarker-table-data-card/biomarker-table-data-card.component.scss?ngResource":(module,__unused_webpack_exports,__webpack_require__)=>{var ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/noSourceMaps.js"),___CSS_LOADER_EXPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js")(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);___CSS_LOADER_EXPORT___.push([module.id,":host {\n display: flex;\n padding: 1rem 1.5rem;\n border-radius: 0.5rem;\n box-shadow: 0.063rem 0.125rem 1rem 0.125rem rgba(0, 0, 0, 0.16);\n background-color: var(--palette-primary-contrast-500-rgb);\n}\n:host .mat-mdc-cell {\n padding: 0.25rem 0rem;\n}\n:host .mat-mdc-row {\n height: -moz-fit-content;\n height: fit-content;\n}\n:host .no-border {\n border: none;\n}\n:host .label {\n color: #243142;\n padding-right: 3rem;\n}\n:host .value {\n color: #4c5a69;\n}\n:host .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}",""]),module.exports=___CSS_LOADER_EXPORT___.toString()},"./libs/components/molecules/src/lib/biomarker-table-data-icon/biomarker-table-data-icon.component.scss?ngResource":(module,__unused_webpack_exports,__webpack_require__)=>{var ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/noSourceMaps.js"),___CSS_LOADER_EXPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js")(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);___CSS_LOADER_EXPORT___.push([module.id,":host {\n display: block;\n border-radius: 50%;\n --radius: 0.625rem;\n width: var(--radius);\n height: var(--radius);\n}",""]),module.exports=___CSS_LOADER_EXPORT___.toString()},"./libs/components/molecules/src/lib/source-list/source-list.component.scss?ngResource":(module,__unused_webpack_exports,__webpack_require__)=>{var ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/noSourceMaps.js"),___CSS_LOADER_EXPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js")(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);___CSS_LOADER_EXPORT___.push([module.id,":host {\n display: block;\n height: 100%;\n}\n:host .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n:host .toggle {\n display: flex;\n align-items: center;\n height: 3.5rem;\n grid-area: source-list-header;\n color: var(--dark-primary-text);\n border-top: 0.063rem solid #d3d3d3;\n border-bottom: 0.063rem solid #d3d3d3;\n}\n:host .table-content {\n height: calc(100% - 3.5rem);\n overflow: auto;\n}\n:host .table-content.hidden {\n display: none;\n}\n:host .table-content table {\n height: 100%;\n}\n:host .table-content .mat-mdc-cell {\n vertical-align: top;\n border: none;\n padding: 0.25rem 0.875rem;\n font-size: 1rem;\n}\n:host .table-content ::ng-deep .mdc-data-table__content {\n display: block;\n padding: 1rem 0rem;\n}",""]),module.exports=___CSS_LOADER_EXPORT___.toString()},"./libs/components/organisms/src/lib/biomarker-table/biomarker-table.component.scss?ngResource":(module,__unused_webpack_exports,__webpack_require__)=>{var ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/noSourceMaps.js"),___CSS_LOADER_EXPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js")(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);___CSS_LOADER_EXPORT___.push([module.id,":host {\n display: block;\n}\n:host .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n:host .table {\n margin-left: -1px;\n}\n:host .table .highlight {\n background-color: #f8f9fa;\n}\n:host .table td.type {\n text-transform: lowercase;\n}\n:host .table th {\n background-color: #fff7f8;\n color: #59264d;\n text-align: right;\n}\n:host .table td {\n border-bottom: 0.063rem solid #d3d3d3;\n border-left: 0.063rem solid #d3d3d3;\n}\n:host .table tr:first-child td {\n border-top: 0rem solid #d3d3d3;\n}\n:host tr > td:first-child {\n text-align: left;\n padding: 0 2rem;\n}\n:host tr > th:first-child {\n text-align: left;\n padding: 0 2rem;\n}\n:host tr > td:last-of-type {\n border-right: 0.063rem solid #d3d3d3;\n}\n:host tr > th:last-of-type {\n border-right: 0.063rem solid #d3d3d3;\n border-left: solid #d3d3d3 1px;\n}\n:host .type {\n height: 3rem;\n max-width: 26rem;\n min-width: 17rem;\n border-radius: 0rem;\n white-space: nowrap;\n}\n:host .count {\n text-align: right;\n height: 3rem;\n min-width: 6.5rem;\n}\n:host .count:not(:first-child) {\n border-left: solid #d3d3d3 1px;\n}\n:host .icon-header {\n max-width: 5rem;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n:host .icon-cell {\n max-width: 5rem;\n min-height: 3rem;\n}\n:host .icon-cell .icon {\n margin: auto;\n}\n\n::ng-deep .mat-mdc-tab-header {\n margin-left: -1px !important;\n}\n\n::ng-deep .biomarker-table-hover.full-column-name {\n display: flex;\n padding: 1rem 1.5rem;\n border-radius: 0.5rem;\n box-shadow: 0.063rem 0.125rem 1rem 0.125rem rgba(0, 0, 0, 0.16);\n background-color: var(--palette-primary-contrast-500-rgb);\n overflow: auto;\n max-width: -moz-fit-content;\n max-width: fit-content;\n}",""]),module.exports=___CSS_LOADER_EXPORT___.toString()},"./libs/components/behavioral/src/lib/biomarker-details/biomarker-details.component.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Primary:()=>Primary,createDataItem:()=>createDataItem,default:()=>biomarker_details_component_stories});var icon=__webpack_require__("./node_modules/@angular/material/fesm2020/icon.mjs"),resource_registry_state=__webpack_require__("./libs/cdk/state/src/resource-registry/resource-registry.state.ts"),resource_registry_actions=__webpack_require__("./libs/cdk/state/src/resource-registry/resource-registry.actions.ts"),source_refs_state=__webpack_require__("./libs/state/src/lib/source-refs/source-refs.state.ts"),dist=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js");var _class,biomarker_details_componentngResource=__webpack_require__("./libs/components/behavioral/src/lib/biomarker-details/biomarker-details.component.scss?ngResource"),biomarker_details_componentngResource_default=__webpack_require__.n(biomarker_details_componentngResource),common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),tabs=__webpack_require__("./node_modules/@angular/material/fesm2020/tabs.mjs"),overlay=__webpack_require__("./node_modules/@angular/cdk/fesm2020/overlay.mjs"),portal=__webpack_require__("./node_modules/@angular/cdk/fesm2020/portal.mjs");let HoverDirective=((_class=class HoverDirective{constructor(){this.el=(0,core.inject)(core.ElementRef).nativeElement,this.overlayRef=(0,core.inject)(overlay.aV).create({positionStrategy:(0,core.inject)(overlay.aV).position().flexibleConnectedTo(this.el).withPositions([new overlay.tR({originX:"end",originY:"bottom"},{overlayX:"end",overlayY:"top"}),new overlay.tR({originX:"start",originY:"top"},{overlayX:"start",overlayY:"bottom"}),new overlay.tR({originX:"start",originY:"bottom"},{overlayX:"start",overlayY:"top"}),new overlay.tR({originX:"end",originY:"top"},{overlayX:"end",overlayY:"bottom"})]).withPush(!0)}),this.viewContainerRef=(0,core.inject)(core.ViewContainerRef)}set content(content){this.portal=new portal.UE(content,this.viewContainerRef,this._data),this.updateContent()}set data(data){this._data={$implicit:data},this.portal&&(this.portal.context=this._data,this.updateContent())}startHover(){const{overlayRef,portal}=this;!overlayRef.hasAttached()&&portal&&overlayRef.attach(portal)}endHover(){const{overlayRef}=this;overlayRef.hasAttached()&&overlayRef.detach()}updateContent(){const{overlayRef,portal}=this;overlayRef.hasAttached()&&portal&&(overlayRef.detach(),overlayRef.attach(portal))}}).propDecorators={content:[{type:core.Input,args:["hraHover"]}],data:[{type:core.Input,args:["hraHoverData"]}],startHover:[{type:core.HostListener,args:["mouseover"]}],endHover:[{type:core.HostListener,args:["mouseout"]}]},_class);HoverDirective=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[hraHover]",standalone:!0})],HoverDirective);var select_snapshot=__webpack_require__("./libs/cdk/injectors/src/lib/select/select-snapshot.ts"),dispatch=__webpack_require__("./libs/cdk/injectors/src/lib/dispatch/dispatch.ts"),resource_registry_selectors=__webpack_require__("./libs/cdk/state/src/resource-registry/resource-registry.selectors.ts"),active_ftu_selectors=__webpack_require__("./libs/state/src/lib/active-ftu/active-ftu.selectors.ts"),tissue_library_selectors=__webpack_require__("./libs/state/src/lib/tissue-library/tissue-library.selectors.ts"),illustrator_selectors=__webpack_require__("./libs/state/src/lib/illustrator/illustrator.selectors.ts"),screen_mode_actions=__webpack_require__("./libs/state/src/lib/screen-mode/screen-mode.actions.ts");var gradient_legend_component_class,gradient_legend_componentngResource=__webpack_require__("./libs/components/atoms/src/lib/gradient-legend/gradient-legend.component.scss?ngResource"),gradient_legend_componentngResource_default=__webpack_require__.n(gradient_legend_componentngResource);let GradientLegendComponent=((gradient_legend_component_class=class GradientLegendComponent{constructor(){this.gradient=[]}get gradientCss(){return`linear-gradient(90deg, ${this.gradient.map((({color,percentage})=>`${color} ${percentage}%`)).join(",")})`}}).propDecorators={gradient:[{type:core.Input}]},gradient_legend_component_class);GradientLegendComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"hra-gradient-legend",standalone:!0,imports:[common.CommonModule],template:'
\n
\n
0.0
\n
\n
1.0
\n
\n',changeDetection:core.ChangeDetectionStrategy.OnPush,styles:[gradient_legend_componentngResource_default()]})],GradientLegendComponent);var label_box_component=__webpack_require__("./libs/components/atoms/src/lib/label-box/label-box.component.ts");var size_legend_component_class,size_legend_componentngResource=__webpack_require__("./libs/components/atoms/src/lib/size-legend/size-legend.component.scss?ngResource"),size_legend_componentngResource_default=__webpack_require__.n(size_legend_componentngResource);let SizeLegendComponent=((size_legend_component_class=class SizeLegendComponent{constructor(){this.sizes=[]}}).propDecorators={sizes:[{type:core.Input}]},size_legend_component_class);SizeLegendComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"hra-size-legend",standalone:!0,imports:[common.CommonModule],template:'
\n
\n
\n
\n
{{ text.label }}
\n
\n',changeDetection:core.ChangeDetectionStrategy.OnPush,styles:[size_legend_componentngResource_default()]})],SizeLegendComponent);var empty_biomarker_component_class,empty_biomarker_componentngResource=__webpack_require__("./libs/components/atoms/src/lib/empty-biomarker/empty-biomarker.component.scss?ngResource"),empty_biomarker_componentngResource_default=__webpack_require__.n(empty_biomarker_componentngResource),fesm2020_button=__webpack_require__("./node_modules/@angular/material/fesm2020/button.mjs"),ngx_markdown=__webpack_require__("./node_modules/ngx-markdown/fesm2020/ngx-markdown.mjs");let EmptyBiomarkerComponent=((empty_biomarker_component_class=class EmptyBiomarkerComponent{constructor(){this.collaborateText="",this.message="",this.collaborateClick=new core.EventEmitter}}).propDecorators={collaborateText:[{type:core.Input}],message:[{type:core.Input}],collaborateClick:[{type:core.Output}]},empty_biomarker_component_class);EmptyBiomarkerComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"hra-empty-biomarker",standalone:!0,imports:[common.CommonModule,fesm2020_button.ot,ngx_markdown.JP],template:'\n\n',changeDetection:core.ChangeDetectionStrategy.OnPush,styles:[empty_biomarker_componentngResource_default()]})],EmptyBiomarkerComponent);var biomarker_table_data_card_component_class,biomarker_table_data_card_componentngResource=__webpack_require__("./libs/components/molecules/src/lib/biomarker-table-data-card/biomarker-table-data-card.component.scss?ngResource"),biomarker_table_data_card_componentngResource_default=__webpack_require__.n(biomarker_table_data_card_componentngResource),table=__webpack_require__("./node_modules/@angular/material/fesm2020/table.mjs");let BiomarkerTableDataCardComponent=((biomarker_table_data_card_component_class=class BiomarkerTableDataCardComponent{constructor(){this.data=[],this.sectionItems=[]}ngOnChanges(changes){"data"in changes&&this.updateSectionItems()}updateSectionItems(){const newSectionItems=[];this.data.forEach(((section,sectionIndex)=>{section.forEach(((item,itemIndex)=>{newSectionItems.push({data:item,section:sectionIndex,isLastItem:itemIndex===section.length-1})}))})),this.sectionItems=newSectionItems}}).propDecorators={data:[{type:core.Input}]},biomarker_table_data_card_component_class);BiomarkerTableDataCardComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"hra-biomarker-table-data-card",standalone:!0,imports:[common.CommonModule,table.p0],template:'
No data
\n\n \n\n \x3c!-- Label Column --\x3e\n \n \n \n \n\n \x3c!-- Value Column --\x3e\n \n \n \n \n\n \n
\n Biomarker Table Data Card\n
Item Label\n {{ element.data.label }}\n Item Value\n {{ element.data.value }}\n
\n',changeDetection:core.ChangeDetectionStrategy.OnPush,styles:[biomarker_table_data_card_componentngResource_default()]})],BiomarkerTableDataCardComponent);var source_list_component_class,source_list_componentngResource=__webpack_require__("./libs/components/molecules/src/lib/source-list/source-list.component.scss?ngResource"),source_list_componentngResource_default=__webpack_require__.n(source_list_componentngResource);let SourceListComponent=((source_list_component_class=class SourceListComponent{constructor(){this.sources=[],this.collaborateText="",this.message="",this.showTable=!0,this.collaborateClick=new core.EventEmitter}toggleTable(){this.showTable=!this.showTable}}).propDecorators={sources:[{type:core.Input}],collaborateText:[{type:core.Input}],message:[{type:core.Input}],collaborateClick:[{type:core.Output}]},source_list_component_class);SourceListComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"hra-source-list",standalone:!0,imports:[common.CommonModule,table.p0,icon.Ps,label_box_component.d,EmptyBiomarkerComponent],template:'\n Source Data\n \n {{ showTable ? \'keyboard_arrow_down\' : \'keyboard_arrow_up\' }}\n \n\n\n
\n \n \n\n \x3c!-- Position Column --\x3e\n \n \n \n \n\n \x3c!-- Data Column --\x3e\n \n \n \n \n\n \n
\n Source List Table with Title and Links\n
Item Number{{ i + 1 }}.Title and Link\n {{ element.title }}\n
\n {{ element.label }}\n
\n \n
\n',changeDetection:core.ChangeDetectionStrategy.OnPush,styles:[source_list_componentngResource_default()]})],SourceListComponent);var biomarker_table_data_icon_component_class,biomarker_table_componentngResource=__webpack_require__("./libs/components/organisms/src/lib/biomarker-table/biomarker-table.component.scss?ngResource"),biomarker_table_componentngResource_default=__webpack_require__.n(biomarker_table_componentngResource),biomarker_table_data_icon_componentngResource=__webpack_require__("./libs/components/molecules/src/lib/biomarker-table-data-icon/biomarker-table-data-icon.component.scss?ngResource"),biomarker_table_data_icon_componentngResource_default=__webpack_require__.n(biomarker_table_data_icon_componentngResource);let BiomarkerTableDataIconComponent=((biomarker_table_data_icon_component_class=class BiomarkerTableDataIconComponent{constructor(){this.color="",this.size=0}}).propDecorators={color:[{type:core.HostBinding,args:["style.background-color"]},{type:core.Input}],size:[{type:core.HostBinding,args:["style.--radius.rem"]},{type:core.Input}]},biomarker_table_data_icon_component_class);var biomarker_table_component_class;BiomarkerTableDataIconComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"hra-biomarker-table-data-icon",standalone:!0,imports:[common.CommonModule],template:"",changeDetection:core.ChangeDetectionStrategy.OnPush,styles:[biomarker_table_data_icon_componentngResource_default()]})],BiomarkerTableDataIconComponent);let BiomarkerTableComponent=((biomarker_table_component_class=class BiomarkerTableComponent{constructor(){this.tissueInfo={id:"",label:""},this.columns=[],this.data=[],this.gradient=[],this.sizes=[],this.hightlightedCellName="",this.dataSource=new table.by([])}get columnsWithTypeAndCount(){return["type","count",...this.columns]}ngOnChanges(changes){"data"in changes&&(this.dataSource.data=this.data)}lerp(value,min,max){return min*(1-value)+max*value}hex2rgb(hex){return[parseInt(hex.slice(1,3),16),parseInt(hex.slice(3,5),16),parseInt(hex.slice(5,7),16)]}getMinMaxColor(meanExpression){const index=this.gradient.findIndex(((item,i,arr)=>meanExpression>=item.percentage&&meanExpression<=arr[i+1]?.percentage));return{minColor:this.hex2rgb(this.gradient[index]?.color??this.gradient[0].color),maxColor:this.hex2rgb(this.gradient[index+1]?.color??this.gradient[this.gradient.length-1].color)}}getMinMaxSize(percentage){const index=this.sizes.findIndex(((item,i,arr)=>percentage>=parseFloat(item.label)/100&&percentage<=parseFloat(arr[i+1]?.label)/100));return{minSize:this.sizes[index]?.radius??this.sizes[0].radius,maxSize:this.sizes[index+1]?.radius??this.sizes[this.sizes.length-1].radius}}getColor(value){const{minColor,maxColor}=this.getMinMaxColor(value);return"#"+minColor.map(((min,index)=>this.lerp(value,min,maxColor[index]))).map((component=>Math.round(component).toString(16))).join("")}getSize(value){const{minSize,maxSize}=this.getMinMaxSize(value);return this.lerp(value,minSize,maxSize)}getHoverData([index,row]){if(void 0===row[index])return[];const{tissueInfo:{id,label}}=this,{data:{cell,biomarker,meanExpression,dataset_count}}=row[index];return[[{label:"Functional Tissue Unit Name",value:label},{label:"Uberon ID",value:id},{label:"#Datasets",value:`${dataset_count??0}`}],[{label:"Cell Type Name",value:row[0]},{label:"CL ID",value:cell},{label:"Number of Cells",value:`${row[1]}`}],[{label:"Gene Name",value:this.columns[index-2]},{label:"HGNC ID",value:biomarker},{label:"Mean Expression Value",value:meanExpression.toFixed(6)}]]}}).propDecorators={tissueInfo:[{type:core.Input}],columns:[{type:core.Input}],data:[{type:core.Input}],gradient:[{type:core.Input}],sizes:[{type:core.Input}],hightlightedCellName:[{type:core.Input}]},biomarker_table_component_class);BiomarkerTableComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"hra-biomarker-table",standalone:!0,imports:[common.CommonModule,table.p0,BiomarkerTableDataIconComponent,HoverDirective,BiomarkerTableDataCardComponent],template:'\n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n
\n Cell type table by Biomarker\n
Cell Type\n {{ element[0] }}\n Cell Count\n {{ element[1] !== undefined ? (element[1] | number) : \'no data\' }}\n \n {{ column }}\n \n \n \n\n \n
\n \n
\n\n\n
\n {{ columnName }}\n
\n\n\n\n \n\n',changeDetection:core.ChangeDetectionStrategy.OnPush,styles:[biomarker_table_componentngResource_default()]})],BiomarkerTableComponent);var ngxs_store=__webpack_require__("./node_modules/@ngxs/store/fesm2015/ngxs-store.js"),cell_summary_state=__webpack_require__("./libs/state/src/lib/cell-summary/cell-summary.state.ts");class CellSummarySelectors{static aggregates(state){return state.aggregates}static summaries(state){return state.summaries}}(0,tslib_es6.gn)([(0,ngxs_store.Qf)([cell_summary_state.x]),(0,tslib_es6.w6)("design:type",Function),(0,tslib_es6.w6)("design:paramtypes",[Object]),(0,tslib_es6.w6)("design:returntype",Array)],CellSummarySelectors,"aggregates",null),(0,tslib_es6.gn)([(0,ngxs_store.Qf)([cell_summary_state.x]),(0,tslib_es6.w6)("design:type",Function),(0,tslib_es6.w6)("design:paramtypes",[Object]),(0,tslib_es6.w6)("design:returntype",Array)],CellSummarySelectors,"summaries",null);var resource_ids=__webpack_require__("./libs/state/src/lib/resource-ids.ts"),resource_types=__webpack_require__("./libs/state/src/lib/resource-types.ts");class SourceRefsSelectors{static sourceReferences(refs){return refs}}(0,tslib_es6.gn)([(0,ngxs_store.Qf)([source_refs_state.b]),(0,tslib_es6.w6)("design:type",Function),(0,tslib_es6.w6)("design:paramtypes",[Array]),(0,tslib_es6.w6)("design:returntype",Array)],SourceRefsSelectors,"sourceReferences",null);var dialog=__webpack_require__("./node_modules/@angular/material/fesm2020/dialog.mjs"),contact_behavior_component=__webpack_require__("./libs/components/behavioral/src/lib/contact-behavior/contact-behavior.component.ts");const EMPTY_TISSUE_INFO={id:"",label:""};let BiomarkerDetailsComponent=class BiomarkerDetailsComponent{constructor(){this.tabs=(0,select_snapshot.g)(CellSummarySelectors.aggregates),this.gradientHoverInfo=(0,select_snapshot.w)(resource_registry_selectors.S.anyText,resource_ids.IO),this.sizeHoverInfo=(0,select_snapshot.w)(resource_registry_selectors.S.anyText,resource_ids.Z9),this.isTableFullScreen=!1,this.gradients=(0,select_snapshot.w)(resource_registry_selectors.S.field,resource_ids.Aq,resource_types.ph,"points",[]),this.sizes=(0,select_snapshot.w)(resource_registry_selectors.S.field,resource_ids.MO,resource_types.$u,"sizes",[]),this.source=(0,select_snapshot.g)(SourceRefsSelectors.sourceReferences),this.iri=(0,select_snapshot.g)(active_ftu_selectors.K.iri),this.tissues=(0,select_snapshot.g)(tissue_library_selectors.N.tissues),this.selectedOnHovered=(0,select_snapshot.g)(illustrator_selectors.b.selectedOnHovered),this.collaborateText="Collaborate with the HRA Team",this.message="We currently do not have cell type data for this biomarker.\n

Please contact us to discuss your dataset.",this.setScreenMode=(0,dispatch.WI)(screen_mode_actions.l),this.dialog=(0,core.inject)(dialog.uw)}get tissueInfo(){const iri=this.iri(),tissues=this.tissues();if(void 0===iri)return EMPTY_TISSUE_INFO;const{id,label}=tissues[iri];return{id,label}}toggleFullscreen(){this.isTableFullScreen=!this.isTableFullScreen,this.setScreenMode(this.isTableFullScreen)}collaborate(){const dialogConfig=new dialog.vA;dialogConfig.disableClose=!0,this.dialog.open(contact_behavior_component.Q,dialogConfig)}};function createDataItem(label,value){return{label,value}}BiomarkerDetailsComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"ftu-biomarker-details",standalone:!0,imports:[common.CommonModule,icon.Ps,tabs.Nh,dialog.Is,BiomarkerTableComponent,BiomarkerTableDataCardComponent,GradientLegendComponent,HoverDirective,label_box_component.d,SizeLegendComponent,SourceListComponent,EmptyBiomarkerComponent],template:'\n Cell Types by Gene Biomarkers\n \n {{ isTableFullScreen ? \'close_fullscreen\' : \'open_in_full\' }}\n \n\n\n\n \n \n \n \n\n\n\n Biomarker Expression Mean in FTU\n info_outlined\n\n
\n \n
\n\n\n Percentage of Cells in FTU\n info_outlined\n\n
\n \n
\n\n
\n \n
\n\n\n
\n {{ tooltip }}\n
\n\n',changeDetection:core.ChangeDetectionStrategy.OnPush,styles:[biomarker_details_componentngResource_default()]})],BiomarkerDetailsComponent);const biomarker_details_component_stories={title:"BiomarkerDetailsComponent",component:BiomarkerDetailsComponent,parameters:{state:{states:[resource_registry_state.E,source_refs_state.b],actions:[new resource_registry_actions.AU("assets/resources/gradient.yml"),new resource_registry_actions.AU("assets/resources/size.yml")]}},decorators:[(0,dist.moduleMetadata)({imports:[icon.Ps]})]},Primary=(args=>({props:args})).bind({});Primary.args={},createDataItem.parameters={...createDataItem.parameters,docs:{...createDataItem.parameters?.docs,source:{originalSource:"function createDataItem(label, value) {\n return {\n label,\n value\n };\n}",...createDataItem.parameters?.docs?.source}}},Primary.parameters={...Primary.parameters,docs:{...Primary.parameters?.docs,source:{originalSource:"args => ({\n props: args\n})",...Primary.parameters?.docs?.source}}}}}]); \ No newline at end of file diff --git a/storybook/components-molecules/iframe.html b/storybook/components-molecules/iframe.html index 1dee27e54..e19190457 100644 --- a/storybook/components-molecules/iframe.html +++ b/storybook/components-molecules/iframe.html @@ -348,8 +348,8 @@ window['DOCS_OPTIONS'] = {"defaultName":"Docs","autodocs":true}; \ No newline at end of file + import './main.44bb5144.iframe.bundle.js'; \ No newline at end of file diff --git a/storybook/components-molecules/main.43786e1e.iframe.bundle.js b/storybook/components-molecules/main.43786e1e.iframe.bundle.js deleted file mode 100644 index 43b2ee398..000000000 --- a/storybook/components-molecules/main.43786e1e.iframe.bundle.js +++ /dev/null @@ -1 +0,0 @@ -(self.webpackChunkhra_ui=self.webpackChunkhra_ui||[]).push([[179],{"./dist/compodoc sync recursive ^\\.\\/.*\\/documentation\\.json$":(module,__unused_webpack_exports,__webpack_require__)=>{var map={"./components-behavioral/documentation.json":"./dist/compodoc/components-behavioral/documentation.json","./components-molecules/documentation.json":"./dist/compodoc/components-molecules/documentation.json","./components-organisms/documentation.json":"./dist/compodoc/components-organisms/documentation.json"};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id="./dist/compodoc sync recursive ^\\.\\/.*\\/documentation\\.json$"},"./libs/components/molecules lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/molecules(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.(js%7Cjsx%7Cts%7Ctsx))$":(module,__unused_webpack_exports,__webpack_require__)=>{var map={"./src/lib/biomarker-table-data-card/biomarker-table-data-card.component.stories":["./libs/components/molecules/src/lib/biomarker-table-data-card/biomarker-table-data-card.component.stories.ts",373,761,616,734,181],"./src/lib/biomarker-table-data-card/biomarker-table-data-card.component.stories.ts":["./libs/components/molecules/src/lib/biomarker-table-data-card/biomarker-table-data-card.component.stories.ts",373,761,616,734,181],"./src/lib/biomarker-table-data-icon/biomarker-table-data-icon.component.stories":["./libs/components/molecules/src/lib/biomarker-table-data-icon/biomarker-table-data-icon.component.stories.ts",326],"./src/lib/biomarker-table-data-icon/biomarker-table-data-icon.component.stories.ts":["./libs/components/molecules/src/lib/biomarker-table-data-icon/biomarker-table-data-icon.component.stories.ts",326],"./src/lib/contact-modal/contact-modal.component.stories":["./libs/components/molecules/src/lib/contact-modal/contact-modal.component.stories.ts",373,761,648,19,999,570],"./src/lib/contact-modal/contact-modal.component.stories.ts":["./libs/components/molecules/src/lib/contact-modal/contact-modal.component.stories.ts",373,761,648,19,999,570],"./src/lib/footer/footer.component.stories":["./libs/components/molecules/src/lib/footer/footer.component.stories.ts",373,761,648,981,616,472,19,111,839,911,510],"./src/lib/footer/footer.component.stories.ts":["./libs/components/molecules/src/lib/footer/footer.component.stories.ts",373,761,648,981,616,472,19,111,839,911,510],"./src/lib/fullscreen/fullscreen-container.stories":["./libs/components/molecules/src/lib/fullscreen/fullscreen-container.stories.ts",522],"./src/lib/fullscreen/fullscreen-container.stories.ts":["./libs/components/molecules/src/lib/fullscreen/fullscreen-container.stories.ts",522],"./src/lib/header/header.component.stories":["./libs/components/molecules/src/lib/header/header.component.stories.ts",373,761,648,981,911,591],"./src/lib/header/header.component.stories.ts":["./libs/components/molecules/src/lib/header/header.component.stories.ts",373,761,648,981,911,591],"./src/lib/hra-landing-page-intro-wc/hra-landing-page-intro-wc.component.stories":["./libs/components/molecules/src/lib/hra-landing-page-intro-wc/hra-landing-page-intro-wc.component.stories.ts",976],"./src/lib/hra-landing-page-intro-wc/hra-landing-page-intro-wc.component.stories.ts":["./libs/components/molecules/src/lib/hra-landing-page-intro-wc/hra-landing-page-intro-wc.component.stories.ts",976],"./src/lib/info-modal/info-modal.component.stories":["./libs/components/molecules/src/lib/info-modal/info-modal.component.stories.ts",373,761,648,977],"./src/lib/info-modal/info-modal.component.stories.ts":["./libs/components/molecules/src/lib/info-modal/info-modal.component.stories.ts",373,761,648,977],"./src/lib/interactive-svg/interactive-svg.stories":["./libs/components/molecules/src/lib/interactive-svg/interactive-svg.stories.ts",373,616,472,111,824],"./src/lib/interactive-svg/interactive-svg.stories.ts":["./libs/components/molecules/src/lib/interactive-svg/interactive-svg.stories.ts",373,616,472,111,824],"./src/lib/landing-page-in-depth/landing-page-in-depth.component.stories":["./libs/components/molecules/src/lib/landing-page-in-depth/landing-page-in-depth.component.stories.ts",373,761,648,981,911,514],"./src/lib/landing-page-in-depth/landing-page-in-depth.component.stories.ts":["./libs/components/molecules/src/lib/landing-page-in-depth/landing-page-in-depth.component.stories.ts",373,761,648,981,911,514],"./src/lib/landing-page-intro/landing-page-intro.component.stories":["./libs/components/molecules/src/lib/landing-page-intro/landing-page-intro.component.stories.ts",373,761,648,981,911,487],"./src/lib/landing-page-intro/landing-page-intro.component.stories.ts":["./libs/components/molecules/src/lib/landing-page-intro/landing-page-intro.component.stories.ts",373,761,648,981,911,487],"./src/lib/metrics/metrics.component.stories":["./libs/components/molecules/src/lib/metrics/metrics.component.stories.ts",442],"./src/lib/metrics/metrics.component.stories.ts":["./libs/components/molecules/src/lib/metrics/metrics.component.stories.ts",442],"./src/lib/screen-size-notice/screen-size-notice.component.stories":["./libs/components/molecules/src/lib/screen-size-notice/screen-size-notice.component.stories.ts",373,761,648,981,911,106],"./src/lib/screen-size-notice/screen-size-notice.component.stories.ts":["./libs/components/molecules/src/lib/screen-size-notice/screen-size-notice.component.stories.ts",373,761,648,981,911,106],"./src/lib/source-list/source-list.component.stories":["./libs/components/molecules/src/lib/source-list/source-list.component.stories.ts",373,761,648,616,734,227],"./src/lib/source-list/source-list.component.stories.ts":["./libs/components/molecules/src/lib/source-list/source-list.component.stories.ts",373,761,648,616,734,227],"./src/lib/tissue-tree-list/tissue-tree-list.component.stories":["./libs/components/molecules/src/lib/tissue-tree-list/tissue-tree-list.component.stories.ts",373,761,648,981,472,617,911,593],"./src/lib/tissue-tree-list/tissue-tree-list.component.stories.ts":["./libs/components/molecules/src/lib/tissue-tree-list/tissue-tree-list.component.stories.ts",373,761,648,981,472,617,911,593],"./src/lib/title-card/title-card.component.stories":["./libs/components/molecules/src/lib/title-card/title-card.component.stories.ts",632],"./src/lib/title-card/title-card.component.stories.ts":["./libs/components/molecules/src/lib/title-card/title-card.component.stories.ts",632]};function webpackAsyncContext(req){if(!__webpack_require__.o(map,req))return Promise.resolve().then((()=>{var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}));var ids=map[req],id=ids[0];return Promise.all(ids.slice(1).map(__webpack_require__.e)).then((()=>__webpack_require__(id)))}webpackAsyncContext.keys=()=>Object.keys(map),webpackAsyncContext.id="./libs/components/molecules lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/molecules(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.(js%7Cjsx%7Cts%7Ctsx))$",module.exports=webpackAsyncContext},"./libs/components/molecules lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/molecules(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.mdx)$":module=>{function webpackEmptyAsyncContext(req){return Promise.resolve().then((()=>{var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}))}webpackEmptyAsyncContext.keys=()=>[],webpackEmptyAsyncContext.resolve=webpackEmptyAsyncContext,webpackEmptyAsyncContext.id="./libs/components/molecules lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/molecules(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.mdx)$",module.exports=webpackEmptyAsyncContext},"./.storybook/styles.scss?ngGlobalStyle":()=>{},"./libs/components/molecules/.storybook/preview.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{argTypesEnhancers:()=>argTypesEnhancers,decorators:()=>preview_decorators,parameters:()=>parameters});var core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),dist=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),lib_esmodule=__webpack_require__("./node_modules/ng-inline-svg-2/lib_esmodule/index.js"),http=__webpack_require__("./node_modules/@angular/common/fesm2020/http.mjs"),animations=__webpack_require__("./node_modules/@angular/platform-browser/fesm2020/animations.mjs"),ngxs_logger_plugin=__webpack_require__("./node_modules/@ngxs/logger-plugin/fesm2015/ngxs-logger-plugin.js"),ngxs_store=__webpack_require__("./node_modules/@ngxs/store/fesm2015/ngxs-store.js"),angular=__webpack_require__("./node_modules/@storybook/addon-docs/angular/index.js"),ngx_markdown=__webpack_require__("./node_modules/ngx-markdown/fesm2020/ngx-markdown.mjs"),tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),angular_material_css_vars=__webpack_require__("./node_modules/angular-material-css-vars/fesm2020/angular-material-css-vars.mjs"),js_yaml=__webpack_require__("./node_modules/js-yaml/dist/js-yaml.mjs"),map=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/map.js"),tap=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/tap.js"),Observable=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/Observable.js");class Load{constructor(url){this.url=url,this.type=Load.type}}Load.type="[Theming] Load Theming File";var lib=__webpack_require__("./node_modules/zod/lib/index.mjs");const THEMING_FILE_SCHEMA=lib.z.record(lib.z.nativeEnum(angular_material_css_vars.Rm),lib.z.string());let ThemingState=class ThemingState{constructor(){this.http=(0,core.inject)(http.eN),this.materialVars=(0,core.inject)(angular_material_css_vars.jO)}load(ctx,{url}){return this.http.get(url,{responseType:"text"}).pipe((0,map.U)((data=>(0,js_yaml.zD)(data,{filename:url}))),(0,map.U)((data=>THEMING_FILE_SCHEMA.parse(data))),(0,tap.b)((data=>ctx.setState(data))),(0,tap.b)((data=>this.setVariables(data))))}setVariables(data){for(const[key,value]of Object.entries(data))this.materialVars.setVariable(key,value)}};(0,tslib_es6.gn)([(0,ngxs_store.aU)(Load),(0,tslib_es6.w6)("design:type",Function),(0,tslib_es6.w6)("design:paramtypes",[Object,Load]),(0,tslib_es6.w6)("design:returntype",Observable.y)],ThemingState.prototype,"load",null),ThemingState=(0,tslib_es6.gn)([(0,ngxs_store.ZM)({name:"theming",defaults:{}}),(0,core.Injectable)()],ThemingState);let ThemingModule=class ThemingModule{};function parseDefaultValue(type){const{defaultValue,type:typeDef}=type;if(void 0===defaultValue||"string"!=typeof defaultValue||"string"===typeDef?.name)return defaultValue;switch(typeDef?.name){case"array":case"boolean":case"number":case"object":try{return new Function("return "+defaultValue)()}catch(_error){return}case"enum":return typeDef.value.includes(defaultValue)?defaultValue:void 0;default:return}}ThemingModule=(0,tslib_es6.gn)([(0,core.NgModule)({imports:[angular_material_css_vars.Pe.forRoot({}),ngxs_store.$l.forFeature([ThemingState])]})],ThemingModule);const parameters={actions:{argTypesRegex:"^on[A-Z].*"},controls:{matchers:{color:/(background|color)$/i,date:/Date$/}},docs:{inlineStories:!0}},argTypesEnhancers=[function fixArgTypes(){return context=>{const argTypes={...context.argTypes},exclude=[...context.parameters.controls?.exclude??[]];for(const[key,type]of Object.entries(argTypes))switch(type.table.category){case"inputs":const defaultValue=parseDefaultValue(type);defaultValue!==type.defaultValue&&(argTypes[key]={...type,defaultValue});break;case"outputs":argTypes[key]={...type,defaultValue:void 0};break;default:exclude.push(key)}return context.parameters.controls={...context.parameters.controls,exclude},argTypes}}()];const preview_decorators=[...[(0,dist.applicationConfig)({providers:[(0,core.importProvidersFrom)(animations.BrowserAnimationsModule,http.JF,ngxs_store.$l.forRoot([],{developmentMode:!0}),ngxs_logger_plugin.xz.forRoot(),ngx_markdown.JP.forRoot({loader:http.eN}),ThemingModule)]}),(0,dist.componentWrapperDecorator)((story=>`\n
${story}
\n
\n `)),function addState(){return(fn,ctx)=>{const config=ctx.parameters.state;return config?(0,dist.applicationConfig)({providers:[(0,core.importProvidersFrom)(ngxs_store.$l.forFeature(config.states)),{provide:core.APP_INITIALIZER,multi:!0,useFactory:store=>()=>{const{actions}=config;return actions&&actions.length>0?store.dispatch(actions):void 0},deps:[ngxs_store.yh]}]})(fn,ctx):fn(ctx)}}()],(0,dist.applicationConfig)({providers:[(0,core.importProvidersFrom)(lib_esmodule.vi.forRoot())]})];!function setDocs(library){const docs=__webpack_require__("./dist/compodoc sync recursive ^\\.\\/.*\\/documentation\\.json$")(`./${library}/documentation.json`);(0,angular.P)(docs)}("components-molecules")},"./storybook-config-entry.js":(__unused_webpack_module,__unused_webpack___webpack_exports__,__webpack_require__)=>{"use strict";var dist=__webpack_require__("./node_modules/@storybook/global/dist/index.mjs"),external_STORYBOOK_MODULE_PREVIEW_API_=__webpack_require__("@storybook/preview-api");const external_STORYBOOK_MODULE_CHANNEL_POSTMESSAGE_namespaceObject=__STORYBOOK_MODULE_CHANNEL_POSTMESSAGE__,external_STORYBOOK_MODULE_CHANNEL_WEBSOCKET_namespaceObject=__STORYBOOK_MODULE_CHANNEL_WEBSOCKET__;var asyncToGenerator=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js");const pipeline=x=>x(),importers=[function(){var _ref=(0,asyncToGenerator.Z)((function*(path){if(!/^\.[\\/](?:libs\/components\/molecules(?:\/(?!\.)(?:(?:(?!(?:^|\/)\.).)*?)\/|\/|$)(?!\.)(?=.)[^/]*?\.stories\.mdx)$/.exec(path))return;const pathRemainder=path.substring(28);return __webpack_require__("./libs/components/molecules lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/molecules(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.mdx)$")("./"+pathRemainder)}));return function(_x){return _ref.apply(this,arguments)}}(),function(){var _ref2=(0,asyncToGenerator.Z)((function*(path){if(!/^\.[\\/](?:libs\/components\/molecules(?:\/(?!\.)(?:(?:(?!(?:^|\/)\.).)*?)\/|\/|$)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$/.exec(path))return;const pathRemainder=path.substring(28);return __webpack_require__("./libs/components/molecules lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/molecules(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.(js%7Cjsx%7Cts%7Ctsx))$")("./"+pathRemainder)}));return function(_x2){return _ref2.apply(this,arguments)}}()];function _importFn(){return(_importFn=(0,asyncToGenerator.Z)((function*(path){for(let i=0;iimporters[i](path)));if(moduleExports)return moduleExports}}))).apply(this,arguments)}const{SERVER_CHANNEL_URL}=dist.global,channel=(0,external_STORYBOOK_MODULE_CHANNEL_POSTMESSAGE_namespaceObject.createChannel)({page:"preview"});if(external_STORYBOOK_MODULE_PREVIEW_API_.addons.setChannel(channel),SERVER_CHANNEL_URL){const serverChannel=(0,external_STORYBOOK_MODULE_CHANNEL_WEBSOCKET_namespaceObject.createChannel)({url:SERVER_CHANNEL_URL});external_STORYBOOK_MODULE_PREVIEW_API_.addons.setServerChannel(serverChannel),window.__STORYBOOK_SERVER_CHANNEL__=serverChannel}const preview=new external_STORYBOOK_MODULE_PREVIEW_API_.PreviewWeb;window.__STORYBOOK_PREVIEW__=preview,window.__STORYBOOK_STORY_STORE__=preview.storyStore,window.__STORYBOOK_ADDONS_CHANNEL__=channel,window.__STORYBOOK_CLIENT_API__=new external_STORYBOOK_MODULE_PREVIEW_API_.ClientApi({storyStore:preview.storyStore}),preview.initialize({importFn:function importFn(_x3){return _importFn.apply(this,arguments)},getProjectAnnotations:()=>(0,external_STORYBOOK_MODULE_PREVIEW_API_.composeConfigs)([__webpack_require__("./node_modules/@storybook/angular/dist/client/docs/config.js"),__webpack_require__("./node_modules/@storybook/angular/dist/client/config.js"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/docs/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/actions/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/backgrounds/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/measure/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/outline/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/highlight/preview.mjs"),__webpack_require__("./libs/components/molecules/.storybook/preview.ts")])})},"./node_modules/@storybook/addon-docs/dist sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="./node_modules/@storybook/addon-docs/dist sync recursive",module.exports=webpackEmptyContext},"@storybook/channels":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CHANNELS__},"@storybook/client-logger":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CLIENT_LOGGER__},"@storybook/core-client":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CORE_CLIENT__},"@storybook/core-events":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CORE_EVENTS__},"@storybook/preview-api":module=>{"use strict";module.exports=__STORYBOOK_MODULE_PREVIEW_API__},"./dist/compodoc/components-behavioral/documentation.json":module=>{"use strict";module.exports=JSON.parse('{"pipes":[],"interfaces":[],"injectables":[],"guards":[],"interceptors":[],"classes":[],"directives":[],"components":[{"name":"BiomarkerDetailsComponent","id":"component-BiomarkerDetailsComponent-77362795c55e59d8109b5a13e3d57e4774ce01b5484ac21237c42d2857f2de4ecd80ec15ae66e99983246bdc3de1df675717253be566d7ba0efe1495a48c9f3c","file":"src/lib/biomarker-details/biomarker-details.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-biomarker-details","styleUrls":["./biomarker-details.component.scss"],"styles":[],"templateUrl":["./biomarker-details.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"collaborateText","defaultValue":"\'Collaborate with the HRA Team\'","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

button text of empty biomarker component.

\\n","line":106,"rawdescription":"\\n\\nbutton text of empty biomarker component.\\n","modifierKind":[144]},{"name":"gradientHoverInfo","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.GradientLegendInfo)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Info to be shown on the tooltip for Gradient Legend

\\n","line":58,"rawdescription":"\\nInfo to be shown on the tooltip for Gradient Legend","modifierKind":[144]},{"name":"gradients","defaultValue":"selectQuerySnapshot(RR.field, Ids.GradientLegend, RTypes.Gradient, \'points\' as const, [])<\\n GradientPoint[]\\n >","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Gradient colors along with their stop points

\\n","line":67,"rawdescription":"\\nGradient colors along with their stop points","modifierKind":[144]},{"name":"iri","defaultValue":"selectSnapshot(ActiveFtuSelectors.iri)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Iri of medical illustration behavior component

\\n","line":80,"rawdescription":"\\n\\nIri of medical illustration behavior component\\n","modifierKind":[144]},{"name":"isTableFullScreen","defaultValue":"false","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Indicates if the table is fully shown, defaults to false

\\n","line":64,"rawdescription":"\\nIndicates if the table is fully shown, defaults to false"},{"name":"message","defaultValue":"`We currently do not have cell type data for this biomarker.\\n

Please contact us to discuss your dataset.`","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

message markdown of empty biomarker component.

\\n","line":111,"rawdescription":"\\n\\nmessage markdown of empty biomarker component.\\n","modifierKind":[144]},{"name":"selectedOnHovered","defaultValue":"selectSnapshot(IllustratorSelectors.selectedOnHovered)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Selects the cells hovered currently to highlight in table

\\n","line":88,"rawdescription":"\\nSelects the cells hovered currently to highlight in table","modifierKind":[144]},{"name":"sizeHoverInfo","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.SizeLegendInfo)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Info to be shown on the tooltip for Size Legend

\\n","line":61,"rawdescription":"\\nInfo to be shown on the tooltip for Size Legend","modifierKind":[144]},{"name":"sizes","defaultValue":"selectQuerySnapshot(RR.field, Ids.SizeLegend, RTypes.Size, \'sizes\' as const, [])","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Taking input for the radius of the circle and the label to be displayed.

\\n","line":72,"rawdescription":"\\nTaking input for the radius of the circle and the label to be displayed.","modifierKind":[144]},{"name":"source","defaultValue":"selectSnapshot(SourceRefsSelectors.sourceReferences)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

List of sources with titles and links displayed to the user

\\n","line":75,"rawdescription":"\\nList of sources with titles and links displayed to the user","modifierKind":[144]},{"name":"tabs","defaultValue":"selectSnapshot(CellSummarySelectors.aggregates)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Table tabs

\\n","line":55,"rawdescription":"\\nTable tabs","modifierKind":[144]},{"name":"tissues","defaultValue":"selectSnapshot(TissueLibrarySelectors.tissues)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Get all tissues

\\n","line":85,"rawdescription":"\\n\\nGet all tissues\\n","modifierKind":[144]}],"methodsClass":[{"name":"collaborate","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":129,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which opens the contact modal dialog box","description":"

A function which opens the contact modal dialog box

\\n"},{"name":"toggleFullscreen","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":123,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function that toggles isTableFullScreen and\\ncalls the setScreenMode function.\\n","description":"

A function that toggles isTableFullScreen and\\ncalls the setScreenMode function.

\\n"}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

The component displays the biomarker details which includes the details, gradient legends, size legends and source lists

\\n","rawdescription":"\\nThe component displays the biomarker details which includes the details, gradient legends, size legends and source lists","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, inject } from \'@angular/core\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatTabsModule } from \'@angular/material/tabs\';\\nimport { HoverDirective } from \'@hra-ui/cdk\';\\nimport { dispatch, selectQuerySnapshot, selectSnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RR } from \'@hra-ui/cdk/state\';\\nimport { ActiveFtuSelectors, IllustratorSelectors, ScreenModeAction, TissueLibrarySelectors } from \'@hra-ui/state\';\\nimport {\\n EmptyBiomarkerComponent,\\n GradientLegendComponent,\\n GradientPoint,\\n LabelBoxComponent,\\n SizeLegend,\\n SizeLegendComponent,\\n} from \'@hra-ui/components/atoms\';\\nimport { BiomarkerTableDataCardComponent, SourceListComponent } from \'@hra-ui/components/molecules\';\\nimport { BiomarkerTableComponent, TissueInfo } from \'@hra-ui/components/organisms\';\\nimport { CellSummarySelectors, ResourceIds as Ids, ResourceTypes as RTypes, SourceRefsSelectors } from \'@hra-ui/state\';\\nimport { MatDialog, MatDialogConfig, MatDialogModule } from \'@angular/material/dialog\';\\nimport { ContactBehaviorComponent } from \'../contact-behavior/contact-behavior.component\';\\n\\n/**\\n * PlaceHolder for Empty Tissue Info\\n */\\nconst EMPTY_TISSUE_INFO: TissueInfo = {\\n id: \'\',\\n label: \'\',\\n};\\n\\n/** The component displays the biomarker details which includes the details, gradient legends, size legends and source lists*/\\n@Component({\\n selector: \'ftu-biomarker-details\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatIconModule,\\n MatTabsModule,\\n MatDialogModule,\\n BiomarkerTableComponent,\\n BiomarkerTableDataCardComponent,\\n GradientLegendComponent,\\n HoverDirective,\\n LabelBoxComponent,\\n SizeLegendComponent,\\n SourceListComponent,\\n EmptyBiomarkerComponent,\\n ],\\n templateUrl: \'./biomarker-details.component.html\',\\n styleUrls: [\'./biomarker-details.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerDetailsComponent {\\n /** Table tabs */\\n readonly tabs = selectSnapshot(CellSummarySelectors.aggregates);\\n\\n /** Info to be shown on the tooltip for Gradient Legend */\\n readonly gradientHoverInfo = selectQuerySnapshot(RR.anyText, Ids.GradientLegendInfo);\\n\\n /** Info to be shown on the tooltip for Size Legend */\\n readonly sizeHoverInfo = selectQuerySnapshot(RR.anyText, Ids.SizeLegendInfo);\\n\\n /** Indicates if the table is fully shown, defaults to false*/\\n isTableFullScreen = false;\\n\\n /** Gradient colors along with their stop points */\\n readonly gradients = selectQuerySnapshot(RR.field, Ids.GradientLegend, RTypes.Gradient, \'points\' as const, [])<\\n GradientPoint[]\\n >;\\n\\n /** Taking input for the radius of the circle and the label to be displayed. */\\n readonly sizes = selectQuerySnapshot(RR.field, Ids.SizeLegend, RTypes.Size, \'sizes\' as const, []);\\n\\n /** List of sources with titles and links displayed to the user */\\n readonly source = selectSnapshot(SourceRefsSelectors.sourceReferences);\\n\\n /**\\n * Iri of medical illustration behavior component\\n */\\n readonly iri = selectSnapshot(ActiveFtuSelectors.iri);\\n\\n /**\\n * Get all tissues\\n */\\n readonly tissues = selectSnapshot(TissueLibrarySelectors.tissues);\\n\\n /** Selects the cells hovered currently to highlight in table */\\n readonly selectedOnHovered = selectSnapshot(IllustratorSelectors.selectedOnHovered);\\n\\n /**\\n * Gets tissue title from the list of tissues\\n */\\n get tissueInfo(): TissueInfo {\\n const iri = this.iri();\\n const tissues = this.tissues();\\n if (iri === undefined) {\\n return EMPTY_TISSUE_INFO;\\n }\\n const { id, label } = tissues[iri];\\n return { id, label };\\n }\\n\\n /**\\n * button text of empty biomarker component.\\n */\\n readonly collaborateText = \'Collaborate with the HRA Team\';\\n\\n /**\\n * message markdown of empty biomarker component.\\n */\\n readonly message = `We currently do not have cell type data for this biomarker.\\n

Please contact us to discuss your dataset.`;\\n\\n /** A dispatcher function to set the screen mode */\\n private readonly setScreenMode = dispatch(ScreenModeAction.Set);\\n\\n /** A dialog box which shows contact modal after clicking on contact */\\n private readonly dialog = inject(MatDialog);\\n\\n /** A function that toggles isTableFullScreen and\\n * calls the setScreenMode function.\\n */\\n toggleFullscreen(): void {\\n this.isTableFullScreen = !this.isTableFullScreen;\\n this.setScreenMode(this.isTableFullScreen);\\n }\\n\\n /** A function which opens the contact modal dialog box */\\n collaborate(): void {\\n const dialogConfig = new MatDialogConfig();\\n dialogConfig.disableClose = true;\\n this.dialog.open(ContactBehaviorComponent, dialogConfig);\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n display: grid;\\n grid-template-columns: 1fr 1fr auto;\\n grid-template-rows: 3.5rem minmax(5rem, 2fr) 3rem 5rem minmax(5rem, 1fr);\\n grid-template-areas:\\n \'table-header table-header table-header\'\\n \'table table table\'\\n \'gradient-legend-header size-legend-header .\'\\n \'gradient-legend size-legend .\'\\n \'source-list source-list source-list\';\\n overflow-y: auto;\\n\\n .table-header {\\n grid-area: table-header;\\n border-bottom: 0.063rem solid #d3d3d3;\\n height: 3.5rem;\\n }\\n\\n .table {\\n grid-area: table;\\n max-width: 100%;\\n overflow: auto;\\n border-bottom: 0.063rem solid #d3d3d3;\\n\\n ::ng-deep .table-tab-header {\\n padding-left: 1rem;\\n padding-right: 1rem;\\n border-left: 0.063rem solid #d3d3d3;\\n border-bottom: 0.063rem solid #d3d3d3;\\n background-color: white;\\n\\n &:last-child {\\n border-right: 0.063rem solid #d3d3d3;\\n }\\n\\n &.mdc-tab-indicator--active {\\n background-color: #f8f9fa;\\n }\\n\\n &:hover {\\n background-color: #f8f9fa;\\n }\\n }\\n }\\n\\n .legend-header {\\n color: vars.$dark-primary-text;\\n border-top: 0.063rem solid #d3d3d3;\\n border-bottom: 0.063rem solid #d3d3d3;\\n border-right: 0.063rem solid #d3d3d3;\\n\\n &.gradient {\\n grid-area: gradient-legend-header;\\n }\\n\\n &.size {\\n grid-area: size-legend-header;\\n }\\n\\n .icon {\\n margin-left: 0.6rem;\\n width: unset;\\n }\\n }\\n\\n .legend {\\n padding: 1rem 2rem;\\n border-right: 0.063rem solid #d3d3d3;\\n\\n &.gradient {\\n grid-area: gradient-legend;\\n\\n .content {\\n width: 10rem;\\n }\\n }\\n\\n &.size {\\n grid-area: size-legend;\\n }\\n }\\n\\n .source-list {\\n grid-area: source-list;\\n }\\n\\n .cursor {\\n cursor: default;\\n }\\n}\\n\\n::ng-deep .biomarker-details.info-tooltip {\\n display: flex;\\n padding: 1rem;\\n border: 1px solid #a8a3a3;\\n border-radius: 0.5rem;\\n box-shadow: 1px 2px 16px 2px #00000029;\\n background-color: vars.$primary-contrast-rgb;\\n max-width: 21rem;\\n font-size: small;\\n font-family: Inter;\\n}\\n","styleUrl":"./biomarker-details.component.scss"}],"stylesData":"","accessors":{"tissueInfo":{"name":"tissueInfo","getSignature":{"name":"tissueInfo","type":"","returnType":"TissueInfo","line":93,"rawdescription":"\\n\\nGets tissue title from the list of tissues\\n","description":"

Gets tissue title from the list of tissues

\\n"}}},"templateData":"\\n Cell Types by Gene Biomarkers\\n \\n {{ isTableFullScreen ? \'close_fullscreen\' : \'open_in_full\' }}\\n \\n\\n\\n\\n \\n \\n \\n \\n\\n\\n\\n Biomarker Expression Mean in FTU\\n info_outlined\\n\\n
\\n \\n
\\n\\n\\n Percentage of Cells in FTU\\n info_outlined\\n\\n
\\n \\n
\\n\\n
\\n \\n
\\n\\n\\n
\\n {{ tooltip }}\\n
\\n\\n"},{"name":"BiomarkerDetailsWcComponent","id":"component-BiomarkerDetailsWcComponent-2a35b01614cd4a83a9546a33b9e03200b2f96e7d06e07e8803741ed0f77a8815075e35be5e35822c9fb46279ff45ee49dbbfc6fc96f328f11a42b7f9898a30ef","file":"src/lib/biomarker-details-wc/biomarker-details-wc.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-wc-biomarker-details","styleUrls":["./biomarker-details-wc.component.scss"],"styles":[],"templateUrl":["./biomarker-details-wc.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"collaborateText","defaultValue":"\'Collaborate with the HRA Team\'","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

button text of empty biomarker component.

\\n","line":145,"rawdescription":"\\n\\nbutton text of empty biomarker component.\\n","modifierKind":[144]},{"name":"currentUrl","defaultValue":"selectSnapshot(IllustratorSelectors.url)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Current illustration url

\\n","line":71,"rawdescription":"\\n\\nCurrent illustration url\\n","modifierKind":[144]},{"name":"gradientHoverInfo","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.GradientLegendInfo)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Info to be shown on the tooltip for Gradient Legend

\\n","line":111,"rawdescription":"\\nInfo to be shown on the tooltip for Gradient Legend","modifierKind":[144]},{"name":"gradients","defaultValue":"selectQuerySnapshot(RR.field, Ids.GradientLegend, RTypes.Gradient, \'points\' as const, [])<\\n GradientPoint[]\\n >","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Gradient colors along with their stop points

\\n","line":120,"rawdescription":"\\nGradient colors along with their stop points","modifierKind":[144]},{"name":"iri","defaultValue":"selectSnapshot(ActiveFtuSelectors.iri)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Iri of medical illustration behavior component

\\n","line":81,"rawdescription":"\\n\\nIri of medical illustration behavior component\\n","modifierKind":[144]},{"name":"isTableFullScreen","defaultValue":"false","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Indicates if the table is fully shown, defaults to false

\\n","line":117,"rawdescription":"\\nIndicates if the table is fully shown, defaults to false"},{"name":"mapping","defaultValue":"selectSnapshot(IllustratorSelectors.mapping)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Current mapping file

\\n","line":76,"rawdescription":"\\n\\nCurrent mapping file\\n","modifierKind":[144]},{"name":"message","defaultValue":"`We currently do not have cell type data for this biomarker.\\n

Please contact us to discuss your dataset.`","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

message markdown of empty biomarker component.

\\n","line":150,"rawdescription":"\\n\\nmessage markdown of empty biomarker component.\\n","modifierKind":[144]},{"name":"sizeHoverInfo","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.SizeLegendInfo)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Info to be shown on the tooltip for Size Legend

\\n","line":114,"rawdescription":"\\nInfo to be shown on the tooltip for Size Legend","modifierKind":[144]},{"name":"sizes","defaultValue":"selectQuerySnapshot(RR.field, Ids.SizeLegend, RTypes.Size, \'sizes\' as const, [])","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Taking input for the radius of the circle and the label to be displayed.

\\n","line":125,"rawdescription":"\\nTaking input for the radius of the circle and the label to be displayed.","modifierKind":[144]},{"name":"source","defaultValue":"selectSnapshot(SourceRefsSelectors.sourceReferences)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

List of sources with titles and links displayed to the user

\\n","line":128,"rawdescription":"\\nList of sources with titles and links displayed to the user","modifierKind":[144]},{"name":"tabs","defaultValue":"selectSnapshot(CellSummarySelectors.aggregates)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Table tabs

\\n","line":108,"rawdescription":"\\nTable tabs","modifierKind":[144]},{"name":"tissues","defaultValue":"selectSnapshot(TissueLibrarySelectors.tissues)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Get all tissues

\\n","line":86,"rawdescription":"\\n\\nGet all tissues\\n","modifierKind":[144]},{"name":"updateNodeOnClicked","defaultValue":"dispatch(IllustratorActions.SetClicked)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Updates the active node on node click

\\n","line":105,"rawdescription":"\\n\\nUpdates the active node on node click\\n","modifierKind":[144]},{"name":"updateNodeOnHover","defaultValue":"dispatch(IllustratorActions.SetHover)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Updates the active node on node hover

\\n","line":100,"rawdescription":"\\n\\nUpdates the active node on node hover\\n","modifierKind":[144]}],"methodsClass":[{"name":"collaborate","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":167,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which opens the contact modal dialog box","description":"

A function which opens the contact modal dialog box

\\n"},{"name":"toggleFullscreen","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":162,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function that toggles isTableFullScreen and\\ncalls the setScreenMode function.\\n","description":"

A function that toggles isTableFullScreen and\\ncalls the setScreenMode function.

\\n"}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for Biomarker Table Details Web component

\\n","rawdescription":"\\nComponent for Biomarker Table Details Web component","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, inject } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatTabsModule } from \'@angular/material/tabs\';\\nimport { HoverDirective } from \'@hra-ui/cdk\';\\nimport { selectSnapshot, selectQuerySnapshot, dispatch } from \'@hra-ui/cdk/injectors\';\\nimport {\\n GradientLegendComponent,\\n LabelBoxComponent,\\n SizeLegendComponent,\\n EmptyBiomarkerComponent,\\n GradientPoint,\\n SizeLegend,\\n} from \'@hra-ui/components/atoms\';\\nimport {\\n BiomarkerTableDataCardComponent,\\n InteractiveSvgComponent,\\n SourceListComponent,\\n} from \'@hra-ui/components/molecules\';\\nimport { TissueInfo, BiomarkerTableComponent } from \'@hra-ui/components/organisms\';\\nimport {\\n ActiveFtuSelectors,\\n TissueLibrarySelectors,\\n ScreenModeAction,\\n IllustratorActions,\\n IllustratorSelectors,\\n CellSummarySelectors,\\n ResourceIds as Ids,\\n ResourceTypes as RTypes,\\n SourceRefsSelectors,\\n} from \'@hra-ui/state\';\\nimport { ResourceRegistrySelectors as RR } from \'@hra-ui/cdk/state\';\\nimport { MatDialog, MatDialogConfig } from \'@angular/material/dialog\';\\nimport { ContactBehaviorComponent } from \'../contact-behavior/contact-behavior.component\';\\n\\n/**\\n * PlaceHolder for Empty Tissue Info\\n */\\nconst EMPTY_TISSUE_INFO: TissueInfo = {\\n id: \'\',\\n label: \'\',\\n};\\n\\n/** Component for Biomarker Table Details Web component */\\n@Component({\\n selector: \'ftu-wc-biomarker-details\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatIconModule,\\n MatTabsModule,\\n\\n BiomarkerTableComponent,\\n BiomarkerTableDataCardComponent,\\n GradientLegendComponent,\\n HoverDirective,\\n LabelBoxComponent,\\n SizeLegendComponent,\\n SourceListComponent,\\n EmptyBiomarkerComponent,\\n InteractiveSvgComponent,\\n ],\\n templateUrl: \'./biomarker-details-wc.component.html\',\\n styleUrls: [\'./biomarker-details-wc.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerDetailsWcComponent {\\n /**\\n * Current illustration url\\n */\\n readonly currentUrl = selectSnapshot(IllustratorSelectors.url);\\n\\n /**\\n * Current mapping file\\n */\\n readonly mapping = selectSnapshot(IllustratorSelectors.mapping);\\n\\n /**\\n * Iri of medical illustration behavior component\\n */\\n readonly iri = selectSnapshot(ActiveFtuSelectors.iri);\\n\\n /**\\n * Get all tissues\\n */\\n readonly tissues = selectSnapshot(TissueLibrarySelectors.tissues);\\n\\n /**\\n * Gets tissue title from the list of tissues\\n */\\n get tissueTitle(): string {\\n const iri = this.iri();\\n const tissues = this.tissues();\\n return iri ? tissues[iri].label : \'\';\\n }\\n\\n /**\\n * Updates the active node on node hover\\n */\\n readonly updateNodeOnHover = dispatch(IllustratorActions.SetHover);\\n\\n /**\\n * Updates the active node on node click\\n */\\n readonly updateNodeOnClicked = dispatch(IllustratorActions.SetClicked);\\n\\n /** Table tabs */\\n readonly tabs = selectSnapshot(CellSummarySelectors.aggregates);\\n\\n /** Info to be shown on the tooltip for Gradient Legend */\\n readonly gradientHoverInfo = selectQuerySnapshot(RR.anyText, Ids.GradientLegendInfo);\\n\\n /** Info to be shown on the tooltip for Size Legend */\\n readonly sizeHoverInfo = selectQuerySnapshot(RR.anyText, Ids.SizeLegendInfo);\\n\\n /** Indicates if the table is fully shown, defaults to false*/\\n isTableFullScreen = false;\\n\\n /** Gradient colors along with their stop points */\\n readonly gradients = selectQuerySnapshot(RR.field, Ids.GradientLegend, RTypes.Gradient, \'points\' as const, [])<\\n GradientPoint[]\\n >;\\n\\n /** Taking input for the radius of the circle and the label to be displayed. */\\n readonly sizes = selectQuerySnapshot(RR.field, Ids.SizeLegend, RTypes.Size, \'sizes\' as const, []);\\n\\n /** List of sources with titles and links displayed to the user */\\n readonly source = selectSnapshot(SourceRefsSelectors.sourceReferences);\\n /**\\n * Gets tissue title from the list of tissues\\n */\\n get tissueInfo(): TissueInfo {\\n const iri = this.iri();\\n const tissues = this.tissues();\\n if (iri === undefined) {\\n return EMPTY_TISSUE_INFO;\\n }\\n const { id, label } = tissues[iri];\\n return { id, label };\\n }\\n\\n /**\\n * button text of empty biomarker component.\\n */\\n readonly collaborateText = \'Collaborate with the HRA Team\';\\n\\n /**\\n * message markdown of empty biomarker component.\\n */\\n readonly message = `We currently do not have cell type data for this biomarker.\\n

Please contact us to discuss your dataset.`;\\n\\n /** A dispatcher function to set the screen mode */\\n private readonly setScreenMode = dispatch(ScreenModeAction.Set);\\n\\n /** A dialog box which shows contact modal after clicking on contact */\\n private readonly dialog = inject(MatDialog);\\n\\n /** A function that toggles isTableFullScreen and\\n * calls the setScreenMode function.\\n */\\n toggleFullscreen(): void {\\n this.isTableFullScreen = !this.isTableFullScreen;\\n this.setScreenMode(this.isTableFullScreen);\\n }\\n /** A function which opens the contact modal dialog box */\\n collaborate(): void {\\n const dialogConfig = new MatDialogConfig();\\n dialogConfig.disableClose = true;\\n this.dialog.open(ContactBehaviorComponent, dialogConfig);\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n ::ng-deep .extraTab {\\n border: 0.063rem solid #d3d3d3;\\n border-top: 0;\\n }\\n\\n .table-header {\\n grid-area: table-header;\\n border: 0.063rem solid #d3d3d3;\\n width: 43rem;\\n height: 3.5rem;\\n }\\n\\n .table {\\n grid-area: table;\\n max-width: 100%;\\n overflow: auto;\\n border: 0.063rem solid #d3d3d3;\\n\\n ::ng-deep .table-tab-header {\\n padding-left: 1rem;\\n padding-right: 1rem;\\n border-left: 0.063rem solid #d3d3d3;\\n border-bottom: 0.063rem solid #d3d3d3;\\n\\n &:last-child {\\n border-right: 0.063rem solid #d3d3d3;\\n }\\n\\n &.mdc-tab-indicator--active {\\n background-color: #f8f9fa;\\n }\\n }\\n }\\n\\n hra-biomarker-table {\\n overflow-y: auto;\\n overflow-x: auto;\\n }\\n\\n .legends {\\n display: inline-flex;\\n width: 100%;\\n .legends-right {\\n width: 50%;\\n }\\n .legends-left {\\n width: 50%;\\n }\\n }\\n\\n .legend-header {\\n color: vars.$dark-primary-text;\\n border-top: 0.063rem solid #d3d3d3;\\n border-bottom: 0.063rem solid #d3d3d3;\\n border-right: 0.063rem solid #d3d3d3;\\n\\n &.gradient {\\n grid-area: gradient-legend-header;\\n }\\n\\n &.size {\\n grid-area: size-legend-header;\\n }\\n\\n .icon {\\n margin-left: 0.6rem;\\n }\\n }\\n\\n .legend {\\n padding: 1rem 2rem;\\n border-right: 0.063rem solid #d3d3d3;\\n\\n &.gradient {\\n grid-area: gradient-legend;\\n\\n .content {\\n width: 10rem;\\n }\\n }\\n\\n &.size {\\n grid-area: size-legend;\\n }\\n }\\n\\n .source-list {\\n grid-area: source-list;\\n\\n .content {\\n width: min-content;\\n }\\n }\\n}\\n\\n::ng-deep .biomarker-details.info-tooltip {\\n display: flex;\\n padding: 1rem;\\n border: 1px solid #a8a3a3;\\n border-radius: 0.5rem;\\n box-shadow: 1px 2px 16px 2px #00000029;\\n background-color: vars.$primary-contrast-rgb;\\n max-width: 21rem;\\n font-size: small;\\n}\\n","styleUrl":"./biomarker-details-wc.component.scss"}],"stylesData":"","accessors":{"tissueTitle":{"name":"tissueTitle","getSignature":{"name":"tissueTitle","type":"string","returnType":"string","line":91,"rawdescription":"\\n\\nGets tissue title from the list of tissues\\n","description":"

Gets tissue title from the list of tissues

\\n"}},"tissueInfo":{"name":"tissueInfo","getSignature":{"name":"tissueInfo","type":"","returnType":"TissueInfo","line":132,"rawdescription":"\\n\\nGets tissue title from the list of tissues\\n","description":"

Gets tissue title from the list of tissues

\\n"}}},"templateData":"\\n {{ tissueTitle }}: FTU Illustration\\n \\n {{ isTableFullScreen ? \'close_fullscreen\' : \'open_in_full\' }}\\n \\n\\n\\n\\n \\n \\n \\n \\n \\n \\n\\n
\\n
\\n \\n Biomarker Expression Mean in FTU\\n info_outlined\\n \\n
\\n \\n
\\n
\\n\\n
\\n \\n Percentage of Cells in FTU\\n info_outlined\\n \\n
\\n \\n
\\n
\\n
\\n \\n \\n \\n
\\n \\n
\\n\\n \\n
\\n {{ tooltip }}\\n
\\n \\n \\n\\n"},{"name":"ContactBehaviorComponent","id":"component-ContactBehaviorComponent-b9d5e223798d92be933b5dbadc75b1d6c247f7b00beb75f933bb07b0a4949d22458ee53931ca654d0b255f40508dbf23ef4e516e2f80368415a86fdfe44d60b6","file":"src/lib/contact-behavior/contact-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-contact-behavior","styleUrls":["./contact-behavior.component.scss"],"styles":[],"templateUrl":["./contact-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"description","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.ContactAcknowledgement)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Information modal message to the user

\\n","line":29,"rawdescription":"\\nInformation modal message to the user","modifierKind":[144]},{"name":"postMessageTemplate","deprecated":false,"deprecationMessage":"","type":"TemplateRef","optional":false,"description":"

A template to post a message

\\n","line":20,"rawdescription":"\\nA template to post a message","decorators":[{"name":"ViewChild","stringifiedArguments":"\'postMessage\'"}],"modifierKind":[144]},{"name":"productLogoUrl","defaultValue":"selectQuerySnapshot(RR.url, Ids.ProductLogoUrl)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product logo URL to displayed on the left side.

\\n","line":23,"rawdescription":"\\nInput for product logo URL to displayed on the left side.","modifierKind":[144]},{"name":"productTitle","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.ProductTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product title to displayed on the left side.

\\n","line":26,"rawdescription":"\\nInput for product title to displayed on the left side.","modifierKind":[144]},{"name":"sendMessage","defaultValue":"dispatch(ContactActions.SendMessage)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

A dispatcher function to send message entered by user

\\n","line":32,"rawdescription":"\\nA dispatcher function to send message entered by user","modifierKind":[144]}],"methodsClass":[{"name":"close","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":51,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which closes the \'Contact us\' dialog and the acknowledgement dialog.","description":"

A function which closes the 'Contact us' dialog and the acknowledgement dialog.

\\n"},{"name":"submit","args":[{"name":"message","type":"ContactData","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"void","typeParameters":[],"line":44,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which sends/dispatches a message which contains email, subject, and message. And also opens the acknowledgement dialog box.","description":"

A function which sends/dispatches a message which contains email, subject, and message. And also opens the acknowledgement dialog box.

\\n","jsdoctags":[{"name":"message","type":"ContactData","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

A Component for contact behavior which sends the message entered by the user and shows an acknowledgement

\\n","rawdescription":"\\nA Component for contact behavior which sends the message entered by the user and shows an acknowledgement","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, inject, TemplateRef, ViewChild } from \'@angular/core\';\\nimport { MatDialog, MatDialogModule, MatDialogRef } from \'@angular/material/dialog\';\\nimport { dispatch, selectQuerySnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RR } from \'@hra-ui/cdk/state\';\\nimport { ContactData, ContactModalComponent, InfoModalComponent } from \'@hra-ui/components/molecules\';\\nimport { ResourceIds as Ids, ContactActions } from \'@hra-ui/state\';\\n\\n/** A Component for contact behavior which sends the message entered by the user and shows an acknowledgement */\\n@Component({\\n selector: \'ftu-contact-behavior\',\\n standalone: true,\\n imports: [CommonModule, MatDialogModule, ContactModalComponent, InfoModalComponent],\\n templateUrl: \'./contact-behavior.component.html\',\\n styleUrls: [\'./contact-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class ContactBehaviorComponent {\\n /** A template to post a message */\\n @ViewChild(\'postMessage\') readonly postMessageTemplate!: TemplateRef;\\n\\n /** Input for product logo URL to displayed on the left side. */\\n readonly productLogoUrl = selectQuerySnapshot(RR.url, Ids.ProductLogoUrl);\\n\\n /** Input for product title to displayed on the left side. */\\n readonly productTitle = selectQuerySnapshot(RR.anyText, Ids.ProductTitle);\\n\\n /** Information modal message to the user */\\n readonly description = selectQuerySnapshot(RR.anyText, Ids.ContactAcknowledgement);\\n\\n /** A dispatcher function to send message entered by user */\\n readonly sendMessage = dispatch(ContactActions.SendMessage);\\n\\n /** A dialog box which shows user an acknowledgement after clicking on submit */\\n private readonly dialog = inject(MatDialog);\\n\\n /** A mat form field dialog which accepts the email, subject, and message of user and validates it */\\n private readonly selfRef = inject(MatDialogRef, { optional: true });\\n\\n /** Dialog box which references the acknowledgement dialog box */\\n private postRef?: MatDialogRef;\\n\\n /** A function which sends/dispatches a message which contains email, subject, and message. And also opens the acknowledgement dialog box. */\\n submit(message: ContactData): void {\\n this.sendMessage(message);\\n this.selfRef?.close();\\n this.postRef = this.dialog.open(this.postMessageTemplate);\\n }\\n\\n /** A function which closes the \'Contact us\' dialog and the acknowledgement dialog. */\\n close(): void {\\n this.postRef?.close();\\n this.selfRef?.close();\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n\\n .contact-modal {\\n width: 41rem;\\n height: 40rem;\\n }\\n\\n .info-modal {\\n width: 35rem;\\n height: 11.8rem;\\n }\\n\\n @media screen and (max-height: 328px) {\\n .contact-modal {\\n height: calc(100vh - 2rem);\\n }\\n }\\n}\\n","styleUrl":"./contact-behavior.component.scss"}],"stylesData":"","templateData":"\\n\\n\\n\\n \\n \\n\\n"},{"name":"FooterBehaviorComponent","id":"component-FooterBehaviorComponent-d9ecf51e28e6cdbe2f77b2f819a2e3df3acd0382e946f213975e78af53f6c11b1a7a013fefb862cfa9449b9973d2ea3497fa9687d6c04eb492751c2a83c17410","file":"src/lib/footer-behavior/footer-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-footer-behavior","styleUrls":["./footer-behavior.component.scss"],"styles":[],"templateUrl":["./footer-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"download","defaultValue":"dispatch(DownloadActions.Download)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

A dispatcher function to download file in specified format

\\n","line":39,"rawdescription":"\\nA dispatcher function to download file in specified format","modifierKind":[144]},{"name":"downloadFormats","defaultValue":"selectSnapshot(DownloadSelectors.formats)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Selects a snapshot of the current value of the available download formats

\\n","line":27,"rawdescription":"\\nSelects a snapshot of the current value of the available download formats","modifierKind":[144]},{"name":"embed","defaultValue":"LinkIds.Embed","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Embed link routing after clicking on Embed

\\n","line":36,"rawdescription":"\\nEmbed link routing after clicking on Embed","modifierKind":[144]},{"name":"hraPortal","defaultValue":"LinkIds.Portal","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Hra portal link routing after clicking on HRA Portal

\\n","line":30,"rawdescription":"\\nHra portal link routing after clicking on HRA Portal","modifierKind":[144]},{"name":"illustrationMetadata","defaultValue":"LinkIds.Illustration","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Metadata page link routing after clicking on Illustration

\\n","line":33,"rawdescription":"\\nMetadata page link routing after clicking on Illustration","modifierKind":[144]},{"name":"productLogoUrl","defaultValue":"selectQuerySnapshot(RR.url, Ids.ProductLogoUrl)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product logo URL to displayed on the left side.

\\n","line":21,"rawdescription":"\\nInput for product logo URL to displayed on the left side.","modifierKind":[144]},{"name":"productTitle","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.ProductTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product title to displayed on the left side.

\\n","line":24,"rawdescription":"\\nInput for product title to displayed on the left side.","modifierKind":[144]},{"name":"size","defaultValue":"selectSnapshot(ScreenModeSelectors.size)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Selects the current value of the available ScreenMode Size

\\n","line":41,"rawdescription":"\\nSelects the current value of the available ScreenMode Size","modifierKind":[144]}],"methodsClass":[{"name":"contact","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":47,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which opens the contact modal dialog box","description":"

A function which opens the contact modal dialog box

\\n"}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

A component for footer behavior which provides functionality for various buttons in footer

\\n","rawdescription":"\\nA component for footer behavior which provides functionality for various buttons in footer","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, inject } from \'@angular/core\';\\nimport { MatDialog, MatDialogConfig, MatDialogModule } from \'@angular/material/dialog\';\\nimport { dispatch, selectQuerySnapshot, selectSnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RR } from \'@hra-ui/cdk/state\';\\nimport { FooterComponent } from \'@hra-ui/components/molecules\';\\nimport { DownloadActions, DownloadSelectors, ResourceIds as Ids, LinkIds, ScreenModeSelectors } from \'@hra-ui/state\';\\nimport { ContactBehaviorComponent } from \'../contact-behavior/contact-behavior.component\';\\n\\n/** A component for footer behavior which provides functionality for various buttons in footer */\\n@Component({\\n selector: \'ftu-footer-behavior\',\\n standalone: true,\\n imports: [CommonModule, MatDialogModule, FooterComponent, ContactBehaviorComponent],\\n templateUrl: \'./footer-behavior.component.html\',\\n styleUrls: [\'./footer-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class FooterBehaviorComponent {\\n /** Input for product logo URL to displayed on the left side. */\\n readonly productLogoUrl = selectQuerySnapshot(RR.url, Ids.ProductLogoUrl);\\n\\n /** Input for product title to displayed on the left side. */\\n readonly productTitle = selectQuerySnapshot(RR.anyText, Ids.ProductTitle);\\n\\n /** Selects a snapshot of the current value of the available download formats */\\n readonly downloadFormats = selectSnapshot(DownloadSelectors.formats);\\n\\n /** Hra portal link routing after clicking on HRA Portal */\\n readonly hraPortal = LinkIds.Portal;\\n\\n /** Metadata page link routing after clicking on Illustration */\\n readonly illustrationMetadata = LinkIds.Illustration;\\n\\n /** Embed link routing after clicking on Embed */\\n readonly embed = LinkIds.Embed;\\n\\n /** A dispatcher function to download file in specified format */\\n readonly download = dispatch(DownloadActions.Download);\\n /** Selects the current value of the available ScreenMode Size */\\n readonly size = selectSnapshot(ScreenModeSelectors.size);\\n\\n /** A dialog box which shows contact modal after clicking on contact */\\n private readonly dialog = inject(MatDialog);\\n\\n /** A function which opens the contact modal dialog box */\\n contact(): void {\\n const dialogConfig = new MatDialogConfig();\\n dialogConfig.disableClose = true;\\n this.dialog.open(ContactBehaviorComponent, dialogConfig);\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n}\\n","styleUrl":"./footer-behavior.component.scss"}],"stylesData":"","templateData":"\\n\\n"},{"name":"HeaderBehaviorComponent","id":"component-HeaderBehaviorComponent-a76f74e70c7aacab4debd2492e1302dc534513cd4598dce499fc0d4f09bf0a16fc333bcb4bb100ffc9dbcb5427533473060400e0ae5eb7051dac7768474ae300","file":"src/lib/header-behavior/header-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-header-behavior","styleUrls":["./header-behavior.component.scss"],"styles":[],"templateUrl":["./header-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"aboutLink","defaultValue":"LinkIds.About","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for about link for user click action.

\\n","line":41,"rawdescription":"\\n\\nInput for about link for user click action.\\n","modifierKind":[144]},{"name":"appTitle","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.AppTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for app title to show on the left side.

\\n","line":31,"rawdescription":"\\n\\nInput for app title to show on the left side.\\n","modifierKind":[144]},{"name":"productLogoUrl","defaultValue":"selectQuerySnapshot(RR.url, Ids.ProductLogoUrl)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product logo URL to displayed on the left side.

\\n","line":21,"rawdescription":"\\n\\nInput for product logo URL to displayed on the left side.\\n","modifierKind":[144]},{"name":"productTitle","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.ProductTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product title to displayed on the left side.

\\n","line":26,"rawdescription":"\\n\\nInput for product title to displayed on the left side.\\n","modifierKind":[144]},{"name":"productTitleLink","defaultValue":"LinkIds.ProductTitle","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product title link for user click action

\\n","line":36,"rawdescription":"\\n\\nInput for product title link for user click action\\n","modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for Header Behavior

\\n","rawdescription":"\\nComponent for Header Behavior","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component } from \'@angular/core\';\\nimport { selectQuerySnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RR } from \'@hra-ui/cdk/state\';\\nimport { HeaderComponent } from \'@hra-ui/components/molecules\';\\nimport { ResourceIds as Ids, LinkIds } from \'@hra-ui/state\';\\n\\n/** Component for Header Behavior */\\n@Component({\\n selector: \'ftu-header-behavior\',\\n standalone: true,\\n imports: [CommonModule, HeaderComponent],\\n templateUrl: \'./header-behavior.component.html\',\\n styleUrls: [\'./header-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class HeaderBehaviorComponent {\\n /**\\n * Input for product logo URL to displayed on the left side.\\n */\\n readonly productLogoUrl = selectQuerySnapshot(RR.url, Ids.ProductLogoUrl);\\n\\n /**\\n * Input for product title to displayed on the left side.\\n */\\n readonly productTitle = selectQuerySnapshot(RR.anyText, Ids.ProductTitle);\\n\\n /**\\n * Input for app title to show on the left side.\\n */\\n readonly appTitle = selectQuerySnapshot(RR.anyText, Ids.AppTitle);\\n\\n /**\\n * Input for product title link for user click action\\n */\\n readonly productTitleLink = LinkIds.ProductTitle;\\n\\n /**\\n * Input for about link for user click action.\\n */\\n readonly aboutLink = LinkIds.About;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n}\\n","styleUrl":"./header-behavior.component.scss"}],"stylesData":"","templateData":"\\n\\n"},{"name":"HraLandingPageIntroWcBehaviourComponent","id":"component-HraLandingPageIntroWcBehaviourComponent-b8c2509d12b92bff8ab139855b712563f2a92e8aa91e8ecc05714063b91b1765ade0e9c6e691367a2eaa4724d94d6dfe4ade28c89da03cfcf6eae21630452b23","file":"src/lib/hra-landing-page-intro-wc-behaviour/hra-landing-page-intro-wc-behaviour.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-wc-intro","styleUrls":["./hra-landing-page-intro-wc-behaviour.component.scss"],"styles":[],"templateUrl":["./hra-landing-page-intro-wc-behaviour.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"landingPageIntroDescription","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPageDescription)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro description

\\n","line":21,"rawdescription":"\\nselect snapshot for landing page intro description","modifierKind":[144]},{"name":"landingPageIntroPartners","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPagePartners)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro partners

\\n","line":25,"rawdescription":"\\nselect snapshot for landing page intro partners","modifierKind":[144]},{"name":"landingPageIntroReadMore","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPageIntroReadMore)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro partners

\\n","line":23,"rawdescription":"\\nselect snapshot for landing page intro partners","modifierKind":[144]},{"name":"landingPageIntroTitle","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.LandingPageTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for Landing Page title

\\n","line":19,"rawdescription":"\\nselect snapshot for Landing Page title","modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for LandingPage Intro Behaviour: Web component

\\n","rawdescription":"\\nComponent for LandingPage Intro Behaviour: Web component","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { HraLandingPageIntroWcComponent } from \'@hra-ui/components/molecules\';\\nimport { ResourceRegistrySelectors as RRS } from \'@hra-ui/cdk/state\';\\nimport { selectQuerySnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceIds as RIds } from \'@hra-ui/state\';\\n\\n/** Component for LandingPage Intro Behaviour: Web component */\\n@Component({\\n selector: \'ftu-wc-intro\',\\n standalone: true,\\n imports: [CommonModule, HraLandingPageIntroWcComponent],\\n templateUrl: \'./hra-landing-page-intro-wc-behaviour.component.html\',\\n styleUrls: [\'./hra-landing-page-intro-wc-behaviour.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class HraLandingPageIntroWcBehaviourComponent {\\n /** select snapshot for Landing Page title */\\n readonly landingPageIntroTitle = selectQuerySnapshot(RRS.anyText, RIds.LandingPageTitle);\\n /** select snapshot for landing page intro description */\\n readonly landingPageIntroDescription = selectQuerySnapshot(RRS.markdown, RIds.LandingPageDescription);\\n /** select snapshot for landing page intro partners */\\n readonly landingPageIntroReadMore = selectQuerySnapshot(RRS.markdown, RIds.LandingPageIntroReadMore);\\n /** select snapshot for landing page intro partners */\\n readonly landingPageIntroPartners = selectQuerySnapshot(RRS.markdown, RIds.LandingPagePartners);\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n\\n .intro {\\n display: inline-grid;\\n border: 1px solid #e2e7e9;\\n padding: 24px 32px 24px 32px;\\n width: 71rem;\\n }\\n}\\n","styleUrl":"./hra-landing-page-intro-wc-behaviour.component.scss"}],"stylesData":"","templateData":"\\n"},{"name":"LandingPageContentComponent","id":"component-LandingPageContentComponent-d72615e2863b7f2f08c767452a75c71c9e079687610cd3e50b54f72f11546184f7ad55c5304741d79adb9bb9ea161cdac4253ae6fb1cbbf15040f2814110616a","file":"src/lib/landing-page-content/landing-page-content.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-landing-page-content","styleUrls":["./landing-page-content.component.scss"],"styles":[],"templateUrl":["./landing-page-content.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"intersectableEls","deprecated":false,"deprecationMessage":"","type":"QueryList","optional":false,"description":"

array of element refs for intersectables

\\n","line":34,"rawdescription":"\\narray of element refs for intersectables","decorators":[{"name":"ViewChildren","stringifiedArguments":"\'intersectable\', {read: ElementRef}"}],"modifierKind":[144]},{"name":"landingPageDepthDescription","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPageDepthDescription)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page depth description

\\n","line":57,"rawdescription":"\\nselect snapshot for landing page depth description","modifierKind":[144]},{"name":"landingPageDepthImg","defaultValue":"selectQuerySnapshot(RRS.url, RIds.LandingPageDepthImg)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page depth img

\\n","line":61,"rawdescription":"\\nselect snapshot for landing page depth img","modifierKind":[144]},{"name":"landingPageDepthMoreText","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.LandingPageDepthMoreText)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot forlanding page depth more text

\\n","line":59,"rawdescription":"\\nselect snapshot forlanding page depth more text","modifierKind":[144]},{"name":"landingPageDepthTitle","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.LandingPageDepthTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page depth title

\\n","line":55,"rawdescription":"\\nselect snapshot for landing page depth title","modifierKind":[144]},{"name":"landingPageIntroDescription","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPageDescription)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro description

\\n","line":40,"rawdescription":"\\nselect snapshot for landing page intro description","modifierKind":[144]},{"name":"landingPageIntroImg","defaultValue":"selectQuerySnapshot(RRS.url, RIds.LandingPageIntroImg)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro img

\\n","line":47,"rawdescription":"\\nselect snapshot for landing page intro img","modifierKind":[144]},{"name":"landingPageIntroMoreText","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.LandingPageIntroMoreText)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro more text

\\n","line":45,"rawdescription":"\\nselect snapshot for landing page intro more text","modifierKind":[144]},{"name":"landingPageIntroPartners","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPagePartners)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro partners

\\n","line":42,"rawdescription":"\\nselect snapshot for landing page intro partners","modifierKind":[144]},{"name":"landingPageIntroTitle","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.LandingPageTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for Landing Page title

\\n","line":37,"rawdescription":"\\nselect snapshot for Landing Page title","modifierKind":[144]},{"name":"LinkIds","defaultValue":"LinkIds","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Expose links for use it template

\\n","line":64,"rawdescription":"\\nExpose links for use it template","modifierKind":[144]},{"name":"metrics","defaultValue":"selectQuerySnapshot(RRS.field, RIds.Metrics, RTypes.Metrics, \'metrics\' as const, [])","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for metrics

\\n","line":49,"rawdescription":"\\nselect snapshot for metrics","modifierKind":[144]},{"name":"metricsLogo","defaultValue":"selectQuerySnapshot(RRS.url, RIds.MetricsLogo)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for metrics logo

\\n","line":53,"rawdescription":"\\nselect snapshot for metrics logo","modifierKind":[144]},{"name":"metricsTitle","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.MetricsTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for metrics title

\\n","line":51,"rawdescription":"\\nselect snapshot for metrics title","modifierKind":[144]}],"methodsClass":[{"name":"handleIntersection","args":[{"name":"entries","type":"IntersectionObserverEntry[]","deprecated":false,"deprecationMessage":""},{"name":"observer","type":"IntersectionObserver","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"void","typeParameters":[],"line":82,"deprecated":false,"deprecationMessage":"","rawdescription":"\\ncallback function for intersection observer","description":"

callback function for intersection observer

\\n","jsdoctags":[{"name":"entries","type":"IntersectionObserverEntry[]","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}},{"name":"observer","type":"IntersectionObserver","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for LandingPageContent Behavior

\\n","rawdescription":"\\nComponent for LandingPageContent Behavior","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport {\\n AfterViewInit,\\n ChangeDetectionStrategy,\\n Component,\\n ElementRef,\\n inject,\\n QueryList,\\n Renderer2,\\n ViewChildren,\\n} from \'@angular/core\';\\nimport { injectDestroy$, selectQuerySnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RRS } from \'@hra-ui/cdk/state\';\\nimport {\\n LandingPageInDepthComponent,\\n LandingPageIntroComponent,\\n MetricItem,\\n MetricsComponent,\\n} from \'@hra-ui/components/molecules\';\\nimport { LinkIds, ResourceIds as RIds, ResourceTypes as RTypes } from \'@hra-ui/state\';\\n\\n/** Component for LandingPageContent Behavior */\\n@Component({\\n selector: \'ftu-landing-page-content\',\\n standalone: true,\\n imports: [CommonModule, LandingPageIntroComponent, MetricsComponent, LandingPageInDepthComponent],\\n templateUrl: \'./landing-page-content.component.html\',\\n styleUrls: [\'./landing-page-content.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class LandingPageContentComponent implements AfterViewInit {\\n /** array of element refs for intersectables */\\n @ViewChildren(\'intersectable\', { read: ElementRef })\\n readonly intersectableEls!: QueryList;\\n\\n /** select snapshot for Landing Page title */\\n readonly landingPageIntroTitle = selectQuerySnapshot(RRS.anyText, RIds.LandingPageTitle);\\n\\n /** select snapshot for landing page intro description */\\n readonly landingPageIntroDescription = selectQuerySnapshot(RRS.markdown, RIds.LandingPageDescription);\\n /** select snapshot for landing page intro partners */\\n readonly landingPageIntroPartners = selectQuerySnapshot(RRS.markdown, RIds.LandingPagePartners);\\n\\n /** select snapshot for landing page intro more text */\\n readonly landingPageIntroMoreText = selectQuerySnapshot(RRS.anyText, RIds.LandingPageIntroMoreText);\\n /** select snapshot for landing page intro img */\\n readonly landingPageIntroImg = selectQuerySnapshot(RRS.url, RIds.LandingPageIntroImg);\\n /** select snapshot for metrics */\\n readonly metrics = selectQuerySnapshot(RRS.field, RIds.Metrics, RTypes.Metrics, \'metrics\' as const, []);\\n /** select snapshot for metrics title */\\n readonly metricsTitle = selectQuerySnapshot(RRS.anyText, RIds.MetricsTitle);\\n /** select snapshot for metrics logo */\\n readonly metricsLogo = selectQuerySnapshot(RRS.url, RIds.MetricsLogo);\\n /** select snapshot for landing page depth title */\\n readonly landingPageDepthTitle = selectQuerySnapshot(RRS.anyText, RIds.LandingPageDepthTitle);\\n /** select snapshot for landing page depth description */\\n readonly landingPageDepthDescription = selectQuerySnapshot(RRS.markdown, RIds.LandingPageDepthDescription);\\n /** select snapshot forlanding page depth more text */\\n readonly landingPageDepthMoreText = selectQuerySnapshot(RRS.anyText, RIds.LandingPageDepthMoreText);\\n /** select snapshot for landing page depth img */\\n readonly landingPageDepthImg = selectQuerySnapshot(RRS.url, RIds.LandingPageDepthImg);\\n\\n /** Expose links for use it template */\\n readonly LinkIds = LinkIds;\\n\\n /** Renderer to add class for animation */\\n private readonly renderer = inject(Renderer2);\\n /** destroys observer */\\n private readonly destroy$ = injectDestroy$();\\n\\n /** creates an observer after view init */\\n ngAfterViewInit(): void {\\n const observer = new IntersectionObserver(this.handleIntersection.bind(this), {\\n threshold: 0.18,\\n });\\n\\n this.intersectableEls.forEach((el) => observer.observe(el.nativeElement));\\n this.destroy$.subscribe(() => observer.disconnect());\\n }\\n\\n /** callback function for intersection observer */\\n handleIntersection(entries: IntersectionObserverEntry[], observer: IntersectionObserver): void {\\n for (const { isIntersecting, target } of entries) {\\n if (isIntersecting) {\\n this.renderer.addClass(target, \'visible\');\\n observer.unobserve(target);\\n }\\n }\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n overflow-x: hidden;\\n\\n .intro {\\n margin: 3.5rem 2rem;\\n }\\n\\n .metrics {\\n opacity: 0;\\n\\n &.visible {\\n animation: fadeIn 2s ease-in forwards;\\n }\\n }\\n\\n .in-depth {\\n opacity: 0;\\n\\n &.visible {\\n overflow: hidden;\\n animation: slideIn 2s ease-in-out forwards;\\n }\\n }\\n}\\n\\n@keyframes fadeIn {\\n 0% {\\n opacity: 0;\\n }\\n\\n 100% {\\n opacity: 1;\\n }\\n}\\n\\n@keyframes slideIn {\\n 0% {\\n transform: translateX(200%);\\n opacity: 1;\\n }\\n\\n 100% {\\n transform: translateX(0);\\n opacity: 1;\\n }\\n}\\n","styleUrl":"./landing-page-content.component.scss"}],"stylesData":"","implements":["AfterViewInit"],"templateData":"\\n\\n\\n\\n\\n\\n"},{"name":"MedicalIllustrationBehaviorComponent","id":"component-MedicalIllustrationBehaviorComponent-6fea78f0a6011315eef3ff0e9cf3f451130b68d93388f1b8ff7f362f6c7f2ec8bbad2f6518d0329f94a749b1e02a1018129acf2b8340f015397957c3e0fd985d","file":"src/lib/medical-illustration-behavior/medical-illustration-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-medical-illustration-behavior","styleUrls":["./medical-illustration-behavior.component.scss"],"styles":[],"templateUrl":["./medical-illustration-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"currentUrl","defaultValue":"selectSnapshot(IllustratorSelectors.url)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Current illustration url

\\n","line":23,"rawdescription":"\\n\\nCurrent illustration url\\n","modifierKind":[144]},{"name":"iri","defaultValue":"selectSnapshot(ActiveFtuSelectors.iri)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Iri of medical illustration behavior component

\\n","line":33,"rawdescription":"\\n\\nIri of medical illustration behavior component\\n","modifierKind":[144]},{"name":"mapping","defaultValue":"selectSnapshot(IllustratorSelectors.mapping)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Current mapping file

\\n","line":28,"rawdescription":"\\n\\nCurrent mapping file\\n","modifierKind":[144]},{"name":"tissues","defaultValue":"selectSnapshot(TissueLibrarySelectors.tissues)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Get all tissues

\\n","line":38,"rawdescription":"\\n\\nGet all tissues\\n","modifierKind":[144]},{"name":"updateNodeOnClicked","defaultValue":"dispatch(IllustratorActions.SetClicked)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Updates the active node on node click

\\n","line":57,"rawdescription":"\\n\\nUpdates the active node on node click\\n","modifierKind":[144]},{"name":"updateNodeOnHover","defaultValue":"dispatch(IllustratorActions.SetHover)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Updates the active node on node hover

\\n","line":52,"rawdescription":"\\n\\nUpdates the active node on node hover\\n","modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Behavior component for medical illustration component

\\n","rawdescription":"\\n\\nBehavior component for medical illustration component\\n","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component } from \'@angular/core\';\\nimport { dispatch, selectSnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { LabelBoxComponent } from \'@hra-ui/components/atoms\';\\nimport { InteractiveSvgComponent } from \'@hra-ui/components/molecules\';\\nimport { ActiveFtuSelectors, IllustratorActions, IllustratorSelectors, TissueLibrarySelectors } from \'@hra-ui/state\';\\n\\n/**\\n * Behavior component for medical illustration component\\n */\\n@Component({\\n selector: \'ftu-medical-illustration-behavior\',\\n standalone: true,\\n imports: [CommonModule, InteractiveSvgComponent, LabelBoxComponent],\\n templateUrl: \'./medical-illustration-behavior.component.html\',\\n styleUrls: [\'./medical-illustration-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class MedicalIllustrationBehaviorComponent {\\n /**\\n * Current illustration url\\n */\\n readonly currentUrl = selectSnapshot(IllustratorSelectors.url);\\n\\n /**\\n * Current mapping file\\n */\\n readonly mapping = selectSnapshot(IllustratorSelectors.mapping);\\n\\n /**\\n * Iri of medical illustration behavior component\\n */\\n readonly iri = selectSnapshot(ActiveFtuSelectors.iri);\\n\\n /**\\n * Get all tissues\\n */\\n readonly tissues = selectSnapshot(TissueLibrarySelectors.tissues);\\n\\n /**\\n * Gets tissue title from the list of tissues\\n */\\n get tissueTitle(): string {\\n const iri = this.iri();\\n const tissues = this.tissues();\\n return iri ? tissues[iri].label : \'\';\\n }\\n\\n /**\\n * Updates the active node on node hover\\n */\\n readonly updateNodeOnHover = dispatch(IllustratorActions.SetHover);\\n\\n /**\\n * Updates the active node on node click\\n */\\n readonly updateNodeOnClicked = dispatch(IllustratorActions.SetClicked);\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n hra-label-box {\\n border-bottom: 0.063rem solid #d3d3d3;\\n width: 100%;\\n height: 3.5rem;\\n }\\n}\\n","styleUrl":"./medical-illustration-behavior.component.scss"}],"stylesData":"","accessors":{"tissueTitle":{"name":"tissueTitle","getSignature":{"name":"tissueTitle","type":"string","returnType":"string","line":43,"rawdescription":"\\n\\nGets tissue title from the list of tissues\\n","description":"

Gets tissue title from the list of tissues

\\n"}}},"templateData":"{{ tissueTitle }}\\n\\n\\n"},{"name":"ScreenNoticeBehaviorComponent","id":"component-ScreenNoticeBehaviorComponent-de4fc156bf7f658d9ca0a8d114626d829387a03f3b206cb5439f1ad22b9e157cbc51e850b06eb8f0b9dd48a75acb723b42c7fd79d0c50694757e9d23cac9f416","file":"src/lib/screen-notice-behavior/screen-notice-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-ui-screen-notice-behavior","styleUrls":["./screen-notice-behavior.component.scss"],"styles":[],"templateUrl":["./screen-notice-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"content","defaultValue":"selectQuerySnapshot(RR.anyText, ResourceIds.ScreenSizeNoticeContent)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Content of screen notice behavior component

\\n","line":21,"rawdescription":"\\nContent of screen notice behavior component","modifierKind":[144]},{"name":"portal","defaultValue":"LinkIds.Portal","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Hra portal link routing after clicking on HRA Portal

\\n","line":24,"rawdescription":"\\nHra portal link routing after clicking on HRA Portal","modifierKind":[144]}],"methodsClass":[{"name":"close","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":33,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which closes the screen size notice dialog box","description":"

A function which closes the screen size notice dialog box

\\n"}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

A component for screen size notice behavior which provides the content to be displayed and provides functionality\\nfor the buttons on the notice modal

\\n","rawdescription":"\\nA component for screen size notice behavior which provides the content to be displayed and provides functionality\\nfor the buttons on the notice modal","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, inject } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { dispatch, selectQuerySnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RR, StorageActions, StorageId } from \'@hra-ui/cdk/state\';\\nimport { ResourceIds, LinkIds } from \'@hra-ui/state\';\\nimport { ScreenSizeNoticeComponent } from \'@hra-ui/components/molecules\';\\nimport { MatDialogRef } from \'@angular/material/dialog\';\\n\\n/** A component for screen size notice behavior which provides the content to be displayed and provides functionality\\n * for the buttons on the notice modal */\\n@Component({\\n selector: \'ftu-ui-screen-notice-behavior\',\\n standalone: true,\\n imports: [CommonModule, ScreenSizeNoticeComponent],\\n templateUrl: \'./screen-notice-behavior.component.html\',\\n styleUrls: [\'./screen-notice-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class ScreenNoticeBehaviorComponent {\\n /** Content of screen notice behavior component*/\\n readonly content = selectQuerySnapshot(RR.anyText, ResourceIds.ScreenSizeNoticeContent);\\n\\n /** Hra portal link routing after clicking on HRA Portal*/\\n readonly portal = LinkIds.Portal;\\n\\n /** Reference for the screen size notice dialog box*/\\n private readonly ref = inject(MatDialogRef, { optional: true });\\n\\n /** A dispatcher function that sets the Local Storage as \'shown\'*/\\n private readonly setScreenNoticeShown = dispatch(StorageActions.Set, StorageId.Local, \'screen-size-notice\', \'shown\');\\n\\n /** A function which closes the screen size notice dialog box*/\\n close(): void {\\n this.setScreenNoticeShown();\\n this.ref?.close();\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n}\\n","styleUrl":"./screen-notice-behavior.component.scss"}],"stylesData":"","templateData":" \\n"},{"name":"TissueLibraryBehaviorComponent","id":"component-TissueLibraryBehaviorComponent-1565978e9f70870b546b49f929236ee86c2eb9cc241e10b805863df59e4d66dca72495ffa8c27a7f282e396acc84f78b6724255570a4eab733a3af995543b47a","file":"src/lib/tissue-library-behavior/tissue-library-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-tissue-library-behavior","styleUrls":["./tissue-library-behavior.component.scss"],"styles":[],"templateUrl":["./tissue-library-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"list","deprecated":false,"deprecationMessage":"","type":"TissueTreeListComponent","optional":true,"description":"

Reference to the TissueTreeListComponent.

\\n","line":25,"rawdescription":"\\n\\nReference to the TissueTreeListComponent.\\n","decorators":[{"name":"ViewChild","stringifiedArguments":"\'list\', {static: true}"}],"modifierKind":[144]},{"name":"selected","deprecated":false,"deprecationMessage":"","type":"Tissue","optional":true,"description":"

Selected of tissue library behavior component

\\n","line":34,"rawdescription":"\\n\\nSelected of tissue library behavior component\\n"},{"name":"tissues","defaultValue":"selectSnapshot(TissueLibrarySelectors.tissues)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for tissues data

\\n","line":30,"rawdescription":"\\n\\nInput for tissues data\\n","modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for Tissue Library Behavior

\\n","rawdescription":"\\n\\nComponent for Tissue Library Behavior\\n","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, ViewChild } from \'@angular/core\';\\nimport { select$, selectSnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { TissueTreeListComponent } from \'@hra-ui/components/molecules\';\\nimport { Tissue } from \'@hra-ui/services\';\\nimport { ActiveFtuSelectors, TissueLibrarySelectors } from \'@hra-ui/state\';\\nimport { LabelBoxComponent } from \'@hra-ui/components/atoms\';\\n\\n/**\\n * Component for Tissue Library Behavior\\n */\\n@Component({\\n selector: \'ftu-tissue-library-behavior\',\\n standalone: true,\\n imports: [CommonModule, LabelBoxComponent, TissueTreeListComponent],\\n templateUrl: \'./tissue-library-behavior.component.html\',\\n styleUrls: [\'./tissue-library-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class TissueLibraryBehaviorComponent {\\n /**\\n * Reference to the TissueTreeListComponent.\\n */\\n @ViewChild(\'list\', { static: true })\\n readonly list?: TissueTreeListComponent;\\n\\n /**\\n * Input for tissues data\\n */\\n readonly tissues = selectSnapshot(TissueLibrarySelectors.tissues);\\n /**\\n * Selected of tissue library behavior component\\n */\\n selected?: Tissue;\\n\\n /**\\n * Sets the TissueItem instance as undefined if\\n * the url is undefined\\n */\\n constructor() {\\n /** Get iris from the observable else reset selection if\\n * iri is undefined\\n */\\n select$(ActiveFtuSelectors.iri).subscribe((iri) => {\\n this.selected = iri && this.tissues()[iri];\\n if (iri === undefined) {\\n this.list?.resetSelection();\\n }\\n });\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n .label {\\n border-bottom: 1px solid #e2e7e9;\\n width: 100%;\\n height: 3.5rem;\\n }\\n}\\n","styleUrl":"./tissue-library-behavior.component.scss"}],"stylesData":"","constructorObj":{"name":"constructor","description":"

Sets the TissueItem instance as undefined if\\nthe url is undefined

\\n","deprecated":false,"deprecationMessage":"","args":[],"line":34,"rawdescription":"\\n\\nSets the TissueItem instance as undefined if\\nthe url is undefined\\n"},"templateData":"FTU Library\\n \\n"}],"modules":[],"miscellaneous":{"variables":[{"name":"EMPTY_TISSUE_INFO","ctype":"miscellaneous","subtype":"variable","file":"src/lib/biomarker-details/biomarker-details.component.ts","deprecated":false,"deprecationMessage":"","type":"TissueInfo","defaultValue":"{\\n id: \'\',\\n label: \'\',\\n}","rawdescription":"PlaceHolder for Empty Tissue Info","description":"

PlaceHolder for Empty Tissue Info

\\n"},{"name":"EMPTY_TISSUE_INFO","ctype":"miscellaneous","subtype":"variable","file":"src/lib/biomarker-details-wc/biomarker-details-wc.component.ts","deprecated":false,"deprecationMessage":"","type":"TissueInfo","defaultValue":"{\\n id: \'\',\\n label: \'\',\\n}","rawdescription":"PlaceHolder for Empty Tissue Info","description":"

PlaceHolder for Empty Tissue Info

\\n"}],"functions":[],"typealiases":[],"enumerations":[],"groupedVariables":{"src/lib/biomarker-details/biomarker-details.component.ts":[{"name":"EMPTY_TISSUE_INFO","ctype":"miscellaneous","subtype":"variable","file":"src/lib/biomarker-details/biomarker-details.component.ts","deprecated":false,"deprecationMessage":"","type":"TissueInfo","defaultValue":"{\\n id: \'\',\\n label: \'\',\\n}","rawdescription":"PlaceHolder for Empty Tissue Info","description":"

PlaceHolder for Empty Tissue Info

\\n"}],"src/lib/biomarker-details-wc/biomarker-details-wc.component.ts":[{"name":"EMPTY_TISSUE_INFO","ctype":"miscellaneous","subtype":"variable","file":"src/lib/biomarker-details-wc/biomarker-details-wc.component.ts","deprecated":false,"deprecationMessage":"","type":"TissueInfo","defaultValue":"{\\n id: \'\',\\n label: \'\',\\n}","rawdescription":"PlaceHolder for Empty Tissue Info","description":"

PlaceHolder for Empty Tissue Info

\\n"}]},"groupedFunctions":{},"groupedEnumerations":{},"groupedTypeAliases":{}}}')},"./dist/compodoc/components-molecules/documentation.json":module=>{"use strict";module.exports=JSON.parse('{"pipes":[],"interfaces":[{"name":"ContactData","id":"interface-ContactData-309310b2740da63be5ea5aaa894ef73ced8bed2a86b50643af4dd031551d6cdb7b26ece6b3328d0e31c21e46f940bd8b901f5665c241ca2a4cb38f39631bd8a3","file":"src/lib/contact-modal/contact-modal.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EmailInputComponent, RequiredInputComponent, RequiredTextboxComponent } from \'@hra-ui/components/atoms\';\\nimport { produce } from \'immer\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/**\\n An interface representing contact data information which will be emitted if all the fields are in correct format.\\n */\\nexport interface ContactData {\\n /** The email address of the person submitting the form. */\\n email: string;\\n /** The subject line of the message being sent. */\\n subject: string;\\n /** The body of the message being sent. */\\n message: string;\\n}\\n\\n/** Initial empty contact data */\\nconst EMPTY_CONTACT_DATA: Partial = {\\n email: undefined,\\n subject: undefined,\\n message: undefined,\\n};\\n\\n/**\\n * Contact modal component.\\n */\\n@Component({\\n selector: \'hra-contact-modal\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatButtonModule,\\n MatIconModule,\\n EmailInputComponent,\\n MarkdownModule,\\n RequiredTextboxComponent,\\n RequiredInputComponent,\\n ],\\n templateUrl: \'./contact-modal.component.html\',\\n styleUrls: [\'./contact-modal.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class ContactModalComponent {\\n /** Input for product logo URL to displayed on the left side. */\\n @Input() productLogoUrl = \'\';\\n\\n /** Input for product title to displayed on the left side. */\\n @Input() productTitle = \'\';\\n\\n /** Emits when the submit button is clicked and all the values are appropriate. */\\n @Output() readonly submitClick = new EventEmitter();\\n\\n /** Emits when the cancel button or close icon is clicked */\\n @Output() readonly closeClick = new EventEmitter();\\n\\n /** A function to disable the submit button. If all the values are in approproiate format, then it will be enabled. */\\n get disableSubmit(): boolean {\\n return Object.values(this.contactData).some((value) => value === undefined);\\n }\\n\\n /** Asigns the undefined initially to all the input fields. */\\n contactData = EMPTY_CONTACT_DATA;\\n\\n /** Updates the contact data object with a new value for a given key. */\\n updateData(key: K, value?: ContactData[K]): void {\\n this.contactData = produce(this.contactData, (draft) => {\\n draft[key] = value;\\n });\\n }\\n\\n /** It emits the updated value of contact data */\\n submit(): void {\\n this.submitClick.emit(this.contactData as ContactData);\\n }\\n}\\n","properties":[{"name":"email","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

The email address of the person submitting the form.

\\n","line":14,"rawdescription":"\\nThe email address of the person submitting the form."},{"name":"message","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

The body of the message being sent.

\\n","line":18,"rawdescription":"\\nThe body of the message being sent."},{"name":"subject","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

The subject line of the message being sent.

\\n","line":16,"rawdescription":"\\nThe subject line of the message being sent."}],"indexSignatures":[],"kind":165,"description":"

An interface representing contact data information which will be emitted if all the fields are in correct format.

\\n","rawdescription":"\\n\\nAn interface representing contact data information which will be emitted if all the fields are in correct format.\\n","methods":[]},{"name":"DataItem","id":"interface-DataItem-dba50a1e9cbac5f9733930bd6b04d1ac5fda31ee6342e13da75314f7b5dbbf46c436aab104bfc47abdc323e9ff42aeeb0047ee89577f639d3979c6964344bbd7","file":"src/lib/biomarker-table-data-card/biomarker-table-data-card.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule } from \'@angular/material/table\';\\n\\n/** An item which defines a string label and a string value */\\nexport interface DataItem {\\n /** A string property that represents the label */\\n label: string;\\n /** A string property that represents the value */\\n value: string;\\n}\\n\\n/** An item which represents a section with a data item and an indicator for the last item in the section */\\nexport interface SectionItem {\\n /** A number property that represents the section number */\\n section: number;\\n /** A DateItem property that represents a section and its data */\\n data: DataItem;\\n /** A boolean property that represents the last item of a section */\\n isLastItem: boolean;\\n}\\n\\n/** This component displays a table with sections, where each section contains a list of items with a label and a value. */\\n@Component({\\n selector: \'hra-biomarker-table-data-card\',\\n standalone: true,\\n imports: [CommonModule, MatTableModule],\\n templateUrl: \'./biomarker-table-data-card.component.html\',\\n styleUrls: [\'./biomarker-table-data-card.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableDataCardComponent implements OnChanges {\\n /** Nested list of DataItems for each section which is displayed to the user */\\n @Input() data: DataItem[][] = [];\\n\\n /** Converted nested array of DataItem into Flat array of SectionItem */\\n sectionItems: SectionItem[] = [];\\n\\n /** Triggers an update on sectionItems array when data is changed */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.updateSectionItems();\\n }\\n }\\n\\n /** Updates sectionItems array when data is changed */\\n private updateSectionItems(): void {\\n const newSectionItems: SectionItem[] = [];\\n\\n this.data.forEach((section, sectionIndex) => {\\n section.forEach((item, itemIndex) => {\\n newSectionItems.push({\\n data: item,\\n section: sectionIndex,\\n isLastItem: itemIndex === section.length - 1,\\n });\\n });\\n });\\n\\n this.sectionItems = newSectionItems;\\n }\\n}\\n","properties":[{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

A string property that represents the label

\\n","line":8,"rawdescription":"\\nA string property that represents the label"},{"name":"value","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

A string property that represents the value

\\n","line":10,"rawdescription":"\\nA string property that represents the value"}],"indexSignatures":[],"kind":165,"description":"

An item which defines a string label and a string value

\\n","rawdescription":"\\nAn item which defines a string label and a string value","methods":[]},{"name":"DataNode","id":"interface-DataNode-8544338e8c5e11dd440f8b104bfa31552155bc5006289770258a8e940978177df7797adcb9bafb5b09a9943913ecf339692d528f868c6846be5c3de8a6270237","file":"src/lib/tissue-tree-list/tissue-tree-list.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { FlatTreeControl } from \'@angular/cdk/tree\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n Input,\\n OnChanges,\\n Output,\\n SimpleChanges,\\n} from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatRippleModule } from \'@angular/material/core\';\\nimport { MatExpansionModule } from \'@angular/material/expansion\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatTreeFlatDataSource, MatTreeFlattener, MatTreeModule } from \'@angular/material/tree\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { LinkId } from \'@hra-ui/cdk/state\';\\n\\n/** Base node type */\\nexport interface DataNode {\\n /** User readable label */\\n label: string;\\n /** Id to pass as a query parameter on navigation */\\n id?: string;\\n /** Link to navigate to on node click */\\n link?: LinkId;\\n /** Nested nodes */\\n children?: K[];\\n}\\n\\n/**\\n * Internal interface for flat tissue data hierarchy\\n */\\ninterface InternalNode> {\\n /** Displayed label */\\n label: string;\\n /** Whether the node can be expanded to display child nodes */\\n expandable: boolean;\\n /** Depth of node in the tree */\\n level: number;\\n /** Associated user node data */\\n data: T;\\n}\\n\\n/**\\n * Tabular View for hubMap tissue side-bar\\n */\\n@Component({\\n selector: \'hra-tissue-tree-list\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatButtonModule,\\n MatTreeModule,\\n MatIconModule,\\n MatExpansionModule,\\n MatRippleModule,\\n LinkDirective,\\n ],\\n templateUrl: \'./tissue-tree-list.component.html\',\\n styleUrls: [\'./tissue-tree-list.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class TissueTreeListComponent> implements OnChanges {\\n /**\\n * Input of tissue tree list component\\n */\\n @Input() nodes: Record = {} as Record;\\n\\n /**\\n * Node selected, to view the data associated with it\\n */\\n @Input() selected?: T = undefined;\\n\\n /**\\n * Output of tissue tree list component\\n */\\n @Output() readonly selectedChange = new EventEmitter();\\n\\n /**\\n * tree controller, used to control the nodes in the tree\\n */\\n readonly control = new FlatTreeControl>(\\n (node) => node.level,\\n (node) => node.expandable\\n );\\n\\n /**\\n * Flattener of tissue tree list component, returns flat-data structure\\n */\\n readonly flattener = new MatTreeFlattener>(\\n (node, level) => ({\\n label: node.label,\\n expandable: (node.children?.length ?? 0) > 0,\\n level,\\n data: node,\\n }),\\n (node) => node.level,\\n (node) => node.expandable,\\n (node) => node.children?.map((id) => this.nodes[id])\\n );\\n\\n /**\\n * Data source of tissue tree list component, defines the data in mat-tree\\n */\\n readonly dataSource = new MatTreeFlatDataSource(this.control, this.flattener);\\n\\n /**\\n * Take actions if any data changes\\n * @param changes changes in data\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'nodes\' in changes) {\\n this.dataSource.data = this.findRootNodes();\\n }\\n if (\'selected\' in changes) {\\n const path = this.selected ? this.dfsFindPath(this.findRootNodes(), this.selected) : [];\\n this.expandPath(path);\\n }\\n }\\n\\n /**\\n * check if the current node has children\\n * @param node current selected node\\n * @returns boolean, which means if node has children\\n */\\n hasChild(_: number, node: InternalNode): boolean {\\n return node.expandable;\\n }\\n\\n /**\\n * It selects the node, which is clicked.\\n * @param node Tissue Tree Item, which is clicked\\n */\\n selectNode(node: T): void {\\n if (this.selected !== node) {\\n this.selected = node;\\n this.selectedChange.emit(this.selected);\\n }\\n }\\n\\n /**\\n * Resets selection and collapes all nodes of the tree.\\n */\\n resetSelection(): void {\\n this.selected = undefined;\\n this.control.collapseAll();\\n }\\n\\n /**\\n * It creates a copy of the input nodes object.\\n * It iterates over it and removes all the children nodes from it.\\n * @returns remaining nodes which are root nodes.\\n */\\n private findRootNodes(): T[] {\\n const { nodes } = this;\\n const roots = { ...this.nodes };\\n for (const key in nodes) {\\n for (const child of nodes[key].children ?? []) {\\n delete roots[child];\\n }\\n }\\n\\n return Object.values(roots);\\n }\\n\\n /**\\n * expands the tree nodes based on the path provided.\\n * @param path is given as an input.\\n */\\n private expandPath(path: DataNode[]): void {\\n const nodes = this.control.dataNodes.filter((node) => path.includes(node.data));\\n nodes.forEach((node) => this.control.expand(node));\\n }\\n\\n /**\\n * It used the logic of depth first search to find the target node.\\n * returns the path to the target node.\\n */\\n private dfsFindPath(nodes: T[], target: T, path: T[] = []): T[] {\\n for (const node of nodes) {\\n path.push(node);\\n if (node === target) {\\n return path;\\n }\\n\\n const savedLength = path.length;\\n const children = node.children?.map((id) => this.nodes[id]) ?? [];\\n if (this.dfsFindPath(children, target, path).length > savedLength) {\\n return path;\\n }\\n\\n path.pop();\\n }\\n\\n return path;\\n }\\n}\\n","properties":[{"name":"children","deprecated":false,"deprecationMessage":"","type":"K[]","optional":true,"description":"

Nested nodes

\\n","line":29,"rawdescription":"\\nNested nodes"},{"name":"id","deprecated":false,"deprecationMessage":"","type":"string","optional":true,"description":"

Id to pass as a query parameter on navigation

\\n","line":25,"rawdescription":"\\nId to pass as a query parameter on navigation"},{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

User readable label

\\n","line":23,"rawdescription":"\\nUser readable label"},{"name":"link","deprecated":false,"deprecationMessage":"","type":"LinkId","optional":true,"description":"

Link to navigate to on node click

\\n","line":27,"rawdescription":"\\nLink to navigate to on node click"}],"indexSignatures":[],"kind":165,"description":"

Base node type

\\n","rawdescription":"\\nBase node type","methods":[]},{"name":"DownloadFormat","id":"interface-DownloadFormat-45c5a61fc5d68c201808fb76ff867f9a7cf8e42e6ef95ae08b440dbd37ce63eb4c77c3da0597ef90973854d65522a3ba496eeb5eccbe75750c1fd2f5abf52e6b","file":"src/lib/footer/footer.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { ConnectedPosition, OverlayModule } from \'@angular/cdk/overlay\';\\nimport { MatListModule } from \'@angular/material/list\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { EMPTY_LINK } from \'@hra-ui/cdk/state\';\\n\\n/**\\n * Base type for different download format options.\\n */\\nexport interface DownloadFormat {\\n /**\\n * User readable format label\\n */\\n label: string;\\n}\\n\\n/**\\n * Positioning value for the download list popup\\n */\\nconst DOWNLOADS_LIST_POSITION: ConnectedPosition[] = [\\n {\\n panelClass: \'above\',\\n originX: \'start\',\\n originY: \'top\',\\n overlayX: \'start\',\\n overlayY: \'bottom\',\\n offsetY: 0,\\n },\\n {\\n panelClass: \'below\',\\n originX: \'start\',\\n originY: \'bottom\',\\n overlayX: \'start\',\\n overlayY: \'top\',\\n },\\n];\\n\\n/**\\n * Component for footer that displays its content at the bottom of the page with different action buttons.\\n */\\n@Component({\\n selector: \'hra-footer\',\\n standalone: true,\\n imports: [CommonModule, MatButtonModule, MatIconModule, OverlayModule, MatListModule, LinkDirective],\\n templateUrl: \'./footer.component.html\',\\n styleUrls: [\'./footer.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class FooterComponent {\\n /** Host binding of footer component */\\n @HostBinding(\'class\')\\n @Input()\\n size: \'small\' | \'large\' = \'large\';\\n\\n /** Input for product logo URL to displayed on the left side. */\\n @Input() productLogoUrl = \'\';\\n\\n /** Input for product title to displayed on the left side. */\\n @Input() productTitle = \'\';\\n\\n /** Input for HRA Portal link */\\n @Input() hraPortal = EMPTY_LINK;\\n\\n /** Input for Illustration metadata page link in HRA Portal */\\n @Input() illustrationMetadata = EMPTY_LINK;\\n\\n /** Input for embed link in HRA Portal */\\n @Input() embed = EMPTY_LINK;\\n\\n /** Different download formats options displayed to the user */\\n @Input() downloadFormats: T[] = [];\\n\\n /** Emits the selected download format */\\n @Output() readonly download = new EventEmitter();\\n\\n /** Emits when the contact button is clicked */\\n @Output() readonly contactClick = new EventEmitter();\\n\\n /** Download list popup overlay positioning */\\n readonly DOWNLOADS_LIST_POSITION = DOWNLOADS_LIST_POSITION;\\n\\n /** Gets whether the footer required is small */\\n get isSmall(): boolean {\\n return this.size === \'small\';\\n }\\n\\n /** Whether the download list panel is open */\\n downloadListOpen = false;\\n}\\n","properties":[{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

User readable format label

\\n","line":17,"rawdescription":"\\n\\nUser readable format label\\n"}],"indexSignatures":[],"kind":165,"description":"

Base type for different download format options.

\\n","rawdescription":"\\n\\nBase type for different download format options.\\n","methods":[]},{"name":"InternalNode","id":"interface-InternalNode-8544338e8c5e11dd440f8b104bfa31552155bc5006289770258a8e940978177df7797adcb9bafb5b09a9943913ecf339692d528f868c6846be5c3de8a6270237","file":"src/lib/tissue-tree-list/tissue-tree-list.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { FlatTreeControl } from \'@angular/cdk/tree\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n Input,\\n OnChanges,\\n Output,\\n SimpleChanges,\\n} from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatRippleModule } from \'@angular/material/core\';\\nimport { MatExpansionModule } from \'@angular/material/expansion\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatTreeFlatDataSource, MatTreeFlattener, MatTreeModule } from \'@angular/material/tree\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { LinkId } from \'@hra-ui/cdk/state\';\\n\\n/** Base node type */\\nexport interface DataNode {\\n /** User readable label */\\n label: string;\\n /** Id to pass as a query parameter on navigation */\\n id?: string;\\n /** Link to navigate to on node click */\\n link?: LinkId;\\n /** Nested nodes */\\n children?: K[];\\n}\\n\\n/**\\n * Internal interface for flat tissue data hierarchy\\n */\\ninterface InternalNode> {\\n /** Displayed label */\\n label: string;\\n /** Whether the node can be expanded to display child nodes */\\n expandable: boolean;\\n /** Depth of node in the tree */\\n level: number;\\n /** Associated user node data */\\n data: T;\\n}\\n\\n/**\\n * Tabular View for hubMap tissue side-bar\\n */\\n@Component({\\n selector: \'hra-tissue-tree-list\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatButtonModule,\\n MatTreeModule,\\n MatIconModule,\\n MatExpansionModule,\\n MatRippleModule,\\n LinkDirective,\\n ],\\n templateUrl: \'./tissue-tree-list.component.html\',\\n styleUrls: [\'./tissue-tree-list.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class TissueTreeListComponent> implements OnChanges {\\n /**\\n * Input of tissue tree list component\\n */\\n @Input() nodes: Record = {} as Record;\\n\\n /**\\n * Node selected, to view the data associated with it\\n */\\n @Input() selected?: T = undefined;\\n\\n /**\\n * Output of tissue tree list component\\n */\\n @Output() readonly selectedChange = new EventEmitter();\\n\\n /**\\n * tree controller, used to control the nodes in the tree\\n */\\n readonly control = new FlatTreeControl>(\\n (node) => node.level,\\n (node) => node.expandable\\n );\\n\\n /**\\n * Flattener of tissue tree list component, returns flat-data structure\\n */\\n readonly flattener = new MatTreeFlattener>(\\n (node, level) => ({\\n label: node.label,\\n expandable: (node.children?.length ?? 0) > 0,\\n level,\\n data: node,\\n }),\\n (node) => node.level,\\n (node) => node.expandable,\\n (node) => node.children?.map((id) => this.nodes[id])\\n );\\n\\n /**\\n * Data source of tissue tree list component, defines the data in mat-tree\\n */\\n readonly dataSource = new MatTreeFlatDataSource(this.control, this.flattener);\\n\\n /**\\n * Take actions if any data changes\\n * @param changes changes in data\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'nodes\' in changes) {\\n this.dataSource.data = this.findRootNodes();\\n }\\n if (\'selected\' in changes) {\\n const path = this.selected ? this.dfsFindPath(this.findRootNodes(), this.selected) : [];\\n this.expandPath(path);\\n }\\n }\\n\\n /**\\n * check if the current node has children\\n * @param node current selected node\\n * @returns boolean, which means if node has children\\n */\\n hasChild(_: number, node: InternalNode): boolean {\\n return node.expandable;\\n }\\n\\n /**\\n * It selects the node, which is clicked.\\n * @param node Tissue Tree Item, which is clicked\\n */\\n selectNode(node: T): void {\\n if (this.selected !== node) {\\n this.selected = node;\\n this.selectedChange.emit(this.selected);\\n }\\n }\\n\\n /**\\n * Resets selection and collapes all nodes of the tree.\\n */\\n resetSelection(): void {\\n this.selected = undefined;\\n this.control.collapseAll();\\n }\\n\\n /**\\n * It creates a copy of the input nodes object.\\n * It iterates over it and removes all the children nodes from it.\\n * @returns remaining nodes which are root nodes.\\n */\\n private findRootNodes(): T[] {\\n const { nodes } = this;\\n const roots = { ...this.nodes };\\n for (const key in nodes) {\\n for (const child of nodes[key].children ?? []) {\\n delete roots[child];\\n }\\n }\\n\\n return Object.values(roots);\\n }\\n\\n /**\\n * expands the tree nodes based on the path provided.\\n * @param path is given as an input.\\n */\\n private expandPath(path: DataNode[]): void {\\n const nodes = this.control.dataNodes.filter((node) => path.includes(node.data));\\n nodes.forEach((node) => this.control.expand(node));\\n }\\n\\n /**\\n * It used the logic of depth first search to find the target node.\\n * returns the path to the target node.\\n */\\n private dfsFindPath(nodes: T[], target: T, path: T[] = []): T[] {\\n for (const node of nodes) {\\n path.push(node);\\n if (node === target) {\\n return path;\\n }\\n\\n const savedLength = path.length;\\n const children = node.children?.map((id) => this.nodes[id]) ?? [];\\n if (this.dfsFindPath(children, target, path).length > savedLength) {\\n return path;\\n }\\n\\n path.pop();\\n }\\n\\n return path;\\n }\\n}\\n","properties":[{"name":"data","deprecated":false,"deprecationMessage":"","type":"T","optional":false,"description":"

Associated user node data

\\n","line":43,"rawdescription":"\\nAssociated user node data"},{"name":"expandable","deprecated":false,"deprecationMessage":"","type":"boolean","optional":false,"description":"

Whether the node can be expanded to display child nodes

\\n","line":39,"rawdescription":"\\nWhether the node can be expanded to display child nodes"},{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Displayed label

\\n","line":37,"rawdescription":"\\nDisplayed label"},{"name":"level","deprecated":false,"deprecationMessage":"","type":"number","optional":false,"description":"

Depth of node in the tree

\\n","line":41,"rawdescription":"\\nDepth of node in the tree"}],"indexSignatures":[],"kind":165,"description":"

Internal interface for flat tissue data hierarchy

\\n","rawdescription":"\\n\\nInternal interface for flat tissue data hierarchy\\n","methods":[]},{"name":"MetricItem","id":"interface-MetricItem-e52c0a1cdf090042d1924c4907a4034774cbb442217faca9ec5035e76d2796116cf55644ecf49ae040fdea1168f9c5d99f6ce15b2079f70de3d853fece481b30","file":"src/lib/metrics/metrics.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\n\\n/**\\n An interface representing a single metric with an icon, value and description.\\n */\\nexport interface MetricItem {\\n /** Represents the icon associated with the metric. */\\n icon: string;\\n /** Describes the numberical value of the metric. */\\n value: string;\\n /** Describes the type of metric. */\\n description: string;\\n}\\n/**\\n * Describes the metrics for the HuBMAP project.\\n */\\n@Component({\\n selector: \'hra-metrics\',\\n standalone: true,\\n imports: [CommonModule],\\n templateUrl: \'./metrics.component.html\',\\n styleUrls: [\'./metrics.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class MetricsComponent {\\n /** Main title of metrics component. */\\n @Input() title = \'\';\\n\\n /** Logo of metrics component. */\\n @Input() logo = \'\';\\n\\n /** List of metrics that will be shown to the user. */\\n @Input() metrics: MetricItem[] = [];\\n}\\n","properties":[{"name":"description","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Describes the type of metric.

\\n","line":13,"rawdescription":"\\nDescribes the type of metric."},{"name":"icon","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Represents the icon associated with the metric.

\\n","line":9,"rawdescription":"\\nRepresents the icon associated with the metric."},{"name":"value","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Describes the numberical value of the metric.

\\n","line":11,"rawdescription":"\\nDescribes the numberical value of the metric."}],"indexSignatures":[],"kind":165,"description":"

An interface representing a single metric with an icon, value and description.

\\n","rawdescription":"\\n\\nAn interface representing a single metric with an icon, value and description.\\n","methods":[]},{"name":"NodeMapEntry","id":"interface-NodeMapEntry-34dafc0493fcadf92dd676bebad498e3798e87879ccd7ab9c56dfb6b52cf51b41a6b132fa4c00fa2f32867f3f84829bef3163da37de19cf480f10a8cd94e74f1","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ConnectedPosition, OverlayModule } from \'@angular/cdk/overlay\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n inject,\\n Input,\\n OnChanges,\\n OnDestroy,\\n Output,\\n Renderer2,\\n SimpleChanges,\\n ViewEncapsulation,\\n} from \'@angular/core\';\\nimport { TooltipComponent } from \'@hra-ui/components/atoms\';\\nimport { InlineSVGModule, SVGScriptEvalMode } from \'ng-inline-svg-2\';\\nimport { BehaviorSubject, debounce, fromEventPattern, Observable, Subject, takeUntil, timer } from \'rxjs\';\\nimport { NodeEventHandler } from \'rxjs/internal/observable/fromEvent\';\\n\\n/** Delay before tooltip becomes visible */\\nconst HOVER_DELAY = 200;\\n\\n/** Tooltip position settings */\\nconst TOOLTIP_POSITIONS: ConnectedPosition[] = [\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'start\',\\n overlayY: \'center\',\\n offsetX: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'end\',\\n overlayY: \'center\',\\n offsetX: -8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'top\',\\n offsetY: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'bottom\',\\n offsetY: -8,\\n },\\n];\\n\\n/** Node tooltip data */\\nexport interface NodeTooltipData {\\n /** Node name */\\n node: string;\\n /** Center point of hovered node in screen coordinates */\\n origin: { x: number; y: number };\\n}\\n\\n/** Interface for node entries */\\nexport interface NodeMapEntry {\\n /** Node label */\\n label: string;\\n /** Node id in svg */\\n id: string;\\n /** Ontology id of cell type */\\n ontologyId: string;\\n}\\n\\n/**\\n * Interactive SVG component\\n */\\n@Component({\\n selector: \'hra-interactive-svg\',\\n standalone: true,\\n imports: [CommonModule, InlineSVGModule, OverlayModule, TooltipComponent],\\n templateUrl: \'./interactive-svg.component.html\',\\n styleUrls: [\'./interactive-svg.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n encapsulation: ViewEncapsulation.ShadowDom,\\n})\\nexport class InteractiveSvgComponent implements OnChanges, OnDestroy {\\n /** SVG url */\\n @Input() url?: string;\\n\\n /** Mapping info */\\n @Input() mapping: T[] = [];\\n\\n /** Highlighted ontology id */\\n @Input() highlightId?: string;\\n\\n /** Emits node id when hovered */\\n @Output() readonly nodeHover = new EventEmitter();\\n\\n /** Emits node id when clicked */\\n @Output() readonly nodeClick = new EventEmitter();\\n\\n /** SVG script eval mode */\\n readonly NEVER_EVAL_SCRIPTS = SVGScriptEvalMode.NEVER;\\n\\n /** Tooltip position settings */\\n readonly TOOLTIP_POSITIONS = TOOLTIP_POSITIONS;\\n\\n /** Observable of node hover data or undefined when there is no active hover */\\n readonly nodeHoverData$ = new BehaviorSubject(undefined);\\n\\n /** Observable of node hover with a timer */\\n readonly nodeHoverDelayedData$ = this.nodeHoverData$.pipe(debounce((event) => timer(event ? HOVER_DELAY : 0)));\\n\\n /** Custom renderer */\\n private readonly renderer = inject(Renderer2);\\n\\n /** Destroys */\\n private destroy$ = new Subject();\\n\\n /** Crosswalk element of svg */\\n private crosswalkEl?: Element;\\n\\n /** List of highlighted svg elements */\\n private highlightedElements: Element[] = [];\\n\\n /**\\n * Updates the highlighting based on current highlight id\\n * @param changes\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'highlightId\' in changes) {\\n this.resetHighlight();\\n this.setHighlight();\\n }\\n }\\n\\n /**\\n * Highlights cells that match highlightId\\n */\\n private setHighlight() {\\n const { mapping, highlightId, crosswalkEl } = this;\\n const entry = mapping.find(({ ontologyId }) => ontologyId === highlightId);\\n if (!entry || !crosswalkEl) {\\n return;\\n }\\n\\n let id = this.encodeId(entry.id);\\n const element = crosswalkEl.querySelector(`#${id}`);\\n if (!element) {\\n return;\\n } else if (element.nodeName !== \'g\') {\\n id = element.parentElement?.id ?? \'\';\\n }\\n\\n const elements = crosswalkEl.querySelectorAll(`#${id} :is(path, polygon, polyline)`);\\n this.highlightedElements = Array.from(elements);\\n elements.forEach((el) => el.classList.add(\'click-active\'));\\n }\\n\\n /**\\n * Resets all highlighted elements in the svg\\n */\\n private resetHighlight(): void {\\n for (const el of this.highlightedElements) {\\n el.classList.remove(\'click-active\');\\n }\\n this.highlightedElements = [];\\n }\\n\\n /**\\n * Clears observables on destroy\\n */\\n ngOnDestroy(): void {\\n this.clear();\\n }\\n\\n /**\\n * Sets SVG element\\n * @param el SVG element\\n */\\n setSvgElement(el: SVGElement): void {\\n this.clear();\\n this.crosswalkEl = el.querySelector(\'[id^=\\"Crosswalk\\"]\') ?? undefined;\\n if (this.crosswalkEl) {\\n // Move to front (i.e. last child in svg)\\n this.renderer.appendChild(el, this.crosswalkEl);\\n this.attachCrosswalkHover(this.crosswalkEl);\\n }\\n }\\n\\n /**\\n * Removes underscores from id\\n * @param name Node name\\n * @returns node name without underscores\\n */\\n formatNodeName(name: string): string {\\n return name.replace(/_/g, \' \');\\n }\\n\\n /**\\n * Attaches crosswalk hover\\n * @param el element\\n */\\n private attachCrosswalkHover(el: Element): void {\\n this.attachEvent(el, \'mouseover\').subscribe((event) => this.onCrosswalkHover(event));\\n this.attachEvent(el, \'mouseout\').subscribe(() => this.onCrosswalkHover(undefined as never as MouseEvent));\\n this.attachEvent(el, \'click\').subscribe((event) => this.nodeClick.emit(this.getNode(event)));\\n }\\n\\n /**\\n * Finds matching node in data from a hovered element\\n * @param event Mouse event\\n */\\n private onCrosswalkHover(event: MouseEvent): void {\\n if (event) {\\n const node = this.getNode(event);\\n if (node) {\\n this.nodeHoverData$.next({\\n node: node.label,\\n origin: {\\n x: event.clientX,\\n y: event.clientY,\\n },\\n });\\n this.nodeHover.emit(node); //emits node entry\\n }\\n } else {\\n this.nodeHoverData$.next(undefined);\\n this.nodeHover.emit();\\n }\\n }\\n\\n /**\\n * Clears observables\\n */\\n private clear(): void {\\n this.destroy$.next();\\n this.destroy$.complete();\\n this.destroy$ = new Subject();\\n }\\n\\n /**\\n * Returns entry from mapping if target, parent, or grandparent id matches the node name\\n * @param event Event\\n * @returns Node entry that matches the target id\\n */\\n private getNode(event: Event): T | undefined {\\n const targetId = (event.target as Element).id;\\n const parentId = (event.target as Element).parentElement?.id ?? \'\';\\n const grandparentId = (event.target as Element).parentElement?.parentElement?.id ?? \'\';\\n const idCollection = [targetId, parentId, grandparentId];\\n for (const id of idCollection) {\\n const decodedID = this.decodeId(id);\\n const match = this.mapping.find(\\n (item) => item.id?.toLowerCase() === decodedID.toLowerCase() //search mapping by name for matching node entry\\n );\\n if (match) {\\n return match;\\n }\\n }\\n return undefined;\\n }\\n\\n /**\\n * Decodes id into a normal string\\n * @param id Undecoded ID\\n * @returns id\\n */\\n private decodeId(id: string): string {\\n const replacer = (_match: string, hex: string) => String.fromCharCode(Number.parseInt(hex, 16));\\n return id.replace(/_x([\\\\da-f]+)_/gi, replacer);\\n }\\n\\n /**\\n * Turns normal string into decoded SVG id\\n * @param id id\\n * @returns Encoded id\\n */\\n private encodeId(id: string): string {\\n const replacer = (match: string) => `_x${match.charCodeAt(0).toString(16).toUpperCase()}_`;\\n return id.replace(/[^a-z0-9-]/gi, replacer);\\n }\\n\\n /**\\n * Attaches an event listener\\n * @template K\\n * @param el Element\\n * @param event Event\\n * @returns Observable\\n */\\n private attachEvent(el: Element, event: K): Observable {\\n const { renderer, destroy$ } = this;\\n const add = (handler: NodeEventHandler) => renderer.listen(el, event, handler);\\n const remove = (_handler: NodeEventHandler, unlisten: () => void) => unlisten();\\n return fromEventPattern(add, remove).pipe(takeUntil(destroy$));\\n }\\n}\\n","properties":[{"name":"id","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Node id in svg

\\n","line":69,"rawdescription":"\\nNode id in svg"},{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Node label

\\n","line":67,"rawdescription":"\\nNode label"},{"name":"ontologyId","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Ontology id of cell type

\\n","line":71,"rawdescription":"\\nOntology id of cell type"}],"indexSignatures":[],"kind":165,"description":"

Interface for node entries

\\n","rawdescription":"\\nInterface for node entries","methods":[]},{"name":"NodeTooltipData","id":"interface-NodeTooltipData-34dafc0493fcadf92dd676bebad498e3798e87879ccd7ab9c56dfb6b52cf51b41a6b132fa4c00fa2f32867f3f84829bef3163da37de19cf480f10a8cd94e74f1","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ConnectedPosition, OverlayModule } from \'@angular/cdk/overlay\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n inject,\\n Input,\\n OnChanges,\\n OnDestroy,\\n Output,\\n Renderer2,\\n SimpleChanges,\\n ViewEncapsulation,\\n} from \'@angular/core\';\\nimport { TooltipComponent } from \'@hra-ui/components/atoms\';\\nimport { InlineSVGModule, SVGScriptEvalMode } from \'ng-inline-svg-2\';\\nimport { BehaviorSubject, debounce, fromEventPattern, Observable, Subject, takeUntil, timer } from \'rxjs\';\\nimport { NodeEventHandler } from \'rxjs/internal/observable/fromEvent\';\\n\\n/** Delay before tooltip becomes visible */\\nconst HOVER_DELAY = 200;\\n\\n/** Tooltip position settings */\\nconst TOOLTIP_POSITIONS: ConnectedPosition[] = [\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'start\',\\n overlayY: \'center\',\\n offsetX: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'end\',\\n overlayY: \'center\',\\n offsetX: -8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'top\',\\n offsetY: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'bottom\',\\n offsetY: -8,\\n },\\n];\\n\\n/** Node tooltip data */\\nexport interface NodeTooltipData {\\n /** Node name */\\n node: string;\\n /** Center point of hovered node in screen coordinates */\\n origin: { x: number; y: number };\\n}\\n\\n/** Interface for node entries */\\nexport interface NodeMapEntry {\\n /** Node label */\\n label: string;\\n /** Node id in svg */\\n id: string;\\n /** Ontology id of cell type */\\n ontologyId: string;\\n}\\n\\n/**\\n * Interactive SVG component\\n */\\n@Component({\\n selector: \'hra-interactive-svg\',\\n standalone: true,\\n imports: [CommonModule, InlineSVGModule, OverlayModule, TooltipComponent],\\n templateUrl: \'./interactive-svg.component.html\',\\n styleUrls: [\'./interactive-svg.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n encapsulation: ViewEncapsulation.ShadowDom,\\n})\\nexport class InteractiveSvgComponent implements OnChanges, OnDestroy {\\n /** SVG url */\\n @Input() url?: string;\\n\\n /** Mapping info */\\n @Input() mapping: T[] = [];\\n\\n /** Highlighted ontology id */\\n @Input() highlightId?: string;\\n\\n /** Emits node id when hovered */\\n @Output() readonly nodeHover = new EventEmitter();\\n\\n /** Emits node id when clicked */\\n @Output() readonly nodeClick = new EventEmitter();\\n\\n /** SVG script eval mode */\\n readonly NEVER_EVAL_SCRIPTS = SVGScriptEvalMode.NEVER;\\n\\n /** Tooltip position settings */\\n readonly TOOLTIP_POSITIONS = TOOLTIP_POSITIONS;\\n\\n /** Observable of node hover data or undefined when there is no active hover */\\n readonly nodeHoverData$ = new BehaviorSubject(undefined);\\n\\n /** Observable of node hover with a timer */\\n readonly nodeHoverDelayedData$ = this.nodeHoverData$.pipe(debounce((event) => timer(event ? HOVER_DELAY : 0)));\\n\\n /** Custom renderer */\\n private readonly renderer = inject(Renderer2);\\n\\n /** Destroys */\\n private destroy$ = new Subject();\\n\\n /** Crosswalk element of svg */\\n private crosswalkEl?: Element;\\n\\n /** List of highlighted svg elements */\\n private highlightedElements: Element[] = [];\\n\\n /**\\n * Updates the highlighting based on current highlight id\\n * @param changes\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'highlightId\' in changes) {\\n this.resetHighlight();\\n this.setHighlight();\\n }\\n }\\n\\n /**\\n * Highlights cells that match highlightId\\n */\\n private setHighlight() {\\n const { mapping, highlightId, crosswalkEl } = this;\\n const entry = mapping.find(({ ontologyId }) => ontologyId === highlightId);\\n if (!entry || !crosswalkEl) {\\n return;\\n }\\n\\n let id = this.encodeId(entry.id);\\n const element = crosswalkEl.querySelector(`#${id}`);\\n if (!element) {\\n return;\\n } else if (element.nodeName !== \'g\') {\\n id = element.parentElement?.id ?? \'\';\\n }\\n\\n const elements = crosswalkEl.querySelectorAll(`#${id} :is(path, polygon, polyline)`);\\n this.highlightedElements = Array.from(elements);\\n elements.forEach((el) => el.classList.add(\'click-active\'));\\n }\\n\\n /**\\n * Resets all highlighted elements in the svg\\n */\\n private resetHighlight(): void {\\n for (const el of this.highlightedElements) {\\n el.classList.remove(\'click-active\');\\n }\\n this.highlightedElements = [];\\n }\\n\\n /**\\n * Clears observables on destroy\\n */\\n ngOnDestroy(): void {\\n this.clear();\\n }\\n\\n /**\\n * Sets SVG element\\n * @param el SVG element\\n */\\n setSvgElement(el: SVGElement): void {\\n this.clear();\\n this.crosswalkEl = el.querySelector(\'[id^=\\"Crosswalk\\"]\') ?? undefined;\\n if (this.crosswalkEl) {\\n // Move to front (i.e. last child in svg)\\n this.renderer.appendChild(el, this.crosswalkEl);\\n this.attachCrosswalkHover(this.crosswalkEl);\\n }\\n }\\n\\n /**\\n * Removes underscores from id\\n * @param name Node name\\n * @returns node name without underscores\\n */\\n formatNodeName(name: string): string {\\n return name.replace(/_/g, \' \');\\n }\\n\\n /**\\n * Attaches crosswalk hover\\n * @param el element\\n */\\n private attachCrosswalkHover(el: Element): void {\\n this.attachEvent(el, \'mouseover\').subscribe((event) => this.onCrosswalkHover(event));\\n this.attachEvent(el, \'mouseout\').subscribe(() => this.onCrosswalkHover(undefined as never as MouseEvent));\\n this.attachEvent(el, \'click\').subscribe((event) => this.nodeClick.emit(this.getNode(event)));\\n }\\n\\n /**\\n * Finds matching node in data from a hovered element\\n * @param event Mouse event\\n */\\n private onCrosswalkHover(event: MouseEvent): void {\\n if (event) {\\n const node = this.getNode(event);\\n if (node) {\\n this.nodeHoverData$.next({\\n node: node.label,\\n origin: {\\n x: event.clientX,\\n y: event.clientY,\\n },\\n });\\n this.nodeHover.emit(node); //emits node entry\\n }\\n } else {\\n this.nodeHoverData$.next(undefined);\\n this.nodeHover.emit();\\n }\\n }\\n\\n /**\\n * Clears observables\\n */\\n private clear(): void {\\n this.destroy$.next();\\n this.destroy$.complete();\\n this.destroy$ = new Subject();\\n }\\n\\n /**\\n * Returns entry from mapping if target, parent, or grandparent id matches the node name\\n * @param event Event\\n * @returns Node entry that matches the target id\\n */\\n private getNode(event: Event): T | undefined {\\n const targetId = (event.target as Element).id;\\n const parentId = (event.target as Element).parentElement?.id ?? \'\';\\n const grandparentId = (event.target as Element).parentElement?.parentElement?.id ?? \'\';\\n const idCollection = [targetId, parentId, grandparentId];\\n for (const id of idCollection) {\\n const decodedID = this.decodeId(id);\\n const match = this.mapping.find(\\n (item) => item.id?.toLowerCase() === decodedID.toLowerCase() //search mapping by name for matching node entry\\n );\\n if (match) {\\n return match;\\n }\\n }\\n return undefined;\\n }\\n\\n /**\\n * Decodes id into a normal string\\n * @param id Undecoded ID\\n * @returns id\\n */\\n private decodeId(id: string): string {\\n const replacer = (_match: string, hex: string) => String.fromCharCode(Number.parseInt(hex, 16));\\n return id.replace(/_x([\\\\da-f]+)_/gi, replacer);\\n }\\n\\n /**\\n * Turns normal string into decoded SVG id\\n * @param id id\\n * @returns Encoded id\\n */\\n private encodeId(id: string): string {\\n const replacer = (match: string) => `_x${match.charCodeAt(0).toString(16).toUpperCase()}_`;\\n return id.replace(/[^a-z0-9-]/gi, replacer);\\n }\\n\\n /**\\n * Attaches an event listener\\n * @template K\\n * @param el Element\\n * @param event Event\\n * @returns Observable\\n */\\n private attachEvent(el: Element, event: K): Observable {\\n const { renderer, destroy$ } = this;\\n const add = (handler: NodeEventHandler) => renderer.listen(el, event, handler);\\n const remove = (_handler: NodeEventHandler, unlisten: () => void) => unlisten();\\n return fromEventPattern(add, remove).pipe(takeUntil(destroy$));\\n }\\n}\\n","properties":[{"name":"node","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Node name

\\n","line":59,"rawdescription":"\\nNode name"},{"name":"origin","deprecated":false,"deprecationMessage":"","type":"literal type","optional":false,"description":"

Center point of hovered node in screen coordinates

\\n","line":61,"rawdescription":"\\nCenter point of hovered node in screen coordinates"}],"indexSignatures":[],"kind":165,"description":"

Node tooltip data

\\n","rawdescription":"\\nNode tooltip data","methods":[]},{"name":"SectionItem","id":"interface-SectionItem-dba50a1e9cbac5f9733930bd6b04d1ac5fda31ee6342e13da75314f7b5dbbf46c436aab104bfc47abdc323e9ff42aeeb0047ee89577f639d3979c6964344bbd7","file":"src/lib/biomarker-table-data-card/biomarker-table-data-card.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule } from \'@angular/material/table\';\\n\\n/** An item which defines a string label and a string value */\\nexport interface DataItem {\\n /** A string property that represents the label */\\n label: string;\\n /** A string property that represents the value */\\n value: string;\\n}\\n\\n/** An item which represents a section with a data item and an indicator for the last item in the section */\\nexport interface SectionItem {\\n /** A number property that represents the section number */\\n section: number;\\n /** A DateItem property that represents a section and its data */\\n data: DataItem;\\n /** A boolean property that represents the last item of a section */\\n isLastItem: boolean;\\n}\\n\\n/** This component displays a table with sections, where each section contains a list of items with a label and a value. */\\n@Component({\\n selector: \'hra-biomarker-table-data-card\',\\n standalone: true,\\n imports: [CommonModule, MatTableModule],\\n templateUrl: \'./biomarker-table-data-card.component.html\',\\n styleUrls: [\'./biomarker-table-data-card.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableDataCardComponent implements OnChanges {\\n /** Nested list of DataItems for each section which is displayed to the user */\\n @Input() data: DataItem[][] = [];\\n\\n /** Converted nested array of DataItem into Flat array of SectionItem */\\n sectionItems: SectionItem[] = [];\\n\\n /** Triggers an update on sectionItems array when data is changed */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.updateSectionItems();\\n }\\n }\\n\\n /** Updates sectionItems array when data is changed */\\n private updateSectionItems(): void {\\n const newSectionItems: SectionItem[] = [];\\n\\n this.data.forEach((section, sectionIndex) => {\\n section.forEach((item, itemIndex) => {\\n newSectionItems.push({\\n data: item,\\n section: sectionIndex,\\n isLastItem: itemIndex === section.length - 1,\\n });\\n });\\n });\\n\\n this.sectionItems = newSectionItems;\\n }\\n}\\n","properties":[{"name":"data","deprecated":false,"deprecationMessage":"","type":"DataItem","optional":false,"description":"

A DateItem property that represents a section and its data

\\n","line":18,"rawdescription":"\\nA DateItem property that represents a section and its data"},{"name":"isLastItem","deprecated":false,"deprecationMessage":"","type":"boolean","optional":false,"description":"

A boolean property that represents the last item of a section

\\n","line":20,"rawdescription":"\\nA boolean property that represents the last item of a section"},{"name":"section","deprecated":false,"deprecationMessage":"","type":"number","optional":false,"description":"

A number property that represents the section number

\\n","line":16,"rawdescription":"\\nA number property that represents the section number"}],"indexSignatures":[],"kind":165,"description":"

An item which represents a section with a data item and an indicator for the last item in the section

\\n","rawdescription":"\\nAn item which represents a section with a data item and an indicator for the last item in the section","methods":[]},{"name":"SourceListItem","id":"interface-SourceListItem-f0d0464b044f898be3752719190f2d8ad8511283d4daafb2f8b17bd0f4dfa0290abbbeb293819664c07134fcaee5a64313aaf72d69e335a063e244c2ba1d7c0c","file":"src/lib/source-list/source-list.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule } from \'@angular/material/table\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EmptyBiomarkerComponent, LabelBoxComponent } from \'@hra-ui/components/atoms\';\\n\\n/** SourceListItem interface contains title and link to the dataset for the SourceList*/\\nexport interface SourceListItem {\\n /** Title of the dataset in the SourceList */\\n title: string;\\n\\n /** Label of the dataset in the SourceList */\\n label: string;\\n\\n /** Link to the dataset in the SourceList */\\n link: string;\\n}\\n\\n/** This component shows list of sources with title and links to the datasets */\\n@Component({\\n selector: \'hra-source-list\',\\n standalone: true,\\n imports: [CommonModule, MatTableModule, MatIconModule, LabelBoxComponent, EmptyBiomarkerComponent],\\n templateUrl: \'./source-list.component.html\',\\n styleUrls: [\'./source-list.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class SourceListComponent {\\n /** List of sources with titles and links displayed to the user */\\n @Input() sources: SourceListItem[] = [];\\n /**\\n * Input buttonon text of empty biomarker component.\\n */\\n @Input() collaborateText = \'\';\\n\\n /**\\n * Input message markdown of empty biomarker component.\\n */\\n @Input() message = \'\';\\n /**\\n * Show table of source list component which toggles to true or false\\n * based on click\\n */\\n showTable = true;\\n\\n /** Emits when the contact button is clicked */\\n @Output() readonly collaborateClick = new EventEmitter();\\n\\n /**\\n * It changes the value of showTable to false if value it true\\n * and vice versa\\n */\\n toggleTable(): void {\\n this.showTable = !this.showTable;\\n }\\n}\\n","properties":[{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Label of the dataset in the SourceList

\\n","line":13,"rawdescription":"\\nLabel of the dataset in the SourceList"},{"name":"link","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Link to the dataset in the SourceList

\\n","line":16,"rawdescription":"\\nLink to the dataset in the SourceList"},{"name":"title","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Title of the dataset in the SourceList

\\n","line":10,"rawdescription":"\\nTitle of the dataset in the SourceList"}],"indexSignatures":[],"kind":165,"description":"

SourceListItem interface contains title and link to the dataset for the SourceList

\\n","rawdescription":"\\nSourceListItem interface contains title and link to the dataset for the SourceList","methods":[]}],"injectables":[],"guards":[],"interceptors":[],"classes":[],"directives":[],"components":[{"name":"BiomarkerTableDataCardComponent","id":"component-BiomarkerTableDataCardComponent-dba50a1e9cbac5f9733930bd6b04d1ac5fda31ee6342e13da75314f7b5dbbf46c436aab104bfc47abdc323e9ff42aeeb0047ee89577f639d3979c6964344bbd7","file":"src/lib/biomarker-table-data-card/biomarker-table-data-card.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-biomarker-table-data-card","styleUrls":["./biomarker-table-data-card.component.scss"],"styles":[],"templateUrl":["./biomarker-table-data-card.component.html"],"viewProviders":[],"inputsClass":[{"name":"data","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nNested list of DataItems for each section which is displayed to the user","description":"

Nested list of DataItems for each section which is displayed to the user

\\n","line":34,"type":"DataItem[][]","decorators":[]}],"outputsClass":[],"propertiesClass":[{"name":"sectionItems","defaultValue":"[]","deprecated":false,"deprecationMessage":"","type":"SectionItem[]","optional":false,"description":"

Converted nested array of DataItem into Flat array of SectionItem

\\n","line":37,"rawdescription":"\\nConverted nested array of DataItem into Flat array of SectionItem"}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

This component displays a table with sections, where each section contains a list of items with a label and a value.

\\n","rawdescription":"\\nThis component displays a table with sections, where each section contains a list of items with a label and a value.","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule } from \'@angular/material/table\';\\n\\n/** An item which defines a string label and a string value */\\nexport interface DataItem {\\n /** A string property that represents the label */\\n label: string;\\n /** A string property that represents the value */\\n value: string;\\n}\\n\\n/** An item which represents a section with a data item and an indicator for the last item in the section */\\nexport interface SectionItem {\\n /** A number property that represents the section number */\\n section: number;\\n /** A DateItem property that represents a section and its data */\\n data: DataItem;\\n /** A boolean property that represents the last item of a section */\\n isLastItem: boolean;\\n}\\n\\n/** This component displays a table with sections, where each section contains a list of items with a label and a value. */\\n@Component({\\n selector: \'hra-biomarker-table-data-card\',\\n standalone: true,\\n imports: [CommonModule, MatTableModule],\\n templateUrl: \'./biomarker-table-data-card.component.html\',\\n styleUrls: [\'./biomarker-table-data-card.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableDataCardComponent implements OnChanges {\\n /** Nested list of DataItems for each section which is displayed to the user */\\n @Input() data: DataItem[][] = [];\\n\\n /** Converted nested array of DataItem into Flat array of SectionItem */\\n sectionItems: SectionItem[] = [];\\n\\n /** Triggers an update on sectionItems array when data is changed */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.updateSectionItems();\\n }\\n }\\n\\n /** Updates sectionItems array when data is changed */\\n private updateSectionItems(): void {\\n const newSectionItems: SectionItem[] = [];\\n\\n this.data.forEach((section, sectionIndex) => {\\n section.forEach((item, itemIndex) => {\\n newSectionItems.push({\\n data: item,\\n section: sectionIndex,\\n isLastItem: itemIndex === section.length - 1,\\n });\\n });\\n });\\n\\n this.sectionItems = newSectionItems;\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'utils\';\\n@use \'variables\' as vars;\\n\\n:host {\\n display: flex;\\n padding: 1rem 1.5rem;\\n border-radius: 0.5rem;\\n box-shadow: 0.063rem 0.125rem 1rem 0.125rem rgba(0, 0, 0, 0.16);\\n background-color: vars.$primary-contrast-rgb;\\n\\n .mat-mdc-cell {\\n padding: 0.25rem 0rem;\\n }\\n\\n .mat-mdc-row {\\n height: fit-content;\\n }\\n\\n .no-border {\\n border: none;\\n }\\n\\n .label {\\n color: #243142;\\n padding-right: 3rem;\\n }\\n\\n .value {\\n color: #4c5a69;\\n }\\n\\n .sr-only {\\n @include utils.sr-only();\\n }\\n}\\n","styleUrl":"./biomarker-table-data-card.component.scss"}],"stylesData":"","implements":["OnChanges"],"templateData":"
No data
\\n 0\\" [dataSource]=\\"sectionItems\\">\\n \\n\\n \x3c!-- Label Column --\x3e\\n \\n \\n \\n \\n\\n \x3c!-- Value Column --\x3e\\n \\n \\n \\n \\n\\n \\n
\\n Biomarker Table Data Card\\n
Item Label\\n {{ element.data.label }}\\n Item Value\\n {{ element.data.value }}\\n
\\n"},{"name":"BiomarkerTableDataIconComponent","id":"component-BiomarkerTableDataIconComponent-0fab04062dee70e0c4d57bfdc6f056400c9b82591b050c6912b9e59a896e1a5535f884a104c1d3f95c19721a049ca51f5b2a953512dc1d6a501c29d5399a063c","file":"src/lib/biomarker-table-data-icon/biomarker-table-data-icon.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-biomarker-table-data-icon","styleUrls":["./biomarker-table-data-icon.component.scss"],"styles":[],"template":"","templateUrl":[],"viewProviders":[],"inputsClass":[{"name":"color","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nRepresents the color of the icon","description":"

Represents the color of the icon

\\n","line":17,"type":"string","decorators":[]},{"name":"size","defaultValue":"0","deprecated":false,"deprecationMessage":"","rawdescription":"\\nRepresents the size of the icon","description":"

Represents the size of the icon

\\n","line":20,"type":"number","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Describes the data icon for the table

\\n","rawdescription":"\\n\\nDescribes the data icon for the table\\n","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, HostBinding, Input } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\n\\n/**\\n * Describes the data icon for the table\\n */\\n@Component({\\n selector: \'hra-biomarker-table-data-icon\',\\n standalone: true,\\n imports: [CommonModule],\\n template: \'\',\\n styleUrls: [\'./biomarker-table-data-icon.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableDataIconComponent {\\n /** Represents the color of the icon */\\n @HostBinding(\'style.background-color\') @Input() color = \'\';\\n\\n /** Represents the size of the icon */\\n @HostBinding(\'style.--radius.rem\') @Input() size = 0;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n border-radius: 50%;\\n --radius: 0.625rem;\\n width: var(--radius);\\n height: var(--radius);\\n}\\n","styleUrl":"./biomarker-table-data-icon.component.scss"}],"stylesData":""},{"name":"ContactModalComponent","id":"component-ContactModalComponent-309310b2740da63be5ea5aaa894ef73ced8bed2a86b50643af4dd031551d6cdb7b26ece6b3328d0e31c21e46f940bd8b901f5665c241ca2a4cb38f39631bd8a3","file":"src/lib/contact-modal/contact-modal.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-contact-modal","styleUrls":["./contact-modal.component.scss"],"styles":[],"templateUrl":["./contact-modal.component.html"],"viewProviders":[],"inputsClass":[{"name":"productLogoUrl","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for product logo URL to displayed on the left side.","description":"

Input for product logo URL to displayed on the left side.

\\n","line":49,"type":"string","decorators":[]},{"name":"productTitle","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for product title to displayed on the left side.","description":"

Input for product title to displayed on the left side.

\\n","line":52,"type":"string","decorators":[]}],"outputsClass":[{"name":"closeClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the cancel button or close icon is clicked","description":"

Emits when the cancel button or close icon is clicked

\\n","line":58,"type":"EventEmitter"},{"name":"submitClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the submit button is clicked and all the values are appropriate.","description":"

Emits when the submit button is clicked and all the values are appropriate.

\\n","line":55,"type":"EventEmitter"}],"propertiesClass":[{"name":"contactData","defaultValue":"EMPTY_CONTACT_DATA","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Asigns the undefined initially to all the input fields.

\\n","line":66,"rawdescription":"\\nAsigns the undefined initially to all the input fields."}],"methodsClass":[{"name":"submit","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":76,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nIt emits the updated value of contact data","description":"

It emits the updated value of contact data

\\n"},{"name":"updateData","args":[{"name":"key","type":"K","deprecated":false,"deprecationMessage":""},{"name":"value","type":"","deprecated":false,"deprecationMessage":"","optional":true}],"optional":false,"returnType":"void","typeParameters":["K"],"line":69,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nUpdates the contact data object with a new value for a given key.","description":"

Updates the contact data object with a new value for a given key.

\\n","jsdoctags":[{"name":"key","type":"K","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}},{"name":"value","type":"","deprecated":false,"deprecationMessage":"","optional":true,"tagName":{"text":"param"}}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Contact modal component.

\\n","rawdescription":"\\n\\nContact modal component.\\n","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EmailInputComponent, RequiredInputComponent, RequiredTextboxComponent } from \'@hra-ui/components/atoms\';\\nimport { produce } from \'immer\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/**\\n An interface representing contact data information which will be emitted if all the fields are in correct format.\\n */\\nexport interface ContactData {\\n /** The email address of the person submitting the form. */\\n email: string;\\n /** The subject line of the message being sent. */\\n subject: string;\\n /** The body of the message being sent. */\\n message: string;\\n}\\n\\n/** Initial empty contact data */\\nconst EMPTY_CONTACT_DATA: Partial = {\\n email: undefined,\\n subject: undefined,\\n message: undefined,\\n};\\n\\n/**\\n * Contact modal component.\\n */\\n@Component({\\n selector: \'hra-contact-modal\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatButtonModule,\\n MatIconModule,\\n EmailInputComponent,\\n MarkdownModule,\\n RequiredTextboxComponent,\\n RequiredInputComponent,\\n ],\\n templateUrl: \'./contact-modal.component.html\',\\n styleUrls: [\'./contact-modal.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class ContactModalComponent {\\n /** Input for product logo URL to displayed on the left side. */\\n @Input() productLogoUrl = \'\';\\n\\n /** Input for product title to displayed on the left side. */\\n @Input() productTitle = \'\';\\n\\n /** Emits when the submit button is clicked and all the values are appropriate. */\\n @Output() readonly submitClick = new EventEmitter();\\n\\n /** Emits when the cancel button or close icon is clicked */\\n @Output() readonly closeClick = new EventEmitter();\\n\\n /** A function to disable the submit button. If all the values are in approproiate format, then it will be enabled. */\\n get disableSubmit(): boolean {\\n return Object.values(this.contactData).some((value) => value === undefined);\\n }\\n\\n /** Asigns the undefined initially to all the input fields. */\\n contactData = EMPTY_CONTACT_DATA;\\n\\n /** Updates the contact data object with a new value for a given key. */\\n updateData(key: K, value?: ContactData[K]): void {\\n this.contactData = produce(this.contactData, (draft) => {\\n draft[key] = value;\\n });\\n }\\n\\n /** It emits the updated value of contact data */\\n submit(): void {\\n this.submitClick.emit(this.contactData as ContactData);\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n position: relative;\\n padding-top: 2rem;\\n margin-right: 1.5rem;\\n margin-left: 1.5rem;\\n font-family: \'Inter\';\\n\\n .product-logo {\\n display: flex;\\n align-items: center;\\n\\n .product-logo-image {\\n margin-right: 1rem;\\n }\\n\\n .product-title {\\n color: #990000;\\n margin: 0;\\n font-weight: 600;\\n }\\n }\\n\\n .close {\\n position: absolute;\\n top: 1.5rem;\\n right: 0rem;\\n }\\n\\n .submit {\\n margin-right: 1.5rem;\\n }\\n\\n .submit,\\n .cancel {\\n width: 7.5rem;\\n }\\n\\n .email {\\n margin-top: 1.25rem;\\n }\\n\\n .message-field {\\n margin-top: 1rem;\\n }\\n\\n .subject-field {\\n margin-top: 1rem;\\n }\\n\\n .desc {\\n margin-top: 1.5rem;\\n }\\n}\\n","styleUrl":"./contact-modal.component.scss"}],"stylesData":"","accessors":{"disableSubmit":{"name":"disableSubmit","getSignature":{"name":"disableSubmit","type":"boolean","returnType":"boolean","line":61,"rawdescription":"\\nA function to disable the submit button. If all the values are in approproiate format, then it will be enabled.","description":"

A function to disable the submit button. If all the values are in approproiate format, then it will be enabled.

\\n"}}},"templateData":"\\n \\"Prodoct\\n

{{ productTitle }}

\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n"},{"name":"FooterComponent","id":"component-FooterComponent-45c5a61fc5d68c201808fb76ff867f9a7cf8e42e6ef95ae08b440dbd37ce63eb4c77c3da0597ef90973854d65522a3ba496eeb5eccbe75750c1fd2f5abf52e6b","file":"src/lib/footer/footer.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-footer","styleUrls":["./footer.component.scss"],"styles":[],"templateUrl":["./footer.component.html"],"viewProviders":[],"inputsClass":[{"name":"downloadFormats","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nDifferent download formats options displayed to the user","description":"

Different download formats options displayed to the user

\\n","line":74,"type":"T[]","decorators":[]},{"name":"embed","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for embed link in HRA Portal","description":"

Input for embed link in HRA Portal

\\n","line":71,"type":"any","decorators":[]},{"name":"hraPortal","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for HRA Portal link","description":"

Input for HRA Portal link

\\n","line":65,"type":"any","decorators":[]},{"name":"illustrationMetadata","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for Illustration metadata page link in HRA Portal","description":"

Input for Illustration metadata page link in HRA Portal

\\n","line":68,"type":"any","decorators":[]},{"name":"productLogoUrl","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for product logo URL to displayed on the left side.","description":"

Input for product logo URL to displayed on the left side.

\\n","line":59,"type":"string","decorators":[]},{"name":"productTitle","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for product title to displayed on the left side.","description":"

Input for product title to displayed on the left side.

\\n","line":62,"type":"string","decorators":[]},{"name":"size","defaultValue":"\'large\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nHost binding of footer component","description":"

Host binding of footer component

\\n","line":56,"type":"\\"small\\" | \\"large\\"","decorators":[]}],"outputsClass":[{"name":"contactClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the contact button is clicked","description":"

Emits when the contact button is clicked

\\n","line":80,"type":"EventEmitter"},{"name":"download","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits the selected download format","description":"

Emits the selected download format

\\n","line":77,"type":"EventEmitter"}],"propertiesClass":[{"name":"downloadListOpen","defaultValue":"false","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Whether the download list panel is open

\\n","line":91,"rawdescription":"\\nWhether the download list panel is open"},{"name":"DOWNLOADS_LIST_POSITION","defaultValue":"DOWNLOADS_LIST_POSITION","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Download list popup overlay positioning

\\n","line":83,"rawdescription":"\\nDownload list popup overlay positioning","modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for footer that displays its content at the bottom of the page with different action buttons.

\\n","rawdescription":"\\n\\nComponent for footer that displays its content at the bottom of the page with different action buttons.\\n","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { ConnectedPosition, OverlayModule } from \'@angular/cdk/overlay\';\\nimport { MatListModule } from \'@angular/material/list\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { EMPTY_LINK } from \'@hra-ui/cdk/state\';\\n\\n/**\\n * Base type for different download format options.\\n */\\nexport interface DownloadFormat {\\n /**\\n * User readable format label\\n */\\n label: string;\\n}\\n\\n/**\\n * Positioning value for the download list popup\\n */\\nconst DOWNLOADS_LIST_POSITION: ConnectedPosition[] = [\\n {\\n panelClass: \'above\',\\n originX: \'start\',\\n originY: \'top\',\\n overlayX: \'start\',\\n overlayY: \'bottom\',\\n offsetY: 0,\\n },\\n {\\n panelClass: \'below\',\\n originX: \'start\',\\n originY: \'bottom\',\\n overlayX: \'start\',\\n overlayY: \'top\',\\n },\\n];\\n\\n/**\\n * Component for footer that displays its content at the bottom of the page with different action buttons.\\n */\\n@Component({\\n selector: \'hra-footer\',\\n standalone: true,\\n imports: [CommonModule, MatButtonModule, MatIconModule, OverlayModule, MatListModule, LinkDirective],\\n templateUrl: \'./footer.component.html\',\\n styleUrls: [\'./footer.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class FooterComponent {\\n /** Host binding of footer component */\\n @HostBinding(\'class\')\\n @Input()\\n size: \'small\' | \'large\' = \'large\';\\n\\n /** Input for product logo URL to displayed on the left side. */\\n @Input() productLogoUrl = \'\';\\n\\n /** Input for product title to displayed on the left side. */\\n @Input() productTitle = \'\';\\n\\n /** Input for HRA Portal link */\\n @Input() hraPortal = EMPTY_LINK;\\n\\n /** Input for Illustration metadata page link in HRA Portal */\\n @Input() illustrationMetadata = EMPTY_LINK;\\n\\n /** Input for embed link in HRA Portal */\\n @Input() embed = EMPTY_LINK;\\n\\n /** Different download formats options displayed to the user */\\n @Input() downloadFormats: T[] = [];\\n\\n /** Emits the selected download format */\\n @Output() readonly download = new EventEmitter();\\n\\n /** Emits when the contact button is clicked */\\n @Output() readonly contactClick = new EventEmitter();\\n\\n /** Download list popup overlay positioning */\\n readonly DOWNLOADS_LIST_POSITION = DOWNLOADS_LIST_POSITION;\\n\\n /** Gets whether the footer required is small */\\n get isSmall(): boolean {\\n return this.size === \'small\';\\n }\\n\\n /** Whether the download list panel is open */\\n downloadListOpen = false;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: flex;\\n padding: 1rem 2rem;\\n border-top: 0.063rem solid #e2e7e9;\\n align-items: center;\\n background-color: #f8f9fa;\\n gap: 1rem;\\n\\n --palette-primary-500: #abcdef;\\n\\n .controls {\\n display: flex;\\n justify-content: flex-end;\\n }\\n .filler {\\n flex-grow: 1;\\n }\\n\\n .product-title {\\n color: #990000;\\n margin-right: 0rem;\\n }\\n\\n a {\\n cursor: pointer;\\n display: flex;\\n }\\n\\n .product-logo-image {\\n height: 1.2rem;\\n margin-right: 1rem;\\n }\\n\\n button {\\n justify-content: center;\\n align-items: center;\\n min-width: 9rem;\\n min-height: 3rem;\\n gap: 0.5rem;\\n\\n --palette-primary-100-rgb: #4c5a69;\\n --palette-primary-500-rgb: #243142;\\n\\n &.mat-accent {\\n &:active {\\n --palette-primary-700-rgb: #4c5a69;\\n }\\n .mat-icon {\\n z-index: 1;\\n }\\n }\\n }\\n}\\n\\n::ng-deep {\\n .download-options-panel {\\n box-shadow: 0.1rem 0.1rem 0.4rem 0.2rem #dad7d7;\\n background-color: #ffffff;\\n }\\n}\\n::ng-deep .download-button {\\n .mdc-button__label {\\n display: flex;\\n gap: 0.5rem;\\n }\\n}\\n","styleUrl":"./footer.component.scss"}],"stylesData":"","accessors":{"isSmall":{"name":"isSmall","getSignature":{"name":"isSmall","type":"boolean","returnType":"boolean","line":86,"rawdescription":"\\nGets whether the footer required is small","description":"

Gets whether the footer required is small

\\n"}}},"templateData":"\\n
\\n\\n\\n\\n\\n download \\n Download\\n\\n\\n\\n\\n
\\n\\n\\n\\n\\n\\n\\n \\n \\n {{ format.label }}\\n \\n \\n\\n"},{"name":"FullscreenContainerComponent","id":"component-FullscreenContainerComponent-78edc2b37cbc90a17be0fcca4ed7291593d5f3d12c4ea823de3f9510c13bad4492bc5cd65823726fc7e333c874880c17093ff9d20096fd92e20137c8cc4f75af","file":"src/lib/fullscreen/fullscreen-container.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-fullscreen-container","styleUrls":[],"styles":["\\n :host {\\n display: block;\\n position: relative;\\n }\\n "],"template":"","templateUrl":[],"viewProviders":[],"inputsClass":[{"name":"fullscreen","defaultValue":"false","deprecated":false,"deprecationMessage":"","rawdescription":"\\nA boolean input property that controls the fullscreen mode","description":"

A boolean input property that controls the fullscreen mode

\\n","line":38,"type":"boolean","decorators":[]}],"outputsClass":[],"propertiesClass":[{"name":"content","deprecated":false,"deprecationMessage":"","type":"QueryList","optional":true,"description":"

A property that gets a reference to any child components of type FullscreenContentComponent that are projected into the component's content area

\\n","line":35,"rawdescription":"\\nA property that gets a reference to any child components of type FullscreenContentComponent that are projected into the component\'s content area","decorators":[{"name":"ContentChildren","stringifiedArguments":"FullscreenContentComponent"}],"modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

A component that wraps any child components of type FullscreenContentComponent and\\nsets their isFullScreen property to true or false based on its own fullscreen input property

\\n","rawdescription":"\\nA component that wraps any child components of type FullscreenContentComponent and\\nsets their isFullScreen property to true or false based on its own fullscreen input property\\n","type":"component","sourceCode":"import {\\n AfterContentInit,\\n ChangeDetectionStrategy,\\n Component,\\n ContentChildren,\\n Input,\\n OnChanges,\\n QueryList,\\n SimpleChanges,\\n} from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { FullscreenContentComponent } from \'./fullscreen-content.component\';\\n\\n/** A component that wraps any child components of type FullscreenContentComponent and\\n * sets their isFullScreen property to true or false based on its own fullscreen input property\\n */\\n@Component({\\n selector: \'hra-fullscreen-container\',\\n standalone: true,\\n imports: [CommonModule, FullscreenContentComponent],\\n template: \'\',\\n styles: [\\n `\\n :host {\\n display: block;\\n position: relative;\\n }\\n `,\\n ],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class FullscreenContainerComponent implements AfterContentInit, OnChanges {\\n /** A property that gets a reference to any child components of type FullscreenContentComponent that are projected into the component\'s content area */\\n @ContentChildren(FullscreenContentComponent)\\n readonly content?: QueryList;\\n\\n /** A boolean input property that controls the fullscreen mode */\\n @Input() fullscreen = false;\\n\\n /** It calls the updateFullscreenMode method to set the isFullScreen property of the child\\n * FullscreenContentComponent instances based on the value of the fullscreen input property\\n */\\n ngAfterContentInit(): void {\\n this.updateFullscreenMode();\\n }\\n\\n /** It checks if the fullscreen input property has changed, and calls the updateFullscreenMode method if it has */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'fullscreen\' in changes) {\\n this.updateFullscreenMode();\\n }\\n }\\n\\n /** A private method that sets the isFullScreen property of each child FullscreenContentComponent based on the value of the fullscreen */\\n private updateFullscreenMode(): void {\\n this.content?.forEach((content) => {\\n content.isFullScreen = this.fullscreen;\\n });\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":"","stylesData":"\\n :host {\\n display: block;\\n position: relative;\\n }\\n \\n","implements":["AfterContentInit","OnChanges"]},{"name":"FullscreenContentComponent","id":"component-FullscreenContentComponent-061cdd7c639f9c53e46272aaf23ed318885fbcf937978d8940b0f0baf165576129c5897204992603662d7b530bcd8d63a7d7a97602a18e97b7f1711f84c4725f","file":"src/lib/fullscreen/fullscreen-content.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-fullscreen-content","styleUrls":["./fullscreen-content.component.scss"],"styles":[],"template":"","templateUrl":[],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"isFullScreen","defaultValue":"false","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

This binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true

\\n","line":40,"rawdescription":"\\nThis binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true","decorators":[{"name":"HostBinding","stringifiedArguments":"\'class.fullscreen-on\'"},{"name":"HostBinding","stringifiedArguments":"\'@animateResize\'"}]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[{"name":"@animateResize","defaultValue":"false","deprecated":false,"deprecationMessage":"","rawdescription":"\\nThis binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true","description":"

This binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true

\\n","line":40,"type":"boolean","decorators":[]},{"name":"class.fullscreen-on","defaultValue":"false","deprecated":false,"deprecationMessage":"","rawdescription":"\\nThis binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true","description":"

This binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true

\\n","line":40,"type":"boolean","decorators":[]}],"hostListeners":[],"description":"

A component that displays its content in fullscreen mode when its isFullScreen property is set to true

\\n","rawdescription":"\\nA component that displays its content in fullscreen mode when its isFullScreen property is set to true","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, HostBinding } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { animate, state, style, transition, trigger } from \'@angular/animations\';\\n\\n/** A component that displays its content in fullscreen mode when its isFullScreen property is set to true */\\n@Component({\\n selector: \'hra-fullscreen-content\',\\n standalone: true,\\n imports: [CommonModule],\\n animations: [\\n trigger(\'animateResize\', [\\n state(\\n \'true\',\\n style({\\n width: \'100%\',\\n position: \'absolute\',\\n right: 0,\\n })\\n ),\\n state(\\n \'false\',\\n style({\\n width: \'50%\',\\n position: \'absolute\',\\n right: 0,\\n })\\n ),\\n transition(\'true <=> false\', [animate(\'0.5s ease\')]),\\n ]),\\n ],\\n template: \'\',\\n styleUrls: [\'./fullscreen-content.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class FullscreenContentComponent {\\n /** This binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true */\\n @HostBinding(\'class.fullscreen-on\')\\n /** This binds the isFullScreen property to the @animateResize when isFullScreen is true */\\n @HostBinding(\'@animateResize\')\\n isFullScreen = false;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n overflow-y: hidden;\\n transition: width 0.5s ease;\\n width: 50%;\\n\\n &.fullscreen-on {\\n z-index: 100;\\n background: #f8f9fa;\\n }\\n}\\n","styleUrl":"./fullscreen-content.component.scss"}],"stylesData":""},{"name":"HeaderComponent","id":"component-HeaderComponent-81f5689eacf69c8f1658a62e299bcad0df485f2cc8e6664f3f16cfa7d30400e53a54549f6aa8125abb2fc207fb428887c0a19dde695063a2d92611d78d9c6956","file":"src/lib/header/header.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-header","styleUrls":["./header.component.scss"],"styles":[],"templateUrl":["./header.component.html"],"viewProviders":[],"inputsClass":[{"name":"aboutLink","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for about link","description":"

Input for about link

\\n","line":40,"type":"any","decorators":[]},{"name":"appTitle","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput for app title to show on the left side.\\n","description":"

Input for app title to show on the left side.

\\n","line":34,"type":"string","decorators":[]},{"name":"productLogoUrl","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput for product logo URL to displayed on the left side.\\n","description":"

Input for product logo URL to displayed on the left side.

\\n","line":24,"type":"string","decorators":[]},{"name":"productTitle","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput for product title to displayed on the left side.\\n","description":"

Input for product title to displayed on the left side.

\\n","line":29,"type":"string","decorators":[]},{"name":"productTitleLink","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for Product Title link","description":"

Input for Product Title link

\\n","line":37,"type":"any","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Header component, displays on top of every page.

\\n","rawdescription":"\\n\\nHeader component, displays on top of every page.\\n","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatRippleModule } from \'@angular/material/core\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { EMPTY_LINK } from \'@hra-ui/cdk\';\\n\\n/**\\n * Header component, displays on top of every page.\\n */\\n@Component({\\n selector: \'hra-header\',\\n standalone: true,\\n imports: [CommonModule, MatButtonModule, MatIconModule, MatRippleModule, LinkDirective],\\n templateUrl: \'./header.component.html\',\\n styleUrls: [\'./header.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class HeaderComponent {\\n /**\\n * Input for product logo URL to displayed on the left side.\\n */\\n @Input() productLogoUrl = \'\';\\n\\n /**\\n * Input for product title to displayed on the left side.\\n */\\n @Input() productTitle = \'\';\\n\\n /**\\n * Input for app title to show on the left side.\\n */\\n @Input() appTitle = \'\';\\n\\n /** Input for Product Title link */\\n @Input() productTitleLink = EMPTY_LINK;\\n\\n /** Input for about link */\\n @Input() aboutLink = EMPTY_LINK;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'utils\';\\n@use \'variables\' as vars;\\n\\n:host {\\n display: flex;\\n align-items: center;\\n height: 5rem;\\n padding: 0 2rem 0 1rem;\\n\\n @include utils.define-flex-filler();\\n\\n h1 {\\n // Reset margins for h1 elements\\n margin: 0;\\n }\\n\\n .product {\\n display: flex;\\n align-items: center;\\n text-decoration: none;\\n // Style the ripple animation\\n padding: 0 1rem;\\n border-radius: 0.25rem;\\n\\n &:hover {\\n cursor: pointer;\\n }\\n\\n .text {\\n margin-left: 1rem;\\n font-weight: 600;\\n color: vars.$accent-rgb;\\n }\\n }\\n\\n .app {\\n margin-left: 0.5rem;\\n }\\n\\n .about {\\n width: 9rem;\\n height: 3rem;\\n text-decoration: none;\\n span {\\n border-bottom: 1px solid var(--palette-primary-500-rgb);\\n }\\n .icon {\\n width: 1.5rem;\\n height: 1.5rem;\\n font-size: 1.5rem;\\n }\\n }\\n\\n @media (max-width: 30rem) {\\n height: 4.5rem;\\n\\n .product .text,\\n .about .text {\\n @include utils.sr-only();\\n }\\n\\n .product {\\n height: 2.5rem;\\n padding: 0 0.25rem;\\n\\n .logo {\\n width: 1.5rem;\\n height: 1.5rem;\\n }\\n }\\n\\n .app {\\n font-size: 1rem;\\n line-height: 1.5rem;\\n }\\n\\n .about {\\n min-width: 2.5rem;\\n width: 2.5rem;\\n height: 2.5rem;\\n padding: 0;\\n\\n .icon {\\n margin: 0;\\n }\\n }\\n }\\n\\n @media (max-width: 20rem) {\\n padding: 0;\\n }\\n}\\n","styleUrl":"./header.component.scss"}],"stylesData":"","templateData":"\\n \\n

{{ productTitle }}

\\n\\n

{{ appTitle }}

\\n\\n
\\n\\n\\n info_outlined\\n About\\n\\n"},{"name":"HraLandingPageIntroWcComponent","id":"component-HraLandingPageIntroWcComponent-57ba89b5fa60bec2ad59de1cc52e4d3002935eab8da7f77895b1d7b507237df7df5d8fa2fec4dd3ba498b8d06fc5f70758beb2ba67ccbb24f2819798948e81d4","file":"src/lib/hra-landing-page-intro-wc/hra-landing-page-intro-wc.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-ui-hra-landing-page-intro-wc","styleUrls":["./hra-landing-page-intro-wc.component.scss"],"styles":[],"templateUrl":["./hra-landing-page-intro-wc.component.html"],"viewProviders":[],"inputsClass":[{"name":"description","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nDescription for FTU Explorer","description":"

Description for FTU Explorer

\\n","line":19,"type":"string","decorators":[]},{"name":"partners","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nThank you message to partners","description":"

Thank you message to partners

\\n","line":22,"type":"string","decorators":[]},{"name":"readMore","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nIntro Image file url","description":"

Intro Image file url

\\n","line":25,"type":"string","decorators":[]},{"name":"title","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nIntro title for FTU Explorer","description":"

Intro title for FTU Explorer

\\n","line":16,"type":"string","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for LandingPage Intro - Web coomponent

\\n","rawdescription":"\\nComponent for LandingPage Intro - Web coomponent","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/** Component for LandingPage Intro - Web coomponent */\\n@Component({\\n selector: \'hra-ui-hra-landing-page-intro-wc\',\\n standalone: true,\\n imports: [CommonModule, MarkdownModule],\\n templateUrl: \'./hra-landing-page-intro-wc.component.html\',\\n styleUrls: [\'./hra-landing-page-intro-wc.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class HraLandingPageIntroWcComponent {\\n /** Intro title for FTU Explorer */\\n @Input() title = \'\';\\n\\n /** Description for FTU Explorer */\\n @Input() description = \'\';\\n\\n /** Thank you message to partners */\\n @Input() partners = \'\';\\n\\n /** Intro Image file url */\\n @Input() readMore = \'\';\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n gap: 8px;\\n padding: 24px, 32px, 24px, 32px;\\n .title {\\n font-size: 20px;\\n font-family: Inter;\\n font-weight: 400;\\n line-height: 24px;\\n letter-spacing: 0em;\\n text-align: left;\\n }\\n\\n .description .partners .readMore {\\n font-family: Inter;\\n font-size: 16px;\\n font-weight: 400;\\n line-height: 24px;\\n letter-spacing: 0em;\\n text-align: left;\\n }\\n ::ng-deep a {\\n color: vars.$primary-rgb;\\n font-weight: 700;\\n }\\n ::ng-deep p {\\n margin: 0;\\n }\\n}\\n","styleUrl":"./hra-landing-page-intro-wc.component.scss"}],"stylesData":"","templateData":"

{{ title }}

\\n\\n\\n\\n\\n\\n\\n"},{"name":"InfoModalComponent","id":"component-InfoModalComponent-56dc03e6960f4005149bab8dbf6a5b713061505964f6b3cc7d33868ed7f83aff7dbf222ccf66999864c6313f218c20f849715b3ebcc4d2ea44285c6e07811662","file":"src/lib/info-modal/info-modal.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-info-modal","styleUrls":["./info-modal.component.scss"],"styles":[],"templateUrl":["./info-modal.component.html"],"viewProviders":[],"inputsClass":[{"name":"description","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInformation modal message to the user","description":"

Information modal message to the user

\\n","line":24,"type":"string","decorators":[]},{"name":"productLogoUrl","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nProduct logo shown to the user","description":"

Product logo shown to the user

\\n","line":21,"type":"string","decorators":[]},{"name":"productTitle","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nProduct title shown to the user","description":"

Product title shown to the user

\\n","line":18,"type":"string","decorators":[]}],"outputsClass":[{"name":"closeClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the close icon is clicked","description":"

Emits when the close icon is clicked

\\n","line":27,"type":"EventEmitter"}],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Displays an information modal to the user with the product title and logo and description

\\n","rawdescription":"\\nDisplays an information modal to the user with the product title and logo and description","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/** Displays an information modal to the user with the product title and logo and description */\\n@Component({\\n selector: \'hra-info-modal\',\\n standalone: true,\\n imports: [CommonModule, MatButtonModule, MatIconModule, MarkdownModule],\\n templateUrl: \'./info-modal.component.html\',\\n styleUrls: [\'./info-modal.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class InfoModalComponent {\\n /** Product title shown to the user */\\n @Input() productTitle = \'\';\\n\\n /** Product logo shown to the user */\\n @Input() productLogoUrl = \'\';\\n\\n /** Information modal message to the user */\\n @Input() description = \'\';\\n\\n /** Emits when the close icon is clicked */\\n @Output() readonly closeClick = new EventEmitter();\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n position: relative;\\n padding: 2rem 2rem 1.25rem 2rem;\\n\\n .close {\\n position: absolute;\\n top: 1.5rem;\\n right: 1.5rem;\\n }\\n\\n .title {\\n display: flex;\\n align-items: center;\\n\\n .product-logo-image {\\n height: 2.75rem;\\n margin-right: 1rem;\\n }\\n\\n .product-title {\\n margin: 0;\\n color: #990000;\\n }\\n }\\n\\n .description {\\n display: block;\\n margin-top: 1rem;\\n }\\n}\\n","styleUrl":"./info-modal.component.scss"}],"stylesData":"","templateData":"\\n \\"Prodoct\\n

{{ productTitle }}

\\n\\n\\n\\n\\n\\n"},{"name":"InteractiveSvgComponent","id":"component-InteractiveSvgComponent-34dafc0493fcadf92dd676bebad498e3798e87879ccd7ab9c56dfb6b52cf51b41a6b132fa4c00fa2f32867f3f84829bef3163da37de19cf480f10a8cd94e74f1","file":"src/lib/interactive-svg/interactive-svg.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":["ViewEncapsulation.ShadowDom"],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-interactive-svg","styleUrls":["./interactive-svg.component.scss"],"styles":[],"templateUrl":["./interactive-svg.component.html"],"viewProviders":[],"inputsClass":[{"name":"highlightId","deprecated":false,"deprecationMessage":"","rawdescription":"\\nHighlighted ontology id","description":"

Highlighted ontology id

\\n","line":94,"type":"string","decorators":[]},{"name":"mapping","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nMapping info","description":"

Mapping info

\\n","line":91,"type":"T[]","decorators":[]},{"name":"url","deprecated":false,"deprecationMessage":"","rawdescription":"\\nSVG url","description":"

SVG url

\\n","line":88,"type":"string","decorators":[]}],"outputsClass":[{"name":"nodeClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits node id when clicked","description":"

Emits node id when clicked

\\n","line":100,"type":"EventEmitter"},{"name":"nodeHover","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits node id when hovered","description":"

Emits node id when hovered

\\n","line":97,"type":"EventEmitter"}],"propertiesClass":[{"name":"NEVER_EVAL_SCRIPTS","defaultValue":"SVGScriptEvalMode.NEVER","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

SVG script eval mode

\\n","line":103,"rawdescription":"\\nSVG script eval mode","modifierKind":[144]},{"name":"nodeHoverData$","defaultValue":"new BehaviorSubject(undefined)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Observable of node hover data or undefined when there is no active hover

\\n","line":109,"rawdescription":"\\nObservable of node hover data or undefined when there is no active hover","modifierKind":[144]},{"name":"nodeHoverDelayedData$","defaultValue":"this.nodeHoverData$.pipe(debounce((event) => timer(event ? HOVER_DELAY : 0)))","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Observable of node hover with a timer

\\n","line":112,"rawdescription":"\\nObservable of node hover with a timer","modifierKind":[144]},{"name":"TOOLTIP_POSITIONS","defaultValue":"TOOLTIP_POSITIONS","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Tooltip position settings

\\n","line":106,"rawdescription":"\\nTooltip position settings","modifierKind":[144]}],"methodsClass":[{"name":"formatNodeName","args":[{"name":"name","type":"string","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"string","typeParameters":[],"line":196,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nRemoves underscores from id\\n","description":"

Removes underscores from id

\\n","jsdoctags":[{"name":{"pos":4993,"end":4997,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"name"},"type":"string","deprecated":false,"deprecationMessage":"","tagName":{"pos":4987,"end":4992,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":"

Node name

\\n"},{"tagName":{"pos":5014,"end":5021,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":"

node name without underscores

\\n"}]},{"name":"setSvgElement","args":[{"name":"el","type":"SVGElement","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"void","typeParameters":[],"line":181,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nSets SVG element\\n","description":"

Sets SVG element

\\n","jsdoctags":[{"name":{"pos":4595,"end":4597,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"el"},"type":"SVGElement","deprecated":false,"deprecationMessage":"","tagName":{"pos":4589,"end":4594,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":"

SVG element

\\n"}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Interactive SVG component

\\n","rawdescription":"\\n\\nInteractive SVG component\\n","type":"component","sourceCode":"import { ConnectedPosition, OverlayModule } from \'@angular/cdk/overlay\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n inject,\\n Input,\\n OnChanges,\\n OnDestroy,\\n Output,\\n Renderer2,\\n SimpleChanges,\\n ViewEncapsulation,\\n} from \'@angular/core\';\\nimport { TooltipComponent } from \'@hra-ui/components/atoms\';\\nimport { InlineSVGModule, SVGScriptEvalMode } from \'ng-inline-svg-2\';\\nimport { BehaviorSubject, debounce, fromEventPattern, Observable, Subject, takeUntil, timer } from \'rxjs\';\\nimport { NodeEventHandler } from \'rxjs/internal/observable/fromEvent\';\\n\\n/** Delay before tooltip becomes visible */\\nconst HOVER_DELAY = 200;\\n\\n/** Tooltip position settings */\\nconst TOOLTIP_POSITIONS: ConnectedPosition[] = [\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'start\',\\n overlayY: \'center\',\\n offsetX: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'end\',\\n overlayY: \'center\',\\n offsetX: -8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'top\',\\n offsetY: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'bottom\',\\n offsetY: -8,\\n },\\n];\\n\\n/** Node tooltip data */\\nexport interface NodeTooltipData {\\n /** Node name */\\n node: string;\\n /** Center point of hovered node in screen coordinates */\\n origin: { x: number; y: number };\\n}\\n\\n/** Interface for node entries */\\nexport interface NodeMapEntry {\\n /** Node label */\\n label: string;\\n /** Node id in svg */\\n id: string;\\n /** Ontology id of cell type */\\n ontologyId: string;\\n}\\n\\n/**\\n * Interactive SVG component\\n */\\n@Component({\\n selector: \'hra-interactive-svg\',\\n standalone: true,\\n imports: [CommonModule, InlineSVGModule, OverlayModule, TooltipComponent],\\n templateUrl: \'./interactive-svg.component.html\',\\n styleUrls: [\'./interactive-svg.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n encapsulation: ViewEncapsulation.ShadowDom,\\n})\\nexport class InteractiveSvgComponent implements OnChanges, OnDestroy {\\n /** SVG url */\\n @Input() url?: string;\\n\\n /** Mapping info */\\n @Input() mapping: T[] = [];\\n\\n /** Highlighted ontology id */\\n @Input() highlightId?: string;\\n\\n /** Emits node id when hovered */\\n @Output() readonly nodeHover = new EventEmitter();\\n\\n /** Emits node id when clicked */\\n @Output() readonly nodeClick = new EventEmitter();\\n\\n /** SVG script eval mode */\\n readonly NEVER_EVAL_SCRIPTS = SVGScriptEvalMode.NEVER;\\n\\n /** Tooltip position settings */\\n readonly TOOLTIP_POSITIONS = TOOLTIP_POSITIONS;\\n\\n /** Observable of node hover data or undefined when there is no active hover */\\n readonly nodeHoverData$ = new BehaviorSubject(undefined);\\n\\n /** Observable of node hover with a timer */\\n readonly nodeHoverDelayedData$ = this.nodeHoverData$.pipe(debounce((event) => timer(event ? HOVER_DELAY : 0)));\\n\\n /** Custom renderer */\\n private readonly renderer = inject(Renderer2);\\n\\n /** Destroys */\\n private destroy$ = new Subject();\\n\\n /** Crosswalk element of svg */\\n private crosswalkEl?: Element;\\n\\n /** List of highlighted svg elements */\\n private highlightedElements: Element[] = [];\\n\\n /**\\n * Updates the highlighting based on current highlight id\\n * @param changes\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'highlightId\' in changes) {\\n this.resetHighlight();\\n this.setHighlight();\\n }\\n }\\n\\n /**\\n * Highlights cells that match highlightId\\n */\\n private setHighlight() {\\n const { mapping, highlightId, crosswalkEl } = this;\\n const entry = mapping.find(({ ontologyId }) => ontologyId === highlightId);\\n if (!entry || !crosswalkEl) {\\n return;\\n }\\n\\n let id = this.encodeId(entry.id);\\n const element = crosswalkEl.querySelector(`#${id}`);\\n if (!element) {\\n return;\\n } else if (element.nodeName !== \'g\') {\\n id = element.parentElement?.id ?? \'\';\\n }\\n\\n const elements = crosswalkEl.querySelectorAll(`#${id} :is(path, polygon, polyline)`);\\n this.highlightedElements = Array.from(elements);\\n elements.forEach((el) => el.classList.add(\'click-active\'));\\n }\\n\\n /**\\n * Resets all highlighted elements in the svg\\n */\\n private resetHighlight(): void {\\n for (const el of this.highlightedElements) {\\n el.classList.remove(\'click-active\');\\n }\\n this.highlightedElements = [];\\n }\\n\\n /**\\n * Clears observables on destroy\\n */\\n ngOnDestroy(): void {\\n this.clear();\\n }\\n\\n /**\\n * Sets SVG element\\n * @param el SVG element\\n */\\n setSvgElement(el: SVGElement): void {\\n this.clear();\\n this.crosswalkEl = el.querySelector(\'[id^=\\"Crosswalk\\"]\') ?? undefined;\\n if (this.crosswalkEl) {\\n // Move to front (i.e. last child in svg)\\n this.renderer.appendChild(el, this.crosswalkEl);\\n this.attachCrosswalkHover(this.crosswalkEl);\\n }\\n }\\n\\n /**\\n * Removes underscores from id\\n * @param name Node name\\n * @returns node name without underscores\\n */\\n formatNodeName(name: string): string {\\n return name.replace(/_/g, \' \');\\n }\\n\\n /**\\n * Attaches crosswalk hover\\n * @param el element\\n */\\n private attachCrosswalkHover(el: Element): void {\\n this.attachEvent(el, \'mouseover\').subscribe((event) => this.onCrosswalkHover(event));\\n this.attachEvent(el, \'mouseout\').subscribe(() => this.onCrosswalkHover(undefined as never as MouseEvent));\\n this.attachEvent(el, \'click\').subscribe((event) => this.nodeClick.emit(this.getNode(event)));\\n }\\n\\n /**\\n * Finds matching node in data from a hovered element\\n * @param event Mouse event\\n */\\n private onCrosswalkHover(event: MouseEvent): void {\\n if (event) {\\n const node = this.getNode(event);\\n if (node) {\\n this.nodeHoverData$.next({\\n node: node.label,\\n origin: {\\n x: event.clientX,\\n y: event.clientY,\\n },\\n });\\n this.nodeHover.emit(node); //emits node entry\\n }\\n } else {\\n this.nodeHoverData$.next(undefined);\\n this.nodeHover.emit();\\n }\\n }\\n\\n /**\\n * Clears observables\\n */\\n private clear(): void {\\n this.destroy$.next();\\n this.destroy$.complete();\\n this.destroy$ = new Subject();\\n }\\n\\n /**\\n * Returns entry from mapping if target, parent, or grandparent id matches the node name\\n * @param event Event\\n * @returns Node entry that matches the target id\\n */\\n private getNode(event: Event): T | undefined {\\n const targetId = (event.target as Element).id;\\n const parentId = (event.target as Element).parentElement?.id ?? \'\';\\n const grandparentId = (event.target as Element).parentElement?.parentElement?.id ?? \'\';\\n const idCollection = [targetId, parentId, grandparentId];\\n for (const id of idCollection) {\\n const decodedID = this.decodeId(id);\\n const match = this.mapping.find(\\n (item) => item.id?.toLowerCase() === decodedID.toLowerCase() //search mapping by name for matching node entry\\n );\\n if (match) {\\n return match;\\n }\\n }\\n return undefined;\\n }\\n\\n /**\\n * Decodes id into a normal string\\n * @param id Undecoded ID\\n * @returns id\\n */\\n private decodeId(id: string): string {\\n const replacer = (_match: string, hex: string) => String.fromCharCode(Number.parseInt(hex, 16));\\n return id.replace(/_x([\\\\da-f]+)_/gi, replacer);\\n }\\n\\n /**\\n * Turns normal string into decoded SVG id\\n * @param id id\\n * @returns Encoded id\\n */\\n private encodeId(id: string): string {\\n const replacer = (match: string) => `_x${match.charCodeAt(0).toString(16).toUpperCase()}_`;\\n return id.replace(/[^a-z0-9-]/gi, replacer);\\n }\\n\\n /**\\n * Attaches an event listener\\n * @template K\\n * @param el Element\\n * @param event Event\\n * @returns Observable\\n */\\n private attachEvent(el: Element, event: K): Observable {\\n const { renderer, destroy$ } = this;\\n const add = (handler: NodeEventHandler) => renderer.listen(el, event, handler);\\n const remove = (_handler: NodeEventHandler, unlisten: () => void) => unlisten();\\n return fromEventPattern(add, remove).pipe(takeUntil(destroy$));\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":".svg {\\n max-height: calc(100vh - 14rem);\\n overflow-y: auto;\\n}\\nsvg {\\n max-height: calc(100vh - 10rem);\\n width: 100%;\\n}\\n\\n[id^=\'Crosswalk\'] {\\n :is(path, polygon, polyline) {\\n fill: transparent;\\n stroke: transparent;\\n }\\n\\n .hover-active & g:hover > :is(path, polygon, polyline),\\n .hover-active & g > g:hover > :is(path, polygon, polyline),\\n .click-active {\\n fill: hsl(0deg 100% 50%);\\n mix-blend-mode: saturation;\\n }\\n}\\n\\n::-webkit-scrollbar {\\n width: 0.5rem;\\n height: 0.5rem;\\n}\\n\\n::-webkit-scrollbar-track {\\n background: #f8f9fa;\\n border: 0.063rem solid #d3d3d3;\\n}\\n\\n::-webkit-scrollbar-thumb {\\n background: #a0abb4;\\n border-radius: 0.5rem;\\n}\\n","styleUrl":"./interactive-svg.component.scss"}],"stylesData":"","implements":["OnChanges","OnDestroy"],"templateData":"\\n\\n\\n \\n \\n \\n\\n"},{"name":"LandingPageInDepthComponent","id":"component-LandingPageInDepthComponent-266cc77d12f81268af62a259a42675f25c0be65e3cab6881ce7afcd3dbaa4ab87e767f669fc822ea592327de677787a00c9eb4a5b9b1171d78fe6aefc8cc439b","file":"src/lib/landing-page-in-depth/landing-page-in-depth.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-landing-page-in-depth","styleUrls":["./landing-page-in-depth.component.scss"],"styles":[],"templateUrl":["./landing-page-in-depth.component.html"],"viewProviders":[],"inputsClass":[{"name":"description","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nImage description shown to the user","description":"

Image description shown to the user

\\n","line":24,"type":"string","decorators":[]},{"name":"img","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nImage shown to the user","description":"

Image shown to the user

\\n","line":27,"type":"string","decorators":[]},{"name":"moreLink","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nLink to navigate to on more button click","description":"

Link to navigate to on more button click

\\n","line":33,"type":"any","decorators":[]},{"name":"moreText","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nText for more button","description":"

Text for more button

\\n","line":30,"type":"string","decorators":[]},{"name":"title","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nImage title shown to the user","description":"

Image title shown to the user

\\n","line":21,"type":"string","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Displays the image and also corresponding title and text along with a button to read more

\\n","rawdescription":"\\n\\nDisplays the image and also corresponding title and text along with a button to read more\\n","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EMPTY_LINK, LinkDirective } from \'@hra-ui/cdk\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/**\\n * Displays the image and also corresponding title and text along with a button to read more\\n */\\n@Component({\\n selector: \'hra-landing-page-in-depth\',\\n standalone: true,\\n imports: [CommonModule, MarkdownModule, MatButtonModule, MatIconModule, LinkDirective],\\n templateUrl: \'./landing-page-in-depth.component.html\',\\n styleUrls: [\'./landing-page-in-depth.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class LandingPageInDepthComponent {\\n /** Image title shown to the user */\\n @Input() title = \'\';\\n\\n /** Image description shown to the user */\\n @Input() description = \'\';\\n\\n /** Image shown to the user */\\n @Input() img = \'\';\\n\\n /** Text for more button */\\n @Input() moreText = \'\';\\n\\n /** Link to navigate to on more button click */\\n @Input() moreLink = EMPTY_LINK;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n display: grid;\\n grid-template-columns: 2fr 3fr;\\n grid-template-rows: auto auto 1fr;\\n column-gap: 2rem;\\n row-gap: 2rem;\\n padding: 3.5rem 2rem;\\n\\n .image {\\n grid-column: 1;\\n grid-row: 1 / span 3;\\n width: 100%;\\n height: auto;\\n align-self: center;\\n border-radius: 1rem;\\n box-shadow: 0.06rem 0.13rem 1rem 0.13rem #00000029;\\n }\\n\\n .title {\\n font-size: 2rem;\\n line-height: 2.5rem;\\n margin: 0;\\n }\\n\\n .description {\\n font-size: 1rem;\\n line-height: 1.5rem;\\n\\n ::ng-deep p {\\n margin: 0;\\n }\\n\\n ::ng-deep a {\\n color: vars.$primary-rgb;\\n font-weight: 700;\\n }\\n }\\n\\n .more-button {\\n width: fit-content;\\n height: 3rem;\\n }\\n}\\n","styleUrl":"./landing-page-in-depth.component.scss"}],"stylesData":"","templateData":"\\"\\"\\n

{{ title }}

\\n\\n\\n"},{"name":"LandingPageIntroComponent","id":"component-LandingPageIntroComponent-8e48a2ad3d32eea60c9dee7976b3dbc195b3a8107a3c174ac68b4696362903f19522bad089b509daae23505334aa5361945e7a8124fd32f17a6834c349c87aed","file":"src/lib/landing-page-intro/landing-page-intro.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-landing-page-intro","styleUrls":["./landing-page-intro.component.scss"],"styles":[],"templateUrl":["./landing-page-intro.component.html"],"viewProviders":[],"inputsClass":[{"name":"description","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nDescription for FTU Explorer","description":"

Description for FTU Explorer

\\n","line":22,"type":"string","decorators":[]},{"name":"img","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nIntro Image file url","description":"

Intro Image file url

\\n","line":28,"type":"string","decorators":[]},{"name":"moreLink","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nLink to navigate to on more button click","description":"

Link to navigate to on more button click

\\n","line":34,"type":"any","decorators":[]},{"name":"moreText","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nText for more button","description":"

Text for more button

\\n","line":31,"type":"string","decorators":[]},{"name":"partners","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nThank you message to partners","description":"

Thank you message to partners

\\n","line":25,"type":"string","decorators":[]},{"name":"title","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nIntro title for FTU Explorer","description":"

Intro title for FTU Explorer

\\n","line":19,"type":"string","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for LandingPage Intro

\\n","rawdescription":"\\nComponent for LandingPage Intro","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EMPTY_LINK, LinkDirective } from \'@hra-ui/cdk\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/** Component for LandingPage Intro */\\n@Component({\\n selector: \'hra-landing-page-intro\',\\n standalone: true,\\n imports: [CommonModule, MatButtonModule, MatIconModule, MarkdownModule, LinkDirective],\\n templateUrl: \'./landing-page-intro.component.html\',\\n styleUrls: [\'./landing-page-intro.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class LandingPageIntroComponent {\\n /** Intro title for FTU Explorer */\\n @Input() title = \'\';\\n\\n /** Description for FTU Explorer */\\n @Input() description = \'\';\\n\\n /** Thank you message to partners */\\n @Input() partners = \'\';\\n\\n /** Intro Image file url */\\n @Input() img = \'\';\\n\\n /** Text for more button */\\n @Input() moreText = \'\';\\n\\n /** Link to navigate to on more button click */\\n @Input() moreLink = EMPTY_LINK;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n display: grid;\\n grid-template-columns: 3fr 2fr;\\n grid-template-rows: auto auto 3rem 1fr;\\n align-items: start;\\n column-gap: 2rem;\\n row-gap: 2rem;\\n\\n .title {\\n font-size: 3rem;\\n line-height: 4rem;\\n margin: 0;\\n }\\n\\n .more-button {\\n width: fit-content;\\n height: 3rem;\\n }\\n\\n .image {\\n grid-column: 2;\\n grid-row: 1 / span 4;\\n place-self: center;\\n width: 100%;\\n height: auto;\\n }\\n\\n .description,\\n .partners {\\n ::ng-deep p {\\n margin: 0;\\n }\\n\\n ::ng-deep a {\\n color: vars.$primary-rgb;\\n font-weight: 700;\\n }\\n }\\n\\n .red-theme {\\n background-color: #990000;\\n border-color: #990000;\\n &:hover {\\n background-color: #990000;\\n border-color: #990000;\\n\\n mat-icon {\\n transform: translateX(30%);\\n transition: 0.5s;\\n }\\n }\\n\\n &:active,\\n &:focus,\\n &:focus:not(:hover) {\\n background-color: #990000;\\n border-color: #990000;\\n\\n ::ng-deep .mat-mdc-focus-indicator {\\n background-color: #990000 !important;\\n border-color: #990000;\\n }\\n }\\n }\\n}\\n","styleUrl":"./landing-page-intro.component.scss"}],"stylesData":"","templateData":"

{{ title }}

\\n\\n\\n\\n\\n\\n\\"alt\\"\\n"},{"name":"MetricsComponent","id":"component-MetricsComponent-e52c0a1cdf090042d1924c4907a4034774cbb442217faca9ec5035e76d2796116cf55644ecf49ae040fdea1168f9c5d99f6ce15b2079f70de3d853fece481b30","file":"src/lib/metrics/metrics.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-metrics","styleUrls":["./metrics.component.scss"],"styles":[],"templateUrl":["./metrics.component.html"],"viewProviders":[],"inputsClass":[{"name":"logo","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nLogo of metrics component.","description":"

Logo of metrics component.

\\n","line":31,"type":"string","decorators":[]},{"name":"metrics","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nList of metrics that will be shown to the user.","description":"

List of metrics that will be shown to the user.

\\n","line":34,"type":"MetricItem[]","decorators":[]},{"name":"title","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nMain title of metrics component.","description":"

Main title of metrics component.

\\n","line":28,"type":"string","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Describes the metrics for the HuBMAP project.

\\n","rawdescription":"\\n\\nDescribes the metrics for the HuBMAP project.\\n","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\n\\n/**\\n An interface representing a single metric with an icon, value and description.\\n */\\nexport interface MetricItem {\\n /** Represents the icon associated with the metric. */\\n icon: string;\\n /** Describes the numberical value of the metric. */\\n value: string;\\n /** Describes the type of metric. */\\n description: string;\\n}\\n/**\\n * Describes the metrics for the HuBMAP project.\\n */\\n@Component({\\n selector: \'hra-metrics\',\\n standalone: true,\\n imports: [CommonModule],\\n templateUrl: \'./metrics.component.html\',\\n styleUrls: [\'./metrics.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class MetricsComponent {\\n /** Main title of metrics component. */\\n @Input() title = \'\';\\n\\n /** Logo of metrics component. */\\n @Input() logo = \'\';\\n\\n /** List of metrics that will be shown to the user. */\\n @Input() metrics: MetricItem[] = [];\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n padding: 2rem 0 0 0;\\n background: #f8f9fa;\\n gap: 0.5rem;\\n\\n .logo {\\n height: 2.75rem;\\n }\\n\\n .header-title {\\n font-size: 2rem;\\n line-height: 2.5rem;\\n }\\n\\n .metrics {\\n display: flex;\\n flex-direction: row;\\n overflow-x: auto;\\n max-width: 100%;\\n gap: 2rem;\\n padding: 2rem 1.75rem;\\n\\n .metric {\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n min-width: 14.25rem;\\n height: 14.75rem;\\n padding-top: 2rem;\\n padding-bottom: 2rem;\\n\\n .logo {\\n margin-bottom: 2rem;\\n }\\n\\n .value {\\n font-size: 3rem;\\n line-height: 4rem;\\n margin-bottom: 0.25rem;\\n }\\n\\n .description {\\n font-size: 1rem;\\n text-align: center;\\n }\\n }\\n }\\n}\\n","styleUrl":"./metrics.component.scss"}],"stylesData":"","templateData":"\\"\\"\\n{{ title }}\\n\\n
\\n
\\n \\"\\"\\n {{ item.value }} \\n {{ item.description }} \\n
\\n
\\n"},{"name":"ScreenSizeNoticeComponent","id":"component-ScreenSizeNoticeComponent-6b641a220201d969fb228ecf72f5e7a8fc87da742b8a53350bc9c27cea9c54a6493313826b99ec8c34dfd7004772a27748e45af5b0c9ead80bdf168a781117f8","file":"src/lib/screen-size-notice/screen-size-notice.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-screen-size-notice","styleUrls":["./screen-size-notice.component.scss"],"styles":[],"templateUrl":["./screen-size-notice.component.html"],"viewProviders":[],"inputsClass":[{"name":"content","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput for passing screen size notice content\\n","description":"

Input for passing screen size notice content

\\n","line":23,"type":"string","decorators":[]},{"name":"portal","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput of screen size notice component\\n","description":"

Input of screen size notice component

\\n","line":28,"type":"any","decorators":[]}],"outputsClass":[{"name":"proceedClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the proceed button is clicked","description":"

Emits when the proceed button is clicked

\\n","line":31,"type":"EventEmitter"}],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

The screen size notice component displays a notice for the users specifying the required screen size

\\n","rawdescription":"\\n\\nThe screen size notice component displays a notice for the users specifying the required screen size\\n","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EMPTY_LINK, LinkDirective } from \'@hra-ui/cdk\';\\n\\n/**\\n * The screen size notice component displays a notice for the users specifying the required screen size\\n */\\n@Component({\\n selector: \'hra-screen-size-notice\',\\n standalone: true,\\n imports: [CommonModule, MarkdownModule, MatButtonModule, MatIconModule, LinkDirective],\\n templateUrl: \'./screen-size-notice.component.html\',\\n styleUrls: [\'./screen-size-notice.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class ScreenSizeNoticeComponent {\\n /**\\n * Input for passing screen size notice content\\n */\\n @Input() content = \'\';\\n\\n /**\\n * Input of screen size notice component\\n */\\n @Input() portal = EMPTY_LINK;\\n\\n /** Emits when the proceed button is clicked */\\n @Output() readonly proceedClick = new EventEmitter();\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: none;\\n position: relative;\\n border-radius: 0.5rem;\\n padding: 1.5rem;\\n flex-direction: column;\\n\\n .header-close {\\n position: absolute;\\n top: 0.625rem;\\n right: 1rem;\\n }\\n\\n h3 {\\n margin: 0 0 1rem 0;\\n font-weight: 700;\\n }\\n\\n .btn-stroked {\\n font-weight: 700;\\n margin-bottom: 1rem;\\n margin-top: 1rem;\\n padding: 0.75rem 0;\\n letter-spacing: 0.5px;\\n }\\n\\n .btn-flat {\\n font-weight: 700;\\n font-size: 16px;\\n padding: 0.75rem 0;\\n letter-spacing: 0.5px;\\n color: white;\\n }\\n\\n .content {\\n font-size: 1rem;\\n line-height: 1.5rem;\\n letter-spacing: 0.5px;\\n }\\n\\n @media (max-width: 480px) {\\n display: flex;\\n }\\n}\\n","styleUrl":"./screen-size-notice.component.scss"}],"stylesData":"","templateData":"

Screen Size Notice

\\n\\n\\n\\n Human Reference Atlas Portal \\n"},{"name":"SourceListComponent","id":"component-SourceListComponent-f0d0464b044f898be3752719190f2d8ad8511283d4daafb2f8b17bd0f4dfa0290abbbeb293819664c07134fcaee5a64313aaf72d69e335a063e244c2ba1d7c0c","file":"src/lib/source-list/source-list.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-source-list","styleUrls":["./source-list.component.scss"],"styles":[],"templateUrl":["./source-list.component.html"],"viewProviders":[],"inputsClass":[{"name":"collaborateText","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput buttonon text of empty biomarker component.\\n","description":"

Input buttonon text of empty biomarker component.

\\n","line":34,"type":"string","decorators":[]},{"name":"message","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput message markdown of empty biomarker component.\\n","description":"

Input message markdown of empty biomarker component.

\\n","line":39,"type":"string","decorators":[]},{"name":"sources","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nList of sources with titles and links displayed to the user","description":"

List of sources with titles and links displayed to the user

\\n","line":30,"type":"SourceListItem[]","decorators":[]}],"outputsClass":[{"name":"collaborateClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the contact button is clicked","description":"

Emits when the contact button is clicked

\\n","line":47,"type":"EventEmitter"}],"propertiesClass":[{"name":"showTable","defaultValue":"true","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Show table of source list component which toggles to true or false\\nbased on click

\\n","line":44,"rawdescription":"\\n\\nShow table of source list component which toggles to true or false\\nbased on click\\n"}],"methodsClass":[{"name":"toggleTable","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":53,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nIt changes the value of showTable to false if value it true\\nand vice versa\\n","description":"

It changes the value of showTable to false if value it true\\nand vice versa

\\n"}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

This component shows list of sources with title and links to the datasets

\\n","rawdescription":"\\nThis component shows list of sources with title and links to the datasets","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule } from \'@angular/material/table\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EmptyBiomarkerComponent, LabelBoxComponent } from \'@hra-ui/components/atoms\';\\n\\n/** SourceListItem interface contains title and link to the dataset for the SourceList*/\\nexport interface SourceListItem {\\n /** Title of the dataset in the SourceList */\\n title: string;\\n\\n /** Label of the dataset in the SourceList */\\n label: string;\\n\\n /** Link to the dataset in the SourceList */\\n link: string;\\n}\\n\\n/** This component shows list of sources with title and links to the datasets */\\n@Component({\\n selector: \'hra-source-list\',\\n standalone: true,\\n imports: [CommonModule, MatTableModule, MatIconModule, LabelBoxComponent, EmptyBiomarkerComponent],\\n templateUrl: \'./source-list.component.html\',\\n styleUrls: [\'./source-list.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class SourceListComponent {\\n /** List of sources with titles and links displayed to the user */\\n @Input() sources: SourceListItem[] = [];\\n /**\\n * Input buttonon text of empty biomarker component.\\n */\\n @Input() collaborateText = \'\';\\n\\n /**\\n * Input message markdown of empty biomarker component.\\n */\\n @Input() message = \'\';\\n /**\\n * Show table of source list component which toggles to true or false\\n * based on click\\n */\\n showTable = true;\\n\\n /** Emits when the contact button is clicked */\\n @Output() readonly collaborateClick = new EventEmitter();\\n\\n /**\\n * It changes the value of showTable to false if value it true\\n * and vice versa\\n */\\n toggleTable(): void {\\n this.showTable = !this.showTable;\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'utils\';\\n@use \'variables\' as vars;\\n\\n:host {\\n display: block;\\n height: 100%;\\n\\n .sr-only {\\n @include utils.sr-only();\\n }\\n\\n .toggle {\\n display: flex;\\n align-items: center;\\n height: 3.5rem;\\n grid-area: source-list-header;\\n color: var(--dark-primary-text);\\n border-top: 0.063rem solid #d3d3d3;\\n border-bottom: 0.063rem solid #d3d3d3;\\n }\\n\\n .table-content {\\n height: calc(100% - 3.5rem);\\n overflow: auto;\\n\\n &.hidden {\\n display: none;\\n }\\n\\n table {\\n height: 100%;\\n }\\n\\n .mat-mdc-cell {\\n vertical-align: top;\\n border: none;\\n padding: 0.25rem 0.875rem;\\n font-size: 1rem;\\n }\\n\\n ::ng-deep .mdc-data-table__content {\\n display: block;\\n padding: 1rem 0rem;\\n }\\n }\\n}\\n","styleUrl":"./source-list.component.scss"}],"stylesData":"","templateData":"\\n Source Data\\n \\n {{ showTable ? \'keyboard_arrow_down\' : \'keyboard_arrow_up\' }}\\n \\n\\n\\n
\\n \\n \\n\\n \x3c!-- Position Column --\x3e\\n \\n \\n \\n \\n\\n \x3c!-- Data Column --\x3e\\n \\n \\n \\n \\n\\n \\n
\\n Source List Table with Title and Links\\n
Item Number{{ i + 1 }}.Title and Link\\n {{ element.title }}\\n
\\n {{ element.label }}\\n
\\n \\n
\\n"},{"name":"TissueTreeListComponent","id":"component-TissueTreeListComponent-8544338e8c5e11dd440f8b104bfa31552155bc5006289770258a8e940978177df7797adcb9bafb5b09a9943913ecf339692d528f868c6846be5c3de8a6270237","file":"src/lib/tissue-tree-list/tissue-tree-list.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-tissue-tree-list","styleUrls":["./tissue-tree-list.component.scss"],"styles":[],"templateUrl":["./tissue-tree-list.component.html"],"viewProviders":[],"inputsClass":[{"name":"nodes","defaultValue":"{} as Record","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput of tissue tree list component\\n","description":"

Input of tissue tree list component

\\n","line":69,"type":"Record","decorators":[]},{"name":"selected","defaultValue":"undefined","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nNode selected, to view the data associated with it\\n","description":"

Node selected, to view the data associated with it

\\n","line":74,"type":"T","decorators":[]}],"outputsClass":[{"name":"selectedChange","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nOutput of tissue tree list component\\n","description":"

Output of tissue tree list component

\\n","line":79,"type":"EventEmitter"}],"propertiesClass":[{"name":"control","defaultValue":"new FlatTreeControl>(\\n (node) => node.level,\\n (node) => node.expandable\\n )","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

tree controller, used to control the nodes in the tree

\\n","line":84,"rawdescription":"\\n\\ntree controller, used to control the nodes in the tree\\n","modifierKind":[144]},{"name":"dataSource","defaultValue":"new MatTreeFlatDataSource(this.control, this.flattener)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Data source of tissue tree list component, defines the data in mat-tree

\\n","line":107,"rawdescription":"\\n\\nData source of tissue tree list component, defines the data in mat-tree\\n","modifierKind":[144]},{"name":"flattener","defaultValue":"new MatTreeFlattener>(\\n (node, level) => ({\\n label: node.label,\\n expandable: (node.children?.length ?? 0) > 0,\\n level,\\n data: node,\\n }),\\n (node) => node.level,\\n (node) => node.expandable,\\n (node) => node.children?.map((id) => this.nodes[id])\\n )","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Flattener of tissue tree list component, returns flat-data structure

\\n","line":92,"rawdescription":"\\n\\nFlattener of tissue tree list component, returns flat-data structure\\n","modifierKind":[144]}],"methodsClass":[{"name":"hasChild","args":[{"name":"_","type":"number","deprecated":false,"deprecationMessage":""},{"name":"node","type":"InternalNode","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"boolean","typeParameters":[],"line":128,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\ncheck if the current node has children\\n","description":"

check if the current node has children

\\n","jsdoctags":[{"name":"_","type":"number","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}},{"name":{"pos":3422,"end":3426,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"node"},"type":"InternalNode","deprecated":false,"deprecationMessage":"","tagName":{"pos":3416,"end":3421,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":"

current selected node

\\n"},{"tagName":{"pos":3455,"end":3462,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":"

boolean, which means if node has children

\\n"}]},{"name":"resetSelection","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":146,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nResets selection and collapes all nodes of the tree.\\n","description":"

Resets selection and collapes all nodes of the tree.

\\n"},{"name":"selectNode","args":[{"name":"node","type":"T","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"void","typeParameters":[],"line":136,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nIt selects the node, which is clicked.\\n","description":"

It selects the node, which is clicked.

\\n","jsdoctags":[{"name":{"pos":3665,"end":3669,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"node"},"type":"T","deprecated":false,"deprecationMessage":"","tagName":{"pos":3659,"end":3664,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":"

Tissue Tree Item, which is clicked

\\n"}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Tabular View for hubMap tissue side-bar

\\n","rawdescription":"\\n\\nTabular View for hubMap tissue side-bar\\n","type":"component","sourceCode":"import { FlatTreeControl } from \'@angular/cdk/tree\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n Input,\\n OnChanges,\\n Output,\\n SimpleChanges,\\n} from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatRippleModule } from \'@angular/material/core\';\\nimport { MatExpansionModule } from \'@angular/material/expansion\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatTreeFlatDataSource, MatTreeFlattener, MatTreeModule } from \'@angular/material/tree\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { LinkId } from \'@hra-ui/cdk/state\';\\n\\n/** Base node type */\\nexport interface DataNode {\\n /** User readable label */\\n label: string;\\n /** Id to pass as a query parameter on navigation */\\n id?: string;\\n /** Link to navigate to on node click */\\n link?: LinkId;\\n /** Nested nodes */\\n children?: K[];\\n}\\n\\n/**\\n * Internal interface for flat tissue data hierarchy\\n */\\ninterface InternalNode> {\\n /** Displayed label */\\n label: string;\\n /** Whether the node can be expanded to display child nodes */\\n expandable: boolean;\\n /** Depth of node in the tree */\\n level: number;\\n /** Associated user node data */\\n data: T;\\n}\\n\\n/**\\n * Tabular View for hubMap tissue side-bar\\n */\\n@Component({\\n selector: \'hra-tissue-tree-list\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatButtonModule,\\n MatTreeModule,\\n MatIconModule,\\n MatExpansionModule,\\n MatRippleModule,\\n LinkDirective,\\n ],\\n templateUrl: \'./tissue-tree-list.component.html\',\\n styleUrls: [\'./tissue-tree-list.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class TissueTreeListComponent> implements OnChanges {\\n /**\\n * Input of tissue tree list component\\n */\\n @Input() nodes: Record = {} as Record;\\n\\n /**\\n * Node selected, to view the data associated with it\\n */\\n @Input() selected?: T = undefined;\\n\\n /**\\n * Output of tissue tree list component\\n */\\n @Output() readonly selectedChange = new EventEmitter();\\n\\n /**\\n * tree controller, used to control the nodes in the tree\\n */\\n readonly control = new FlatTreeControl>(\\n (node) => node.level,\\n (node) => node.expandable\\n );\\n\\n /**\\n * Flattener of tissue tree list component, returns flat-data structure\\n */\\n readonly flattener = new MatTreeFlattener>(\\n (node, level) => ({\\n label: node.label,\\n expandable: (node.children?.length ?? 0) > 0,\\n level,\\n data: node,\\n }),\\n (node) => node.level,\\n (node) => node.expandable,\\n (node) => node.children?.map((id) => this.nodes[id])\\n );\\n\\n /**\\n * Data source of tissue tree list component, defines the data in mat-tree\\n */\\n readonly dataSource = new MatTreeFlatDataSource(this.control, this.flattener);\\n\\n /**\\n * Take actions if any data changes\\n * @param changes changes in data\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'nodes\' in changes) {\\n this.dataSource.data = this.findRootNodes();\\n }\\n if (\'selected\' in changes) {\\n const path = this.selected ? this.dfsFindPath(this.findRootNodes(), this.selected) : [];\\n this.expandPath(path);\\n }\\n }\\n\\n /**\\n * check if the current node has children\\n * @param node current selected node\\n * @returns boolean, which means if node has children\\n */\\n hasChild(_: number, node: InternalNode): boolean {\\n return node.expandable;\\n }\\n\\n /**\\n * It selects the node, which is clicked.\\n * @param node Tissue Tree Item, which is clicked\\n */\\n selectNode(node: T): void {\\n if (this.selected !== node) {\\n this.selected = node;\\n this.selectedChange.emit(this.selected);\\n }\\n }\\n\\n /**\\n * Resets selection and collapes all nodes of the tree.\\n */\\n resetSelection(): void {\\n this.selected = undefined;\\n this.control.collapseAll();\\n }\\n\\n /**\\n * It creates a copy of the input nodes object.\\n * It iterates over it and removes all the children nodes from it.\\n * @returns remaining nodes which are root nodes.\\n */\\n private findRootNodes(): T[] {\\n const { nodes } = this;\\n const roots = { ...this.nodes };\\n for (const key in nodes) {\\n for (const child of nodes[key].children ?? []) {\\n delete roots[child];\\n }\\n }\\n\\n return Object.values(roots);\\n }\\n\\n /**\\n * expands the tree nodes based on the path provided.\\n * @param path is given as an input.\\n */\\n private expandPath(path: DataNode[]): void {\\n const nodes = this.control.dataNodes.filter((node) => path.includes(node.data));\\n nodes.forEach((node) => this.control.expand(node));\\n }\\n\\n /**\\n * It used the logic of depth first search to find the target node.\\n * returns the path to the target node.\\n */\\n private dfsFindPath(nodes: T[], target: T, path: T[] = []): T[] {\\n for (const node of nodes) {\\n path.push(node);\\n if (node === target) {\\n return path;\\n }\\n\\n const savedLength = path.length;\\n const children = node.children?.map((id) => this.nodes[id]) ?? [];\\n if (this.dfsFindPath(children, target, path).length > savedLength) {\\n return path;\\n }\\n\\n path.pop();\\n }\\n\\n return path;\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n display: block;\\n height: calc(100% - 5rem);\\n overflow-y: auto;\\n .row {\\n min-height: 2rem;\\n &.child {\\n padding: 5px 0 5px 64px;\\n }\\n &.selected {\\n background-color: vars.$accent-lighter-rgb;\\n }\\n\\n .toggle {\\n width: 2rem;\\n height: 2rem;\\n padding: 0.25rem;\\n }\\n\\n .label-container {\\n display: flex;\\n align-items: center;\\n height: 2rem;\\n padding: 0 1rem;\\n border-radius: 0.25rem;\\n\\n .link {\\n cursor: pointer;\\n text-decoration: none;\\n color: rgba(vars.$dark-primary-text);\\n }\\n }\\n\\n &.selected .label-container .link {\\n color: vars.$accent-rgb;\\n }\\n }\\n}\\n","styleUrl":"./tissue-tree-list.component.scss"}],"stylesData":"","implements":["OnChanges"],"templateData":"\\n \\n \\n \\n\\n \\n \\n\\n \\n \\n\\n\\n\\n
\\n \\n {{ label }}\\n \\n \\n {{ label }}\\n \\n
\\n\\n"},{"name":"TitleCardComponent","id":"component-TitleCardComponent-dda33e0370aff82797f5b3494c98b25f59e8b87daefd03e828cec8116928222c19885f73255625acfce7c66d590784fd1ad8faa664dac65130f8119fc2670670","file":"src/lib/title-card/title-card.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-title-card","styleUrls":["./title-card.component.scss"],"styles":[],"templateUrl":["./title-card.component.html"],"viewProviders":[],"inputsClass":[{"name":"description","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nDescription for the title card shown to the user","description":"

Description for the title card shown to the user

\\n","line":19,"type":"string","decorators":[]},{"name":"title","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nTitle for the title card shown to the user","description":"

Title for the title card shown to the user

\\n","line":16,"type":"string","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Displays title card to the user with title and description

\\n","rawdescription":"\\nDisplays title card to the user with title and description","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/** Displays title card to the user with title and description */\\n@Component({\\n selector: \'hra-title-card\',\\n standalone: true,\\n imports: [CommonModule, MarkdownModule],\\n templateUrl: \'./title-card.component.html\',\\n styleUrls: [\'./title-card.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class TitleCardComponent {\\n /** Title for the title card shown to the user*/\\n @Input() title = \'\';\\n\\n /** Description for the title card shown to the user*/\\n @Input() description = \'\';\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n\\n .title {\\n margin-bottom: 0.5rem;\\n }\\n}\\n","styleUrl":"./title-card.component.scss"}],"stylesData":"","templateData":"

{{ title }}

\\n\\n"}],"modules":[],"miscellaneous":{"variables":[{"name":"DOWNLOADS_LIST_POSITION","ctype":"miscellaneous","subtype":"variable","file":"src/lib/footer/footer.component.ts","deprecated":false,"deprecationMessage":"","type":"ConnectedPosition[]","defaultValue":"[\\n {\\n panelClass: \'above\',\\n originX: \'start\',\\n originY: \'top\',\\n overlayX: \'start\',\\n overlayY: \'bottom\',\\n offsetY: 0,\\n },\\n {\\n panelClass: \'below\',\\n originX: \'start\',\\n originY: \'bottom\',\\n overlayX: \'start\',\\n overlayY: \'top\',\\n },\\n]","rawdescription":"Positioning value for the download list popup","description":"

Positioning value for the download list popup

\\n"},{"name":"EMPTY_CONTACT_DATA","ctype":"miscellaneous","subtype":"variable","file":"src/lib/contact-modal/contact-modal.component.ts","deprecated":false,"deprecationMessage":"","type":"Partial","defaultValue":"{\\n email: undefined,\\n subject: undefined,\\n message: undefined,\\n}","rawdescription":"Initial empty contact data","description":"

Initial empty contact data

\\n"},{"name":"HOVER_DELAY","ctype":"miscellaneous","subtype":"variable","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"number","defaultValue":"200","rawdescription":"Delay before tooltip becomes visible","description":"

Delay before tooltip becomes visible

\\n"},{"name":"TOOLTIP_POSITIONS","ctype":"miscellaneous","subtype":"variable","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"ConnectedPosition[]","defaultValue":"[\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'start\',\\n overlayY: \'center\',\\n offsetX: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'end\',\\n overlayY: \'center\',\\n offsetX: -8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'top\',\\n offsetY: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'bottom\',\\n offsetY: -8,\\n },\\n]","rawdescription":"Tooltip position settings","description":"

Tooltip position settings

\\n"}],"functions":[],"typealiases":[],"enumerations":[],"groupedVariables":{"src/lib/footer/footer.component.ts":[{"name":"DOWNLOADS_LIST_POSITION","ctype":"miscellaneous","subtype":"variable","file":"src/lib/footer/footer.component.ts","deprecated":false,"deprecationMessage":"","type":"ConnectedPosition[]","defaultValue":"[\\n {\\n panelClass: \'above\',\\n originX: \'start\',\\n originY: \'top\',\\n overlayX: \'start\',\\n overlayY: \'bottom\',\\n offsetY: 0,\\n },\\n {\\n panelClass: \'below\',\\n originX: \'start\',\\n originY: \'bottom\',\\n overlayX: \'start\',\\n overlayY: \'top\',\\n },\\n]","rawdescription":"Positioning value for the download list popup","description":"

Positioning value for the download list popup

\\n"}],"src/lib/contact-modal/contact-modal.component.ts":[{"name":"EMPTY_CONTACT_DATA","ctype":"miscellaneous","subtype":"variable","file":"src/lib/contact-modal/contact-modal.component.ts","deprecated":false,"deprecationMessage":"","type":"Partial","defaultValue":"{\\n email: undefined,\\n subject: undefined,\\n message: undefined,\\n}","rawdescription":"Initial empty contact data","description":"

Initial empty contact data

\\n"}],"src/lib/interactive-svg/interactive-svg.component.ts":[{"name":"HOVER_DELAY","ctype":"miscellaneous","subtype":"variable","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"number","defaultValue":"200","rawdescription":"Delay before tooltip becomes visible","description":"

Delay before tooltip becomes visible

\\n"},{"name":"TOOLTIP_POSITIONS","ctype":"miscellaneous","subtype":"variable","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"ConnectedPosition[]","defaultValue":"[\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'start\',\\n overlayY: \'center\',\\n offsetX: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'end\',\\n overlayY: \'center\',\\n offsetX: -8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'top\',\\n offsetY: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'bottom\',\\n offsetY: -8,\\n },\\n]","rawdescription":"Tooltip position settings","description":"

Tooltip position settings

\\n"}]},"groupedFunctions":{},"groupedEnumerations":{},"groupedTypeAliases":{}}}')},"./dist/compodoc/components-organisms/documentation.json":module=>{"use strict";module.exports=JSON.parse('{"pipes":[],"interfaces":[{"name":"DataCell","id":"interface-DataCell-1a11b32dee89b55746dd02d393406aa7ea06e3d180099074510a109749d06241410786b045f3a9d570f4479be6442014b194d68f340724b0e76b4b0983b59760","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule, MatTableDataSource } from \'@angular/material/table\';\\nimport {\\n BiomarkerTableDataCardComponent,\\n BiomarkerTableDataIconComponent,\\n DataItem,\\n} from \'@hra-ui/components/molecules\';\\nimport { HoverDirective } from \'@hra-ui/cdk\';\\nimport { GradientPoint, SizeLegend } from \'@hra-ui/components/atoms\';\\n\\n/**\\n * RGBTriblet of type RGB to store color\\n */\\ntype RGBTriplet = [number, number, number];\\n\\n/**\\n * An interface representing a single cell of the table.\\n */\\nexport interface DataCell {\\n /** Represents the color of the icon */\\n color: string;\\n /** Represents the size of the icon */\\n size: number;\\n /** Represents the data for the data card */\\n data: {\\n cell: string;\\n biomarker: string;\\n meanExpression: number;\\n /** Number of datasets for this Tissue */\\n dataset_count: number;\\n };\\n}\\n\\n/**\\n * Details of the Tissue\\n */\\nexport interface TissueInfo {\\n /** ID of the Tissue */\\n id: string;\\n /** Name of the Tissue */\\n label: string;\\n}\\n\\n/** Describes the composition of a single row in the table */\\nexport type DataRow = [string, number | undefined, ...(T | undefined)[]];\\n\\n/** Cell types table, describing the types and quanitites of cells for a specific organ */\\n@Component({\\n selector: \'hra-biomarker-table\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatTableModule,\\n BiomarkerTableDataIconComponent,\\n HoverDirective,\\n BiomarkerTableDataCardComponent,\\n ],\\n templateUrl: \'./biomarker-table.component.html\',\\n styleUrls: [\'./biomarker-table.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableComponent implements OnChanges {\\n /**\\n * Input: TissueInfo carrying the details of the tissue open\\n */\\n @Input() tissueInfo: TissueInfo = {\\n id: \'\',\\n label: \'\',\\n };\\n\\n /** Columns for the table */\\n @Input() columns: string[] = [];\\n\\n /** Rows of the table */\\n @Input() data: DataRow[] = [];\\n\\n /** Gradient colors along with their stop points */\\n @Input() gradient: GradientPoint[] = [];\\n\\n /** Taking input for the radius of the circle and the label to be displayed. */\\n @Input() sizes: SizeLegend[] = [];\\n\\n /**Cell name which is hovered, used for highlighting */\\n @Input() hightlightedCellName = \'\';\\n\\n /** Getter method to provide the definations of the columns */\\n get columnsWithTypeAndCount(): string[] {\\n return [\'type\', \'count\', ...this.columns];\\n }\\n\\n /** Source for the table */\\n readonly dataSource = new MatTableDataSource>([]);\\n\\n /**\\n * sets the data source for the table on every change\\n * @param changes object consisting of change in the Input\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.dataSource.data = this.data;\\n }\\n }\\n\\n /** Lerp function to give value beween min and max value based on the given value\\n *\\n * @param value\\n * @param min\\n * @param max\\n * @returns\\n */\\n lerp(value: number, min: number, max: number): number {\\n return min * (1 - value) + max * value;\\n }\\n\\n /**\\n * Converts HexCode to RGB\\n * @param hex\\n * @returns\\n */\\n hex2rgb(hex: string): RGBTriplet {\\n const r = parseInt(hex.slice(1, 3), 16);\\n const g = parseInt(hex.slice(3, 5), 16);\\n const b = parseInt(hex.slice(5, 7), 16);\\n return [r, g, b];\\n }\\n\\n /**\\n * Gets Min and Max color grade based on the meanExpression value\\n * @param meanExpression\\n * @returns\\n */\\n getMinMaxColor(meanExpression: number): { minColor: RGBTriplet; maxColor: RGBTriplet } {\\n const index = this.gradient.findIndex((item, i, arr) => {\\n return meanExpression >= item.percentage && meanExpression <= arr[i + 1]?.percentage;\\n });\\n\\n const minColor: RGBTriplet = this.hex2rgb(this.gradient[index]?.color ?? this.gradient[0].color);\\n const maxColor: RGBTriplet = this.hex2rgb(\\n this.gradient[index + 1]?.color ?? this.gradient[this.gradient.length - 1].color\\n );\\n\\n return { minColor, maxColor };\\n }\\n\\n /**\\n * Gets Min and Max size grade based on the Percentage value\\n * @param percentage\\n * @returns\\n */\\n getMinMaxSize(percentage: number): { minSize: number; maxSize: number } {\\n const index = this.sizes.findIndex((item, i, arr) => {\\n return percentage >= parseFloat(item.label) / 100 && percentage <= parseFloat(arr[i + 1]?.label) / 100;\\n });\\n const minSize: number = this.sizes[index]?.radius ?? this.sizes[0].radius;\\n const maxSize: number = this.sizes[index + 1]?.radius ?? this.sizes[this.sizes.length - 1].radius;\\n return { minSize, maxSize };\\n }\\n\\n /**\\n * Calculates the color of this value on this gradient\\n * @param value\\n * @returns\\n */\\n getColor(value: number): string {\\n const { minColor, maxColor } = this.getMinMaxColor(value);\\n return (\\n \'#\' +\\n minColor\\n .map((min, index) => this.lerp(value, min, maxColor[index]))\\n .map((component) => Math.round(component).toString(16))\\n .join(\'\')\\n );\\n }\\n\\n /**\\n * gets Size of the Cell based on the percentage value\\n * @param value\\n * @returns\\n */\\n getSize(value: number): number {\\n const { minSize, maxSize } = this.getMinMaxSize(value);\\n return this.lerp(value, minSize, maxSize);\\n }\\n\\n /**\\n * rocesses the object for hover data for Table Cell\\n * @param index index of the row of the datasource\\n * @param row row of the datasource\\n * @returns\\n */\\n getHoverData([index, row]: [number, DataRow]): DataItem[][] {\\n if (row[index] === undefined) {\\n return [];\\n }\\n\\n const {\\n tissueInfo: { id, label },\\n } = this;\\n const {\\n data: { cell, biomarker, meanExpression, dataset_count },\\n } = row[index] as T;\\n\\n return [\\n [\\n { label: \'Functional Tissue Unit Name\', value: label },\\n { label: \'Uberon ID\', value: id },\\n { label: \'#Datasets\', value: `${dataset_count ?? 0}` },\\n ],\\n [\\n { label: \'Cell Type Name\', value: row[0] },\\n { label: \'CL ID\', value: cell },\\n { label: \'Number of Cells\', value: `${row[1]}` },\\n ],\\n [\\n { label: \'Gene Name\', value: this.columns[index - 2] },\\n { label: \'HGNC ID\', value: biomarker },\\n { label: \'Mean Expression Value\', value: meanExpression.toFixed(6) },\\n ],\\n ];\\n }\\n}\\n","properties":[{"name":"color","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Represents the color of the icon

\\n","line":22,"rawdescription":"\\nRepresents the color of the icon"},{"name":"data","deprecated":false,"deprecationMessage":"","type":"literal type","optional":false,"description":"

Represents the data for the data card

\\n","line":26,"rawdescription":"\\nRepresents the data for the data card"},{"name":"size","deprecated":false,"deprecationMessage":"","type":"number","optional":false,"description":"

Represents the size of the icon

\\n","line":24,"rawdescription":"\\nRepresents the size of the icon"}],"indexSignatures":[],"kind":165,"description":"

An interface representing a single cell of the table.

\\n","rawdescription":"\\n\\nAn interface representing a single cell of the table.\\n","methods":[]},{"name":"TissueInfo","id":"interface-TissueInfo-1a11b32dee89b55746dd02d393406aa7ea06e3d180099074510a109749d06241410786b045f3a9d570f4479be6442014b194d68f340724b0e76b4b0983b59760","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule, MatTableDataSource } from \'@angular/material/table\';\\nimport {\\n BiomarkerTableDataCardComponent,\\n BiomarkerTableDataIconComponent,\\n DataItem,\\n} from \'@hra-ui/components/molecules\';\\nimport { HoverDirective } from \'@hra-ui/cdk\';\\nimport { GradientPoint, SizeLegend } from \'@hra-ui/components/atoms\';\\n\\n/**\\n * RGBTriblet of type RGB to store color\\n */\\ntype RGBTriplet = [number, number, number];\\n\\n/**\\n * An interface representing a single cell of the table.\\n */\\nexport interface DataCell {\\n /** Represents the color of the icon */\\n color: string;\\n /** Represents the size of the icon */\\n size: number;\\n /** Represents the data for the data card */\\n data: {\\n cell: string;\\n biomarker: string;\\n meanExpression: number;\\n /** Number of datasets for this Tissue */\\n dataset_count: number;\\n };\\n}\\n\\n/**\\n * Details of the Tissue\\n */\\nexport interface TissueInfo {\\n /** ID of the Tissue */\\n id: string;\\n /** Name of the Tissue */\\n label: string;\\n}\\n\\n/** Describes the composition of a single row in the table */\\nexport type DataRow = [string, number | undefined, ...(T | undefined)[]];\\n\\n/** Cell types table, describing the types and quanitites of cells for a specific organ */\\n@Component({\\n selector: \'hra-biomarker-table\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatTableModule,\\n BiomarkerTableDataIconComponent,\\n HoverDirective,\\n BiomarkerTableDataCardComponent,\\n ],\\n templateUrl: \'./biomarker-table.component.html\',\\n styleUrls: [\'./biomarker-table.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableComponent implements OnChanges {\\n /**\\n * Input: TissueInfo carrying the details of the tissue open\\n */\\n @Input() tissueInfo: TissueInfo = {\\n id: \'\',\\n label: \'\',\\n };\\n\\n /** Columns for the table */\\n @Input() columns: string[] = [];\\n\\n /** Rows of the table */\\n @Input() data: DataRow[] = [];\\n\\n /** Gradient colors along with their stop points */\\n @Input() gradient: GradientPoint[] = [];\\n\\n /** Taking input for the radius of the circle and the label to be displayed. */\\n @Input() sizes: SizeLegend[] = [];\\n\\n /**Cell name which is hovered, used for highlighting */\\n @Input() hightlightedCellName = \'\';\\n\\n /** Getter method to provide the definations of the columns */\\n get columnsWithTypeAndCount(): string[] {\\n return [\'type\', \'count\', ...this.columns];\\n }\\n\\n /** Source for the table */\\n readonly dataSource = new MatTableDataSource>([]);\\n\\n /**\\n * sets the data source for the table on every change\\n * @param changes object consisting of change in the Input\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.dataSource.data = this.data;\\n }\\n }\\n\\n /** Lerp function to give value beween min and max value based on the given value\\n *\\n * @param value\\n * @param min\\n * @param max\\n * @returns\\n */\\n lerp(value: number, min: number, max: number): number {\\n return min * (1 - value) + max * value;\\n }\\n\\n /**\\n * Converts HexCode to RGB\\n * @param hex\\n * @returns\\n */\\n hex2rgb(hex: string): RGBTriplet {\\n const r = parseInt(hex.slice(1, 3), 16);\\n const g = parseInt(hex.slice(3, 5), 16);\\n const b = parseInt(hex.slice(5, 7), 16);\\n return [r, g, b];\\n }\\n\\n /**\\n * Gets Min and Max color grade based on the meanExpression value\\n * @param meanExpression\\n * @returns\\n */\\n getMinMaxColor(meanExpression: number): { minColor: RGBTriplet; maxColor: RGBTriplet } {\\n const index = this.gradient.findIndex((item, i, arr) => {\\n return meanExpression >= item.percentage && meanExpression <= arr[i + 1]?.percentage;\\n });\\n\\n const minColor: RGBTriplet = this.hex2rgb(this.gradient[index]?.color ?? this.gradient[0].color);\\n const maxColor: RGBTriplet = this.hex2rgb(\\n this.gradient[index + 1]?.color ?? this.gradient[this.gradient.length - 1].color\\n );\\n\\n return { minColor, maxColor };\\n }\\n\\n /**\\n * Gets Min and Max size grade based on the Percentage value\\n * @param percentage\\n * @returns\\n */\\n getMinMaxSize(percentage: number): { minSize: number; maxSize: number } {\\n const index = this.sizes.findIndex((item, i, arr) => {\\n return percentage >= parseFloat(item.label) / 100 && percentage <= parseFloat(arr[i + 1]?.label) / 100;\\n });\\n const minSize: number = this.sizes[index]?.radius ?? this.sizes[0].radius;\\n const maxSize: number = this.sizes[index + 1]?.radius ?? this.sizes[this.sizes.length - 1].radius;\\n return { minSize, maxSize };\\n }\\n\\n /**\\n * Calculates the color of this value on this gradient\\n * @param value\\n * @returns\\n */\\n getColor(value: number): string {\\n const { minColor, maxColor } = this.getMinMaxColor(value);\\n return (\\n \'#\' +\\n minColor\\n .map((min, index) => this.lerp(value, min, maxColor[index]))\\n .map((component) => Math.round(component).toString(16))\\n .join(\'\')\\n );\\n }\\n\\n /**\\n * gets Size of the Cell based on the percentage value\\n * @param value\\n * @returns\\n */\\n getSize(value: number): number {\\n const { minSize, maxSize } = this.getMinMaxSize(value);\\n return this.lerp(value, minSize, maxSize);\\n }\\n\\n /**\\n * rocesses the object for hover data for Table Cell\\n * @param index index of the row of the datasource\\n * @param row row of the datasource\\n * @returns\\n */\\n getHoverData([index, row]: [number, DataRow]): DataItem[][] {\\n if (row[index] === undefined) {\\n return [];\\n }\\n\\n const {\\n tissueInfo: { id, label },\\n } = this;\\n const {\\n data: { cell, biomarker, meanExpression, dataset_count },\\n } = row[index] as T;\\n\\n return [\\n [\\n { label: \'Functional Tissue Unit Name\', value: label },\\n { label: \'Uberon ID\', value: id },\\n { label: \'#Datasets\', value: `${dataset_count ?? 0}` },\\n ],\\n [\\n { label: \'Cell Type Name\', value: row[0] },\\n { label: \'CL ID\', value: cell },\\n { label: \'Number of Cells\', value: `${row[1]}` },\\n ],\\n [\\n { label: \'Gene Name\', value: this.columns[index - 2] },\\n { label: \'HGNC ID\', value: biomarker },\\n { label: \'Mean Expression Value\', value: meanExpression.toFixed(6) },\\n ],\\n ];\\n }\\n}\\n","properties":[{"name":"id","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

ID of the Tissue

\\n","line":40,"rawdescription":"\\nID of the Tissue"},{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Name of the Tissue

\\n","line":42,"rawdescription":"\\nName of the Tissue"}],"indexSignatures":[],"kind":165,"description":"

Details of the Tissue

\\n","rawdescription":"\\n\\nDetails of the Tissue\\n","methods":[]}],"injectables":[],"guards":[],"interceptors":[],"classes":[],"directives":[],"components":[{"name":"BiomarkerTableComponent","id":"component-BiomarkerTableComponent-1a11b32dee89b55746dd02d393406aa7ea06e3d180099074510a109749d06241410786b045f3a9d570f4479be6442014b194d68f340724b0e76b4b0983b59760","file":"src/lib/biomarker-table/biomarker-table.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-biomarker-table","styleUrls":["./biomarker-table.component.scss"],"styles":[],"templateUrl":["./biomarker-table.component.html"],"viewProviders":[],"inputsClass":[{"name":"columns","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nColumns for the table","description":"

Columns for the table

\\n","line":73,"type":"string[]","decorators":[]},{"name":"data","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nRows of the table","description":"

Rows of the table

\\n","line":76,"type":"DataRow[]","decorators":[]},{"name":"gradient","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nGradient colors along with their stop points","description":"

Gradient colors along with their stop points

\\n","line":79,"type":"GradientPoint[]","decorators":[]},{"name":"hightlightedCellName","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nCell name which is hovered, used for highlighting","description":"

Cell name which is hovered, used for highlighting

\\n","line":85,"type":"string","decorators":[]},{"name":"sizes","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nTaking input for the radius of the circle and the label to be displayed.","description":"

Taking input for the radius of the circle and the label to be displayed.

\\n","line":82,"type":"SizeLegend[]","decorators":[]},{"name":"tissueInfo","defaultValue":"{\\n id: \'\',\\n label: \'\',\\n }","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput: TissueInfo carrying the details of the tissue open\\n","description":"

Input: TissueInfo carrying the details of the tissue open

\\n","line":67,"type":"TissueInfo","decorators":[]}],"outputsClass":[],"propertiesClass":[{"name":"dataSource","defaultValue":"new MatTableDataSource>([])","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Source for the table

\\n","line":93,"rawdescription":"\\nSource for the table","modifierKind":[144]}],"methodsClass":[{"name":"getColor","args":[{"name":"value","type":"number","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"string","typeParameters":[],"line":165,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nCalculates the color of this value on this gradient\\n","description":"

Calculates the color of this value on this gradient

\\n","jsdoctags":[{"name":{"pos":4778,"end":4783,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"value"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":4772,"end":4777,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":4790,"end":4797,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"getHoverData","args":[{"type":"[number, DataRow]","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"[][]","typeParameters":[],"line":192,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nrocesses the object for hover data for Table Cell\\n","description":"

rocesses the object for hover data for Table Cell

\\n","jsdoctags":[{"type":"[number, DataRow]","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}},{"tagName":{"pos":5512,"end":5519,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"getMinMaxColor","args":[{"name":"meanExpression","type":"number","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"literal type","typeParameters":[],"line":133,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nGets Min and Max color grade based on the meanExpression value\\n","description":"

Gets Min and Max color grade based on the meanExpression value

\\n","jsdoctags":[{"name":{"pos":3545,"end":3559,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"meanExpression"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":3539,"end":3544,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":3566,"end":3573,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"getMinMaxSize","args":[{"name":"percentage","type":"number","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"literal type","typeParameters":[],"line":151,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nGets Min and Max size grade based on the Percentage value\\n","description":"

Gets Min and Max size grade based on the Percentage value

\\n","jsdoctags":[{"name":{"pos":4199,"end":4209,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"percentage"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":4193,"end":4198,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":4216,"end":4223,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"getSize","args":[{"name":"value","type":"number","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"number","typeParameters":[],"line":181,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\ngets Size of the Cell based on the percentage value\\n","description":"

gets Size of the Cell based on the percentage value

\\n","jsdoctags":[{"name":{"pos":5181,"end":5186,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"value"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":5175,"end":5180,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":5193,"end":5200,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"hex2rgb","args":[{"name":"hex","type":"string","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"RGBTriplet","typeParameters":[],"line":121,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nConverts HexCode to RGB\\n","description":"

Converts HexCode to RGB

\\n","jsdoctags":[{"name":{"pos":3236,"end":3239,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"hex"},"type":"string","deprecated":false,"deprecationMessage":"","tagName":{"pos":3230,"end":3235,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":3246,"end":3253,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"lerp","args":[{"name":"value","type":"number","deprecated":false,"deprecationMessage":""},{"name":"min","type":"number","deprecated":false,"deprecationMessage":""},{"name":"max","type":"number","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"number","typeParameters":[],"line":112,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nLerp function to give value beween min and max value based on the given value\\n\\n","description":"

Lerp function to give value beween min and max value based on the given value

\\n","jsdoctags":[{"name":{"pos":3024,"end":3029,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"value"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":3018,"end":3023,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"name":{"pos":3042,"end":3045,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"min"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":3036,"end":3041,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"name":{"pos":3058,"end":3061,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"max"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":3052,"end":3057,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":3068,"end":3075,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Cell types table, describing the types and quanitites of cells for a specific organ

\\n","rawdescription":"\\nCell types table, describing the types and quanitites of cells for a specific organ","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule, MatTableDataSource } from \'@angular/material/table\';\\nimport {\\n BiomarkerTableDataCardComponent,\\n BiomarkerTableDataIconComponent,\\n DataItem,\\n} from \'@hra-ui/components/molecules\';\\nimport { HoverDirective } from \'@hra-ui/cdk\';\\nimport { GradientPoint, SizeLegend } from \'@hra-ui/components/atoms\';\\n\\n/**\\n * RGBTriblet of type RGB to store color\\n */\\ntype RGBTriplet = [number, number, number];\\n\\n/**\\n * An interface representing a single cell of the table.\\n */\\nexport interface DataCell {\\n /** Represents the color of the icon */\\n color: string;\\n /** Represents the size of the icon */\\n size: number;\\n /** Represents the data for the data card */\\n data: {\\n cell: string;\\n biomarker: string;\\n meanExpression: number;\\n /** Number of datasets for this Tissue */\\n dataset_count: number;\\n };\\n}\\n\\n/**\\n * Details of the Tissue\\n */\\nexport interface TissueInfo {\\n /** ID of the Tissue */\\n id: string;\\n /** Name of the Tissue */\\n label: string;\\n}\\n\\n/** Describes the composition of a single row in the table */\\nexport type DataRow = [string, number | undefined, ...(T | undefined)[]];\\n\\n/** Cell types table, describing the types and quanitites of cells for a specific organ */\\n@Component({\\n selector: \'hra-biomarker-table\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatTableModule,\\n BiomarkerTableDataIconComponent,\\n HoverDirective,\\n BiomarkerTableDataCardComponent,\\n ],\\n templateUrl: \'./biomarker-table.component.html\',\\n styleUrls: [\'./biomarker-table.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableComponent implements OnChanges {\\n /**\\n * Input: TissueInfo carrying the details of the tissue open\\n */\\n @Input() tissueInfo: TissueInfo = {\\n id: \'\',\\n label: \'\',\\n };\\n\\n /** Columns for the table */\\n @Input() columns: string[] = [];\\n\\n /** Rows of the table */\\n @Input() data: DataRow[] = [];\\n\\n /** Gradient colors along with their stop points */\\n @Input() gradient: GradientPoint[] = [];\\n\\n /** Taking input for the radius of the circle and the label to be displayed. */\\n @Input() sizes: SizeLegend[] = [];\\n\\n /**Cell name which is hovered, used for highlighting */\\n @Input() hightlightedCellName = \'\';\\n\\n /** Getter method to provide the definations of the columns */\\n get columnsWithTypeAndCount(): string[] {\\n return [\'type\', \'count\', ...this.columns];\\n }\\n\\n /** Source for the table */\\n readonly dataSource = new MatTableDataSource>([]);\\n\\n /**\\n * sets the data source for the table on every change\\n * @param changes object consisting of change in the Input\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.dataSource.data = this.data;\\n }\\n }\\n\\n /** Lerp function to give value beween min and max value based on the given value\\n *\\n * @param value\\n * @param min\\n * @param max\\n * @returns\\n */\\n lerp(value: number, min: number, max: number): number {\\n return min * (1 - value) + max * value;\\n }\\n\\n /**\\n * Converts HexCode to RGB\\n * @param hex\\n * @returns\\n */\\n hex2rgb(hex: string): RGBTriplet {\\n const r = parseInt(hex.slice(1, 3), 16);\\n const g = parseInt(hex.slice(3, 5), 16);\\n const b = parseInt(hex.slice(5, 7), 16);\\n return [r, g, b];\\n }\\n\\n /**\\n * Gets Min and Max color grade based on the meanExpression value\\n * @param meanExpression\\n * @returns\\n */\\n getMinMaxColor(meanExpression: number): { minColor: RGBTriplet; maxColor: RGBTriplet } {\\n const index = this.gradient.findIndex((item, i, arr) => {\\n return meanExpression >= item.percentage && meanExpression <= arr[i + 1]?.percentage;\\n });\\n\\n const minColor: RGBTriplet = this.hex2rgb(this.gradient[index]?.color ?? this.gradient[0].color);\\n const maxColor: RGBTriplet = this.hex2rgb(\\n this.gradient[index + 1]?.color ?? this.gradient[this.gradient.length - 1].color\\n );\\n\\n return { minColor, maxColor };\\n }\\n\\n /**\\n * Gets Min and Max size grade based on the Percentage value\\n * @param percentage\\n * @returns\\n */\\n getMinMaxSize(percentage: number): { minSize: number; maxSize: number } {\\n const index = this.sizes.findIndex((item, i, arr) => {\\n return percentage >= parseFloat(item.label) / 100 && percentage <= parseFloat(arr[i + 1]?.label) / 100;\\n });\\n const minSize: number = this.sizes[index]?.radius ?? this.sizes[0].radius;\\n const maxSize: number = this.sizes[index + 1]?.radius ?? this.sizes[this.sizes.length - 1].radius;\\n return { minSize, maxSize };\\n }\\n\\n /**\\n * Calculates the color of this value on this gradient\\n * @param value\\n * @returns\\n */\\n getColor(value: number): string {\\n const { minColor, maxColor } = this.getMinMaxColor(value);\\n return (\\n \'#\' +\\n minColor\\n .map((min, index) => this.lerp(value, min, maxColor[index]))\\n .map((component) => Math.round(component).toString(16))\\n .join(\'\')\\n );\\n }\\n\\n /**\\n * gets Size of the Cell based on the percentage value\\n * @param value\\n * @returns\\n */\\n getSize(value: number): number {\\n const { minSize, maxSize } = this.getMinMaxSize(value);\\n return this.lerp(value, minSize, maxSize);\\n }\\n\\n /**\\n * rocesses the object for hover data for Table Cell\\n * @param index index of the row of the datasource\\n * @param row row of the datasource\\n * @returns\\n */\\n getHoverData([index, row]: [number, DataRow]): DataItem[][] {\\n if (row[index] === undefined) {\\n return [];\\n }\\n\\n const {\\n tissueInfo: { id, label },\\n } = this;\\n const {\\n data: { cell, biomarker, meanExpression, dataset_count },\\n } = row[index] as T;\\n\\n return [\\n [\\n { label: \'Functional Tissue Unit Name\', value: label },\\n { label: \'Uberon ID\', value: id },\\n { label: \'#Datasets\', value: `${dataset_count ?? 0}` },\\n ],\\n [\\n { label: \'Cell Type Name\', value: row[0] },\\n { label: \'CL ID\', value: cell },\\n { label: \'Number of Cells\', value: `${row[1]}` },\\n ],\\n [\\n { label: \'Gene Name\', value: this.columns[index - 2] },\\n { label: \'HGNC ID\', value: biomarker },\\n { label: \'Mean Expression Value\', value: meanExpression.toFixed(6) },\\n ],\\n ];\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'utils\';\\n@use \'variables\' as vars;\\n\\n:host {\\n display: block;\\n\\n .sr-only {\\n @include utils.sr-only();\\n }\\n\\n .table {\\n margin-left: -1px;\\n\\n .highlight {\\n background-color: #f8f9fa;\\n }\\n td.type {\\n text-transform: lowercase;\\n }\\n }\\n\\n .table th {\\n background-color: #fff7f8;\\n color: #59264d;\\n text-align: right;\\n }\\n\\n .table td {\\n border-bottom: 0.063rem solid #d3d3d3;\\n border-left: 0.063rem solid #d3d3d3;\\n }\\n\\n .table tr:first-child td {\\n border-top: 0rem solid #d3d3d3;\\n }\\n\\n tr > td:first-child {\\n text-align: left;\\n padding: 0 2rem;\\n }\\n\\n tr > th:first-child {\\n text-align: left;\\n padding: 0 2rem;\\n }\\n\\n tr > td:last-of-type {\\n border-right: 0.063rem solid #d3d3d3;\\n }\\n\\n tr > th:last-of-type {\\n border-right: 0.063rem solid #d3d3d3;\\n border-left: solid #d3d3d3 1px;\\n }\\n\\n .type {\\n height: 3rem;\\n max-width: 26rem;\\n min-width: 17rem;\\n border-radius: 0rem;\\n white-space: nowrap;\\n }\\n\\n .count {\\n text-align: right;\\n height: 3rem;\\n min-width: 6.5rem;\\n }\\n\\n .count:not(:first-child) {\\n border-left: solid #d3d3d3 1px;\\n }\\n\\n .icon-header {\\n max-width: 5rem;\\n white-space: nowrap;\\n overflow: hidden;\\n text-overflow: ellipsis;\\n }\\n\\n .icon-cell {\\n max-width: 5rem;\\n min-height: 3rem;\\n\\n .icon {\\n margin: auto;\\n }\\n }\\n}\\n\\n::ng-deep .mat-mdc-tab-header {\\n margin-left: -1px !important;\\n}\\n\\n::ng-deep .biomarker-table-hover.full-column-name {\\n display: flex;\\n padding: 1rem 1.5rem;\\n border-radius: 0.5rem;\\n box-shadow: 0.063rem 0.125rem 1rem 0.125rem rgba(0, 0, 0, 0.16);\\n background-color: vars.$primary-contrast-rgb;\\n overflow: auto;\\n max-width: fit-content;\\n}\\n","styleUrl":"./biomarker-table.component.scss"}],"stylesData":"","implements":["OnChanges"],"accessors":{"columnsWithTypeAndCount":{"name":"columnsWithTypeAndCount","getSignature":{"name":"columnsWithTypeAndCount","type":"[]","returnType":"string[]","line":88,"rawdescription":"\\nGetter method to provide the definations of the columns","description":"

Getter method to provide the definations of the columns

\\n"}}},"templateData":"\\n \\n\\n \\n \\n\\n \\n \\n\\n \\n \\n\\n \\n \\n\\n \\n \\n\\n \\n \\n\\n \\n \\n
\\n Cell type table by Biomarker\\n
Cell Type\\n {{ element[0] }}\\n Cell Count\\n {{ element[1] !== undefined ? (element[1] | number) : \'no data\' }}\\n \\n {{ column }}\\n \\n \\n \\n\\n \\n
\\n \\n
\\n\\n\\n
\\n {{ columnName }}\\n
\\n\\n\\n\\n \\n\\n"}],"modules":[],"miscellaneous":{"variables":[],"functions":[],"typealiases":[{"name":"DataRow","ctype":"miscellaneous","subtype":"typealias","rawtype":"[string, , ...[]]","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","description":"

Describes the composition of a single row in the table

\\n","kind":183},{"name":"RGBTriplet","ctype":"miscellaneous","subtype":"typealias","rawtype":"[number, number, number]","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","description":"

RGBTriblet of type RGB to store color

\\n","kind":183}],"enumerations":[],"groupedVariables":{},"groupedFunctions":{},"groupedEnumerations":{},"groupedTypeAliases":{"src/lib/biomarker-table/biomarker-table.component.ts":[{"name":"DataRow","ctype":"miscellaneous","subtype":"typealias","rawtype":"[string, , ...[]]","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","description":"

Describes the composition of a single row in the table

\\n","kind":183},{"name":"RGBTriplet","ctype":"miscellaneous","subtype":"typealias","rawtype":"[number, number, number]","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","description":"

RGBTriblet of type RGB to store color

\\n","kind":183}]}}}')}},__webpack_require__=>{var __webpack_exec__=moduleId=>__webpack_require__(__webpack_require__.s=moduleId);__webpack_require__.O(0,[519],(()=>(__webpack_exec__("./storybook-config-entry.js"),__webpack_exec__("./.storybook/styles.scss?ngGlobalStyle"))));__webpack_require__.O()}]); \ No newline at end of file diff --git a/storybook/components-molecules/main.44bb5144.iframe.bundle.js b/storybook/components-molecules/main.44bb5144.iframe.bundle.js new file mode 100644 index 000000000..77ff4abbc --- /dev/null +++ b/storybook/components-molecules/main.44bb5144.iframe.bundle.js @@ -0,0 +1 @@ +(self.webpackChunkhra_ui=self.webpackChunkhra_ui||[]).push([[179],{"./dist/compodoc sync recursive ^\\.\\/.*\\/documentation\\.json$":(module,__unused_webpack_exports,__webpack_require__)=>{var map={"./components-behavioral/documentation.json":"./dist/compodoc/components-behavioral/documentation.json","./components-molecules/documentation.json":"./dist/compodoc/components-molecules/documentation.json","./components-organisms/documentation.json":"./dist/compodoc/components-organisms/documentation.json"};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id="./dist/compodoc sync recursive ^\\.\\/.*\\/documentation\\.json$"},"./libs/components/molecules lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/molecules(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.(js%7Cjsx%7Cts%7Ctsx))$":(module,__unused_webpack_exports,__webpack_require__)=>{var map={"./src/lib/biomarker-table-data-card/biomarker-table-data-card.component.stories":["./libs/components/molecules/src/lib/biomarker-table-data-card/biomarker-table-data-card.component.stories.ts",373,761,616,734,181],"./src/lib/biomarker-table-data-card/biomarker-table-data-card.component.stories.ts":["./libs/components/molecules/src/lib/biomarker-table-data-card/biomarker-table-data-card.component.stories.ts",373,761,616,734,181],"./src/lib/biomarker-table-data-icon/biomarker-table-data-icon.component.stories":["./libs/components/molecules/src/lib/biomarker-table-data-icon/biomarker-table-data-icon.component.stories.ts",326],"./src/lib/biomarker-table-data-icon/biomarker-table-data-icon.component.stories.ts":["./libs/components/molecules/src/lib/biomarker-table-data-icon/biomarker-table-data-icon.component.stories.ts",326],"./src/lib/contact-modal/contact-modal.component.stories":["./libs/components/molecules/src/lib/contact-modal/contact-modal.component.stories.ts",373,761,648,19,999,570],"./src/lib/contact-modal/contact-modal.component.stories.ts":["./libs/components/molecules/src/lib/contact-modal/contact-modal.component.stories.ts",373,761,648,19,999,570],"./src/lib/footer/footer.component.stories":["./libs/components/molecules/src/lib/footer/footer.component.stories.ts",373,761,648,981,616,472,19,111,839,911,510],"./src/lib/footer/footer.component.stories.ts":["./libs/components/molecules/src/lib/footer/footer.component.stories.ts",373,761,648,981,616,472,19,111,839,911,510],"./src/lib/fullscreen/fullscreen-container.stories":["./libs/components/molecules/src/lib/fullscreen/fullscreen-container.stories.ts",522],"./src/lib/fullscreen/fullscreen-container.stories.ts":["./libs/components/molecules/src/lib/fullscreen/fullscreen-container.stories.ts",522],"./src/lib/header/header.component.stories":["./libs/components/molecules/src/lib/header/header.component.stories.ts",373,761,648,981,911,591],"./src/lib/header/header.component.stories.ts":["./libs/components/molecules/src/lib/header/header.component.stories.ts",373,761,648,981,911,591],"./src/lib/hra-landing-page-intro-wc/hra-landing-page-intro-wc.component.stories":["./libs/components/molecules/src/lib/hra-landing-page-intro-wc/hra-landing-page-intro-wc.component.stories.ts",976],"./src/lib/hra-landing-page-intro-wc/hra-landing-page-intro-wc.component.stories.ts":["./libs/components/molecules/src/lib/hra-landing-page-intro-wc/hra-landing-page-intro-wc.component.stories.ts",976],"./src/lib/info-modal/info-modal.component.stories":["./libs/components/molecules/src/lib/info-modal/info-modal.component.stories.ts",373,761,648,977],"./src/lib/info-modal/info-modal.component.stories.ts":["./libs/components/molecules/src/lib/info-modal/info-modal.component.stories.ts",373,761,648,977],"./src/lib/interactive-svg/interactive-svg.stories":["./libs/components/molecules/src/lib/interactive-svg/interactive-svg.stories.ts",373,616,472,111,824],"./src/lib/interactive-svg/interactive-svg.stories.ts":["./libs/components/molecules/src/lib/interactive-svg/interactive-svg.stories.ts",373,616,472,111,824],"./src/lib/landing-page-in-depth/landing-page-in-depth.component.stories":["./libs/components/molecules/src/lib/landing-page-in-depth/landing-page-in-depth.component.stories.ts",373,761,648,981,911,514],"./src/lib/landing-page-in-depth/landing-page-in-depth.component.stories.ts":["./libs/components/molecules/src/lib/landing-page-in-depth/landing-page-in-depth.component.stories.ts",373,761,648,981,911,514],"./src/lib/landing-page-intro/landing-page-intro.component.stories":["./libs/components/molecules/src/lib/landing-page-intro/landing-page-intro.component.stories.ts",373,761,648,981,911,487],"./src/lib/landing-page-intro/landing-page-intro.component.stories.ts":["./libs/components/molecules/src/lib/landing-page-intro/landing-page-intro.component.stories.ts",373,761,648,981,911,487],"./src/lib/metrics/metrics.component.stories":["./libs/components/molecules/src/lib/metrics/metrics.component.stories.ts",442],"./src/lib/metrics/metrics.component.stories.ts":["./libs/components/molecules/src/lib/metrics/metrics.component.stories.ts",442],"./src/lib/screen-size-notice/screen-size-notice.component.stories":["./libs/components/molecules/src/lib/screen-size-notice/screen-size-notice.component.stories.ts",373,761,648,981,911,106],"./src/lib/screen-size-notice/screen-size-notice.component.stories.ts":["./libs/components/molecules/src/lib/screen-size-notice/screen-size-notice.component.stories.ts",373,761,648,981,911,106],"./src/lib/source-list/source-list.component.stories":["./libs/components/molecules/src/lib/source-list/source-list.component.stories.ts",373,761,648,616,734,227],"./src/lib/source-list/source-list.component.stories.ts":["./libs/components/molecules/src/lib/source-list/source-list.component.stories.ts",373,761,648,616,734,227],"./src/lib/tissue-tree-list/tissue-tree-list.component.stories":["./libs/components/molecules/src/lib/tissue-tree-list/tissue-tree-list.component.stories.ts",373,761,648,981,472,617,911,593],"./src/lib/tissue-tree-list/tissue-tree-list.component.stories.ts":["./libs/components/molecules/src/lib/tissue-tree-list/tissue-tree-list.component.stories.ts",373,761,648,981,472,617,911,593],"./src/lib/title-card/title-card.component.stories":["./libs/components/molecules/src/lib/title-card/title-card.component.stories.ts",632],"./src/lib/title-card/title-card.component.stories.ts":["./libs/components/molecules/src/lib/title-card/title-card.component.stories.ts",632]};function webpackAsyncContext(req){if(!__webpack_require__.o(map,req))return Promise.resolve().then((()=>{var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}));var ids=map[req],id=ids[0];return Promise.all(ids.slice(1).map(__webpack_require__.e)).then((()=>__webpack_require__(id)))}webpackAsyncContext.keys=()=>Object.keys(map),webpackAsyncContext.id="./libs/components/molecules lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/molecules(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.(js%7Cjsx%7Cts%7Ctsx))$",module.exports=webpackAsyncContext},"./libs/components/molecules lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/molecules(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.mdx)$":module=>{function webpackEmptyAsyncContext(req){return Promise.resolve().then((()=>{var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}))}webpackEmptyAsyncContext.keys=()=>[],webpackEmptyAsyncContext.resolve=webpackEmptyAsyncContext,webpackEmptyAsyncContext.id="./libs/components/molecules lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/molecules(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.mdx)$",module.exports=webpackEmptyAsyncContext},"./.storybook/styles.scss?ngGlobalStyle":()=>{},"./libs/components/molecules/.storybook/preview.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{argTypesEnhancers:()=>argTypesEnhancers,decorators:()=>preview_decorators,parameters:()=>parameters});var core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),dist=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),lib_esmodule=__webpack_require__("./node_modules/ng-inline-svg-2/lib_esmodule/index.js"),http=__webpack_require__("./node_modules/@angular/common/fesm2020/http.mjs"),animations=__webpack_require__("./node_modules/@angular/platform-browser/fesm2020/animations.mjs"),ngxs_logger_plugin=__webpack_require__("./node_modules/@ngxs/logger-plugin/fesm2015/ngxs-logger-plugin.js"),ngxs_store=__webpack_require__("./node_modules/@ngxs/store/fesm2015/ngxs-store.js"),angular=__webpack_require__("./node_modules/@storybook/addon-docs/angular/index.js"),ngx_markdown=__webpack_require__("./node_modules/ngx-markdown/fesm2020/ngx-markdown.mjs"),tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),angular_material_css_vars=__webpack_require__("./node_modules/angular-material-css-vars/fesm2020/angular-material-css-vars.mjs"),js_yaml=__webpack_require__("./node_modules/js-yaml/dist/js-yaml.mjs"),map=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/map.js"),tap=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/tap.js"),Observable=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/Observable.js");class Load{constructor(url){this.url=url,this.type=Load.type}}Load.type="[Theming] Load Theming File";var lib=__webpack_require__("./node_modules/zod/lib/index.mjs");const THEMING_FILE_SCHEMA=lib.z.record(lib.z.nativeEnum(angular_material_css_vars.Rm),lib.z.string());let ThemingState=class ThemingState{constructor(){this.http=(0,core.inject)(http.eN),this.materialVars=(0,core.inject)(angular_material_css_vars.jO)}load(ctx,{url}){return this.http.get(url,{responseType:"text"}).pipe((0,map.U)((data=>(0,js_yaml.zD)(data,{filename:url}))),(0,map.U)((data=>THEMING_FILE_SCHEMA.parse(data))),(0,tap.b)((data=>ctx.setState(data))),(0,tap.b)((data=>this.setVariables(data))))}setVariables(data){for(const[key,value]of Object.entries(data))this.materialVars.setVariable(key,value)}};(0,tslib_es6.gn)([(0,ngxs_store.aU)(Load),(0,tslib_es6.w6)("design:type",Function),(0,tslib_es6.w6)("design:paramtypes",[Object,Load]),(0,tslib_es6.w6)("design:returntype",Observable.y)],ThemingState.prototype,"load",null),ThemingState=(0,tslib_es6.gn)([(0,ngxs_store.ZM)({name:"theming",defaults:{}}),(0,core.Injectable)()],ThemingState);let ThemingModule=class ThemingModule{};function parseDefaultValue(type){const{defaultValue,type:typeDef}=type;if(void 0===defaultValue||"string"!=typeof defaultValue||"string"===typeDef?.name)return defaultValue;switch(typeDef?.name){case"array":case"boolean":case"number":case"object":try{return new Function("return "+defaultValue)()}catch(_error){return}case"enum":return typeDef.value.includes(defaultValue)?defaultValue:void 0;default:return}}ThemingModule=(0,tslib_es6.gn)([(0,core.NgModule)({imports:[angular_material_css_vars.Pe.forRoot({}),ngxs_store.$l.forFeature([ThemingState])]})],ThemingModule);const parameters={actions:{argTypesRegex:"^on[A-Z].*"},controls:{matchers:{color:/(background|color)$/i,date:/Date$/}},docs:{inlineStories:!0}},argTypesEnhancers=[function fixArgTypes(){return context=>{const argTypes={...context.argTypes},exclude=[...context.parameters.controls?.exclude??[]];for(const[key,type]of Object.entries(argTypes))switch(type.table.category){case"inputs":const defaultValue=parseDefaultValue(type);defaultValue!==type.defaultValue&&(argTypes[key]={...type,defaultValue});break;case"outputs":argTypes[key]={...type,defaultValue:void 0};break;default:exclude.push(key)}return context.parameters.controls={...context.parameters.controls,exclude},argTypes}}()];const preview_decorators=[...[(0,dist.applicationConfig)({providers:[(0,core.importProvidersFrom)(animations.BrowserAnimationsModule,http.JF,ngxs_store.$l.forRoot([],{developmentMode:!0}),ngxs_logger_plugin.xz.forRoot(),ngx_markdown.JP.forRoot({loader:http.eN}),ThemingModule)]}),(0,dist.componentWrapperDecorator)((story=>`\n
${story}
\n
\n `)),function addState(){return(fn,ctx)=>{const config=ctx.parameters.state;return config?(0,dist.applicationConfig)({providers:[(0,core.importProvidersFrom)(ngxs_store.$l.forFeature(config.states)),{provide:core.APP_INITIALIZER,multi:!0,useFactory:store=>()=>{const{actions}=config;return actions&&actions.length>0?store.dispatch(actions):void 0},deps:[ngxs_store.yh]}]})(fn,ctx):fn(ctx)}}()],(0,dist.applicationConfig)({providers:[(0,core.importProvidersFrom)(lib_esmodule.vi.forRoot())]})];!function setDocs(library){const docs=__webpack_require__("./dist/compodoc sync recursive ^\\.\\/.*\\/documentation\\.json$")(`./${library}/documentation.json`);(0,angular.P)(docs)}("components-molecules")},"./storybook-config-entry.js":(__unused_webpack_module,__unused_webpack___webpack_exports__,__webpack_require__)=>{"use strict";var dist=__webpack_require__("./node_modules/@storybook/global/dist/index.mjs"),external_STORYBOOK_MODULE_PREVIEW_API_=__webpack_require__("@storybook/preview-api");const external_STORYBOOK_MODULE_CHANNEL_POSTMESSAGE_namespaceObject=__STORYBOOK_MODULE_CHANNEL_POSTMESSAGE__,external_STORYBOOK_MODULE_CHANNEL_WEBSOCKET_namespaceObject=__STORYBOOK_MODULE_CHANNEL_WEBSOCKET__;var asyncToGenerator=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js");const pipeline=x=>x(),importers=[function(){var _ref=(0,asyncToGenerator.Z)((function*(path){if(!/^\.[\\/](?:libs\/components\/molecules(?:\/(?!\.)(?:(?:(?!(?:^|\/)\.).)*?)\/|\/|$)(?!\.)(?=.)[^/]*?\.stories\.mdx)$/.exec(path))return;const pathRemainder=path.substring(28);return __webpack_require__("./libs/components/molecules lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/molecules(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.mdx)$")("./"+pathRemainder)}));return function(_x){return _ref.apply(this,arguments)}}(),function(){var _ref2=(0,asyncToGenerator.Z)((function*(path){if(!/^\.[\\/](?:libs\/components\/molecules(?:\/(?!\.)(?:(?:(?!(?:^|\/)\.).)*?)\/|\/|$)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$/.exec(path))return;const pathRemainder=path.substring(28);return __webpack_require__("./libs/components/molecules lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/molecules(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.(js%7Cjsx%7Cts%7Ctsx))$")("./"+pathRemainder)}));return function(_x2){return _ref2.apply(this,arguments)}}()];function _importFn(){return(_importFn=(0,asyncToGenerator.Z)((function*(path){for(let i=0;iimporters[i](path)));if(moduleExports)return moduleExports}}))).apply(this,arguments)}const{SERVER_CHANNEL_URL}=dist.global,channel=(0,external_STORYBOOK_MODULE_CHANNEL_POSTMESSAGE_namespaceObject.createChannel)({page:"preview"});if(external_STORYBOOK_MODULE_PREVIEW_API_.addons.setChannel(channel),SERVER_CHANNEL_URL){const serverChannel=(0,external_STORYBOOK_MODULE_CHANNEL_WEBSOCKET_namespaceObject.createChannel)({url:SERVER_CHANNEL_URL});external_STORYBOOK_MODULE_PREVIEW_API_.addons.setServerChannel(serverChannel),window.__STORYBOOK_SERVER_CHANNEL__=serverChannel}const preview=new external_STORYBOOK_MODULE_PREVIEW_API_.PreviewWeb;window.__STORYBOOK_PREVIEW__=preview,window.__STORYBOOK_STORY_STORE__=preview.storyStore,window.__STORYBOOK_ADDONS_CHANNEL__=channel,window.__STORYBOOK_CLIENT_API__=new external_STORYBOOK_MODULE_PREVIEW_API_.ClientApi({storyStore:preview.storyStore}),preview.initialize({importFn:function importFn(_x3){return _importFn.apply(this,arguments)},getProjectAnnotations:()=>(0,external_STORYBOOK_MODULE_PREVIEW_API_.composeConfigs)([__webpack_require__("./node_modules/@storybook/angular/dist/client/docs/config.js"),__webpack_require__("./node_modules/@storybook/angular/dist/client/config.js"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/docs/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/actions/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/backgrounds/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/measure/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/outline/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/highlight/preview.mjs"),__webpack_require__("./libs/components/molecules/.storybook/preview.ts")])})},"./node_modules/@storybook/addon-docs/dist sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="./node_modules/@storybook/addon-docs/dist sync recursive",module.exports=webpackEmptyContext},"@storybook/channels":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CHANNELS__},"@storybook/client-logger":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CLIENT_LOGGER__},"@storybook/core-client":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CORE_CLIENT__},"@storybook/core-events":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CORE_EVENTS__},"@storybook/preview-api":module=>{"use strict";module.exports=__STORYBOOK_MODULE_PREVIEW_API__},"./dist/compodoc/components-behavioral/documentation.json":module=>{"use strict";module.exports=JSON.parse('{"pipes":[],"interfaces":[],"injectables":[],"guards":[],"interceptors":[],"classes":[],"directives":[],"components":[{"name":"BiomarkerDetailsComponent","id":"component-BiomarkerDetailsComponent-77362795c55e59d8109b5a13e3d57e4774ce01b5484ac21237c42d2857f2de4ecd80ec15ae66e99983246bdc3de1df675717253be566d7ba0efe1495a48c9f3c","file":"src/lib/biomarker-details/biomarker-details.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-biomarker-details","styleUrls":["./biomarker-details.component.scss"],"styles":[],"templateUrl":["./biomarker-details.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"collaborateText","defaultValue":"\'Collaborate with the HRA Team\'","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

button text of empty biomarker component.

\\n","line":106,"rawdescription":"\\n\\nbutton text of empty biomarker component.\\n","modifierKind":[144]},{"name":"gradientHoverInfo","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.GradientLegendInfo)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Info to be shown on the tooltip for Gradient Legend

\\n","line":58,"rawdescription":"\\nInfo to be shown on the tooltip for Gradient Legend","modifierKind":[144]},{"name":"gradients","defaultValue":"selectQuerySnapshot(RR.field, Ids.GradientLegend, RTypes.Gradient, \'points\' as const, [])<\\n GradientPoint[]\\n >","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Gradient colors along with their stop points

\\n","line":67,"rawdescription":"\\nGradient colors along with their stop points","modifierKind":[144]},{"name":"iri","defaultValue":"selectSnapshot(ActiveFtuSelectors.iri)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Iri of medical illustration behavior component

\\n","line":80,"rawdescription":"\\n\\nIri of medical illustration behavior component\\n","modifierKind":[144]},{"name":"isTableFullScreen","defaultValue":"false","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Indicates if the table is fully shown, defaults to false

\\n","line":64,"rawdescription":"\\nIndicates if the table is fully shown, defaults to false"},{"name":"message","defaultValue":"`We currently do not have cell type data for this biomarker.\\n

Please contact us to discuss your dataset.`","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

message markdown of empty biomarker component.

\\n","line":111,"rawdescription":"\\n\\nmessage markdown of empty biomarker component.\\n","modifierKind":[144]},{"name":"selectedOnHovered","defaultValue":"selectSnapshot(IllustratorSelectors.selectedOnHovered)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Selects the cells hovered currently to highlight in table

\\n","line":88,"rawdescription":"\\nSelects the cells hovered currently to highlight in table","modifierKind":[144]},{"name":"sizeHoverInfo","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.SizeLegendInfo)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Info to be shown on the tooltip for Size Legend

\\n","line":61,"rawdescription":"\\nInfo to be shown on the tooltip for Size Legend","modifierKind":[144]},{"name":"sizes","defaultValue":"selectQuerySnapshot(RR.field, Ids.SizeLegend, RTypes.Size, \'sizes\' as const, [])","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Taking input for the radius of the circle and the label to be displayed.

\\n","line":72,"rawdescription":"\\nTaking input for the radius of the circle and the label to be displayed.","modifierKind":[144]},{"name":"source","defaultValue":"selectSnapshot(SourceRefsSelectors.sourceReferences)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

List of sources with titles and links displayed to the user

\\n","line":75,"rawdescription":"\\nList of sources with titles and links displayed to the user","modifierKind":[144]},{"name":"tabs","defaultValue":"selectSnapshot(CellSummarySelectors.aggregates)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Table tabs

\\n","line":55,"rawdescription":"\\nTable tabs","modifierKind":[144]},{"name":"tissues","defaultValue":"selectSnapshot(TissueLibrarySelectors.tissues)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Get all tissues

\\n","line":85,"rawdescription":"\\n\\nGet all tissues\\n","modifierKind":[144]}],"methodsClass":[{"name":"collaborate","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":129,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which opens the contact modal dialog box","description":"

A function which opens the contact modal dialog box

\\n"},{"name":"toggleFullscreen","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":123,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function that toggles isTableFullScreen and\\ncalls the setScreenMode function.\\n","description":"

A function that toggles isTableFullScreen and\\ncalls the setScreenMode function.

\\n"}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

The component displays the biomarker details which includes the details, gradient legends, size legends and source lists

\\n","rawdescription":"\\nThe component displays the biomarker details which includes the details, gradient legends, size legends and source lists","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, inject } from \'@angular/core\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatTabsModule } from \'@angular/material/tabs\';\\nimport { HoverDirective } from \'@hra-ui/cdk\';\\nimport { dispatch, selectQuerySnapshot, selectSnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RR } from \'@hra-ui/cdk/state\';\\nimport { ActiveFtuSelectors, IllustratorSelectors, ScreenModeAction, TissueLibrarySelectors } from \'@hra-ui/state\';\\nimport {\\n EmptyBiomarkerComponent,\\n GradientLegendComponent,\\n GradientPoint,\\n LabelBoxComponent,\\n SizeLegend,\\n SizeLegendComponent,\\n} from \'@hra-ui/components/atoms\';\\nimport { BiomarkerTableDataCardComponent, SourceListComponent } from \'@hra-ui/components/molecules\';\\nimport { BiomarkerTableComponent, TissueInfo } from \'@hra-ui/components/organisms\';\\nimport { CellSummarySelectors, ResourceIds as Ids, ResourceTypes as RTypes, SourceRefsSelectors } from \'@hra-ui/state\';\\nimport { MatDialog, MatDialogConfig, MatDialogModule } from \'@angular/material/dialog\';\\nimport { ContactBehaviorComponent } from \'../contact-behavior/contact-behavior.component\';\\n\\n/**\\n * PlaceHolder for Empty Tissue Info\\n */\\nconst EMPTY_TISSUE_INFO: TissueInfo = {\\n id: \'\',\\n label: \'\',\\n};\\n\\n/** The component displays the biomarker details which includes the details, gradient legends, size legends and source lists*/\\n@Component({\\n selector: \'ftu-biomarker-details\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatIconModule,\\n MatTabsModule,\\n MatDialogModule,\\n BiomarkerTableComponent,\\n BiomarkerTableDataCardComponent,\\n GradientLegendComponent,\\n HoverDirective,\\n LabelBoxComponent,\\n SizeLegendComponent,\\n SourceListComponent,\\n EmptyBiomarkerComponent,\\n ],\\n templateUrl: \'./biomarker-details.component.html\',\\n styleUrls: [\'./biomarker-details.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerDetailsComponent {\\n /** Table tabs */\\n readonly tabs = selectSnapshot(CellSummarySelectors.aggregates);\\n\\n /** Info to be shown on the tooltip for Gradient Legend */\\n readonly gradientHoverInfo = selectQuerySnapshot(RR.anyText, Ids.GradientLegendInfo);\\n\\n /** Info to be shown on the tooltip for Size Legend */\\n readonly sizeHoverInfo = selectQuerySnapshot(RR.anyText, Ids.SizeLegendInfo);\\n\\n /** Indicates if the table is fully shown, defaults to false*/\\n isTableFullScreen = false;\\n\\n /** Gradient colors along with their stop points */\\n readonly gradients = selectQuerySnapshot(RR.field, Ids.GradientLegend, RTypes.Gradient, \'points\' as const, [])<\\n GradientPoint[]\\n >;\\n\\n /** Taking input for the radius of the circle and the label to be displayed. */\\n readonly sizes = selectQuerySnapshot(RR.field, Ids.SizeLegend, RTypes.Size, \'sizes\' as const, []);\\n\\n /** List of sources with titles and links displayed to the user */\\n readonly source = selectSnapshot(SourceRefsSelectors.sourceReferences);\\n\\n /**\\n * Iri of medical illustration behavior component\\n */\\n readonly iri = selectSnapshot(ActiveFtuSelectors.iri);\\n\\n /**\\n * Get all tissues\\n */\\n readonly tissues = selectSnapshot(TissueLibrarySelectors.tissues);\\n\\n /** Selects the cells hovered currently to highlight in table */\\n readonly selectedOnHovered = selectSnapshot(IllustratorSelectors.selectedOnHovered);\\n\\n /**\\n * Gets tissue title from the list of tissues\\n */\\n get tissueInfo(): TissueInfo {\\n const iri = this.iri();\\n const tissues = this.tissues();\\n if (iri === undefined) {\\n return EMPTY_TISSUE_INFO;\\n }\\n const { id, label } = tissues[iri];\\n return { id, label };\\n }\\n\\n /**\\n * button text of empty biomarker component.\\n */\\n readonly collaborateText = \'Collaborate with the HRA Team\';\\n\\n /**\\n * message markdown of empty biomarker component.\\n */\\n readonly message = `We currently do not have cell type data for this biomarker.\\n

Please contact us to discuss your dataset.`;\\n\\n /** A dispatcher function to set the screen mode */\\n private readonly setScreenMode = dispatch(ScreenModeAction.Set);\\n\\n /** A dialog box which shows contact modal after clicking on contact */\\n private readonly dialog = inject(MatDialog);\\n\\n /** A function that toggles isTableFullScreen and\\n * calls the setScreenMode function.\\n */\\n toggleFullscreen(): void {\\n this.isTableFullScreen = !this.isTableFullScreen;\\n this.setScreenMode(this.isTableFullScreen);\\n }\\n\\n /** A function which opens the contact modal dialog box */\\n collaborate(): void {\\n const dialogConfig = new MatDialogConfig();\\n dialogConfig.disableClose = true;\\n this.dialog.open(ContactBehaviorComponent, dialogConfig);\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n display: grid;\\n grid-template-columns: 1fr 1fr auto;\\n grid-template-rows: 3.5rem minmax(5rem, 2fr) 3rem 5rem minmax(5rem, 1fr);\\n grid-template-areas:\\n \'table-header table-header table-header\'\\n \'table table table\'\\n \'gradient-legend-header size-legend-header .\'\\n \'gradient-legend size-legend .\'\\n \'source-list source-list source-list\';\\n overflow-y: auto;\\n\\n .table-header {\\n grid-area: table-header;\\n border-bottom: 0.063rem solid #d3d3d3;\\n height: 3.5rem;\\n font-weight: 400;\\n }\\n\\n .table {\\n grid-area: table;\\n max-width: 100%;\\n overflow: auto;\\n border-bottom: 0.063rem solid #d3d3d3;\\n\\n ::ng-deep .table-tab-header {\\n padding-left: 1rem;\\n padding-right: 1rem;\\n border-left: 0.063rem solid #d3d3d3;\\n border-bottom: 0.063rem solid #d3d3d3;\\n background-color: white;\\n font-weight: 400;\\n letter-spacing: 0;\\n\\n &:last-child {\\n border-right: 0.063rem solid #d3d3d3;\\n }\\n\\n &.mdc-tab-indicator--active {\\n background-color: #f8f9fa;\\n }\\n\\n &:hover {\\n background-color: #f8f9fa;\\n }\\n .mat-tab__text-label {\\n --palette-accent-500-rgb: #243142;\\n }\\n }\\n }\\n\\n ::ng-deep {\\n .table-tab-header > .mdc-tab__content > span {\\n color: vars.$primary;\\n }\\n .mat-mdc-tab-group.mat-accent .mat-mdc-tab:not(.mat-mdc-tab-disabled).mdc-tab--active .mdc-tab__text-label {\\n color: vars.$primary;\\n }\\n }\\n\\n .legend-header {\\n color: vars.$dark-primary-text;\\n border-top: 0.063rem solid #d3d3d3;\\n border-bottom: 0.063rem solid #d3d3d3;\\n border-right: 0.063rem solid #d3d3d3;\\n\\n &.gradient {\\n grid-area: gradient-legend-header;\\n }\\n\\n &.size {\\n grid-area: size-legend-header;\\n }\\n\\n .icon {\\n margin-left: 0.6rem;\\n width: unset;\\n }\\n }\\n\\n .legend {\\n padding: 1rem 2rem;\\n border-right: 0.063rem solid #d3d3d3;\\n\\n &.gradient {\\n grid-area: gradient-legend;\\n\\n .content {\\n width: 10rem;\\n }\\n }\\n\\n &.size {\\n grid-area: size-legend;\\n }\\n }\\n\\n .source-list {\\n grid-area: source-list;\\n }\\n\\n .cursor {\\n cursor: default;\\n }\\n}\\n\\n::ng-deep .biomarker-details.info-tooltip {\\n display: flex;\\n padding: 1rem;\\n border: 1px solid #a8a3a3;\\n border-radius: 0.5rem;\\n box-shadow: 1px 2px 16px 2px #00000029;\\n background-color: vars.$primary-contrast-rgb;\\n max-width: 21rem;\\n font-size: small;\\n font-family: Inter;\\n}\\n","styleUrl":"./biomarker-details.component.scss"}],"stylesData":"","accessors":{"tissueInfo":{"name":"tissueInfo","getSignature":{"name":"tissueInfo","type":"","returnType":"TissueInfo","line":93,"rawdescription":"\\n\\nGets tissue title from the list of tissues\\n","description":"

Gets tissue title from the list of tissues

\\n"}}},"templateData":"\\n Cell Types by Gene Biomarkers\\n \\n {{ isTableFullScreen ? \'close_fullscreen\' : \'open_in_full\' }}\\n \\n\\n\\n\\n \\n \\n \\n \\n\\n\\n\\n Biomarker Expression Mean in FTU\\n info_outlined\\n\\n
\\n \\n
\\n\\n\\n Percentage of Cells in FTU\\n info_outlined\\n\\n
\\n \\n
\\n\\n
\\n \\n
\\n\\n\\n
\\n {{ tooltip }}\\n
\\n\\n"},{"name":"BiomarkerDetailsWcComponent","id":"component-BiomarkerDetailsWcComponent-2a35b01614cd4a83a9546a33b9e03200b2f96e7d06e07e8803741ed0f77a8815075e35be5e35822c9fb46279ff45ee49dbbfc6fc96f328f11a42b7f9898a30ef","file":"src/lib/biomarker-details-wc/biomarker-details-wc.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-wc-biomarker-details","styleUrls":["./biomarker-details-wc.component.scss"],"styles":[],"templateUrl":["./biomarker-details-wc.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"collaborateText","defaultValue":"\'Collaborate with the HRA Team\'","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

button text of empty biomarker component.

\\n","line":145,"rawdescription":"\\n\\nbutton text of empty biomarker component.\\n","modifierKind":[144]},{"name":"currentUrl","defaultValue":"selectSnapshot(IllustratorSelectors.url)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Current illustration url

\\n","line":71,"rawdescription":"\\n\\nCurrent illustration url\\n","modifierKind":[144]},{"name":"gradientHoverInfo","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.GradientLegendInfo)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Info to be shown on the tooltip for Gradient Legend

\\n","line":111,"rawdescription":"\\nInfo to be shown on the tooltip for Gradient Legend","modifierKind":[144]},{"name":"gradients","defaultValue":"selectQuerySnapshot(RR.field, Ids.GradientLegend, RTypes.Gradient, \'points\' as const, [])<\\n GradientPoint[]\\n >","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Gradient colors along with their stop points

\\n","line":120,"rawdescription":"\\nGradient colors along with their stop points","modifierKind":[144]},{"name":"iri","defaultValue":"selectSnapshot(ActiveFtuSelectors.iri)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Iri of medical illustration behavior component

\\n","line":81,"rawdescription":"\\n\\nIri of medical illustration behavior component\\n","modifierKind":[144]},{"name":"isTableFullScreen","defaultValue":"false","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Indicates if the table is fully shown, defaults to false

\\n","line":117,"rawdescription":"\\nIndicates if the table is fully shown, defaults to false"},{"name":"mapping","defaultValue":"selectSnapshot(IllustratorSelectors.mapping)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Current mapping file

\\n","line":76,"rawdescription":"\\n\\nCurrent mapping file\\n","modifierKind":[144]},{"name":"message","defaultValue":"`We currently do not have cell type data for this biomarker.\\n

Please contact us to discuss your dataset.`","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

message markdown of empty biomarker component.

\\n","line":150,"rawdescription":"\\n\\nmessage markdown of empty biomarker component.\\n","modifierKind":[144]},{"name":"sizeHoverInfo","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.SizeLegendInfo)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Info to be shown on the tooltip for Size Legend

\\n","line":114,"rawdescription":"\\nInfo to be shown on the tooltip for Size Legend","modifierKind":[144]},{"name":"sizes","defaultValue":"selectQuerySnapshot(RR.field, Ids.SizeLegend, RTypes.Size, \'sizes\' as const, [])","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Taking input for the radius of the circle and the label to be displayed.

\\n","line":125,"rawdescription":"\\nTaking input for the radius of the circle and the label to be displayed.","modifierKind":[144]},{"name":"source","defaultValue":"selectSnapshot(SourceRefsSelectors.sourceReferences)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

List of sources with titles and links displayed to the user

\\n","line":128,"rawdescription":"\\nList of sources with titles and links displayed to the user","modifierKind":[144]},{"name":"tabs","defaultValue":"selectSnapshot(CellSummarySelectors.aggregates)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Table tabs

\\n","line":108,"rawdescription":"\\nTable tabs","modifierKind":[144]},{"name":"tissues","defaultValue":"selectSnapshot(TissueLibrarySelectors.tissues)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Get all tissues

\\n","line":86,"rawdescription":"\\n\\nGet all tissues\\n","modifierKind":[144]},{"name":"updateNodeOnClicked","defaultValue":"dispatch(IllustratorActions.SetClicked)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Updates the active node on node click

\\n","line":105,"rawdescription":"\\n\\nUpdates the active node on node click\\n","modifierKind":[144]},{"name":"updateNodeOnHover","defaultValue":"dispatch(IllustratorActions.SetHover)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Updates the active node on node hover

\\n","line":100,"rawdescription":"\\n\\nUpdates the active node on node hover\\n","modifierKind":[144]}],"methodsClass":[{"name":"collaborate","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":167,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which opens the contact modal dialog box","description":"

A function which opens the contact modal dialog box

\\n"},{"name":"toggleFullscreen","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":162,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function that toggles isTableFullScreen and\\ncalls the setScreenMode function.\\n","description":"

A function that toggles isTableFullScreen and\\ncalls the setScreenMode function.

\\n"}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for Biomarker Table Details Web component

\\n","rawdescription":"\\nComponent for Biomarker Table Details Web component","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, inject } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatTabsModule } from \'@angular/material/tabs\';\\nimport { HoverDirective } from \'@hra-ui/cdk\';\\nimport { selectSnapshot, selectQuerySnapshot, dispatch } from \'@hra-ui/cdk/injectors\';\\nimport {\\n GradientLegendComponent,\\n LabelBoxComponent,\\n SizeLegendComponent,\\n EmptyBiomarkerComponent,\\n GradientPoint,\\n SizeLegend,\\n} from \'@hra-ui/components/atoms\';\\nimport {\\n BiomarkerTableDataCardComponent,\\n InteractiveSvgComponent,\\n SourceListComponent,\\n} from \'@hra-ui/components/molecules\';\\nimport { TissueInfo, BiomarkerTableComponent } from \'@hra-ui/components/organisms\';\\nimport {\\n ActiveFtuSelectors,\\n TissueLibrarySelectors,\\n ScreenModeAction,\\n IllustratorActions,\\n IllustratorSelectors,\\n CellSummarySelectors,\\n ResourceIds as Ids,\\n ResourceTypes as RTypes,\\n SourceRefsSelectors,\\n} from \'@hra-ui/state\';\\nimport { ResourceRegistrySelectors as RR } from \'@hra-ui/cdk/state\';\\nimport { MatDialog, MatDialogConfig } from \'@angular/material/dialog\';\\nimport { ContactBehaviorComponent } from \'../contact-behavior/contact-behavior.component\';\\n\\n/**\\n * PlaceHolder for Empty Tissue Info\\n */\\nconst EMPTY_TISSUE_INFO: TissueInfo = {\\n id: \'\',\\n label: \'\',\\n};\\n\\n/** Component for Biomarker Table Details Web component */\\n@Component({\\n selector: \'ftu-wc-biomarker-details\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatIconModule,\\n MatTabsModule,\\n\\n BiomarkerTableComponent,\\n BiomarkerTableDataCardComponent,\\n GradientLegendComponent,\\n HoverDirective,\\n LabelBoxComponent,\\n SizeLegendComponent,\\n SourceListComponent,\\n EmptyBiomarkerComponent,\\n InteractiveSvgComponent,\\n ],\\n templateUrl: \'./biomarker-details-wc.component.html\',\\n styleUrls: [\'./biomarker-details-wc.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerDetailsWcComponent {\\n /**\\n * Current illustration url\\n */\\n readonly currentUrl = selectSnapshot(IllustratorSelectors.url);\\n\\n /**\\n * Current mapping file\\n */\\n readonly mapping = selectSnapshot(IllustratorSelectors.mapping);\\n\\n /**\\n * Iri of medical illustration behavior component\\n */\\n readonly iri = selectSnapshot(ActiveFtuSelectors.iri);\\n\\n /**\\n * Get all tissues\\n */\\n readonly tissues = selectSnapshot(TissueLibrarySelectors.tissues);\\n\\n /**\\n * Gets tissue title from the list of tissues\\n */\\n get tissueTitle(): string {\\n const iri = this.iri();\\n const tissues = this.tissues();\\n return iri ? tissues[iri].label : \'\';\\n }\\n\\n /**\\n * Updates the active node on node hover\\n */\\n readonly updateNodeOnHover = dispatch(IllustratorActions.SetHover);\\n\\n /**\\n * Updates the active node on node click\\n */\\n readonly updateNodeOnClicked = dispatch(IllustratorActions.SetClicked);\\n\\n /** Table tabs */\\n readonly tabs = selectSnapshot(CellSummarySelectors.aggregates);\\n\\n /** Info to be shown on the tooltip for Gradient Legend */\\n readonly gradientHoverInfo = selectQuerySnapshot(RR.anyText, Ids.GradientLegendInfo);\\n\\n /** Info to be shown on the tooltip for Size Legend */\\n readonly sizeHoverInfo = selectQuerySnapshot(RR.anyText, Ids.SizeLegendInfo);\\n\\n /** Indicates if the table is fully shown, defaults to false*/\\n isTableFullScreen = false;\\n\\n /** Gradient colors along with their stop points */\\n readonly gradients = selectQuerySnapshot(RR.field, Ids.GradientLegend, RTypes.Gradient, \'points\' as const, [])<\\n GradientPoint[]\\n >;\\n\\n /** Taking input for the radius of the circle and the label to be displayed. */\\n readonly sizes = selectQuerySnapshot(RR.field, Ids.SizeLegend, RTypes.Size, \'sizes\' as const, []);\\n\\n /** List of sources with titles and links displayed to the user */\\n readonly source = selectSnapshot(SourceRefsSelectors.sourceReferences);\\n /**\\n * Gets tissue title from the list of tissues\\n */\\n get tissueInfo(): TissueInfo {\\n const iri = this.iri();\\n const tissues = this.tissues();\\n if (iri === undefined) {\\n return EMPTY_TISSUE_INFO;\\n }\\n const { id, label } = tissues[iri];\\n return { id, label };\\n }\\n\\n /**\\n * button text of empty biomarker component.\\n */\\n readonly collaborateText = \'Collaborate with the HRA Team\';\\n\\n /**\\n * message markdown of empty biomarker component.\\n */\\n readonly message = `We currently do not have cell type data for this biomarker.\\n

Please contact us to discuss your dataset.`;\\n\\n /** A dispatcher function to set the screen mode */\\n private readonly setScreenMode = dispatch(ScreenModeAction.Set);\\n\\n /** A dialog box which shows contact modal after clicking on contact */\\n private readonly dialog = inject(MatDialog);\\n\\n /** A function that toggles isTableFullScreen and\\n * calls the setScreenMode function.\\n */\\n toggleFullscreen(): void {\\n this.isTableFullScreen = !this.isTableFullScreen;\\n this.setScreenMode(this.isTableFullScreen);\\n }\\n /** A function which opens the contact modal dialog box */\\n collaborate(): void {\\n const dialogConfig = new MatDialogConfig();\\n dialogConfig.disableClose = true;\\n this.dialog.open(ContactBehaviorComponent, dialogConfig);\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n ::ng-deep .extraTab {\\n border: 0.063rem solid #d3d3d3;\\n border-top: 0;\\n }\\n\\n .table-header {\\n grid-area: table-header;\\n border: 0.063rem solid #d3d3d3;\\n width: 43rem;\\n height: 3.5rem;\\n }\\n\\n .table {\\n grid-area: table;\\n max-width: 100%;\\n overflow: auto;\\n border: 0.063rem solid #d3d3d3;\\n\\n ::ng-deep .table-tab-header {\\n padding-left: 1rem;\\n padding-right: 1rem;\\n border-left: 0.063rem solid #d3d3d3;\\n border-bottom: 0.063rem solid #d3d3d3;\\n\\n &:last-child {\\n border-right: 0.063rem solid #d3d3d3;\\n }\\n\\n &.mdc-tab-indicator--active {\\n background-color: #f8f9fa;\\n }\\n }\\n }\\n\\n hra-biomarker-table {\\n overflow-y: auto;\\n overflow-x: auto;\\n }\\n\\n .legends {\\n display: inline-flex;\\n width: 100%;\\n .legends-right {\\n width: 50%;\\n }\\n .legends-left {\\n width: 50%;\\n }\\n }\\n\\n .legend-header {\\n color: vars.$dark-primary-text;\\n border-top: 0.063rem solid #d3d3d3;\\n border-bottom: 0.063rem solid #d3d3d3;\\n border-right: 0.063rem solid #d3d3d3;\\n\\n &.gradient {\\n grid-area: gradient-legend-header;\\n }\\n\\n &.size {\\n grid-area: size-legend-header;\\n }\\n\\n .icon {\\n margin-left: 0.6rem;\\n }\\n }\\n\\n .legend {\\n padding: 1rem 2rem;\\n border-right: 0.063rem solid #d3d3d3;\\n\\n &.gradient {\\n grid-area: gradient-legend;\\n\\n .content {\\n width: 10rem;\\n }\\n }\\n\\n &.size {\\n grid-area: size-legend;\\n }\\n }\\n\\n .source-list {\\n grid-area: source-list;\\n\\n .content {\\n width: min-content;\\n }\\n }\\n}\\n\\n::ng-deep .biomarker-details.info-tooltip {\\n display: flex;\\n padding: 1rem;\\n border: 1px solid #a8a3a3;\\n border-radius: 0.5rem;\\n box-shadow: 1px 2px 16px 2px #00000029;\\n background-color: vars.$primary-contrast-rgb;\\n max-width: 21rem;\\n font-size: small;\\n}\\n","styleUrl":"./biomarker-details-wc.component.scss"}],"stylesData":"","accessors":{"tissueTitle":{"name":"tissueTitle","getSignature":{"name":"tissueTitle","type":"string","returnType":"string","line":91,"rawdescription":"\\n\\nGets tissue title from the list of tissues\\n","description":"

Gets tissue title from the list of tissues

\\n"}},"tissueInfo":{"name":"tissueInfo","getSignature":{"name":"tissueInfo","type":"","returnType":"TissueInfo","line":132,"rawdescription":"\\n\\nGets tissue title from the list of tissues\\n","description":"

Gets tissue title from the list of tissues

\\n"}}},"templateData":"\\n {{ tissueTitle }}: FTU Illustration\\n \\n {{ isTableFullScreen ? \'close_fullscreen\' : \'open_in_full\' }}\\n \\n\\n\\n\\n \\n \\n \\n \\n \\n \\n\\n
\\n
\\n \\n Biomarker Expression Mean in FTU\\n info_outlined\\n \\n
\\n \\n
\\n
\\n\\n
\\n \\n Percentage of Cells in FTU\\n info_outlined\\n \\n
\\n \\n
\\n
\\n
\\n \\n \\n \\n
\\n \\n
\\n\\n \\n
\\n {{ tooltip }}\\n
\\n \\n \\n\\n"},{"name":"ContactBehaviorComponent","id":"component-ContactBehaviorComponent-b9d5e223798d92be933b5dbadc75b1d6c247f7b00beb75f933bb07b0a4949d22458ee53931ca654d0b255f40508dbf23ef4e516e2f80368415a86fdfe44d60b6","file":"src/lib/contact-behavior/contact-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-contact-behavior","styleUrls":["./contact-behavior.component.scss"],"styles":[],"templateUrl":["./contact-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"description","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.ContactAcknowledgement)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Information modal message to the user

\\n","line":29,"rawdescription":"\\nInformation modal message to the user","modifierKind":[144]},{"name":"postMessageTemplate","deprecated":false,"deprecationMessage":"","type":"TemplateRef","optional":false,"description":"

A template to post a message

\\n","line":20,"rawdescription":"\\nA template to post a message","decorators":[{"name":"ViewChild","stringifiedArguments":"\'postMessage\'"}],"modifierKind":[144]},{"name":"productLogoUrl","defaultValue":"selectQuerySnapshot(RR.url, Ids.ProductLogoUrl)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product logo URL to displayed on the left side.

\\n","line":23,"rawdescription":"\\nInput for product logo URL to displayed on the left side.","modifierKind":[144]},{"name":"productTitle","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.ProductTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product title to displayed on the left side.

\\n","line":26,"rawdescription":"\\nInput for product title to displayed on the left side.","modifierKind":[144]},{"name":"sendMessage","defaultValue":"dispatch(ContactActions.SendMessage)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

A dispatcher function to send message entered by user

\\n","line":32,"rawdescription":"\\nA dispatcher function to send message entered by user","modifierKind":[144]}],"methodsClass":[{"name":"close","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":51,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which closes the \'Contact us\' dialog and the acknowledgement dialog.","description":"

A function which closes the 'Contact us' dialog and the acknowledgement dialog.

\\n"},{"name":"submit","args":[{"name":"message","type":"ContactData","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"void","typeParameters":[],"line":44,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which sends/dispatches a message which contains email, subject, and message. And also opens the acknowledgement dialog box.","description":"

A function which sends/dispatches a message which contains email, subject, and message. And also opens the acknowledgement dialog box.

\\n","jsdoctags":[{"name":"message","type":"ContactData","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

A Component for contact behavior which sends the message entered by the user and shows an acknowledgement

\\n","rawdescription":"\\nA Component for contact behavior which sends the message entered by the user and shows an acknowledgement","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, inject, TemplateRef, ViewChild } from \'@angular/core\';\\nimport { MatDialog, MatDialogModule, MatDialogRef } from \'@angular/material/dialog\';\\nimport { dispatch, selectQuerySnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RR } from \'@hra-ui/cdk/state\';\\nimport { ContactData, ContactModalComponent, InfoModalComponent } from \'@hra-ui/components/molecules\';\\nimport { ResourceIds as Ids, ContactActions } from \'@hra-ui/state\';\\n\\n/** A Component for contact behavior which sends the message entered by the user and shows an acknowledgement */\\n@Component({\\n selector: \'ftu-contact-behavior\',\\n standalone: true,\\n imports: [CommonModule, MatDialogModule, ContactModalComponent, InfoModalComponent],\\n templateUrl: \'./contact-behavior.component.html\',\\n styleUrls: [\'./contact-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class ContactBehaviorComponent {\\n /** A template to post a message */\\n @ViewChild(\'postMessage\') readonly postMessageTemplate!: TemplateRef;\\n\\n /** Input for product logo URL to displayed on the left side. */\\n readonly productLogoUrl = selectQuerySnapshot(RR.url, Ids.ProductLogoUrl);\\n\\n /** Input for product title to displayed on the left side. */\\n readonly productTitle = selectQuerySnapshot(RR.anyText, Ids.ProductTitle);\\n\\n /** Information modal message to the user */\\n readonly description = selectQuerySnapshot(RR.anyText, Ids.ContactAcknowledgement);\\n\\n /** A dispatcher function to send message entered by user */\\n readonly sendMessage = dispatch(ContactActions.SendMessage);\\n\\n /** A dialog box which shows user an acknowledgement after clicking on submit */\\n private readonly dialog = inject(MatDialog);\\n\\n /** A mat form field dialog which accepts the email, subject, and message of user and validates it */\\n private readonly selfRef = inject(MatDialogRef, { optional: true });\\n\\n /** Dialog box which references the acknowledgement dialog box */\\n private postRef?: MatDialogRef;\\n\\n /** A function which sends/dispatches a message which contains email, subject, and message. And also opens the acknowledgement dialog box. */\\n submit(message: ContactData): void {\\n this.sendMessage(message);\\n this.selfRef?.close();\\n this.postRef = this.dialog.open(this.postMessageTemplate);\\n }\\n\\n /** A function which closes the \'Contact us\' dialog and the acknowledgement dialog. */\\n close(): void {\\n this.postRef?.close();\\n this.selfRef?.close();\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n\\n .contact-modal {\\n width: 41rem;\\n height: 40rem;\\n }\\n\\n .info-modal {\\n width: 35rem;\\n height: 11.8rem;\\n }\\n\\n @media screen and (max-height: 328px) {\\n .contact-modal {\\n height: calc(100vh - 2rem);\\n }\\n }\\n}\\n","styleUrl":"./contact-behavior.component.scss"}],"stylesData":"","templateData":"\\n\\n\\n\\n \\n \\n\\n"},{"name":"FooterBehaviorComponent","id":"component-FooterBehaviorComponent-d9ecf51e28e6cdbe2f77b2f819a2e3df3acd0382e946f213975e78af53f6c11b1a7a013fefb862cfa9449b9973d2ea3497fa9687d6c04eb492751c2a83c17410","file":"src/lib/footer-behavior/footer-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-footer-behavior","styleUrls":["./footer-behavior.component.scss"],"styles":[],"templateUrl":["./footer-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"download","defaultValue":"dispatch(DownloadActions.Download)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

A dispatcher function to download file in specified format

\\n","line":39,"rawdescription":"\\nA dispatcher function to download file in specified format","modifierKind":[144]},{"name":"downloadFormats","defaultValue":"selectSnapshot(DownloadSelectors.formats)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Selects a snapshot of the current value of the available download formats

\\n","line":27,"rawdescription":"\\nSelects a snapshot of the current value of the available download formats","modifierKind":[144]},{"name":"embed","defaultValue":"LinkIds.Embed","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Embed link routing after clicking on Embed

\\n","line":36,"rawdescription":"\\nEmbed link routing after clicking on Embed","modifierKind":[144]},{"name":"hraPortal","defaultValue":"LinkIds.Portal","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Hra portal link routing after clicking on HRA Portal

\\n","line":30,"rawdescription":"\\nHra portal link routing after clicking on HRA Portal","modifierKind":[144]},{"name":"illustrationMetadata","defaultValue":"LinkIds.Illustration","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Metadata page link routing after clicking on Illustration

\\n","line":33,"rawdescription":"\\nMetadata page link routing after clicking on Illustration","modifierKind":[144]},{"name":"productLogoUrl","defaultValue":"selectQuerySnapshot(RR.url, Ids.ProductLogoUrl)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product logo URL to displayed on the left side.

\\n","line":21,"rawdescription":"\\nInput for product logo URL to displayed on the left side.","modifierKind":[144]},{"name":"productTitle","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.ProductTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product title to displayed on the left side.

\\n","line":24,"rawdescription":"\\nInput for product title to displayed on the left side.","modifierKind":[144]},{"name":"size","defaultValue":"selectSnapshot(ScreenModeSelectors.size)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Selects the current value of the available ScreenMode Size

\\n","line":41,"rawdescription":"\\nSelects the current value of the available ScreenMode Size","modifierKind":[144]}],"methodsClass":[{"name":"contact","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":47,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which opens the contact modal dialog box","description":"

A function which opens the contact modal dialog box

\\n"}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

A component for footer behavior which provides functionality for various buttons in footer

\\n","rawdescription":"\\nA component for footer behavior which provides functionality for various buttons in footer","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, inject } from \'@angular/core\';\\nimport { MatDialog, MatDialogConfig, MatDialogModule } from \'@angular/material/dialog\';\\nimport { dispatch, selectQuerySnapshot, selectSnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RR } from \'@hra-ui/cdk/state\';\\nimport { FooterComponent } from \'@hra-ui/components/molecules\';\\nimport { DownloadActions, DownloadSelectors, ResourceIds as Ids, LinkIds, ScreenModeSelectors } from \'@hra-ui/state\';\\nimport { ContactBehaviorComponent } from \'../contact-behavior/contact-behavior.component\';\\n\\n/** A component for footer behavior which provides functionality for various buttons in footer */\\n@Component({\\n selector: \'ftu-footer-behavior\',\\n standalone: true,\\n imports: [CommonModule, MatDialogModule, FooterComponent, ContactBehaviorComponent],\\n templateUrl: \'./footer-behavior.component.html\',\\n styleUrls: [\'./footer-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class FooterBehaviorComponent {\\n /** Input for product logo URL to displayed on the left side. */\\n readonly productLogoUrl = selectQuerySnapshot(RR.url, Ids.ProductLogoUrl);\\n\\n /** Input for product title to displayed on the left side. */\\n readonly productTitle = selectQuerySnapshot(RR.anyText, Ids.ProductTitle);\\n\\n /** Selects a snapshot of the current value of the available download formats */\\n readonly downloadFormats = selectSnapshot(DownloadSelectors.formats);\\n\\n /** Hra portal link routing after clicking on HRA Portal */\\n readonly hraPortal = LinkIds.Portal;\\n\\n /** Metadata page link routing after clicking on Illustration */\\n readonly illustrationMetadata = LinkIds.Illustration;\\n\\n /** Embed link routing after clicking on Embed */\\n readonly embed = LinkIds.Embed;\\n\\n /** A dispatcher function to download file in specified format */\\n readonly download = dispatch(DownloadActions.Download);\\n /** Selects the current value of the available ScreenMode Size */\\n readonly size = selectSnapshot(ScreenModeSelectors.size);\\n\\n /** A dialog box which shows contact modal after clicking on contact */\\n private readonly dialog = inject(MatDialog);\\n\\n /** A function which opens the contact modal dialog box */\\n contact(): void {\\n const dialogConfig = new MatDialogConfig();\\n dialogConfig.disableClose = true;\\n this.dialog.open(ContactBehaviorComponent, dialogConfig);\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n}\\n","styleUrl":"./footer-behavior.component.scss"}],"stylesData":"","templateData":"\\n\\n"},{"name":"HeaderBehaviorComponent","id":"component-HeaderBehaviorComponent-a76f74e70c7aacab4debd2492e1302dc534513cd4598dce499fc0d4f09bf0a16fc333bcb4bb100ffc9dbcb5427533473060400e0ae5eb7051dac7768474ae300","file":"src/lib/header-behavior/header-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-header-behavior","styleUrls":["./header-behavior.component.scss"],"styles":[],"templateUrl":["./header-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"aboutLink","defaultValue":"LinkIds.About","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for about link for user click action.

\\n","line":41,"rawdescription":"\\n\\nInput for about link for user click action.\\n","modifierKind":[144]},{"name":"appTitle","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.AppTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for app title to show on the left side.

\\n","line":31,"rawdescription":"\\n\\nInput for app title to show on the left side.\\n","modifierKind":[144]},{"name":"productLogoUrl","defaultValue":"selectQuerySnapshot(RR.url, Ids.ProductLogoUrl)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product logo URL to displayed on the left side.

\\n","line":21,"rawdescription":"\\n\\nInput for product logo URL to displayed on the left side.\\n","modifierKind":[144]},{"name":"productTitle","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.ProductTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product title to displayed on the left side.

\\n","line":26,"rawdescription":"\\n\\nInput for product title to displayed on the left side.\\n","modifierKind":[144]},{"name":"productTitleLink","defaultValue":"LinkIds.ProductTitle","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product title link for user click action

\\n","line":36,"rawdescription":"\\n\\nInput for product title link for user click action\\n","modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for Header Behavior

\\n","rawdescription":"\\nComponent for Header Behavior","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component } from \'@angular/core\';\\nimport { selectQuerySnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RR } from \'@hra-ui/cdk/state\';\\nimport { HeaderComponent } from \'@hra-ui/components/molecules\';\\nimport { ResourceIds as Ids, LinkIds } from \'@hra-ui/state\';\\n\\n/** Component for Header Behavior */\\n@Component({\\n selector: \'ftu-header-behavior\',\\n standalone: true,\\n imports: [CommonModule, HeaderComponent],\\n templateUrl: \'./header-behavior.component.html\',\\n styleUrls: [\'./header-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class HeaderBehaviorComponent {\\n /**\\n * Input for product logo URL to displayed on the left side.\\n */\\n readonly productLogoUrl = selectQuerySnapshot(RR.url, Ids.ProductLogoUrl);\\n\\n /**\\n * Input for product title to displayed on the left side.\\n */\\n readonly productTitle = selectQuerySnapshot(RR.anyText, Ids.ProductTitle);\\n\\n /**\\n * Input for app title to show on the left side.\\n */\\n readonly appTitle = selectQuerySnapshot(RR.anyText, Ids.AppTitle);\\n\\n /**\\n * Input for product title link for user click action\\n */\\n readonly productTitleLink = LinkIds.ProductTitle;\\n\\n /**\\n * Input for about link for user click action.\\n */\\n readonly aboutLink = LinkIds.About;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n}\\n","styleUrl":"./header-behavior.component.scss"}],"stylesData":"","templateData":"\\n\\n"},{"name":"HraLandingPageIntroWcBehaviourComponent","id":"component-HraLandingPageIntroWcBehaviourComponent-b8c2509d12b92bff8ab139855b712563f2a92e8aa91e8ecc05714063b91b1765ade0e9c6e691367a2eaa4724d94d6dfe4ade28c89da03cfcf6eae21630452b23","file":"src/lib/hra-landing-page-intro-wc-behaviour/hra-landing-page-intro-wc-behaviour.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-wc-intro","styleUrls":["./hra-landing-page-intro-wc-behaviour.component.scss"],"styles":[],"templateUrl":["./hra-landing-page-intro-wc-behaviour.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"landingPageIntroDescription","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPageDescription)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro description

\\n","line":21,"rawdescription":"\\nselect snapshot for landing page intro description","modifierKind":[144]},{"name":"landingPageIntroPartners","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPagePartners)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro partners

\\n","line":25,"rawdescription":"\\nselect snapshot for landing page intro partners","modifierKind":[144]},{"name":"landingPageIntroReadMore","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPageIntroReadMore)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro partners

\\n","line":23,"rawdescription":"\\nselect snapshot for landing page intro partners","modifierKind":[144]},{"name":"landingPageIntroTitle","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.LandingPageTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for Landing Page title

\\n","line":19,"rawdescription":"\\nselect snapshot for Landing Page title","modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for LandingPage Intro Behaviour: Web component

\\n","rawdescription":"\\nComponent for LandingPage Intro Behaviour: Web component","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { HraLandingPageIntroWcComponent } from \'@hra-ui/components/molecules\';\\nimport { ResourceRegistrySelectors as RRS } from \'@hra-ui/cdk/state\';\\nimport { selectQuerySnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceIds as RIds } from \'@hra-ui/state\';\\n\\n/** Component for LandingPage Intro Behaviour: Web component */\\n@Component({\\n selector: \'ftu-wc-intro\',\\n standalone: true,\\n imports: [CommonModule, HraLandingPageIntroWcComponent],\\n templateUrl: \'./hra-landing-page-intro-wc-behaviour.component.html\',\\n styleUrls: [\'./hra-landing-page-intro-wc-behaviour.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class HraLandingPageIntroWcBehaviourComponent {\\n /** select snapshot for Landing Page title */\\n readonly landingPageIntroTitle = selectQuerySnapshot(RRS.anyText, RIds.LandingPageTitle);\\n /** select snapshot for landing page intro description */\\n readonly landingPageIntroDescription = selectQuerySnapshot(RRS.markdown, RIds.LandingPageDescription);\\n /** select snapshot for landing page intro partners */\\n readonly landingPageIntroReadMore = selectQuerySnapshot(RRS.markdown, RIds.LandingPageIntroReadMore);\\n /** select snapshot for landing page intro partners */\\n readonly landingPageIntroPartners = selectQuerySnapshot(RRS.markdown, RIds.LandingPagePartners);\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n\\n .intro {\\n display: inline-grid;\\n border: 1px solid #e2e7e9;\\n padding: 24px 32px 24px 32px;\\n width: 71rem;\\n }\\n}\\n","styleUrl":"./hra-landing-page-intro-wc-behaviour.component.scss"}],"stylesData":"","templateData":"\\n"},{"name":"LandingPageContentComponent","id":"component-LandingPageContentComponent-d72615e2863b7f2f08c767452a75c71c9e079687610cd3e50b54f72f11546184f7ad55c5304741d79adb9bb9ea161cdac4253ae6fb1cbbf15040f2814110616a","file":"src/lib/landing-page-content/landing-page-content.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-landing-page-content","styleUrls":["./landing-page-content.component.scss"],"styles":[],"templateUrl":["./landing-page-content.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"intersectableEls","deprecated":false,"deprecationMessage":"","type":"QueryList","optional":false,"description":"

array of element refs for intersectables

\\n","line":34,"rawdescription":"\\narray of element refs for intersectables","decorators":[{"name":"ViewChildren","stringifiedArguments":"\'intersectable\', {read: ElementRef}"}],"modifierKind":[144]},{"name":"landingPageDepthDescription","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPageDepthDescription)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page depth description

\\n","line":57,"rawdescription":"\\nselect snapshot for landing page depth description","modifierKind":[144]},{"name":"landingPageDepthImg","defaultValue":"selectQuerySnapshot(RRS.url, RIds.LandingPageDepthImg)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page depth img

\\n","line":61,"rawdescription":"\\nselect snapshot for landing page depth img","modifierKind":[144]},{"name":"landingPageDepthMoreText","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.LandingPageDepthMoreText)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot forlanding page depth more text

\\n","line":59,"rawdescription":"\\nselect snapshot forlanding page depth more text","modifierKind":[144]},{"name":"landingPageDepthTitle","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.LandingPageDepthTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page depth title

\\n","line":55,"rawdescription":"\\nselect snapshot for landing page depth title","modifierKind":[144]},{"name":"landingPageIntroDescription","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPageDescription)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro description

\\n","line":40,"rawdescription":"\\nselect snapshot for landing page intro description","modifierKind":[144]},{"name":"landingPageIntroImg","defaultValue":"selectQuerySnapshot(RRS.url, RIds.LandingPageIntroImg)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro img

\\n","line":47,"rawdescription":"\\nselect snapshot for landing page intro img","modifierKind":[144]},{"name":"landingPageIntroMoreText","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.LandingPageIntroMoreText)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro more text

\\n","line":45,"rawdescription":"\\nselect snapshot for landing page intro more text","modifierKind":[144]},{"name":"landingPageIntroPartners","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPagePartners)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro partners

\\n","line":42,"rawdescription":"\\nselect snapshot for landing page intro partners","modifierKind":[144]},{"name":"landingPageIntroTitle","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.LandingPageTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for Landing Page title

\\n","line":37,"rawdescription":"\\nselect snapshot for Landing Page title","modifierKind":[144]},{"name":"LinkIds","defaultValue":"LinkIds","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Expose links for use it template

\\n","line":64,"rawdescription":"\\nExpose links for use it template","modifierKind":[144]},{"name":"metrics","defaultValue":"selectQuerySnapshot(RRS.field, RIds.Metrics, RTypes.Metrics, \'metrics\' as const, [])","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for metrics

\\n","line":49,"rawdescription":"\\nselect snapshot for metrics","modifierKind":[144]},{"name":"metricsLogo","defaultValue":"selectQuerySnapshot(RRS.url, RIds.MetricsLogo)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for metrics logo

\\n","line":53,"rawdescription":"\\nselect snapshot for metrics logo","modifierKind":[144]},{"name":"metricsTitle","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.MetricsTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for metrics title

\\n","line":51,"rawdescription":"\\nselect snapshot for metrics title","modifierKind":[144]}],"methodsClass":[{"name":"handleIntersection","args":[{"name":"entries","type":"IntersectionObserverEntry[]","deprecated":false,"deprecationMessage":""},{"name":"observer","type":"IntersectionObserver","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"void","typeParameters":[],"line":82,"deprecated":false,"deprecationMessage":"","rawdescription":"\\ncallback function for intersection observer","description":"

callback function for intersection observer

\\n","jsdoctags":[{"name":"entries","type":"IntersectionObserverEntry[]","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}},{"name":"observer","type":"IntersectionObserver","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for LandingPageContent Behavior

\\n","rawdescription":"\\nComponent for LandingPageContent Behavior","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport {\\n AfterViewInit,\\n ChangeDetectionStrategy,\\n Component,\\n ElementRef,\\n inject,\\n QueryList,\\n Renderer2,\\n ViewChildren,\\n} from \'@angular/core\';\\nimport { injectDestroy$, selectQuerySnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RRS } from \'@hra-ui/cdk/state\';\\nimport {\\n LandingPageInDepthComponent,\\n LandingPageIntroComponent,\\n MetricItem,\\n MetricsComponent,\\n} from \'@hra-ui/components/molecules\';\\nimport { LinkIds, ResourceIds as RIds, ResourceTypes as RTypes } from \'@hra-ui/state\';\\n\\n/** Component for LandingPageContent Behavior */\\n@Component({\\n selector: \'ftu-landing-page-content\',\\n standalone: true,\\n imports: [CommonModule, LandingPageIntroComponent, MetricsComponent, LandingPageInDepthComponent],\\n templateUrl: \'./landing-page-content.component.html\',\\n styleUrls: [\'./landing-page-content.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class LandingPageContentComponent implements AfterViewInit {\\n /** array of element refs for intersectables */\\n @ViewChildren(\'intersectable\', { read: ElementRef })\\n readonly intersectableEls!: QueryList;\\n\\n /** select snapshot for Landing Page title */\\n readonly landingPageIntroTitle = selectQuerySnapshot(RRS.anyText, RIds.LandingPageTitle);\\n\\n /** select snapshot for landing page intro description */\\n readonly landingPageIntroDescription = selectQuerySnapshot(RRS.markdown, RIds.LandingPageDescription);\\n /** select snapshot for landing page intro partners */\\n readonly landingPageIntroPartners = selectQuerySnapshot(RRS.markdown, RIds.LandingPagePartners);\\n\\n /** select snapshot for landing page intro more text */\\n readonly landingPageIntroMoreText = selectQuerySnapshot(RRS.anyText, RIds.LandingPageIntroMoreText);\\n /** select snapshot for landing page intro img */\\n readonly landingPageIntroImg = selectQuerySnapshot(RRS.url, RIds.LandingPageIntroImg);\\n /** select snapshot for metrics */\\n readonly metrics = selectQuerySnapshot(RRS.field, RIds.Metrics, RTypes.Metrics, \'metrics\' as const, []);\\n /** select snapshot for metrics title */\\n readonly metricsTitle = selectQuerySnapshot(RRS.anyText, RIds.MetricsTitle);\\n /** select snapshot for metrics logo */\\n readonly metricsLogo = selectQuerySnapshot(RRS.url, RIds.MetricsLogo);\\n /** select snapshot for landing page depth title */\\n readonly landingPageDepthTitle = selectQuerySnapshot(RRS.anyText, RIds.LandingPageDepthTitle);\\n /** select snapshot for landing page depth description */\\n readonly landingPageDepthDescription = selectQuerySnapshot(RRS.markdown, RIds.LandingPageDepthDescription);\\n /** select snapshot forlanding page depth more text */\\n readonly landingPageDepthMoreText = selectQuerySnapshot(RRS.anyText, RIds.LandingPageDepthMoreText);\\n /** select snapshot for landing page depth img */\\n readonly landingPageDepthImg = selectQuerySnapshot(RRS.url, RIds.LandingPageDepthImg);\\n\\n /** Expose links for use it template */\\n readonly LinkIds = LinkIds;\\n\\n /** Renderer to add class for animation */\\n private readonly renderer = inject(Renderer2);\\n /** destroys observer */\\n private readonly destroy$ = injectDestroy$();\\n\\n /** creates an observer after view init */\\n ngAfterViewInit(): void {\\n const observer = new IntersectionObserver(this.handleIntersection.bind(this), {\\n threshold: 0.18,\\n });\\n\\n this.intersectableEls.forEach((el) => observer.observe(el.nativeElement));\\n this.destroy$.subscribe(() => observer.disconnect());\\n }\\n\\n /** callback function for intersection observer */\\n handleIntersection(entries: IntersectionObserverEntry[], observer: IntersectionObserver): void {\\n for (const { isIntersecting, target } of entries) {\\n if (isIntersecting) {\\n this.renderer.addClass(target, \'visible\');\\n observer.unobserve(target);\\n }\\n }\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n overflow-x: hidden;\\n\\n .intro {\\n margin: 3.5rem 2rem;\\n }\\n\\n .metrics {\\n opacity: 0;\\n\\n &.visible {\\n animation: fadeIn 2s ease-in forwards;\\n }\\n }\\n\\n .in-depth {\\n opacity: 0;\\n\\n &.visible {\\n overflow: hidden;\\n animation: slideIn 2s ease-in-out forwards;\\n }\\n }\\n}\\n\\n@keyframes fadeIn {\\n 0% {\\n opacity: 0;\\n }\\n\\n 100% {\\n opacity: 1;\\n }\\n}\\n\\n@keyframes slideIn {\\n 0% {\\n transform: translateX(200%);\\n opacity: 1;\\n }\\n\\n 100% {\\n transform: translateX(0);\\n opacity: 1;\\n }\\n}\\n","styleUrl":"./landing-page-content.component.scss"}],"stylesData":"","implements":["AfterViewInit"],"templateData":"\\n\\n\\n\\n\\n\\n"},{"name":"MedicalIllustrationBehaviorComponent","id":"component-MedicalIllustrationBehaviorComponent-6fea78f0a6011315eef3ff0e9cf3f451130b68d93388f1b8ff7f362f6c7f2ec8bbad2f6518d0329f94a749b1e02a1018129acf2b8340f015397957c3e0fd985d","file":"src/lib/medical-illustration-behavior/medical-illustration-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-medical-illustration-behavior","styleUrls":["./medical-illustration-behavior.component.scss"],"styles":[],"templateUrl":["./medical-illustration-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"currentUrl","defaultValue":"selectSnapshot(IllustratorSelectors.url)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Current illustration url

\\n","line":23,"rawdescription":"\\n\\nCurrent illustration url\\n","modifierKind":[144]},{"name":"iri","defaultValue":"selectSnapshot(ActiveFtuSelectors.iri)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Iri of medical illustration behavior component

\\n","line":33,"rawdescription":"\\n\\nIri of medical illustration behavior component\\n","modifierKind":[144]},{"name":"mapping","defaultValue":"selectSnapshot(IllustratorSelectors.mapping)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Current mapping file

\\n","line":28,"rawdescription":"\\n\\nCurrent mapping file\\n","modifierKind":[144]},{"name":"tissues","defaultValue":"selectSnapshot(TissueLibrarySelectors.tissues)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Get all tissues

\\n","line":38,"rawdescription":"\\n\\nGet all tissues\\n","modifierKind":[144]},{"name":"updateNodeOnClicked","defaultValue":"dispatch(IllustratorActions.SetClicked)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Updates the active node on node click

\\n","line":57,"rawdescription":"\\n\\nUpdates the active node on node click\\n","modifierKind":[144]},{"name":"updateNodeOnHover","defaultValue":"dispatch(IllustratorActions.SetHover)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Updates the active node on node hover

\\n","line":52,"rawdescription":"\\n\\nUpdates the active node on node hover\\n","modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Behavior component for medical illustration component

\\n","rawdescription":"\\n\\nBehavior component for medical illustration component\\n","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component } from \'@angular/core\';\\nimport { dispatch, selectSnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { LabelBoxComponent } from \'@hra-ui/components/atoms\';\\nimport { InteractiveSvgComponent } from \'@hra-ui/components/molecules\';\\nimport { ActiveFtuSelectors, IllustratorActions, IllustratorSelectors, TissueLibrarySelectors } from \'@hra-ui/state\';\\n\\n/**\\n * Behavior component for medical illustration component\\n */\\n@Component({\\n selector: \'ftu-medical-illustration-behavior\',\\n standalone: true,\\n imports: [CommonModule, InteractiveSvgComponent, LabelBoxComponent],\\n templateUrl: \'./medical-illustration-behavior.component.html\',\\n styleUrls: [\'./medical-illustration-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class MedicalIllustrationBehaviorComponent {\\n /**\\n * Current illustration url\\n */\\n readonly currentUrl = selectSnapshot(IllustratorSelectors.url);\\n\\n /**\\n * Current mapping file\\n */\\n readonly mapping = selectSnapshot(IllustratorSelectors.mapping);\\n\\n /**\\n * Iri of medical illustration behavior component\\n */\\n readonly iri = selectSnapshot(ActiveFtuSelectors.iri);\\n\\n /**\\n * Get all tissues\\n */\\n readonly tissues = selectSnapshot(TissueLibrarySelectors.tissues);\\n\\n /**\\n * Gets tissue title from the list of tissues\\n */\\n get tissueTitle(): string {\\n const iri = this.iri();\\n const tissues = this.tissues();\\n return iri ? tissues[iri].label : \'\';\\n }\\n\\n /**\\n * Updates the active node on node hover\\n */\\n readonly updateNodeOnHover = dispatch(IllustratorActions.SetHover);\\n\\n /**\\n * Updates the active node on node click\\n */\\n readonly updateNodeOnClicked = dispatch(IllustratorActions.SetClicked);\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n hra-label-box {\\n border-bottom: 0.063rem solid #d3d3d3;\\n width: 100%;\\n height: 3.5rem;\\n }\\n}\\n","styleUrl":"./medical-illustration-behavior.component.scss"}],"stylesData":"","accessors":{"tissueTitle":{"name":"tissueTitle","getSignature":{"name":"tissueTitle","type":"string","returnType":"string","line":43,"rawdescription":"\\n\\nGets tissue title from the list of tissues\\n","description":"

Gets tissue title from the list of tissues

\\n"}}},"templateData":"{{ tissueTitle }}\\n\\n\\n"},{"name":"ScreenNoticeBehaviorComponent","id":"component-ScreenNoticeBehaviorComponent-de4fc156bf7f658d9ca0a8d114626d829387a03f3b206cb5439f1ad22b9e157cbc51e850b06eb8f0b9dd48a75acb723b42c7fd79d0c50694757e9d23cac9f416","file":"src/lib/screen-notice-behavior/screen-notice-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-ui-screen-notice-behavior","styleUrls":["./screen-notice-behavior.component.scss"],"styles":[],"templateUrl":["./screen-notice-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"content","defaultValue":"selectQuerySnapshot(RR.anyText, ResourceIds.ScreenSizeNoticeContent)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Content of screen notice behavior component

\\n","line":21,"rawdescription":"\\nContent of screen notice behavior component","modifierKind":[144]},{"name":"portal","defaultValue":"LinkIds.Portal","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Hra portal link routing after clicking on HRA Portal

\\n","line":24,"rawdescription":"\\nHra portal link routing after clicking on HRA Portal","modifierKind":[144]}],"methodsClass":[{"name":"close","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":33,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which closes the screen size notice dialog box","description":"

A function which closes the screen size notice dialog box

\\n"}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

A component for screen size notice behavior which provides the content to be displayed and provides functionality\\nfor the buttons on the notice modal

\\n","rawdescription":"\\nA component for screen size notice behavior which provides the content to be displayed and provides functionality\\nfor the buttons on the notice modal","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, inject } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { dispatch, selectQuerySnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RR, StorageActions, StorageId } from \'@hra-ui/cdk/state\';\\nimport { ResourceIds, LinkIds } from \'@hra-ui/state\';\\nimport { ScreenSizeNoticeComponent } from \'@hra-ui/components/molecules\';\\nimport { MatDialogRef } from \'@angular/material/dialog\';\\n\\n/** A component for screen size notice behavior which provides the content to be displayed and provides functionality\\n * for the buttons on the notice modal */\\n@Component({\\n selector: \'ftu-ui-screen-notice-behavior\',\\n standalone: true,\\n imports: [CommonModule, ScreenSizeNoticeComponent],\\n templateUrl: \'./screen-notice-behavior.component.html\',\\n styleUrls: [\'./screen-notice-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class ScreenNoticeBehaviorComponent {\\n /** Content of screen notice behavior component*/\\n readonly content = selectQuerySnapshot(RR.anyText, ResourceIds.ScreenSizeNoticeContent);\\n\\n /** Hra portal link routing after clicking on HRA Portal*/\\n readonly portal = LinkIds.Portal;\\n\\n /** Reference for the screen size notice dialog box*/\\n private readonly ref = inject(MatDialogRef, { optional: true });\\n\\n /** A dispatcher function that sets the Local Storage as \'shown\'*/\\n private readonly setScreenNoticeShown = dispatch(StorageActions.Set, StorageId.Local, \'screen-size-notice\', \'shown\');\\n\\n /** A function which closes the screen size notice dialog box*/\\n close(): void {\\n this.setScreenNoticeShown();\\n this.ref?.close();\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n}\\n","styleUrl":"./screen-notice-behavior.component.scss"}],"stylesData":"","templateData":" \\n"},{"name":"TissueLibraryBehaviorComponent","id":"component-TissueLibraryBehaviorComponent-1565978e9f70870b546b49f929236ee86c2eb9cc241e10b805863df59e4d66dca72495ffa8c27a7f282e396acc84f78b6724255570a4eab733a3af995543b47a","file":"src/lib/tissue-library-behavior/tissue-library-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-tissue-library-behavior","styleUrls":["./tissue-library-behavior.component.scss"],"styles":[],"templateUrl":["./tissue-library-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"list","deprecated":false,"deprecationMessage":"","type":"TissueTreeListComponent","optional":true,"description":"

Reference to the TissueTreeListComponent.

\\n","line":25,"rawdescription":"\\n\\nReference to the TissueTreeListComponent.\\n","decorators":[{"name":"ViewChild","stringifiedArguments":"\'list\', {static: true}"}],"modifierKind":[144]},{"name":"selected","deprecated":false,"deprecationMessage":"","type":"Tissue","optional":true,"description":"

Selected of tissue library behavior component

\\n","line":34,"rawdescription":"\\n\\nSelected of tissue library behavior component\\n"},{"name":"tissues","defaultValue":"selectSnapshot(TissueLibrarySelectors.tissues)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for tissues data

\\n","line":30,"rawdescription":"\\n\\nInput for tissues data\\n","modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for Tissue Library Behavior

\\n","rawdescription":"\\n\\nComponent for Tissue Library Behavior\\n","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, ViewChild } from \'@angular/core\';\\nimport { select$, selectSnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { TissueTreeListComponent } from \'@hra-ui/components/molecules\';\\nimport { Tissue } from \'@hra-ui/services\';\\nimport { ActiveFtuSelectors, TissueLibrarySelectors } from \'@hra-ui/state\';\\nimport { LabelBoxComponent } from \'@hra-ui/components/atoms\';\\n\\n/**\\n * Component for Tissue Library Behavior\\n */\\n@Component({\\n selector: \'ftu-tissue-library-behavior\',\\n standalone: true,\\n imports: [CommonModule, LabelBoxComponent, TissueTreeListComponent],\\n templateUrl: \'./tissue-library-behavior.component.html\',\\n styleUrls: [\'./tissue-library-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class TissueLibraryBehaviorComponent {\\n /**\\n * Reference to the TissueTreeListComponent.\\n */\\n @ViewChild(\'list\', { static: true })\\n readonly list?: TissueTreeListComponent;\\n\\n /**\\n * Input for tissues data\\n */\\n readonly tissues = selectSnapshot(TissueLibrarySelectors.tissues);\\n /**\\n * Selected of tissue library behavior component\\n */\\n selected?: Tissue;\\n\\n /**\\n * Sets the TissueItem instance as undefined if\\n * the url is undefined\\n */\\n constructor() {\\n /** Get iris from the observable else reset selection if\\n * iri is undefined\\n */\\n select$(ActiveFtuSelectors.iri).subscribe((iri) => {\\n this.selected = iri && this.tissues()[iri];\\n if (iri === undefined) {\\n this.list?.resetSelection();\\n }\\n });\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n .label {\\n border-bottom: 1px solid #e2e7e9;\\n width: 100%;\\n height: 3.5rem;\\n }\\n}\\n","styleUrl":"./tissue-library-behavior.component.scss"}],"stylesData":"","constructorObj":{"name":"constructor","description":"

Sets the TissueItem instance as undefined if\\nthe url is undefined

\\n","deprecated":false,"deprecationMessage":"","args":[],"line":34,"rawdescription":"\\n\\nSets the TissueItem instance as undefined if\\nthe url is undefined\\n"},"templateData":"FTU Library\\n \\n"}],"modules":[],"miscellaneous":{"variables":[{"name":"EMPTY_TISSUE_INFO","ctype":"miscellaneous","subtype":"variable","file":"src/lib/biomarker-details/biomarker-details.component.ts","deprecated":false,"deprecationMessage":"","type":"TissueInfo","defaultValue":"{\\n id: \'\',\\n label: \'\',\\n}","rawdescription":"PlaceHolder for Empty Tissue Info","description":"

PlaceHolder for Empty Tissue Info

\\n"},{"name":"EMPTY_TISSUE_INFO","ctype":"miscellaneous","subtype":"variable","file":"src/lib/biomarker-details-wc/biomarker-details-wc.component.ts","deprecated":false,"deprecationMessage":"","type":"TissueInfo","defaultValue":"{\\n id: \'\',\\n label: \'\',\\n}","rawdescription":"PlaceHolder for Empty Tissue Info","description":"

PlaceHolder for Empty Tissue Info

\\n"}],"functions":[],"typealiases":[],"enumerations":[],"groupedVariables":{"src/lib/biomarker-details/biomarker-details.component.ts":[{"name":"EMPTY_TISSUE_INFO","ctype":"miscellaneous","subtype":"variable","file":"src/lib/biomarker-details/biomarker-details.component.ts","deprecated":false,"deprecationMessage":"","type":"TissueInfo","defaultValue":"{\\n id: \'\',\\n label: \'\',\\n}","rawdescription":"PlaceHolder for Empty Tissue Info","description":"

PlaceHolder for Empty Tissue Info

\\n"}],"src/lib/biomarker-details-wc/biomarker-details-wc.component.ts":[{"name":"EMPTY_TISSUE_INFO","ctype":"miscellaneous","subtype":"variable","file":"src/lib/biomarker-details-wc/biomarker-details-wc.component.ts","deprecated":false,"deprecationMessage":"","type":"TissueInfo","defaultValue":"{\\n id: \'\',\\n label: \'\',\\n}","rawdescription":"PlaceHolder for Empty Tissue Info","description":"

PlaceHolder for Empty Tissue Info

\\n"}]},"groupedFunctions":{},"groupedEnumerations":{},"groupedTypeAliases":{}}}')},"./dist/compodoc/components-molecules/documentation.json":module=>{"use strict";module.exports=JSON.parse('{"pipes":[],"interfaces":[{"name":"ContactData","id":"interface-ContactData-309310b2740da63be5ea5aaa894ef73ced8bed2a86b50643af4dd031551d6cdb7b26ece6b3328d0e31c21e46f940bd8b901f5665c241ca2a4cb38f39631bd8a3","file":"src/lib/contact-modal/contact-modal.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EmailInputComponent, RequiredInputComponent, RequiredTextboxComponent } from \'@hra-ui/components/atoms\';\\nimport { produce } from \'immer\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/**\\n An interface representing contact data information which will be emitted if all the fields are in correct format.\\n */\\nexport interface ContactData {\\n /** The email address of the person submitting the form. */\\n email: string;\\n /** The subject line of the message being sent. */\\n subject: string;\\n /** The body of the message being sent. */\\n message: string;\\n}\\n\\n/** Initial empty contact data */\\nconst EMPTY_CONTACT_DATA: Partial = {\\n email: undefined,\\n subject: undefined,\\n message: undefined,\\n};\\n\\n/**\\n * Contact modal component.\\n */\\n@Component({\\n selector: \'hra-contact-modal\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatButtonModule,\\n MatIconModule,\\n EmailInputComponent,\\n MarkdownModule,\\n RequiredTextboxComponent,\\n RequiredInputComponent,\\n ],\\n templateUrl: \'./contact-modal.component.html\',\\n styleUrls: [\'./contact-modal.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class ContactModalComponent {\\n /** Input for product logo URL to displayed on the left side. */\\n @Input() productLogoUrl = \'\';\\n\\n /** Input for product title to displayed on the left side. */\\n @Input() productTitle = \'\';\\n\\n /** Emits when the submit button is clicked and all the values are appropriate. */\\n @Output() readonly submitClick = new EventEmitter();\\n\\n /** Emits when the cancel button or close icon is clicked */\\n @Output() readonly closeClick = new EventEmitter();\\n\\n /** A function to disable the submit button. If all the values are in approproiate format, then it will be enabled. */\\n get disableSubmit(): boolean {\\n return Object.values(this.contactData).some((value) => value === undefined);\\n }\\n\\n /** Asigns the undefined initially to all the input fields. */\\n contactData = EMPTY_CONTACT_DATA;\\n\\n /** Updates the contact data object with a new value for a given key. */\\n updateData(key: K, value?: ContactData[K]): void {\\n this.contactData = produce(this.contactData, (draft) => {\\n draft[key] = value;\\n });\\n }\\n\\n /** It emits the updated value of contact data */\\n submit(): void {\\n this.submitClick.emit(this.contactData as ContactData);\\n }\\n}\\n","properties":[{"name":"email","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

The email address of the person submitting the form.

\\n","line":14,"rawdescription":"\\nThe email address of the person submitting the form."},{"name":"message","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

The body of the message being sent.

\\n","line":18,"rawdescription":"\\nThe body of the message being sent."},{"name":"subject","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

The subject line of the message being sent.

\\n","line":16,"rawdescription":"\\nThe subject line of the message being sent."}],"indexSignatures":[],"kind":165,"description":"

An interface representing contact data information which will be emitted if all the fields are in correct format.

\\n","rawdescription":"\\n\\nAn interface representing contact data information which will be emitted if all the fields are in correct format.\\n","methods":[]},{"name":"DataItem","id":"interface-DataItem-dba50a1e9cbac5f9733930bd6b04d1ac5fda31ee6342e13da75314f7b5dbbf46c436aab104bfc47abdc323e9ff42aeeb0047ee89577f639d3979c6964344bbd7","file":"src/lib/biomarker-table-data-card/biomarker-table-data-card.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule } from \'@angular/material/table\';\\n\\n/** An item which defines a string label and a string value */\\nexport interface DataItem {\\n /** A string property that represents the label */\\n label: string;\\n /** A string property that represents the value */\\n value: string;\\n}\\n\\n/** An item which represents a section with a data item and an indicator for the last item in the section */\\nexport interface SectionItem {\\n /** A number property that represents the section number */\\n section: number;\\n /** A DateItem property that represents a section and its data */\\n data: DataItem;\\n /** A boolean property that represents the last item of a section */\\n isLastItem: boolean;\\n}\\n\\n/** This component displays a table with sections, where each section contains a list of items with a label and a value. */\\n@Component({\\n selector: \'hra-biomarker-table-data-card\',\\n standalone: true,\\n imports: [CommonModule, MatTableModule],\\n templateUrl: \'./biomarker-table-data-card.component.html\',\\n styleUrls: [\'./biomarker-table-data-card.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableDataCardComponent implements OnChanges {\\n /** Nested list of DataItems for each section which is displayed to the user */\\n @Input() data: DataItem[][] = [];\\n\\n /** Converted nested array of DataItem into Flat array of SectionItem */\\n sectionItems: SectionItem[] = [];\\n\\n /** Triggers an update on sectionItems array when data is changed */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.updateSectionItems();\\n }\\n }\\n\\n /** Updates sectionItems array when data is changed */\\n private updateSectionItems(): void {\\n const newSectionItems: SectionItem[] = [];\\n\\n this.data.forEach((section, sectionIndex) => {\\n section.forEach((item, itemIndex) => {\\n newSectionItems.push({\\n data: item,\\n section: sectionIndex,\\n isLastItem: itemIndex === section.length - 1,\\n });\\n });\\n });\\n\\n this.sectionItems = newSectionItems;\\n }\\n}\\n","properties":[{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

A string property that represents the label

\\n","line":8,"rawdescription":"\\nA string property that represents the label"},{"name":"value","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

A string property that represents the value

\\n","line":10,"rawdescription":"\\nA string property that represents the value"}],"indexSignatures":[],"kind":165,"description":"

An item which defines a string label and a string value

\\n","rawdescription":"\\nAn item which defines a string label and a string value","methods":[]},{"name":"DataNode","id":"interface-DataNode-8544338e8c5e11dd440f8b104bfa31552155bc5006289770258a8e940978177df7797adcb9bafb5b09a9943913ecf339692d528f868c6846be5c3de8a6270237","file":"src/lib/tissue-tree-list/tissue-tree-list.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { FlatTreeControl } from \'@angular/cdk/tree\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n Input,\\n OnChanges,\\n Output,\\n SimpleChanges,\\n} from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatRippleModule } from \'@angular/material/core\';\\nimport { MatExpansionModule } from \'@angular/material/expansion\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatTreeFlatDataSource, MatTreeFlattener, MatTreeModule } from \'@angular/material/tree\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { LinkId } from \'@hra-ui/cdk/state\';\\n\\n/** Base node type */\\nexport interface DataNode {\\n /** User readable label */\\n label: string;\\n /** Id to pass as a query parameter on navigation */\\n id?: string;\\n /** Link to navigate to on node click */\\n link?: LinkId;\\n /** Nested nodes */\\n children?: K[];\\n}\\n\\n/**\\n * Internal interface for flat tissue data hierarchy\\n */\\ninterface InternalNode> {\\n /** Displayed label */\\n label: string;\\n /** Whether the node can be expanded to display child nodes */\\n expandable: boolean;\\n /** Depth of node in the tree */\\n level: number;\\n /** Associated user node data */\\n data: T;\\n}\\n\\n/**\\n * Tabular View for hubMap tissue side-bar\\n */\\n@Component({\\n selector: \'hra-tissue-tree-list\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatButtonModule,\\n MatTreeModule,\\n MatIconModule,\\n MatExpansionModule,\\n MatRippleModule,\\n LinkDirective,\\n ],\\n templateUrl: \'./tissue-tree-list.component.html\',\\n styleUrls: [\'./tissue-tree-list.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class TissueTreeListComponent> implements OnChanges {\\n /**\\n * Input of tissue tree list component\\n */\\n @Input() nodes: Record = {} as Record;\\n\\n /**\\n * Node selected, to view the data associated with it\\n */\\n @Input() selected?: T = undefined;\\n\\n /**\\n * Output of tissue tree list component\\n */\\n @Output() readonly selectedChange = new EventEmitter();\\n\\n /**\\n * tree controller, used to control the nodes in the tree\\n */\\n readonly control = new FlatTreeControl>(\\n (node) => node.level,\\n (node) => node.expandable\\n );\\n\\n /**\\n * Flattener of tissue tree list component, returns flat-data structure\\n */\\n readonly flattener = new MatTreeFlattener>(\\n (node, level) => ({\\n label: node.label,\\n expandable: (node.children?.length ?? 0) > 0,\\n level,\\n data: node,\\n }),\\n (node) => node.level,\\n (node) => node.expandable,\\n (node) => node.children?.map((id) => this.nodes[id])\\n );\\n\\n /**\\n * Data source of tissue tree list component, defines the data in mat-tree\\n */\\n readonly dataSource = new MatTreeFlatDataSource(this.control, this.flattener);\\n\\n /**\\n * Take actions if any data changes\\n * @param changes changes in data\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'nodes\' in changes) {\\n this.dataSource.data = this.findRootNodes();\\n }\\n if (\'selected\' in changes) {\\n const path = this.selected ? this.dfsFindPath(this.findRootNodes(), this.selected) : [];\\n this.expandPath(path);\\n }\\n }\\n\\n /**\\n * check if the current node has children\\n * @param node current selected node\\n * @returns boolean, which means if node has children\\n */\\n hasChild(_: number, node: InternalNode): boolean {\\n return node.expandable;\\n }\\n\\n /**\\n * It selects the node, which is clicked.\\n * @param node Tissue Tree Item, which is clicked\\n */\\n selectNode(node: T): void {\\n if (this.selected !== node) {\\n this.selected = node;\\n this.selectedChange.emit(this.selected);\\n }\\n }\\n\\n /**\\n * Resets selection and collapes all nodes of the tree.\\n */\\n resetSelection(): void {\\n this.selected = undefined;\\n this.control.collapseAll();\\n }\\n\\n /**\\n * It creates a copy of the input nodes object.\\n * It iterates over it and removes all the children nodes from it.\\n * @returns remaining nodes which are root nodes.\\n */\\n private findRootNodes(): T[] {\\n const { nodes } = this;\\n const roots = { ...this.nodes };\\n for (const key in nodes) {\\n for (const child of nodes[key].children ?? []) {\\n delete roots[child];\\n }\\n }\\n\\n return Object.values(roots);\\n }\\n\\n /**\\n * expands the tree nodes based on the path provided.\\n * @param path is given as an input.\\n */\\n private expandPath(path: DataNode[]): void {\\n const nodes = this.control.dataNodes.filter((node) => path.includes(node.data));\\n nodes.forEach((node) => this.control.expand(node));\\n }\\n\\n /**\\n * It used the logic of depth first search to find the target node.\\n * returns the path to the target node.\\n */\\n private dfsFindPath(nodes: T[], target: T, path: T[] = []): T[] {\\n for (const node of nodes) {\\n path.push(node);\\n if (node === target) {\\n return path;\\n }\\n\\n const savedLength = path.length;\\n const children = node.children?.map((id) => this.nodes[id]) ?? [];\\n if (this.dfsFindPath(children, target, path).length > savedLength) {\\n return path;\\n }\\n\\n path.pop();\\n }\\n\\n return path;\\n }\\n}\\n","properties":[{"name":"children","deprecated":false,"deprecationMessage":"","type":"K[]","optional":true,"description":"

Nested nodes

\\n","line":29,"rawdescription":"\\nNested nodes"},{"name":"id","deprecated":false,"deprecationMessage":"","type":"string","optional":true,"description":"

Id to pass as a query parameter on navigation

\\n","line":25,"rawdescription":"\\nId to pass as a query parameter on navigation"},{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

User readable label

\\n","line":23,"rawdescription":"\\nUser readable label"},{"name":"link","deprecated":false,"deprecationMessage":"","type":"LinkId","optional":true,"description":"

Link to navigate to on node click

\\n","line":27,"rawdescription":"\\nLink to navigate to on node click"}],"indexSignatures":[],"kind":165,"description":"

Base node type

\\n","rawdescription":"\\nBase node type","methods":[]},{"name":"DownloadFormat","id":"interface-DownloadFormat-45c5a61fc5d68c201808fb76ff867f9a7cf8e42e6ef95ae08b440dbd37ce63eb4c77c3da0597ef90973854d65522a3ba496eeb5eccbe75750c1fd2f5abf52e6b","file":"src/lib/footer/footer.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { ConnectedPosition, OverlayModule } from \'@angular/cdk/overlay\';\\nimport { MatListModule } from \'@angular/material/list\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { EMPTY_LINK } from \'@hra-ui/cdk/state\';\\n\\n/**\\n * Base type for different download format options.\\n */\\nexport interface DownloadFormat {\\n /**\\n * User readable format label\\n */\\n label: string;\\n}\\n\\n/**\\n * Positioning value for the download list popup\\n */\\nconst DOWNLOADS_LIST_POSITION: ConnectedPosition[] = [\\n {\\n panelClass: \'above\',\\n originX: \'start\',\\n originY: \'top\',\\n overlayX: \'start\',\\n overlayY: \'bottom\',\\n offsetY: 0,\\n },\\n {\\n panelClass: \'below\',\\n originX: \'start\',\\n originY: \'bottom\',\\n overlayX: \'start\',\\n overlayY: \'top\',\\n },\\n];\\n\\n/**\\n * Component for footer that displays its content at the bottom of the page with different action buttons.\\n */\\n@Component({\\n selector: \'hra-footer\',\\n standalone: true,\\n imports: [CommonModule, MatButtonModule, MatIconModule, OverlayModule, MatListModule, LinkDirective],\\n templateUrl: \'./footer.component.html\',\\n styleUrls: [\'./footer.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class FooterComponent {\\n /** Host binding of footer component */\\n @HostBinding(\'class\')\\n @Input()\\n size: \'small\' | \'large\' = \'large\';\\n\\n /** Input for product logo URL to displayed on the left side. */\\n @Input() productLogoUrl = \'\';\\n\\n /** Input for product title to displayed on the left side. */\\n @Input() productTitle = \'\';\\n\\n /** Input for HRA Portal link */\\n @Input() hraPortal = EMPTY_LINK;\\n\\n /** Input for Illustration metadata page link in HRA Portal */\\n @Input() illustrationMetadata = EMPTY_LINK;\\n\\n /** Input for embed link in HRA Portal */\\n @Input() embed = EMPTY_LINK;\\n\\n /** Different download formats options displayed to the user */\\n @Input() downloadFormats: T[] = [];\\n\\n /** Emits the selected download format */\\n @Output() readonly download = new EventEmitter();\\n\\n /** Emits when the contact button is clicked */\\n @Output() readonly contactClick = new EventEmitter();\\n\\n /** Download list popup overlay positioning */\\n readonly DOWNLOADS_LIST_POSITION = DOWNLOADS_LIST_POSITION;\\n\\n /** Gets whether the footer required is small */\\n get isSmall(): boolean {\\n return this.size === \'small\';\\n }\\n\\n /** Whether the download list panel is open */\\n downloadListOpen = false;\\n}\\n","properties":[{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

User readable format label

\\n","line":17,"rawdescription":"\\n\\nUser readable format label\\n"}],"indexSignatures":[],"kind":165,"description":"

Base type for different download format options.

\\n","rawdescription":"\\n\\nBase type for different download format options.\\n","methods":[]},{"name":"InternalNode","id":"interface-InternalNode-8544338e8c5e11dd440f8b104bfa31552155bc5006289770258a8e940978177df7797adcb9bafb5b09a9943913ecf339692d528f868c6846be5c3de8a6270237","file":"src/lib/tissue-tree-list/tissue-tree-list.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { FlatTreeControl } from \'@angular/cdk/tree\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n Input,\\n OnChanges,\\n Output,\\n SimpleChanges,\\n} from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatRippleModule } from \'@angular/material/core\';\\nimport { MatExpansionModule } from \'@angular/material/expansion\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatTreeFlatDataSource, MatTreeFlattener, MatTreeModule } from \'@angular/material/tree\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { LinkId } from \'@hra-ui/cdk/state\';\\n\\n/** Base node type */\\nexport interface DataNode {\\n /** User readable label */\\n label: string;\\n /** Id to pass as a query parameter on navigation */\\n id?: string;\\n /** Link to navigate to on node click */\\n link?: LinkId;\\n /** Nested nodes */\\n children?: K[];\\n}\\n\\n/**\\n * Internal interface for flat tissue data hierarchy\\n */\\ninterface InternalNode> {\\n /** Displayed label */\\n label: string;\\n /** Whether the node can be expanded to display child nodes */\\n expandable: boolean;\\n /** Depth of node in the tree */\\n level: number;\\n /** Associated user node data */\\n data: T;\\n}\\n\\n/**\\n * Tabular View for hubMap tissue side-bar\\n */\\n@Component({\\n selector: \'hra-tissue-tree-list\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatButtonModule,\\n MatTreeModule,\\n MatIconModule,\\n MatExpansionModule,\\n MatRippleModule,\\n LinkDirective,\\n ],\\n templateUrl: \'./tissue-tree-list.component.html\',\\n styleUrls: [\'./tissue-tree-list.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class TissueTreeListComponent> implements OnChanges {\\n /**\\n * Input of tissue tree list component\\n */\\n @Input() nodes: Record = {} as Record;\\n\\n /**\\n * Node selected, to view the data associated with it\\n */\\n @Input() selected?: T = undefined;\\n\\n /**\\n * Output of tissue tree list component\\n */\\n @Output() readonly selectedChange = new EventEmitter();\\n\\n /**\\n * tree controller, used to control the nodes in the tree\\n */\\n readonly control = new FlatTreeControl>(\\n (node) => node.level,\\n (node) => node.expandable\\n );\\n\\n /**\\n * Flattener of tissue tree list component, returns flat-data structure\\n */\\n readonly flattener = new MatTreeFlattener>(\\n (node, level) => ({\\n label: node.label,\\n expandable: (node.children?.length ?? 0) > 0,\\n level,\\n data: node,\\n }),\\n (node) => node.level,\\n (node) => node.expandable,\\n (node) => node.children?.map((id) => this.nodes[id])\\n );\\n\\n /**\\n * Data source of tissue tree list component, defines the data in mat-tree\\n */\\n readonly dataSource = new MatTreeFlatDataSource(this.control, this.flattener);\\n\\n /**\\n * Take actions if any data changes\\n * @param changes changes in data\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'nodes\' in changes) {\\n this.dataSource.data = this.findRootNodes();\\n }\\n if (\'selected\' in changes) {\\n const path = this.selected ? this.dfsFindPath(this.findRootNodes(), this.selected) : [];\\n this.expandPath(path);\\n }\\n }\\n\\n /**\\n * check if the current node has children\\n * @param node current selected node\\n * @returns boolean, which means if node has children\\n */\\n hasChild(_: number, node: InternalNode): boolean {\\n return node.expandable;\\n }\\n\\n /**\\n * It selects the node, which is clicked.\\n * @param node Tissue Tree Item, which is clicked\\n */\\n selectNode(node: T): void {\\n if (this.selected !== node) {\\n this.selected = node;\\n this.selectedChange.emit(this.selected);\\n }\\n }\\n\\n /**\\n * Resets selection and collapes all nodes of the tree.\\n */\\n resetSelection(): void {\\n this.selected = undefined;\\n this.control.collapseAll();\\n }\\n\\n /**\\n * It creates a copy of the input nodes object.\\n * It iterates over it and removes all the children nodes from it.\\n * @returns remaining nodes which are root nodes.\\n */\\n private findRootNodes(): T[] {\\n const { nodes } = this;\\n const roots = { ...this.nodes };\\n for (const key in nodes) {\\n for (const child of nodes[key].children ?? []) {\\n delete roots[child];\\n }\\n }\\n\\n return Object.values(roots);\\n }\\n\\n /**\\n * expands the tree nodes based on the path provided.\\n * @param path is given as an input.\\n */\\n private expandPath(path: DataNode[]): void {\\n const nodes = this.control.dataNodes.filter((node) => path.includes(node.data));\\n nodes.forEach((node) => this.control.expand(node));\\n }\\n\\n /**\\n * It used the logic of depth first search to find the target node.\\n * returns the path to the target node.\\n */\\n private dfsFindPath(nodes: T[], target: T, path: T[] = []): T[] {\\n for (const node of nodes) {\\n path.push(node);\\n if (node === target) {\\n return path;\\n }\\n\\n const savedLength = path.length;\\n const children = node.children?.map((id) => this.nodes[id]) ?? [];\\n if (this.dfsFindPath(children, target, path).length > savedLength) {\\n return path;\\n }\\n\\n path.pop();\\n }\\n\\n return path;\\n }\\n}\\n","properties":[{"name":"data","deprecated":false,"deprecationMessage":"","type":"T","optional":false,"description":"

Associated user node data

\\n","line":43,"rawdescription":"\\nAssociated user node data"},{"name":"expandable","deprecated":false,"deprecationMessage":"","type":"boolean","optional":false,"description":"

Whether the node can be expanded to display child nodes

\\n","line":39,"rawdescription":"\\nWhether the node can be expanded to display child nodes"},{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Displayed label

\\n","line":37,"rawdescription":"\\nDisplayed label"},{"name":"level","deprecated":false,"deprecationMessage":"","type":"number","optional":false,"description":"

Depth of node in the tree

\\n","line":41,"rawdescription":"\\nDepth of node in the tree"}],"indexSignatures":[],"kind":165,"description":"

Internal interface for flat tissue data hierarchy

\\n","rawdescription":"\\n\\nInternal interface for flat tissue data hierarchy\\n","methods":[]},{"name":"MetricItem","id":"interface-MetricItem-e52c0a1cdf090042d1924c4907a4034774cbb442217faca9ec5035e76d2796116cf55644ecf49ae040fdea1168f9c5d99f6ce15b2079f70de3d853fece481b30","file":"src/lib/metrics/metrics.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\n\\n/**\\n An interface representing a single metric with an icon, value and description.\\n */\\nexport interface MetricItem {\\n /** Represents the icon associated with the metric. */\\n icon: string;\\n /** Describes the numberical value of the metric. */\\n value: string;\\n /** Describes the type of metric. */\\n description: string;\\n}\\n/**\\n * Describes the metrics for the HuBMAP project.\\n */\\n@Component({\\n selector: \'hra-metrics\',\\n standalone: true,\\n imports: [CommonModule],\\n templateUrl: \'./metrics.component.html\',\\n styleUrls: [\'./metrics.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class MetricsComponent {\\n /** Main title of metrics component. */\\n @Input() title = \'\';\\n\\n /** Logo of metrics component. */\\n @Input() logo = \'\';\\n\\n /** List of metrics that will be shown to the user. */\\n @Input() metrics: MetricItem[] = [];\\n}\\n","properties":[{"name":"description","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Describes the type of metric.

\\n","line":13,"rawdescription":"\\nDescribes the type of metric."},{"name":"icon","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Represents the icon associated with the metric.

\\n","line":9,"rawdescription":"\\nRepresents the icon associated with the metric."},{"name":"value","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Describes the numberical value of the metric.

\\n","line":11,"rawdescription":"\\nDescribes the numberical value of the metric."}],"indexSignatures":[],"kind":165,"description":"

An interface representing a single metric with an icon, value and description.

\\n","rawdescription":"\\n\\nAn interface representing a single metric with an icon, value and description.\\n","methods":[]},{"name":"NodeMapEntry","id":"interface-NodeMapEntry-34dafc0493fcadf92dd676bebad498e3798e87879ccd7ab9c56dfb6b52cf51b41a6b132fa4c00fa2f32867f3f84829bef3163da37de19cf480f10a8cd94e74f1","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ConnectedPosition, OverlayModule } from \'@angular/cdk/overlay\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n inject,\\n Input,\\n OnChanges,\\n OnDestroy,\\n Output,\\n Renderer2,\\n SimpleChanges,\\n ViewEncapsulation,\\n} from \'@angular/core\';\\nimport { TooltipComponent } from \'@hra-ui/components/atoms\';\\nimport { InlineSVGModule, SVGScriptEvalMode } from \'ng-inline-svg-2\';\\nimport { BehaviorSubject, debounce, fromEventPattern, Observable, Subject, takeUntil, timer } from \'rxjs\';\\nimport { NodeEventHandler } from \'rxjs/internal/observable/fromEvent\';\\n\\n/** Delay before tooltip becomes visible */\\nconst HOVER_DELAY = 200;\\n\\n/** Tooltip position settings */\\nconst TOOLTIP_POSITIONS: ConnectedPosition[] = [\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'start\',\\n overlayY: \'center\',\\n offsetX: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'end\',\\n overlayY: \'center\',\\n offsetX: -8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'top\',\\n offsetY: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'bottom\',\\n offsetY: -8,\\n },\\n];\\n\\n/** Node tooltip data */\\nexport interface NodeTooltipData {\\n /** Node name */\\n node: string;\\n /** Center point of hovered node in screen coordinates */\\n origin: { x: number; y: number };\\n}\\n\\n/** Interface for node entries */\\nexport interface NodeMapEntry {\\n /** Node label */\\n label: string;\\n /** Node id in svg */\\n id: string;\\n /** Ontology id of cell type */\\n ontologyId: string;\\n}\\n\\n/**\\n * Interactive SVG component\\n */\\n@Component({\\n selector: \'hra-interactive-svg\',\\n standalone: true,\\n imports: [CommonModule, InlineSVGModule, OverlayModule, TooltipComponent],\\n templateUrl: \'./interactive-svg.component.html\',\\n styleUrls: [\'./interactive-svg.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n encapsulation: ViewEncapsulation.ShadowDom,\\n})\\nexport class InteractiveSvgComponent implements OnChanges, OnDestroy {\\n /** SVG url */\\n @Input() url?: string;\\n\\n /** Mapping info */\\n @Input() mapping: T[] = [];\\n\\n /** Highlighted ontology id */\\n @Input() highlightId?: string;\\n\\n /** Emits node id when hovered */\\n @Output() readonly nodeHover = new EventEmitter();\\n\\n /** Emits node id when clicked */\\n @Output() readonly nodeClick = new EventEmitter();\\n\\n /** SVG script eval mode */\\n readonly NEVER_EVAL_SCRIPTS = SVGScriptEvalMode.NEVER;\\n\\n /** Tooltip position settings */\\n readonly TOOLTIP_POSITIONS = TOOLTIP_POSITIONS;\\n\\n /** Observable of node hover data or undefined when there is no active hover */\\n readonly nodeHoverData$ = new BehaviorSubject(undefined);\\n\\n /** Observable of node hover with a timer */\\n readonly nodeHoverDelayedData$ = this.nodeHoverData$.pipe(debounce((event) => timer(event ? HOVER_DELAY : 0)));\\n\\n /** Custom renderer */\\n private readonly renderer = inject(Renderer2);\\n\\n /** Destroys */\\n private destroy$ = new Subject();\\n\\n /** Crosswalk element of svg */\\n private crosswalkEl?: Element;\\n\\n /** List of highlighted svg elements */\\n private highlightedElements: Element[] = [];\\n\\n /**\\n * Updates the highlighting based on current highlight id\\n * @param changes\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'highlightId\' in changes) {\\n this.resetHighlight();\\n this.setHighlight();\\n }\\n }\\n\\n /**\\n * Highlights cells that match highlightId\\n */\\n private setHighlight() {\\n const { mapping, highlightId, crosswalkEl } = this;\\n const entry = mapping.find(({ ontologyId }) => ontologyId === highlightId);\\n if (!entry || !crosswalkEl) {\\n return;\\n }\\n\\n let id = this.encodeId(entry.id);\\n const element = crosswalkEl.querySelector(`#${id}`);\\n if (!element) {\\n return;\\n } else if (element.nodeName !== \'g\') {\\n id = element.parentElement?.id ?? \'\';\\n }\\n\\n const elements = crosswalkEl.querySelectorAll(`#${id} :is(path, polygon, polyline)`);\\n this.highlightedElements = Array.from(elements);\\n elements.forEach((el) => el.classList.add(\'click-active\'));\\n }\\n\\n /**\\n * Resets all highlighted elements in the svg\\n */\\n private resetHighlight(): void {\\n for (const el of this.highlightedElements) {\\n el.classList.remove(\'click-active\');\\n }\\n this.highlightedElements = [];\\n }\\n\\n /**\\n * Clears observables on destroy\\n */\\n ngOnDestroy(): void {\\n this.clear();\\n }\\n\\n /**\\n * Sets SVG element\\n * @param el SVG element\\n */\\n setSvgElement(el: SVGElement): void {\\n this.clear();\\n this.crosswalkEl = el.querySelector(\'[id^=\\"Crosswalk\\"]\') ?? undefined;\\n if (this.crosswalkEl) {\\n // Move to front (i.e. last child in svg)\\n this.renderer.appendChild(el, this.crosswalkEl);\\n this.attachCrosswalkHover(this.crosswalkEl);\\n }\\n }\\n\\n /**\\n * Removes underscores from id\\n * @param name Node name\\n * @returns node name without underscores\\n */\\n formatNodeName(name: string): string {\\n return name.replace(/_/g, \' \');\\n }\\n\\n /**\\n * Attaches crosswalk hover\\n * @param el element\\n */\\n private attachCrosswalkHover(el: Element): void {\\n this.attachEvent(el, \'mouseover\').subscribe((event) => this.onCrosswalkHover(event));\\n this.attachEvent(el, \'mouseout\').subscribe(() => this.onCrosswalkHover(undefined as never as MouseEvent));\\n this.attachEvent(el, \'click\').subscribe((event) => this.nodeClick.emit(this.getNode(event)));\\n }\\n\\n /**\\n * Finds matching node in data from a hovered element\\n * @param event Mouse event\\n */\\n private onCrosswalkHover(event: MouseEvent): void {\\n if (event) {\\n const node = this.getNode(event);\\n if (node) {\\n this.nodeHoverData$.next({\\n node: node.label,\\n origin: {\\n x: event.clientX,\\n y: event.clientY,\\n },\\n });\\n this.nodeHover.emit(node); //emits node entry\\n }\\n } else {\\n this.nodeHoverData$.next(undefined);\\n this.nodeHover.emit();\\n }\\n }\\n\\n /**\\n * Clears observables\\n */\\n private clear(): void {\\n this.destroy$.next();\\n this.destroy$.complete();\\n this.destroy$ = new Subject();\\n }\\n\\n /**\\n * Returns entry from mapping if target, parent, or grandparent id matches the node name\\n * @param event Event\\n * @returns Node entry that matches the target id\\n */\\n private getNode(event: Event): T | undefined {\\n const targetId = (event.target as Element).id;\\n const parentId = (event.target as Element).parentElement?.id ?? \'\';\\n const grandparentId = (event.target as Element).parentElement?.parentElement?.id ?? \'\';\\n const idCollection = [targetId, parentId, grandparentId];\\n for (const id of idCollection) {\\n const decodedID = this.decodeId(id);\\n const match = this.mapping.find(\\n (item) => item.id?.toLowerCase() === decodedID.toLowerCase() //search mapping by name for matching node entry\\n );\\n if (match) {\\n return match;\\n }\\n }\\n return undefined;\\n }\\n\\n /**\\n * Decodes id into a normal string\\n * @param id Undecoded ID\\n * @returns id\\n */\\n private decodeId(id: string): string {\\n const replacer = (_match: string, hex: string) => String.fromCharCode(Number.parseInt(hex, 16));\\n return id.replace(/_x([\\\\da-f]+)_/gi, replacer);\\n }\\n\\n /**\\n * Turns normal string into decoded SVG id\\n * @param id id\\n * @returns Encoded id\\n */\\n private encodeId(id: string): string {\\n const replacer = (match: string) => `_x${match.charCodeAt(0).toString(16).toUpperCase()}_`;\\n return id.replace(/[^a-z0-9-]/gi, replacer);\\n }\\n\\n /**\\n * Attaches an event listener\\n * @template K\\n * @param el Element\\n * @param event Event\\n * @returns Observable\\n */\\n private attachEvent(el: Element, event: K): Observable {\\n const { renderer, destroy$ } = this;\\n const add = (handler: NodeEventHandler) => renderer.listen(el, event, handler);\\n const remove = (_handler: NodeEventHandler, unlisten: () => void) => unlisten();\\n return fromEventPattern(add, remove).pipe(takeUntil(destroy$));\\n }\\n}\\n","properties":[{"name":"id","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Node id in svg

\\n","line":69,"rawdescription":"\\nNode id in svg"},{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Node label

\\n","line":67,"rawdescription":"\\nNode label"},{"name":"ontologyId","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Ontology id of cell type

\\n","line":71,"rawdescription":"\\nOntology id of cell type"}],"indexSignatures":[],"kind":165,"description":"

Interface for node entries

\\n","rawdescription":"\\nInterface for node entries","methods":[]},{"name":"NodeTooltipData","id":"interface-NodeTooltipData-34dafc0493fcadf92dd676bebad498e3798e87879ccd7ab9c56dfb6b52cf51b41a6b132fa4c00fa2f32867f3f84829bef3163da37de19cf480f10a8cd94e74f1","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ConnectedPosition, OverlayModule } from \'@angular/cdk/overlay\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n inject,\\n Input,\\n OnChanges,\\n OnDestroy,\\n Output,\\n Renderer2,\\n SimpleChanges,\\n ViewEncapsulation,\\n} from \'@angular/core\';\\nimport { TooltipComponent } from \'@hra-ui/components/atoms\';\\nimport { InlineSVGModule, SVGScriptEvalMode } from \'ng-inline-svg-2\';\\nimport { BehaviorSubject, debounce, fromEventPattern, Observable, Subject, takeUntil, timer } from \'rxjs\';\\nimport { NodeEventHandler } from \'rxjs/internal/observable/fromEvent\';\\n\\n/** Delay before tooltip becomes visible */\\nconst HOVER_DELAY = 200;\\n\\n/** Tooltip position settings */\\nconst TOOLTIP_POSITIONS: ConnectedPosition[] = [\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'start\',\\n overlayY: \'center\',\\n offsetX: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'end\',\\n overlayY: \'center\',\\n offsetX: -8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'top\',\\n offsetY: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'bottom\',\\n offsetY: -8,\\n },\\n];\\n\\n/** Node tooltip data */\\nexport interface NodeTooltipData {\\n /** Node name */\\n node: string;\\n /** Center point of hovered node in screen coordinates */\\n origin: { x: number; y: number };\\n}\\n\\n/** Interface for node entries */\\nexport interface NodeMapEntry {\\n /** Node label */\\n label: string;\\n /** Node id in svg */\\n id: string;\\n /** Ontology id of cell type */\\n ontologyId: string;\\n}\\n\\n/**\\n * Interactive SVG component\\n */\\n@Component({\\n selector: \'hra-interactive-svg\',\\n standalone: true,\\n imports: [CommonModule, InlineSVGModule, OverlayModule, TooltipComponent],\\n templateUrl: \'./interactive-svg.component.html\',\\n styleUrls: [\'./interactive-svg.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n encapsulation: ViewEncapsulation.ShadowDom,\\n})\\nexport class InteractiveSvgComponent implements OnChanges, OnDestroy {\\n /** SVG url */\\n @Input() url?: string;\\n\\n /** Mapping info */\\n @Input() mapping: T[] = [];\\n\\n /** Highlighted ontology id */\\n @Input() highlightId?: string;\\n\\n /** Emits node id when hovered */\\n @Output() readonly nodeHover = new EventEmitter();\\n\\n /** Emits node id when clicked */\\n @Output() readonly nodeClick = new EventEmitter();\\n\\n /** SVG script eval mode */\\n readonly NEVER_EVAL_SCRIPTS = SVGScriptEvalMode.NEVER;\\n\\n /** Tooltip position settings */\\n readonly TOOLTIP_POSITIONS = TOOLTIP_POSITIONS;\\n\\n /** Observable of node hover data or undefined when there is no active hover */\\n readonly nodeHoverData$ = new BehaviorSubject(undefined);\\n\\n /** Observable of node hover with a timer */\\n readonly nodeHoverDelayedData$ = this.nodeHoverData$.pipe(debounce((event) => timer(event ? HOVER_DELAY : 0)));\\n\\n /** Custom renderer */\\n private readonly renderer = inject(Renderer2);\\n\\n /** Destroys */\\n private destroy$ = new Subject();\\n\\n /** Crosswalk element of svg */\\n private crosswalkEl?: Element;\\n\\n /** List of highlighted svg elements */\\n private highlightedElements: Element[] = [];\\n\\n /**\\n * Updates the highlighting based on current highlight id\\n * @param changes\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'highlightId\' in changes) {\\n this.resetHighlight();\\n this.setHighlight();\\n }\\n }\\n\\n /**\\n * Highlights cells that match highlightId\\n */\\n private setHighlight() {\\n const { mapping, highlightId, crosswalkEl } = this;\\n const entry = mapping.find(({ ontologyId }) => ontologyId === highlightId);\\n if (!entry || !crosswalkEl) {\\n return;\\n }\\n\\n let id = this.encodeId(entry.id);\\n const element = crosswalkEl.querySelector(`#${id}`);\\n if (!element) {\\n return;\\n } else if (element.nodeName !== \'g\') {\\n id = element.parentElement?.id ?? \'\';\\n }\\n\\n const elements = crosswalkEl.querySelectorAll(`#${id} :is(path, polygon, polyline)`);\\n this.highlightedElements = Array.from(elements);\\n elements.forEach((el) => el.classList.add(\'click-active\'));\\n }\\n\\n /**\\n * Resets all highlighted elements in the svg\\n */\\n private resetHighlight(): void {\\n for (const el of this.highlightedElements) {\\n el.classList.remove(\'click-active\');\\n }\\n this.highlightedElements = [];\\n }\\n\\n /**\\n * Clears observables on destroy\\n */\\n ngOnDestroy(): void {\\n this.clear();\\n }\\n\\n /**\\n * Sets SVG element\\n * @param el SVG element\\n */\\n setSvgElement(el: SVGElement): void {\\n this.clear();\\n this.crosswalkEl = el.querySelector(\'[id^=\\"Crosswalk\\"]\') ?? undefined;\\n if (this.crosswalkEl) {\\n // Move to front (i.e. last child in svg)\\n this.renderer.appendChild(el, this.crosswalkEl);\\n this.attachCrosswalkHover(this.crosswalkEl);\\n }\\n }\\n\\n /**\\n * Removes underscores from id\\n * @param name Node name\\n * @returns node name without underscores\\n */\\n formatNodeName(name: string): string {\\n return name.replace(/_/g, \' \');\\n }\\n\\n /**\\n * Attaches crosswalk hover\\n * @param el element\\n */\\n private attachCrosswalkHover(el: Element): void {\\n this.attachEvent(el, \'mouseover\').subscribe((event) => this.onCrosswalkHover(event));\\n this.attachEvent(el, \'mouseout\').subscribe(() => this.onCrosswalkHover(undefined as never as MouseEvent));\\n this.attachEvent(el, \'click\').subscribe((event) => this.nodeClick.emit(this.getNode(event)));\\n }\\n\\n /**\\n * Finds matching node in data from a hovered element\\n * @param event Mouse event\\n */\\n private onCrosswalkHover(event: MouseEvent): void {\\n if (event) {\\n const node = this.getNode(event);\\n if (node) {\\n this.nodeHoverData$.next({\\n node: node.label,\\n origin: {\\n x: event.clientX,\\n y: event.clientY,\\n },\\n });\\n this.nodeHover.emit(node); //emits node entry\\n }\\n } else {\\n this.nodeHoverData$.next(undefined);\\n this.nodeHover.emit();\\n }\\n }\\n\\n /**\\n * Clears observables\\n */\\n private clear(): void {\\n this.destroy$.next();\\n this.destroy$.complete();\\n this.destroy$ = new Subject();\\n }\\n\\n /**\\n * Returns entry from mapping if target, parent, or grandparent id matches the node name\\n * @param event Event\\n * @returns Node entry that matches the target id\\n */\\n private getNode(event: Event): T | undefined {\\n const targetId = (event.target as Element).id;\\n const parentId = (event.target as Element).parentElement?.id ?? \'\';\\n const grandparentId = (event.target as Element).parentElement?.parentElement?.id ?? \'\';\\n const idCollection = [targetId, parentId, grandparentId];\\n for (const id of idCollection) {\\n const decodedID = this.decodeId(id);\\n const match = this.mapping.find(\\n (item) => item.id?.toLowerCase() === decodedID.toLowerCase() //search mapping by name for matching node entry\\n );\\n if (match) {\\n return match;\\n }\\n }\\n return undefined;\\n }\\n\\n /**\\n * Decodes id into a normal string\\n * @param id Undecoded ID\\n * @returns id\\n */\\n private decodeId(id: string): string {\\n const replacer = (_match: string, hex: string) => String.fromCharCode(Number.parseInt(hex, 16));\\n return id.replace(/_x([\\\\da-f]+)_/gi, replacer);\\n }\\n\\n /**\\n * Turns normal string into decoded SVG id\\n * @param id id\\n * @returns Encoded id\\n */\\n private encodeId(id: string): string {\\n const replacer = (match: string) => `_x${match.charCodeAt(0).toString(16).toUpperCase()}_`;\\n return id.replace(/[^a-z0-9-]/gi, replacer);\\n }\\n\\n /**\\n * Attaches an event listener\\n * @template K\\n * @param el Element\\n * @param event Event\\n * @returns Observable\\n */\\n private attachEvent(el: Element, event: K): Observable {\\n const { renderer, destroy$ } = this;\\n const add = (handler: NodeEventHandler) => renderer.listen(el, event, handler);\\n const remove = (_handler: NodeEventHandler, unlisten: () => void) => unlisten();\\n return fromEventPattern(add, remove).pipe(takeUntil(destroy$));\\n }\\n}\\n","properties":[{"name":"node","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Node name

\\n","line":59,"rawdescription":"\\nNode name"},{"name":"origin","deprecated":false,"deprecationMessage":"","type":"literal type","optional":false,"description":"

Center point of hovered node in screen coordinates

\\n","line":61,"rawdescription":"\\nCenter point of hovered node in screen coordinates"}],"indexSignatures":[],"kind":165,"description":"

Node tooltip data

\\n","rawdescription":"\\nNode tooltip data","methods":[]},{"name":"SectionItem","id":"interface-SectionItem-dba50a1e9cbac5f9733930bd6b04d1ac5fda31ee6342e13da75314f7b5dbbf46c436aab104bfc47abdc323e9ff42aeeb0047ee89577f639d3979c6964344bbd7","file":"src/lib/biomarker-table-data-card/biomarker-table-data-card.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule } from \'@angular/material/table\';\\n\\n/** An item which defines a string label and a string value */\\nexport interface DataItem {\\n /** A string property that represents the label */\\n label: string;\\n /** A string property that represents the value */\\n value: string;\\n}\\n\\n/** An item which represents a section with a data item and an indicator for the last item in the section */\\nexport interface SectionItem {\\n /** A number property that represents the section number */\\n section: number;\\n /** A DateItem property that represents a section and its data */\\n data: DataItem;\\n /** A boolean property that represents the last item of a section */\\n isLastItem: boolean;\\n}\\n\\n/** This component displays a table with sections, where each section contains a list of items with a label and a value. */\\n@Component({\\n selector: \'hra-biomarker-table-data-card\',\\n standalone: true,\\n imports: [CommonModule, MatTableModule],\\n templateUrl: \'./biomarker-table-data-card.component.html\',\\n styleUrls: [\'./biomarker-table-data-card.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableDataCardComponent implements OnChanges {\\n /** Nested list of DataItems for each section which is displayed to the user */\\n @Input() data: DataItem[][] = [];\\n\\n /** Converted nested array of DataItem into Flat array of SectionItem */\\n sectionItems: SectionItem[] = [];\\n\\n /** Triggers an update on sectionItems array when data is changed */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.updateSectionItems();\\n }\\n }\\n\\n /** Updates sectionItems array when data is changed */\\n private updateSectionItems(): void {\\n const newSectionItems: SectionItem[] = [];\\n\\n this.data.forEach((section, sectionIndex) => {\\n section.forEach((item, itemIndex) => {\\n newSectionItems.push({\\n data: item,\\n section: sectionIndex,\\n isLastItem: itemIndex === section.length - 1,\\n });\\n });\\n });\\n\\n this.sectionItems = newSectionItems;\\n }\\n}\\n","properties":[{"name":"data","deprecated":false,"deprecationMessage":"","type":"DataItem","optional":false,"description":"

A DateItem property that represents a section and its data

\\n","line":18,"rawdescription":"\\nA DateItem property that represents a section and its data"},{"name":"isLastItem","deprecated":false,"deprecationMessage":"","type":"boolean","optional":false,"description":"

A boolean property that represents the last item of a section

\\n","line":20,"rawdescription":"\\nA boolean property that represents the last item of a section"},{"name":"section","deprecated":false,"deprecationMessage":"","type":"number","optional":false,"description":"

A number property that represents the section number

\\n","line":16,"rawdescription":"\\nA number property that represents the section number"}],"indexSignatures":[],"kind":165,"description":"

An item which represents a section with a data item and an indicator for the last item in the section

\\n","rawdescription":"\\nAn item which represents a section with a data item and an indicator for the last item in the section","methods":[]},{"name":"SourceListItem","id":"interface-SourceListItem-f0d0464b044f898be3752719190f2d8ad8511283d4daafb2f8b17bd0f4dfa0290abbbeb293819664c07134fcaee5a64313aaf72d69e335a063e244c2ba1d7c0c","file":"src/lib/source-list/source-list.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule } from \'@angular/material/table\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EmptyBiomarkerComponent, LabelBoxComponent } from \'@hra-ui/components/atoms\';\\n\\n/** SourceListItem interface contains title and link to the dataset for the SourceList*/\\nexport interface SourceListItem {\\n /** Title of the dataset in the SourceList */\\n title: string;\\n\\n /** Label of the dataset in the SourceList */\\n label: string;\\n\\n /** Link to the dataset in the SourceList */\\n link: string;\\n}\\n\\n/** This component shows list of sources with title and links to the datasets */\\n@Component({\\n selector: \'hra-source-list\',\\n standalone: true,\\n imports: [CommonModule, MatTableModule, MatIconModule, LabelBoxComponent, EmptyBiomarkerComponent],\\n templateUrl: \'./source-list.component.html\',\\n styleUrls: [\'./source-list.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class SourceListComponent {\\n /** List of sources with titles and links displayed to the user */\\n @Input() sources: SourceListItem[] = [];\\n /**\\n * Input buttonon text of empty biomarker component.\\n */\\n @Input() collaborateText = \'\';\\n\\n /**\\n * Input message markdown of empty biomarker component.\\n */\\n @Input() message = \'\';\\n /**\\n * Show table of source list component which toggles to true or false\\n * based on click\\n */\\n showTable = true;\\n\\n /** Emits when the contact button is clicked */\\n @Output() readonly collaborateClick = new EventEmitter();\\n\\n /**\\n * It changes the value of showTable to false if value it true\\n * and vice versa\\n */\\n toggleTable(): void {\\n this.showTable = !this.showTable;\\n }\\n}\\n","properties":[{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Label of the dataset in the SourceList

\\n","line":13,"rawdescription":"\\nLabel of the dataset in the SourceList"},{"name":"link","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Link to the dataset in the SourceList

\\n","line":16,"rawdescription":"\\nLink to the dataset in the SourceList"},{"name":"title","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Title of the dataset in the SourceList

\\n","line":10,"rawdescription":"\\nTitle of the dataset in the SourceList"}],"indexSignatures":[],"kind":165,"description":"

SourceListItem interface contains title and link to the dataset for the SourceList

\\n","rawdescription":"\\nSourceListItem interface contains title and link to the dataset for the SourceList","methods":[]}],"injectables":[],"guards":[],"interceptors":[],"classes":[],"directives":[],"components":[{"name":"BiomarkerTableDataCardComponent","id":"component-BiomarkerTableDataCardComponent-dba50a1e9cbac5f9733930bd6b04d1ac5fda31ee6342e13da75314f7b5dbbf46c436aab104bfc47abdc323e9ff42aeeb0047ee89577f639d3979c6964344bbd7","file":"src/lib/biomarker-table-data-card/biomarker-table-data-card.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-biomarker-table-data-card","styleUrls":["./biomarker-table-data-card.component.scss"],"styles":[],"templateUrl":["./biomarker-table-data-card.component.html"],"viewProviders":[],"inputsClass":[{"name":"data","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nNested list of DataItems for each section which is displayed to the user","description":"

Nested list of DataItems for each section which is displayed to the user

\\n","line":34,"type":"DataItem[][]","decorators":[]}],"outputsClass":[],"propertiesClass":[{"name":"sectionItems","defaultValue":"[]","deprecated":false,"deprecationMessage":"","type":"SectionItem[]","optional":false,"description":"

Converted nested array of DataItem into Flat array of SectionItem

\\n","line":37,"rawdescription":"\\nConverted nested array of DataItem into Flat array of SectionItem"}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

This component displays a table with sections, where each section contains a list of items with a label and a value.

\\n","rawdescription":"\\nThis component displays a table with sections, where each section contains a list of items with a label and a value.","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule } from \'@angular/material/table\';\\n\\n/** An item which defines a string label and a string value */\\nexport interface DataItem {\\n /** A string property that represents the label */\\n label: string;\\n /** A string property that represents the value */\\n value: string;\\n}\\n\\n/** An item which represents a section with a data item and an indicator for the last item in the section */\\nexport interface SectionItem {\\n /** A number property that represents the section number */\\n section: number;\\n /** A DateItem property that represents a section and its data */\\n data: DataItem;\\n /** A boolean property that represents the last item of a section */\\n isLastItem: boolean;\\n}\\n\\n/** This component displays a table with sections, where each section contains a list of items with a label and a value. */\\n@Component({\\n selector: \'hra-biomarker-table-data-card\',\\n standalone: true,\\n imports: [CommonModule, MatTableModule],\\n templateUrl: \'./biomarker-table-data-card.component.html\',\\n styleUrls: [\'./biomarker-table-data-card.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableDataCardComponent implements OnChanges {\\n /** Nested list of DataItems for each section which is displayed to the user */\\n @Input() data: DataItem[][] = [];\\n\\n /** Converted nested array of DataItem into Flat array of SectionItem */\\n sectionItems: SectionItem[] = [];\\n\\n /** Triggers an update on sectionItems array when data is changed */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.updateSectionItems();\\n }\\n }\\n\\n /** Updates sectionItems array when data is changed */\\n private updateSectionItems(): void {\\n const newSectionItems: SectionItem[] = [];\\n\\n this.data.forEach((section, sectionIndex) => {\\n section.forEach((item, itemIndex) => {\\n newSectionItems.push({\\n data: item,\\n section: sectionIndex,\\n isLastItem: itemIndex === section.length - 1,\\n });\\n });\\n });\\n\\n this.sectionItems = newSectionItems;\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'utils\';\\n@use \'variables\' as vars;\\n\\n:host {\\n display: flex;\\n padding: 1rem 1.5rem;\\n border-radius: 0.5rem;\\n box-shadow: 0.063rem 0.125rem 1rem 0.125rem rgba(0, 0, 0, 0.16);\\n background-color: vars.$primary-contrast-rgb;\\n\\n .mat-mdc-cell {\\n padding: 0.25rem 0rem;\\n }\\n\\n .mat-mdc-row {\\n height: fit-content;\\n }\\n\\n .no-border {\\n border: none;\\n }\\n\\n .label {\\n color: #243142;\\n padding-right: 3rem;\\n }\\n\\n .value {\\n color: #4c5a69;\\n }\\n\\n .sr-only {\\n @include utils.sr-only();\\n }\\n}\\n","styleUrl":"./biomarker-table-data-card.component.scss"}],"stylesData":"","implements":["OnChanges"],"templateData":"
No data
\\n 0\\" [dataSource]=\\"sectionItems\\">\\n \\n\\n \x3c!-- Label Column --\x3e\\n \\n \\n \\n \\n\\n \x3c!-- Value Column --\x3e\\n \\n \\n \\n \\n\\n \\n
\\n Biomarker Table Data Card\\n
Item Label\\n {{ element.data.label }}\\n Item Value\\n {{ element.data.value }}\\n
\\n"},{"name":"BiomarkerTableDataIconComponent","id":"component-BiomarkerTableDataIconComponent-0fab04062dee70e0c4d57bfdc6f056400c9b82591b050c6912b9e59a896e1a5535f884a104c1d3f95c19721a049ca51f5b2a953512dc1d6a501c29d5399a063c","file":"src/lib/biomarker-table-data-icon/biomarker-table-data-icon.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-biomarker-table-data-icon","styleUrls":["./biomarker-table-data-icon.component.scss"],"styles":[],"template":"","templateUrl":[],"viewProviders":[],"inputsClass":[{"name":"color","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nRepresents the color of the icon","description":"

Represents the color of the icon

\\n","line":17,"type":"string","decorators":[]},{"name":"size","defaultValue":"0","deprecated":false,"deprecationMessage":"","rawdescription":"\\nRepresents the size of the icon","description":"

Represents the size of the icon

\\n","line":20,"type":"number","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Describes the data icon for the table

\\n","rawdescription":"\\n\\nDescribes the data icon for the table\\n","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, HostBinding, Input } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\n\\n/**\\n * Describes the data icon for the table\\n */\\n@Component({\\n selector: \'hra-biomarker-table-data-icon\',\\n standalone: true,\\n imports: [CommonModule],\\n template: \'\',\\n styleUrls: [\'./biomarker-table-data-icon.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableDataIconComponent {\\n /** Represents the color of the icon */\\n @HostBinding(\'style.background-color\') @Input() color = \'\';\\n\\n /** Represents the size of the icon */\\n @HostBinding(\'style.--radius.rem\') @Input() size = 0;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n border-radius: 50%;\\n --radius: 0.625rem;\\n width: var(--radius);\\n height: var(--radius);\\n}\\n","styleUrl":"./biomarker-table-data-icon.component.scss"}],"stylesData":""},{"name":"ContactModalComponent","id":"component-ContactModalComponent-309310b2740da63be5ea5aaa894ef73ced8bed2a86b50643af4dd031551d6cdb7b26ece6b3328d0e31c21e46f940bd8b901f5665c241ca2a4cb38f39631bd8a3","file":"src/lib/contact-modal/contact-modal.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-contact-modal","styleUrls":["./contact-modal.component.scss"],"styles":[],"templateUrl":["./contact-modal.component.html"],"viewProviders":[],"inputsClass":[{"name":"productLogoUrl","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for product logo URL to displayed on the left side.","description":"

Input for product logo URL to displayed on the left side.

\\n","line":49,"type":"string","decorators":[]},{"name":"productTitle","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for product title to displayed on the left side.","description":"

Input for product title to displayed on the left side.

\\n","line":52,"type":"string","decorators":[]}],"outputsClass":[{"name":"closeClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the cancel button or close icon is clicked","description":"

Emits when the cancel button or close icon is clicked

\\n","line":58,"type":"EventEmitter"},{"name":"submitClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the submit button is clicked and all the values are appropriate.","description":"

Emits when the submit button is clicked and all the values are appropriate.

\\n","line":55,"type":"EventEmitter"}],"propertiesClass":[{"name":"contactData","defaultValue":"EMPTY_CONTACT_DATA","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Asigns the undefined initially to all the input fields.

\\n","line":66,"rawdescription":"\\nAsigns the undefined initially to all the input fields."}],"methodsClass":[{"name":"submit","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":76,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nIt emits the updated value of contact data","description":"

It emits the updated value of contact data

\\n"},{"name":"updateData","args":[{"name":"key","type":"K","deprecated":false,"deprecationMessage":""},{"name":"value","type":"","deprecated":false,"deprecationMessage":"","optional":true}],"optional":false,"returnType":"void","typeParameters":["K"],"line":69,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nUpdates the contact data object with a new value for a given key.","description":"

Updates the contact data object with a new value for a given key.

\\n","jsdoctags":[{"name":"key","type":"K","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}},{"name":"value","type":"","deprecated":false,"deprecationMessage":"","optional":true,"tagName":{"text":"param"}}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Contact modal component.

\\n","rawdescription":"\\n\\nContact modal component.\\n","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EmailInputComponent, RequiredInputComponent, RequiredTextboxComponent } from \'@hra-ui/components/atoms\';\\nimport { produce } from \'immer\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/**\\n An interface representing contact data information which will be emitted if all the fields are in correct format.\\n */\\nexport interface ContactData {\\n /** The email address of the person submitting the form. */\\n email: string;\\n /** The subject line of the message being sent. */\\n subject: string;\\n /** The body of the message being sent. */\\n message: string;\\n}\\n\\n/** Initial empty contact data */\\nconst EMPTY_CONTACT_DATA: Partial = {\\n email: undefined,\\n subject: undefined,\\n message: undefined,\\n};\\n\\n/**\\n * Contact modal component.\\n */\\n@Component({\\n selector: \'hra-contact-modal\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatButtonModule,\\n MatIconModule,\\n EmailInputComponent,\\n MarkdownModule,\\n RequiredTextboxComponent,\\n RequiredInputComponent,\\n ],\\n templateUrl: \'./contact-modal.component.html\',\\n styleUrls: [\'./contact-modal.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class ContactModalComponent {\\n /** Input for product logo URL to displayed on the left side. */\\n @Input() productLogoUrl = \'\';\\n\\n /** Input for product title to displayed on the left side. */\\n @Input() productTitle = \'\';\\n\\n /** Emits when the submit button is clicked and all the values are appropriate. */\\n @Output() readonly submitClick = new EventEmitter();\\n\\n /** Emits when the cancel button or close icon is clicked */\\n @Output() readonly closeClick = new EventEmitter();\\n\\n /** A function to disable the submit button. If all the values are in approproiate format, then it will be enabled. */\\n get disableSubmit(): boolean {\\n return Object.values(this.contactData).some((value) => value === undefined);\\n }\\n\\n /** Asigns the undefined initially to all the input fields. */\\n contactData = EMPTY_CONTACT_DATA;\\n\\n /** Updates the contact data object with a new value for a given key. */\\n updateData(key: K, value?: ContactData[K]): void {\\n this.contactData = produce(this.contactData, (draft) => {\\n draft[key] = value;\\n });\\n }\\n\\n /** It emits the updated value of contact data */\\n submit(): void {\\n this.submitClick.emit(this.contactData as ContactData);\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n position: relative;\\n padding-top: 2rem;\\n margin-right: 1.5rem;\\n margin-left: 1.5rem;\\n font-family: \'Inter\';\\n\\n .product-logo {\\n display: flex;\\n align-items: center;\\n\\n .product-logo-image {\\n margin-right: 1rem;\\n }\\n\\n .product-title {\\n color: #990000;\\n margin: 0;\\n font-weight: 600;\\n }\\n }\\n\\n .close {\\n position: absolute;\\n top: 1.5rem;\\n right: 0rem;\\n }\\n\\n .submit {\\n margin-right: 1.5rem;\\n }\\n\\n .submit,\\n .cancel {\\n width: 7.5rem;\\n }\\n\\n .email {\\n margin-top: 1.25rem;\\n }\\n\\n .message-field {\\n margin-top: 1rem;\\n }\\n\\n .subject-field {\\n margin-top: 1rem;\\n }\\n\\n .desc {\\n margin-top: 1.5rem;\\n }\\n}\\n","styleUrl":"./contact-modal.component.scss"}],"stylesData":"","accessors":{"disableSubmit":{"name":"disableSubmit","getSignature":{"name":"disableSubmit","type":"boolean","returnType":"boolean","line":61,"rawdescription":"\\nA function to disable the submit button. If all the values are in approproiate format, then it will be enabled.","description":"

A function to disable the submit button. If all the values are in approproiate format, then it will be enabled.

\\n"}}},"templateData":"\\n \\"Prodoct\\n

{{ productTitle }}

\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n"},{"name":"FooterComponent","id":"component-FooterComponent-45c5a61fc5d68c201808fb76ff867f9a7cf8e42e6ef95ae08b440dbd37ce63eb4c77c3da0597ef90973854d65522a3ba496eeb5eccbe75750c1fd2f5abf52e6b","file":"src/lib/footer/footer.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-footer","styleUrls":["./footer.component.scss"],"styles":[],"templateUrl":["./footer.component.html"],"viewProviders":[],"inputsClass":[{"name":"downloadFormats","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nDifferent download formats options displayed to the user","description":"

Different download formats options displayed to the user

\\n","line":74,"type":"T[]","decorators":[]},{"name":"embed","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for embed link in HRA Portal","description":"

Input for embed link in HRA Portal

\\n","line":71,"type":"any","decorators":[]},{"name":"hraPortal","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for HRA Portal link","description":"

Input for HRA Portal link

\\n","line":65,"type":"any","decorators":[]},{"name":"illustrationMetadata","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for Illustration metadata page link in HRA Portal","description":"

Input for Illustration metadata page link in HRA Portal

\\n","line":68,"type":"any","decorators":[]},{"name":"productLogoUrl","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for product logo URL to displayed on the left side.","description":"

Input for product logo URL to displayed on the left side.

\\n","line":59,"type":"string","decorators":[]},{"name":"productTitle","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for product title to displayed on the left side.","description":"

Input for product title to displayed on the left side.

\\n","line":62,"type":"string","decorators":[]},{"name":"size","defaultValue":"\'large\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nHost binding of footer component","description":"

Host binding of footer component

\\n","line":56,"type":"\\"small\\" | \\"large\\"","decorators":[]}],"outputsClass":[{"name":"contactClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the contact button is clicked","description":"

Emits when the contact button is clicked

\\n","line":80,"type":"EventEmitter"},{"name":"download","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits the selected download format","description":"

Emits the selected download format

\\n","line":77,"type":"EventEmitter"}],"propertiesClass":[{"name":"downloadListOpen","defaultValue":"false","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Whether the download list panel is open

\\n","line":91,"rawdescription":"\\nWhether the download list panel is open"},{"name":"DOWNLOADS_LIST_POSITION","defaultValue":"DOWNLOADS_LIST_POSITION","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Download list popup overlay positioning

\\n","line":83,"rawdescription":"\\nDownload list popup overlay positioning","modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for footer that displays its content at the bottom of the page with different action buttons.

\\n","rawdescription":"\\n\\nComponent for footer that displays its content at the bottom of the page with different action buttons.\\n","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { ConnectedPosition, OverlayModule } from \'@angular/cdk/overlay\';\\nimport { MatListModule } from \'@angular/material/list\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { EMPTY_LINK } from \'@hra-ui/cdk/state\';\\n\\n/**\\n * Base type for different download format options.\\n */\\nexport interface DownloadFormat {\\n /**\\n * User readable format label\\n */\\n label: string;\\n}\\n\\n/**\\n * Positioning value for the download list popup\\n */\\nconst DOWNLOADS_LIST_POSITION: ConnectedPosition[] = [\\n {\\n panelClass: \'above\',\\n originX: \'start\',\\n originY: \'top\',\\n overlayX: \'start\',\\n overlayY: \'bottom\',\\n offsetY: 0,\\n },\\n {\\n panelClass: \'below\',\\n originX: \'start\',\\n originY: \'bottom\',\\n overlayX: \'start\',\\n overlayY: \'top\',\\n },\\n];\\n\\n/**\\n * Component for footer that displays its content at the bottom of the page with different action buttons.\\n */\\n@Component({\\n selector: \'hra-footer\',\\n standalone: true,\\n imports: [CommonModule, MatButtonModule, MatIconModule, OverlayModule, MatListModule, LinkDirective],\\n templateUrl: \'./footer.component.html\',\\n styleUrls: [\'./footer.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class FooterComponent {\\n /** Host binding of footer component */\\n @HostBinding(\'class\')\\n @Input()\\n size: \'small\' | \'large\' = \'large\';\\n\\n /** Input for product logo URL to displayed on the left side. */\\n @Input() productLogoUrl = \'\';\\n\\n /** Input for product title to displayed on the left side. */\\n @Input() productTitle = \'\';\\n\\n /** Input for HRA Portal link */\\n @Input() hraPortal = EMPTY_LINK;\\n\\n /** Input for Illustration metadata page link in HRA Portal */\\n @Input() illustrationMetadata = EMPTY_LINK;\\n\\n /** Input for embed link in HRA Portal */\\n @Input() embed = EMPTY_LINK;\\n\\n /** Different download formats options displayed to the user */\\n @Input() downloadFormats: T[] = [];\\n\\n /** Emits the selected download format */\\n @Output() readonly download = new EventEmitter();\\n\\n /** Emits when the contact button is clicked */\\n @Output() readonly contactClick = new EventEmitter();\\n\\n /** Download list popup overlay positioning */\\n readonly DOWNLOADS_LIST_POSITION = DOWNLOADS_LIST_POSITION;\\n\\n /** Gets whether the footer required is small */\\n get isSmall(): boolean {\\n return this.size === \'small\';\\n }\\n\\n /** Whether the download list panel is open */\\n downloadListOpen = false;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: flex;\\n padding: 1rem 2rem;\\n border-top: 0.063rem solid #e2e7e9;\\n align-items: center;\\n background-color: #f8f9fa;\\n gap: 1rem;\\n\\n --palette-primary-500: #abcdef;\\n\\n .controls {\\n display: flex;\\n justify-content: flex-end;\\n }\\n .filler {\\n flex-grow: 1;\\n }\\n\\n .product-title {\\n color: #990000;\\n margin-right: 0rem;\\n }\\n\\n a {\\n cursor: pointer;\\n display: flex;\\n }\\n\\n .product-logo-image {\\n height: 1.2rem;\\n margin-right: 1rem;\\n }\\n\\n button {\\n justify-content: center;\\n align-items: center;\\n min-width: 9rem;\\n min-height: 3rem;\\n gap: 0.5rem;\\n\\n --palette-primary-100-rgb: #4c5a69;\\n --palette-primary-500-rgb: #243142;\\n\\n &.mat-accent {\\n &:active {\\n --palette-primary-700-rgb: #4c5a69;\\n }\\n .mat-icon {\\n z-index: 1;\\n }\\n }\\n }\\n}\\n\\n::ng-deep {\\n .download-options-panel {\\n box-shadow: 0.1rem 0.1rem 0.4rem 0.2rem #dad7d7;\\n background-color: #ffffff;\\n }\\n}\\n::ng-deep .download-button {\\n .mdc-button__label {\\n display: flex;\\n gap: 0.5rem;\\n }\\n}\\n","styleUrl":"./footer.component.scss"}],"stylesData":"","accessors":{"isSmall":{"name":"isSmall","getSignature":{"name":"isSmall","type":"boolean","returnType":"boolean","line":86,"rawdescription":"\\nGets whether the footer required is small","description":"

Gets whether the footer required is small

\\n"}}},"templateData":"\\n
\\n\\n\\n\\n\\n download \\n Download\\n\\n\\n\\n\\n
\\n\\n\\n\\n\\n\\n\\n \\n \\n {{ format.label }}\\n \\n \\n\\n"},{"name":"FullscreenContainerComponent","id":"component-FullscreenContainerComponent-78edc2b37cbc90a17be0fcca4ed7291593d5f3d12c4ea823de3f9510c13bad4492bc5cd65823726fc7e333c874880c17093ff9d20096fd92e20137c8cc4f75af","file":"src/lib/fullscreen/fullscreen-container.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-fullscreen-container","styleUrls":[],"styles":["\\n :host {\\n display: block;\\n position: relative;\\n }\\n "],"template":"","templateUrl":[],"viewProviders":[],"inputsClass":[{"name":"fullscreen","defaultValue":"false","deprecated":false,"deprecationMessage":"","rawdescription":"\\nA boolean input property that controls the fullscreen mode","description":"

A boolean input property that controls the fullscreen mode

\\n","line":38,"type":"boolean","decorators":[]}],"outputsClass":[],"propertiesClass":[{"name":"content","deprecated":false,"deprecationMessage":"","type":"QueryList","optional":true,"description":"

A property that gets a reference to any child components of type FullscreenContentComponent that are projected into the component's content area

\\n","line":35,"rawdescription":"\\nA property that gets a reference to any child components of type FullscreenContentComponent that are projected into the component\'s content area","decorators":[{"name":"ContentChildren","stringifiedArguments":"FullscreenContentComponent"}],"modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

A component that wraps any child components of type FullscreenContentComponent and\\nsets their isFullScreen property to true or false based on its own fullscreen input property

\\n","rawdescription":"\\nA component that wraps any child components of type FullscreenContentComponent and\\nsets their isFullScreen property to true or false based on its own fullscreen input property\\n","type":"component","sourceCode":"import {\\n AfterContentInit,\\n ChangeDetectionStrategy,\\n Component,\\n ContentChildren,\\n Input,\\n OnChanges,\\n QueryList,\\n SimpleChanges,\\n} from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { FullscreenContentComponent } from \'./fullscreen-content.component\';\\n\\n/** A component that wraps any child components of type FullscreenContentComponent and\\n * sets their isFullScreen property to true or false based on its own fullscreen input property\\n */\\n@Component({\\n selector: \'hra-fullscreen-container\',\\n standalone: true,\\n imports: [CommonModule, FullscreenContentComponent],\\n template: \'\',\\n styles: [\\n `\\n :host {\\n display: block;\\n position: relative;\\n }\\n `,\\n ],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class FullscreenContainerComponent implements AfterContentInit, OnChanges {\\n /** A property that gets a reference to any child components of type FullscreenContentComponent that are projected into the component\'s content area */\\n @ContentChildren(FullscreenContentComponent)\\n readonly content?: QueryList;\\n\\n /** A boolean input property that controls the fullscreen mode */\\n @Input() fullscreen = false;\\n\\n /** It calls the updateFullscreenMode method to set the isFullScreen property of the child\\n * FullscreenContentComponent instances based on the value of the fullscreen input property\\n */\\n ngAfterContentInit(): void {\\n this.updateFullscreenMode();\\n }\\n\\n /** It checks if the fullscreen input property has changed, and calls the updateFullscreenMode method if it has */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'fullscreen\' in changes) {\\n this.updateFullscreenMode();\\n }\\n }\\n\\n /** A private method that sets the isFullScreen property of each child FullscreenContentComponent based on the value of the fullscreen */\\n private updateFullscreenMode(): void {\\n this.content?.forEach((content) => {\\n content.isFullScreen = this.fullscreen;\\n });\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":"","stylesData":"\\n :host {\\n display: block;\\n position: relative;\\n }\\n \\n","implements":["AfterContentInit","OnChanges"]},{"name":"FullscreenContentComponent","id":"component-FullscreenContentComponent-061cdd7c639f9c53e46272aaf23ed318885fbcf937978d8940b0f0baf165576129c5897204992603662d7b530bcd8d63a7d7a97602a18e97b7f1711f84c4725f","file":"src/lib/fullscreen/fullscreen-content.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-fullscreen-content","styleUrls":["./fullscreen-content.component.scss"],"styles":[],"template":"","templateUrl":[],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"isFullScreen","defaultValue":"false","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

This binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true

\\n","line":40,"rawdescription":"\\nThis binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true","decorators":[{"name":"HostBinding","stringifiedArguments":"\'class.fullscreen-on\'"},{"name":"HostBinding","stringifiedArguments":"\'@animateResize\'"}]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[{"name":"@animateResize","defaultValue":"false","deprecated":false,"deprecationMessage":"","rawdescription":"\\nThis binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true","description":"

This binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true

\\n","line":40,"type":"boolean","decorators":[]},{"name":"class.fullscreen-on","defaultValue":"false","deprecated":false,"deprecationMessage":"","rawdescription":"\\nThis binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true","description":"

This binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true

\\n","line":40,"type":"boolean","decorators":[]}],"hostListeners":[],"description":"

A component that displays its content in fullscreen mode when its isFullScreen property is set to true

\\n","rawdescription":"\\nA component that displays its content in fullscreen mode when its isFullScreen property is set to true","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, HostBinding } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { animate, state, style, transition, trigger } from \'@angular/animations\';\\n\\n/** A component that displays its content in fullscreen mode when its isFullScreen property is set to true */\\n@Component({\\n selector: \'hra-fullscreen-content\',\\n standalone: true,\\n imports: [CommonModule],\\n animations: [\\n trigger(\'animateResize\', [\\n state(\\n \'true\',\\n style({\\n width: \'100%\',\\n position: \'absolute\',\\n right: 0,\\n })\\n ),\\n state(\\n \'false\',\\n style({\\n width: \'50%\',\\n position: \'absolute\',\\n right: 0,\\n })\\n ),\\n transition(\'true <=> false\', [animate(\'0.5s ease\')]),\\n ]),\\n ],\\n template: \'\',\\n styleUrls: [\'./fullscreen-content.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class FullscreenContentComponent {\\n /** This binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true */\\n @HostBinding(\'class.fullscreen-on\')\\n /** This binds the isFullScreen property to the @animateResize when isFullScreen is true */\\n @HostBinding(\'@animateResize\')\\n isFullScreen = false;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n overflow-y: hidden;\\n\\n &.fullscreen-on {\\n z-index: 100;\\n background: #f8f9fa;\\n }\\n}\\n","styleUrl":"./fullscreen-content.component.scss"}],"stylesData":""},{"name":"HeaderComponent","id":"component-HeaderComponent-81f5689eacf69c8f1658a62e299bcad0df485f2cc8e6664f3f16cfa7d30400e53a54549f6aa8125abb2fc207fb428887c0a19dde695063a2d92611d78d9c6956","file":"src/lib/header/header.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-header","styleUrls":["./header.component.scss"],"styles":[],"templateUrl":["./header.component.html"],"viewProviders":[],"inputsClass":[{"name":"aboutLink","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for about link","description":"

Input for about link

\\n","line":40,"type":"any","decorators":[]},{"name":"appTitle","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput for app title to show on the left side.\\n","description":"

Input for app title to show on the left side.

\\n","line":34,"type":"string","decorators":[]},{"name":"productLogoUrl","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput for product logo URL to displayed on the left side.\\n","description":"

Input for product logo URL to displayed on the left side.

\\n","line":24,"type":"string","decorators":[]},{"name":"productTitle","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput for product title to displayed on the left side.\\n","description":"

Input for product title to displayed on the left side.

\\n","line":29,"type":"string","decorators":[]},{"name":"productTitleLink","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for Product Title link","description":"

Input for Product Title link

\\n","line":37,"type":"any","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Header component, displays on top of every page.

\\n","rawdescription":"\\n\\nHeader component, displays on top of every page.\\n","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatRippleModule } from \'@angular/material/core\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { EMPTY_LINK } from \'@hra-ui/cdk\';\\n\\n/**\\n * Header component, displays on top of every page.\\n */\\n@Component({\\n selector: \'hra-header\',\\n standalone: true,\\n imports: [CommonModule, MatButtonModule, MatIconModule, MatRippleModule, LinkDirective],\\n templateUrl: \'./header.component.html\',\\n styleUrls: [\'./header.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class HeaderComponent {\\n /**\\n * Input for product logo URL to displayed on the left side.\\n */\\n @Input() productLogoUrl = \'\';\\n\\n /**\\n * Input for product title to displayed on the left side.\\n */\\n @Input() productTitle = \'\';\\n\\n /**\\n * Input for app title to show on the left side.\\n */\\n @Input() appTitle = \'\';\\n\\n /** Input for Product Title link */\\n @Input() productTitleLink = EMPTY_LINK;\\n\\n /** Input for about link */\\n @Input() aboutLink = EMPTY_LINK;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'utils\';\\n@use \'variables\' as vars;\\n\\n:host {\\n display: flex;\\n align-items: center;\\n height: 5rem;\\n padding: 0 2rem 0 1rem;\\n\\n @include utils.define-flex-filler();\\n\\n h1 {\\n // Reset margins for h1 elements\\n margin: 0;\\n }\\n\\n .product {\\n display: flex;\\n align-items: center;\\n text-decoration: none;\\n // Style the ripple animation\\n padding: 0 1rem;\\n border-radius: 0.25rem;\\n\\n &:hover {\\n cursor: pointer;\\n }\\n\\n .text {\\n margin-left: 1rem;\\n font-weight: 600;\\n color: vars.$accent-rgb;\\n }\\n }\\n\\n .app {\\n margin-left: 0.5rem;\\n }\\n\\n .about {\\n width: 9rem;\\n height: 3rem;\\n text-decoration: none;\\n span {\\n border-bottom: 1px solid var(--palette-primary-500-rgb);\\n }\\n .icon {\\n width: 1.5rem;\\n height: 1.5rem;\\n font-size: 1.5rem;\\n }\\n }\\n\\n @media (max-width: 30rem) {\\n height: 4.5rem;\\n\\n .product .text,\\n .about .text {\\n @include utils.sr-only();\\n }\\n\\n .product {\\n height: 2.5rem;\\n padding: 0 0.25rem;\\n\\n .logo {\\n width: 1.5rem;\\n height: 1.5rem;\\n }\\n }\\n\\n .app {\\n font-size: 1rem;\\n line-height: 1.5rem;\\n }\\n\\n .about {\\n min-width: 2.5rem;\\n width: 2.5rem;\\n height: 2.5rem;\\n padding: 0;\\n\\n .icon {\\n margin: 0;\\n }\\n }\\n }\\n\\n @media (max-width: 20rem) {\\n padding: 0;\\n }\\n}\\n","styleUrl":"./header.component.scss"}],"stylesData":"","templateData":"\\n \\n

{{ productTitle }}

\\n\\n

{{ appTitle }}

\\n\\n
\\n\\n\\n info_outlined\\n About\\n\\n"},{"name":"HraLandingPageIntroWcComponent","id":"component-HraLandingPageIntroWcComponent-57ba89b5fa60bec2ad59de1cc52e4d3002935eab8da7f77895b1d7b507237df7df5d8fa2fec4dd3ba498b8d06fc5f70758beb2ba67ccbb24f2819798948e81d4","file":"src/lib/hra-landing-page-intro-wc/hra-landing-page-intro-wc.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-ui-hra-landing-page-intro-wc","styleUrls":["./hra-landing-page-intro-wc.component.scss"],"styles":[],"templateUrl":["./hra-landing-page-intro-wc.component.html"],"viewProviders":[],"inputsClass":[{"name":"description","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nDescription for FTU Explorer","description":"

Description for FTU Explorer

\\n","line":19,"type":"string","decorators":[]},{"name":"partners","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nThank you message to partners","description":"

Thank you message to partners

\\n","line":22,"type":"string","decorators":[]},{"name":"readMore","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nIntro Image file url","description":"

Intro Image file url

\\n","line":25,"type":"string","decorators":[]},{"name":"title","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nIntro title for FTU Explorer","description":"

Intro title for FTU Explorer

\\n","line":16,"type":"string","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for LandingPage Intro - Web coomponent

\\n","rawdescription":"\\nComponent for LandingPage Intro - Web coomponent","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/** Component for LandingPage Intro - Web coomponent */\\n@Component({\\n selector: \'hra-ui-hra-landing-page-intro-wc\',\\n standalone: true,\\n imports: [CommonModule, MarkdownModule],\\n templateUrl: \'./hra-landing-page-intro-wc.component.html\',\\n styleUrls: [\'./hra-landing-page-intro-wc.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class HraLandingPageIntroWcComponent {\\n /** Intro title for FTU Explorer */\\n @Input() title = \'\';\\n\\n /** Description for FTU Explorer */\\n @Input() description = \'\';\\n\\n /** Thank you message to partners */\\n @Input() partners = \'\';\\n\\n /** Intro Image file url */\\n @Input() readMore = \'\';\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n gap: 8px;\\n padding: 24px, 32px, 24px, 32px;\\n .title {\\n font-size: 20px;\\n font-family: Inter;\\n font-weight: 400;\\n line-height: 24px;\\n letter-spacing: 0em;\\n text-align: left;\\n }\\n\\n .description .partners .readMore {\\n font-family: Inter;\\n font-size: 16px;\\n font-weight: 400;\\n line-height: 24px;\\n letter-spacing: 0em;\\n text-align: left;\\n }\\n ::ng-deep a {\\n color: vars.$primary-rgb;\\n font-weight: 700;\\n }\\n ::ng-deep p {\\n margin: 0;\\n }\\n}\\n","styleUrl":"./hra-landing-page-intro-wc.component.scss"}],"stylesData":"","templateData":"

{{ title }}

\\n\\n\\n\\n\\n\\n\\n"},{"name":"InfoModalComponent","id":"component-InfoModalComponent-56dc03e6960f4005149bab8dbf6a5b713061505964f6b3cc7d33868ed7f83aff7dbf222ccf66999864c6313f218c20f849715b3ebcc4d2ea44285c6e07811662","file":"src/lib/info-modal/info-modal.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-info-modal","styleUrls":["./info-modal.component.scss"],"styles":[],"templateUrl":["./info-modal.component.html"],"viewProviders":[],"inputsClass":[{"name":"description","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInformation modal message to the user","description":"

Information modal message to the user

\\n","line":24,"type":"string","decorators":[]},{"name":"productLogoUrl","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nProduct logo shown to the user","description":"

Product logo shown to the user

\\n","line":21,"type":"string","decorators":[]},{"name":"productTitle","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nProduct title shown to the user","description":"

Product title shown to the user

\\n","line":18,"type":"string","decorators":[]}],"outputsClass":[{"name":"closeClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the close icon is clicked","description":"

Emits when the close icon is clicked

\\n","line":27,"type":"EventEmitter"}],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Displays an information modal to the user with the product title and logo and description

\\n","rawdescription":"\\nDisplays an information modal to the user with the product title and logo and description","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/** Displays an information modal to the user with the product title and logo and description */\\n@Component({\\n selector: \'hra-info-modal\',\\n standalone: true,\\n imports: [CommonModule, MatButtonModule, MatIconModule, MarkdownModule],\\n templateUrl: \'./info-modal.component.html\',\\n styleUrls: [\'./info-modal.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class InfoModalComponent {\\n /** Product title shown to the user */\\n @Input() productTitle = \'\';\\n\\n /** Product logo shown to the user */\\n @Input() productLogoUrl = \'\';\\n\\n /** Information modal message to the user */\\n @Input() description = \'\';\\n\\n /** Emits when the close icon is clicked */\\n @Output() readonly closeClick = new EventEmitter();\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n position: relative;\\n padding: 2rem 2rem 1.25rem 2rem;\\n\\n .close {\\n position: absolute;\\n top: 1.5rem;\\n right: 1.5rem;\\n }\\n\\n .title {\\n display: flex;\\n align-items: center;\\n\\n .product-logo-image {\\n height: 2.75rem;\\n margin-right: 1rem;\\n }\\n\\n .product-title {\\n margin: 0;\\n color: #990000;\\n }\\n }\\n\\n .description {\\n display: block;\\n margin-top: 1rem;\\n }\\n}\\n","styleUrl":"./info-modal.component.scss"}],"stylesData":"","templateData":"\\n \\"Prodoct\\n

{{ productTitle }}

\\n\\n\\n\\n\\n\\n"},{"name":"InteractiveSvgComponent","id":"component-InteractiveSvgComponent-34dafc0493fcadf92dd676bebad498e3798e87879ccd7ab9c56dfb6b52cf51b41a6b132fa4c00fa2f32867f3f84829bef3163da37de19cf480f10a8cd94e74f1","file":"src/lib/interactive-svg/interactive-svg.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":["ViewEncapsulation.ShadowDom"],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-interactive-svg","styleUrls":["./interactive-svg.component.scss"],"styles":[],"templateUrl":["./interactive-svg.component.html"],"viewProviders":[],"inputsClass":[{"name":"highlightId","deprecated":false,"deprecationMessage":"","rawdescription":"\\nHighlighted ontology id","description":"

Highlighted ontology id

\\n","line":94,"type":"string","decorators":[]},{"name":"mapping","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nMapping info","description":"

Mapping info

\\n","line":91,"type":"T[]","decorators":[]},{"name":"url","deprecated":false,"deprecationMessage":"","rawdescription":"\\nSVG url","description":"

SVG url

\\n","line":88,"type":"string","decorators":[]}],"outputsClass":[{"name":"nodeClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits node id when clicked","description":"

Emits node id when clicked

\\n","line":100,"type":"EventEmitter"},{"name":"nodeHover","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits node id when hovered","description":"

Emits node id when hovered

\\n","line":97,"type":"EventEmitter"}],"propertiesClass":[{"name":"NEVER_EVAL_SCRIPTS","defaultValue":"SVGScriptEvalMode.NEVER","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

SVG script eval mode

\\n","line":103,"rawdescription":"\\nSVG script eval mode","modifierKind":[144]},{"name":"nodeHoverData$","defaultValue":"new BehaviorSubject(undefined)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Observable of node hover data or undefined when there is no active hover

\\n","line":109,"rawdescription":"\\nObservable of node hover data or undefined when there is no active hover","modifierKind":[144]},{"name":"nodeHoverDelayedData$","defaultValue":"this.nodeHoverData$.pipe(debounce((event) => timer(event ? HOVER_DELAY : 0)))","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Observable of node hover with a timer

\\n","line":112,"rawdescription":"\\nObservable of node hover with a timer","modifierKind":[144]},{"name":"TOOLTIP_POSITIONS","defaultValue":"TOOLTIP_POSITIONS","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Tooltip position settings

\\n","line":106,"rawdescription":"\\nTooltip position settings","modifierKind":[144]}],"methodsClass":[{"name":"formatNodeName","args":[{"name":"name","type":"string","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"string","typeParameters":[],"line":196,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nRemoves underscores from id\\n","description":"

Removes underscores from id

\\n","jsdoctags":[{"name":{"pos":4993,"end":4997,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"name"},"type":"string","deprecated":false,"deprecationMessage":"","tagName":{"pos":4987,"end":4992,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":"

Node name

\\n"},{"tagName":{"pos":5014,"end":5021,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":"

node name without underscores

\\n"}]},{"name":"setSvgElement","args":[{"name":"el","type":"SVGElement","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"void","typeParameters":[],"line":181,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nSets SVG element\\n","description":"

Sets SVG element

\\n","jsdoctags":[{"name":{"pos":4595,"end":4597,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"el"},"type":"SVGElement","deprecated":false,"deprecationMessage":"","tagName":{"pos":4589,"end":4594,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":"

SVG element

\\n"}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Interactive SVG component

\\n","rawdescription":"\\n\\nInteractive SVG component\\n","type":"component","sourceCode":"import { ConnectedPosition, OverlayModule } from \'@angular/cdk/overlay\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n inject,\\n Input,\\n OnChanges,\\n OnDestroy,\\n Output,\\n Renderer2,\\n SimpleChanges,\\n ViewEncapsulation,\\n} from \'@angular/core\';\\nimport { TooltipComponent } from \'@hra-ui/components/atoms\';\\nimport { InlineSVGModule, SVGScriptEvalMode } from \'ng-inline-svg-2\';\\nimport { BehaviorSubject, debounce, fromEventPattern, Observable, Subject, takeUntil, timer } from \'rxjs\';\\nimport { NodeEventHandler } from \'rxjs/internal/observable/fromEvent\';\\n\\n/** Delay before tooltip becomes visible */\\nconst HOVER_DELAY = 200;\\n\\n/** Tooltip position settings */\\nconst TOOLTIP_POSITIONS: ConnectedPosition[] = [\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'start\',\\n overlayY: \'center\',\\n offsetX: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'end\',\\n overlayY: \'center\',\\n offsetX: -8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'top\',\\n offsetY: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'bottom\',\\n offsetY: -8,\\n },\\n];\\n\\n/** Node tooltip data */\\nexport interface NodeTooltipData {\\n /** Node name */\\n node: string;\\n /** Center point of hovered node in screen coordinates */\\n origin: { x: number; y: number };\\n}\\n\\n/** Interface for node entries */\\nexport interface NodeMapEntry {\\n /** Node label */\\n label: string;\\n /** Node id in svg */\\n id: string;\\n /** Ontology id of cell type */\\n ontologyId: string;\\n}\\n\\n/**\\n * Interactive SVG component\\n */\\n@Component({\\n selector: \'hra-interactive-svg\',\\n standalone: true,\\n imports: [CommonModule, InlineSVGModule, OverlayModule, TooltipComponent],\\n templateUrl: \'./interactive-svg.component.html\',\\n styleUrls: [\'./interactive-svg.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n encapsulation: ViewEncapsulation.ShadowDom,\\n})\\nexport class InteractiveSvgComponent implements OnChanges, OnDestroy {\\n /** SVG url */\\n @Input() url?: string;\\n\\n /** Mapping info */\\n @Input() mapping: T[] = [];\\n\\n /** Highlighted ontology id */\\n @Input() highlightId?: string;\\n\\n /** Emits node id when hovered */\\n @Output() readonly nodeHover = new EventEmitter();\\n\\n /** Emits node id when clicked */\\n @Output() readonly nodeClick = new EventEmitter();\\n\\n /** SVG script eval mode */\\n readonly NEVER_EVAL_SCRIPTS = SVGScriptEvalMode.NEVER;\\n\\n /** Tooltip position settings */\\n readonly TOOLTIP_POSITIONS = TOOLTIP_POSITIONS;\\n\\n /** Observable of node hover data or undefined when there is no active hover */\\n readonly nodeHoverData$ = new BehaviorSubject(undefined);\\n\\n /** Observable of node hover with a timer */\\n readonly nodeHoverDelayedData$ = this.nodeHoverData$.pipe(debounce((event) => timer(event ? HOVER_DELAY : 0)));\\n\\n /** Custom renderer */\\n private readonly renderer = inject(Renderer2);\\n\\n /** Destroys */\\n private destroy$ = new Subject();\\n\\n /** Crosswalk element of svg */\\n private crosswalkEl?: Element;\\n\\n /** List of highlighted svg elements */\\n private highlightedElements: Element[] = [];\\n\\n /**\\n * Updates the highlighting based on current highlight id\\n * @param changes\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'highlightId\' in changes) {\\n this.resetHighlight();\\n this.setHighlight();\\n }\\n }\\n\\n /**\\n * Highlights cells that match highlightId\\n */\\n private setHighlight() {\\n const { mapping, highlightId, crosswalkEl } = this;\\n const entry = mapping.find(({ ontologyId }) => ontologyId === highlightId);\\n if (!entry || !crosswalkEl) {\\n return;\\n }\\n\\n let id = this.encodeId(entry.id);\\n const element = crosswalkEl.querySelector(`#${id}`);\\n if (!element) {\\n return;\\n } else if (element.nodeName !== \'g\') {\\n id = element.parentElement?.id ?? \'\';\\n }\\n\\n const elements = crosswalkEl.querySelectorAll(`#${id} :is(path, polygon, polyline)`);\\n this.highlightedElements = Array.from(elements);\\n elements.forEach((el) => el.classList.add(\'click-active\'));\\n }\\n\\n /**\\n * Resets all highlighted elements in the svg\\n */\\n private resetHighlight(): void {\\n for (const el of this.highlightedElements) {\\n el.classList.remove(\'click-active\');\\n }\\n this.highlightedElements = [];\\n }\\n\\n /**\\n * Clears observables on destroy\\n */\\n ngOnDestroy(): void {\\n this.clear();\\n }\\n\\n /**\\n * Sets SVG element\\n * @param el SVG element\\n */\\n setSvgElement(el: SVGElement): void {\\n this.clear();\\n this.crosswalkEl = el.querySelector(\'[id^=\\"Crosswalk\\"]\') ?? undefined;\\n if (this.crosswalkEl) {\\n // Move to front (i.e. last child in svg)\\n this.renderer.appendChild(el, this.crosswalkEl);\\n this.attachCrosswalkHover(this.crosswalkEl);\\n }\\n }\\n\\n /**\\n * Removes underscores from id\\n * @param name Node name\\n * @returns node name without underscores\\n */\\n formatNodeName(name: string): string {\\n return name.replace(/_/g, \' \');\\n }\\n\\n /**\\n * Attaches crosswalk hover\\n * @param el element\\n */\\n private attachCrosswalkHover(el: Element): void {\\n this.attachEvent(el, \'mouseover\').subscribe((event) => this.onCrosswalkHover(event));\\n this.attachEvent(el, \'mouseout\').subscribe(() => this.onCrosswalkHover(undefined as never as MouseEvent));\\n this.attachEvent(el, \'click\').subscribe((event) => this.nodeClick.emit(this.getNode(event)));\\n }\\n\\n /**\\n * Finds matching node in data from a hovered element\\n * @param event Mouse event\\n */\\n private onCrosswalkHover(event: MouseEvent): void {\\n if (event) {\\n const node = this.getNode(event);\\n if (node) {\\n this.nodeHoverData$.next({\\n node: node.label,\\n origin: {\\n x: event.clientX,\\n y: event.clientY,\\n },\\n });\\n this.nodeHover.emit(node); //emits node entry\\n }\\n } else {\\n this.nodeHoverData$.next(undefined);\\n this.nodeHover.emit();\\n }\\n }\\n\\n /**\\n * Clears observables\\n */\\n private clear(): void {\\n this.destroy$.next();\\n this.destroy$.complete();\\n this.destroy$ = new Subject();\\n }\\n\\n /**\\n * Returns entry from mapping if target, parent, or grandparent id matches the node name\\n * @param event Event\\n * @returns Node entry that matches the target id\\n */\\n private getNode(event: Event): T | undefined {\\n const targetId = (event.target as Element).id;\\n const parentId = (event.target as Element).parentElement?.id ?? \'\';\\n const grandparentId = (event.target as Element).parentElement?.parentElement?.id ?? \'\';\\n const idCollection = [targetId, parentId, grandparentId];\\n for (const id of idCollection) {\\n const decodedID = this.decodeId(id);\\n const match = this.mapping.find(\\n (item) => item.id?.toLowerCase() === decodedID.toLowerCase() //search mapping by name for matching node entry\\n );\\n if (match) {\\n return match;\\n }\\n }\\n return undefined;\\n }\\n\\n /**\\n * Decodes id into a normal string\\n * @param id Undecoded ID\\n * @returns id\\n */\\n private decodeId(id: string): string {\\n const replacer = (_match: string, hex: string) => String.fromCharCode(Number.parseInt(hex, 16));\\n return id.replace(/_x([\\\\da-f]+)_/gi, replacer);\\n }\\n\\n /**\\n * Turns normal string into decoded SVG id\\n * @param id id\\n * @returns Encoded id\\n */\\n private encodeId(id: string): string {\\n const replacer = (match: string) => `_x${match.charCodeAt(0).toString(16).toUpperCase()}_`;\\n return id.replace(/[^a-z0-9-]/gi, replacer);\\n }\\n\\n /**\\n * Attaches an event listener\\n * @template K\\n * @param el Element\\n * @param event Event\\n * @returns Observable\\n */\\n private attachEvent(el: Element, event: K): Observable {\\n const { renderer, destroy$ } = this;\\n const add = (handler: NodeEventHandler) => renderer.listen(el, event, handler);\\n const remove = (_handler: NodeEventHandler, unlisten: () => void) => unlisten();\\n return fromEventPattern(add, remove).pipe(takeUntil(destroy$));\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":".svg {\\n max-height: calc(100vh - 14rem);\\n overflow-y: auto;\\n}\\nsvg {\\n max-height: calc(100vh - 10rem);\\n width: 100%;\\n}\\n\\n[id^=\'Crosswalk\'] {\\n :is(path, polygon, polyline) {\\n fill: transparent;\\n stroke: transparent;\\n }\\n\\n .hover-active & g:hover > :is(path, polygon, polyline),\\n .hover-active & g > g:hover > :is(path, polygon, polyline),\\n .click-active {\\n fill: hsl(0deg 100% 50%);\\n mix-blend-mode: saturation;\\n }\\n}\\n\\n::-webkit-scrollbar {\\n width: 0.5rem;\\n height: 0.5rem;\\n}\\n\\n::-webkit-scrollbar-track {\\n background: #f8f9fa;\\n border: 0.063rem solid #d3d3d3;\\n}\\n\\n::-webkit-scrollbar-thumb {\\n background: #a0abb4;\\n border-radius: 0.5rem;\\n}\\n","styleUrl":"./interactive-svg.component.scss"}],"stylesData":"","implements":["OnChanges","OnDestroy"],"templateData":"\\n\\n\\n \\n \\n \\n\\n"},{"name":"LandingPageInDepthComponent","id":"component-LandingPageInDepthComponent-266cc77d12f81268af62a259a42675f25c0be65e3cab6881ce7afcd3dbaa4ab87e767f669fc822ea592327de677787a00c9eb4a5b9b1171d78fe6aefc8cc439b","file":"src/lib/landing-page-in-depth/landing-page-in-depth.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-landing-page-in-depth","styleUrls":["./landing-page-in-depth.component.scss"],"styles":[],"templateUrl":["./landing-page-in-depth.component.html"],"viewProviders":[],"inputsClass":[{"name":"description","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nImage description shown to the user","description":"

Image description shown to the user

\\n","line":24,"type":"string","decorators":[]},{"name":"img","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nImage shown to the user","description":"

Image shown to the user

\\n","line":27,"type":"string","decorators":[]},{"name":"moreLink","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nLink to navigate to on more button click","description":"

Link to navigate to on more button click

\\n","line":33,"type":"any","decorators":[]},{"name":"moreText","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nText for more button","description":"

Text for more button

\\n","line":30,"type":"string","decorators":[]},{"name":"title","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nImage title shown to the user","description":"

Image title shown to the user

\\n","line":21,"type":"string","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Displays the image and also corresponding title and text along with a button to read more

\\n","rawdescription":"\\n\\nDisplays the image and also corresponding title and text along with a button to read more\\n","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EMPTY_LINK, LinkDirective } from \'@hra-ui/cdk\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/**\\n * Displays the image and also corresponding title and text along with a button to read more\\n */\\n@Component({\\n selector: \'hra-landing-page-in-depth\',\\n standalone: true,\\n imports: [CommonModule, MarkdownModule, MatButtonModule, MatIconModule, LinkDirective],\\n templateUrl: \'./landing-page-in-depth.component.html\',\\n styleUrls: [\'./landing-page-in-depth.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class LandingPageInDepthComponent {\\n /** Image title shown to the user */\\n @Input() title = \'\';\\n\\n /** Image description shown to the user */\\n @Input() description = \'\';\\n\\n /** Image shown to the user */\\n @Input() img = \'\';\\n\\n /** Text for more button */\\n @Input() moreText = \'\';\\n\\n /** Link to navigate to on more button click */\\n @Input() moreLink = EMPTY_LINK;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n display: grid;\\n grid-template-columns: 2fr 3fr;\\n grid-template-rows: auto auto 1fr;\\n column-gap: 2rem;\\n row-gap: 2rem;\\n padding: 3.5rem 2rem;\\n\\n .image {\\n grid-column: 1;\\n grid-row: 1 / span 3;\\n width: 100%;\\n height: auto;\\n align-self: center;\\n border-radius: 1rem;\\n box-shadow: 0.06rem 0.13rem 1rem 0.13rem #00000029;\\n }\\n\\n .title {\\n font-size: 2rem;\\n line-height: 2.5rem;\\n margin: 0;\\n }\\n\\n .description {\\n font-size: 1rem;\\n line-height: 1.5rem;\\n\\n ::ng-deep p {\\n margin: 0;\\n }\\n\\n ::ng-deep a {\\n color: vars.$primary-rgb;\\n font-weight: 700;\\n }\\n }\\n\\n .more-button {\\n width: fit-content;\\n height: 3rem;\\n }\\n}\\n","styleUrl":"./landing-page-in-depth.component.scss"}],"stylesData":"","templateData":"\\"\\"\\n

{{ title }}

\\n\\n\\n"},{"name":"LandingPageIntroComponent","id":"component-LandingPageIntroComponent-8e48a2ad3d32eea60c9dee7976b3dbc195b3a8107a3c174ac68b4696362903f19522bad089b509daae23505334aa5361945e7a8124fd32f17a6834c349c87aed","file":"src/lib/landing-page-intro/landing-page-intro.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-landing-page-intro","styleUrls":["./landing-page-intro.component.scss"],"styles":[],"templateUrl":["./landing-page-intro.component.html"],"viewProviders":[],"inputsClass":[{"name":"description","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nDescription for FTU Explorer","description":"

Description for FTU Explorer

\\n","line":22,"type":"string","decorators":[]},{"name":"img","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nIntro Image file url","description":"

Intro Image file url

\\n","line":28,"type":"string","decorators":[]},{"name":"moreLink","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nLink to navigate to on more button click","description":"

Link to navigate to on more button click

\\n","line":34,"type":"any","decorators":[]},{"name":"moreText","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nText for more button","description":"

Text for more button

\\n","line":31,"type":"string","decorators":[]},{"name":"partners","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nThank you message to partners","description":"

Thank you message to partners

\\n","line":25,"type":"string","decorators":[]},{"name":"title","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nIntro title for FTU Explorer","description":"

Intro title for FTU Explorer

\\n","line":19,"type":"string","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for LandingPage Intro

\\n","rawdescription":"\\nComponent for LandingPage Intro","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EMPTY_LINK, LinkDirective } from \'@hra-ui/cdk\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/** Component for LandingPage Intro */\\n@Component({\\n selector: \'hra-landing-page-intro\',\\n standalone: true,\\n imports: [CommonModule, MatButtonModule, MatIconModule, MarkdownModule, LinkDirective],\\n templateUrl: \'./landing-page-intro.component.html\',\\n styleUrls: [\'./landing-page-intro.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class LandingPageIntroComponent {\\n /** Intro title for FTU Explorer */\\n @Input() title = \'\';\\n\\n /** Description for FTU Explorer */\\n @Input() description = \'\';\\n\\n /** Thank you message to partners */\\n @Input() partners = \'\';\\n\\n /** Intro Image file url */\\n @Input() img = \'\';\\n\\n /** Text for more button */\\n @Input() moreText = \'\';\\n\\n /** Link to navigate to on more button click */\\n @Input() moreLink = EMPTY_LINK;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n display: grid;\\n grid-template-columns: 3fr 2fr;\\n grid-template-rows: auto auto 3rem 1fr;\\n align-items: start;\\n column-gap: 2rem;\\n row-gap: 2rem;\\n\\n .title {\\n font-size: 3rem;\\n line-height: 4rem;\\n margin: 0;\\n }\\n\\n .more-button {\\n width: fit-content;\\n height: 3rem;\\n }\\n\\n .image {\\n grid-column: 2;\\n grid-row: 1 / span 4;\\n place-self: center;\\n width: 100%;\\n height: auto;\\n }\\n\\n .description,\\n .partners {\\n ::ng-deep p {\\n margin: 0;\\n }\\n\\n ::ng-deep a {\\n color: vars.$primary-rgb;\\n font-weight: 700;\\n }\\n }\\n\\n .red-theme {\\n background-color: #990000;\\n border-color: #990000;\\n &:hover {\\n background-color: #990000;\\n border-color: #990000;\\n\\n mat-icon {\\n transform: translateX(30%);\\n transition: 0.5s;\\n }\\n }\\n\\n &:active,\\n &:focus,\\n &:focus:not(:hover) {\\n background-color: #990000;\\n border-color: #990000;\\n\\n ::ng-deep .mat-mdc-focus-indicator {\\n background-color: #990000 !important;\\n border-color: #990000;\\n }\\n }\\n }\\n}\\n","styleUrl":"./landing-page-intro.component.scss"}],"stylesData":"","templateData":"

{{ title }}

\\n\\n\\n\\n\\n\\n\\"alt\\"\\n"},{"name":"MetricsComponent","id":"component-MetricsComponent-e52c0a1cdf090042d1924c4907a4034774cbb442217faca9ec5035e76d2796116cf55644ecf49ae040fdea1168f9c5d99f6ce15b2079f70de3d853fece481b30","file":"src/lib/metrics/metrics.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-metrics","styleUrls":["./metrics.component.scss"],"styles":[],"templateUrl":["./metrics.component.html"],"viewProviders":[],"inputsClass":[{"name":"logo","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nLogo of metrics component.","description":"

Logo of metrics component.

\\n","line":31,"type":"string","decorators":[]},{"name":"metrics","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nList of metrics that will be shown to the user.","description":"

List of metrics that will be shown to the user.

\\n","line":34,"type":"MetricItem[]","decorators":[]},{"name":"title","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nMain title of metrics component.","description":"

Main title of metrics component.

\\n","line":28,"type":"string","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Describes the metrics for the HuBMAP project.

\\n","rawdescription":"\\n\\nDescribes the metrics for the HuBMAP project.\\n","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\n\\n/**\\n An interface representing a single metric with an icon, value and description.\\n */\\nexport interface MetricItem {\\n /** Represents the icon associated with the metric. */\\n icon: string;\\n /** Describes the numberical value of the metric. */\\n value: string;\\n /** Describes the type of metric. */\\n description: string;\\n}\\n/**\\n * Describes the metrics for the HuBMAP project.\\n */\\n@Component({\\n selector: \'hra-metrics\',\\n standalone: true,\\n imports: [CommonModule],\\n templateUrl: \'./metrics.component.html\',\\n styleUrls: [\'./metrics.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class MetricsComponent {\\n /** Main title of metrics component. */\\n @Input() title = \'\';\\n\\n /** Logo of metrics component. */\\n @Input() logo = \'\';\\n\\n /** List of metrics that will be shown to the user. */\\n @Input() metrics: MetricItem[] = [];\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n padding: 2rem 0 0 0;\\n background: #f8f9fa;\\n gap: 0.5rem;\\n\\n .logo {\\n height: 2.75rem;\\n }\\n\\n .header-title {\\n font-size: 2rem;\\n line-height: 2.5rem;\\n }\\n\\n .metrics {\\n display: flex;\\n flex-direction: row;\\n overflow-x: auto;\\n max-width: 100%;\\n gap: 2rem;\\n padding: 2rem 1.75rem;\\n\\n .metric {\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n min-width: 14.25rem;\\n height: 14.75rem;\\n padding-top: 2rem;\\n padding-bottom: 2rem;\\n\\n .logo {\\n margin-bottom: 2rem;\\n }\\n\\n .value {\\n font-size: 3rem;\\n line-height: 4rem;\\n margin-bottom: 0.25rem;\\n }\\n\\n .description {\\n font-size: 1rem;\\n text-align: center;\\n }\\n }\\n }\\n}\\n","styleUrl":"./metrics.component.scss"}],"stylesData":"","templateData":"\\"\\"\\n{{ title }}\\n\\n
\\n
\\n \\"\\"\\n {{ item.value }} \\n {{ item.description }} \\n
\\n
\\n"},{"name":"ScreenSizeNoticeComponent","id":"component-ScreenSizeNoticeComponent-6b641a220201d969fb228ecf72f5e7a8fc87da742b8a53350bc9c27cea9c54a6493313826b99ec8c34dfd7004772a27748e45af5b0c9ead80bdf168a781117f8","file":"src/lib/screen-size-notice/screen-size-notice.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-screen-size-notice","styleUrls":["./screen-size-notice.component.scss"],"styles":[],"templateUrl":["./screen-size-notice.component.html"],"viewProviders":[],"inputsClass":[{"name":"content","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput for passing screen size notice content\\n","description":"

Input for passing screen size notice content

\\n","line":23,"type":"string","decorators":[]},{"name":"portal","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput of screen size notice component\\n","description":"

Input of screen size notice component

\\n","line":28,"type":"any","decorators":[]}],"outputsClass":[{"name":"proceedClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the proceed button is clicked","description":"

Emits when the proceed button is clicked

\\n","line":31,"type":"EventEmitter"}],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

The screen size notice component displays a notice for the users specifying the required screen size

\\n","rawdescription":"\\n\\nThe screen size notice component displays a notice for the users specifying the required screen size\\n","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EMPTY_LINK, LinkDirective } from \'@hra-ui/cdk\';\\n\\n/**\\n * The screen size notice component displays a notice for the users specifying the required screen size\\n */\\n@Component({\\n selector: \'hra-screen-size-notice\',\\n standalone: true,\\n imports: [CommonModule, MarkdownModule, MatButtonModule, MatIconModule, LinkDirective],\\n templateUrl: \'./screen-size-notice.component.html\',\\n styleUrls: [\'./screen-size-notice.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class ScreenSizeNoticeComponent {\\n /**\\n * Input for passing screen size notice content\\n */\\n @Input() content = \'\';\\n\\n /**\\n * Input of screen size notice component\\n */\\n @Input() portal = EMPTY_LINK;\\n\\n /** Emits when the proceed button is clicked */\\n @Output() readonly proceedClick = new EventEmitter();\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: none;\\n position: relative;\\n border-radius: 0.5rem;\\n padding: 1.5rem;\\n flex-direction: column;\\n\\n .header-close {\\n position: absolute;\\n top: 0.625rem;\\n right: 1rem;\\n }\\n\\n h3 {\\n margin: 0 0 1rem 0;\\n font-weight: 700;\\n }\\n\\n .btn-stroked {\\n font-weight: 700;\\n margin-bottom: 1rem;\\n margin-top: 1rem;\\n padding: 0.75rem 0;\\n letter-spacing: 0.5px;\\n }\\n\\n .btn-flat {\\n font-weight: 700;\\n font-size: 16px;\\n padding: 0.75rem 0;\\n letter-spacing: 0.5px;\\n color: white;\\n }\\n\\n .content {\\n font-size: 1rem;\\n line-height: 1.5rem;\\n letter-spacing: 0.5px;\\n }\\n\\n @media (max-width: 480px) {\\n display: flex;\\n }\\n}\\n","styleUrl":"./screen-size-notice.component.scss"}],"stylesData":"","templateData":"

Screen Size Notice

\\n\\n\\n\\n Human Reference Atlas Portal \\n"},{"name":"SourceListComponent","id":"component-SourceListComponent-f0d0464b044f898be3752719190f2d8ad8511283d4daafb2f8b17bd0f4dfa0290abbbeb293819664c07134fcaee5a64313aaf72d69e335a063e244c2ba1d7c0c","file":"src/lib/source-list/source-list.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-source-list","styleUrls":["./source-list.component.scss"],"styles":[],"templateUrl":["./source-list.component.html"],"viewProviders":[],"inputsClass":[{"name":"collaborateText","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput buttonon text of empty biomarker component.\\n","description":"

Input buttonon text of empty biomarker component.

\\n","line":34,"type":"string","decorators":[]},{"name":"message","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput message markdown of empty biomarker component.\\n","description":"

Input message markdown of empty biomarker component.

\\n","line":39,"type":"string","decorators":[]},{"name":"sources","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nList of sources with titles and links displayed to the user","description":"

List of sources with titles and links displayed to the user

\\n","line":30,"type":"SourceListItem[]","decorators":[]}],"outputsClass":[{"name":"collaborateClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the contact button is clicked","description":"

Emits when the contact button is clicked

\\n","line":47,"type":"EventEmitter"}],"propertiesClass":[{"name":"showTable","defaultValue":"true","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Show table of source list component which toggles to true or false\\nbased on click

\\n","line":44,"rawdescription":"\\n\\nShow table of source list component which toggles to true or false\\nbased on click\\n"}],"methodsClass":[{"name":"toggleTable","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":53,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nIt changes the value of showTable to false if value it true\\nand vice versa\\n","description":"

It changes the value of showTable to false if value it true\\nand vice versa

\\n"}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

This component shows list of sources with title and links to the datasets

\\n","rawdescription":"\\nThis component shows list of sources with title and links to the datasets","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule } from \'@angular/material/table\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EmptyBiomarkerComponent, LabelBoxComponent } from \'@hra-ui/components/atoms\';\\n\\n/** SourceListItem interface contains title and link to the dataset for the SourceList*/\\nexport interface SourceListItem {\\n /** Title of the dataset in the SourceList */\\n title: string;\\n\\n /** Label of the dataset in the SourceList */\\n label: string;\\n\\n /** Link to the dataset in the SourceList */\\n link: string;\\n}\\n\\n/** This component shows list of sources with title and links to the datasets */\\n@Component({\\n selector: \'hra-source-list\',\\n standalone: true,\\n imports: [CommonModule, MatTableModule, MatIconModule, LabelBoxComponent, EmptyBiomarkerComponent],\\n templateUrl: \'./source-list.component.html\',\\n styleUrls: [\'./source-list.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class SourceListComponent {\\n /** List of sources with titles and links displayed to the user */\\n @Input() sources: SourceListItem[] = [];\\n /**\\n * Input buttonon text of empty biomarker component.\\n */\\n @Input() collaborateText = \'\';\\n\\n /**\\n * Input message markdown of empty biomarker component.\\n */\\n @Input() message = \'\';\\n /**\\n * Show table of source list component which toggles to true or false\\n * based on click\\n */\\n showTable = true;\\n\\n /** Emits when the contact button is clicked */\\n @Output() readonly collaborateClick = new EventEmitter();\\n\\n /**\\n * It changes the value of showTable to false if value it true\\n * and vice versa\\n */\\n toggleTable(): void {\\n this.showTable = !this.showTable;\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'utils\';\\n@use \'variables\' as vars;\\n\\n:host {\\n display: block;\\n height: 100%;\\n\\n .sr-only {\\n @include utils.sr-only();\\n }\\n\\n .toggle {\\n display: flex;\\n align-items: center;\\n height: 3.5rem;\\n grid-area: source-list-header;\\n color: var(--dark-primary-text);\\n border-top: 0.063rem solid #d3d3d3;\\n border-bottom: 0.063rem solid #d3d3d3;\\n }\\n\\n .table-content {\\n height: calc(100% - 3.5rem);\\n overflow: auto;\\n\\n &.hidden {\\n display: none;\\n }\\n\\n table {\\n height: 100%;\\n }\\n\\n .mat-mdc-cell {\\n vertical-align: top;\\n border: none;\\n padding: 0.25rem 0.875rem;\\n font-size: 1rem;\\n }\\n\\n ::ng-deep .mdc-data-table__content {\\n display: block;\\n padding: 1rem 0rem;\\n }\\n }\\n}\\n","styleUrl":"./source-list.component.scss"}],"stylesData":"","templateData":"\\n Source Data\\n \\n {{ showTable ? \'keyboard_arrow_down\' : \'keyboard_arrow_up\' }}\\n \\n\\n\\n
\\n \\n \\n\\n \x3c!-- Position Column --\x3e\\n \\n \\n \\n \\n\\n \x3c!-- Data Column --\x3e\\n \\n \\n \\n \\n\\n \\n
\\n Source List Table with Title and Links\\n
Item Number{{ i + 1 }}.Title and Link\\n {{ element.title }}\\n
\\n {{ element.label }}\\n
\\n \\n
\\n"},{"name":"TissueTreeListComponent","id":"component-TissueTreeListComponent-8544338e8c5e11dd440f8b104bfa31552155bc5006289770258a8e940978177df7797adcb9bafb5b09a9943913ecf339692d528f868c6846be5c3de8a6270237","file":"src/lib/tissue-tree-list/tissue-tree-list.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-tissue-tree-list","styleUrls":["./tissue-tree-list.component.scss"],"styles":[],"templateUrl":["./tissue-tree-list.component.html"],"viewProviders":[],"inputsClass":[{"name":"nodes","defaultValue":"{} as Record","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput of tissue tree list component\\n","description":"

Input of tissue tree list component

\\n","line":69,"type":"Record","decorators":[]},{"name":"selected","defaultValue":"undefined","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nNode selected, to view the data associated with it\\n","description":"

Node selected, to view the data associated with it

\\n","line":74,"type":"T","decorators":[]}],"outputsClass":[{"name":"selectedChange","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nOutput of tissue tree list component\\n","description":"

Output of tissue tree list component

\\n","line":79,"type":"EventEmitter"}],"propertiesClass":[{"name":"control","defaultValue":"new FlatTreeControl>(\\n (node) => node.level,\\n (node) => node.expandable\\n )","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

tree controller, used to control the nodes in the tree

\\n","line":84,"rawdescription":"\\n\\ntree controller, used to control the nodes in the tree\\n","modifierKind":[144]},{"name":"dataSource","defaultValue":"new MatTreeFlatDataSource(this.control, this.flattener)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Data source of tissue tree list component, defines the data in mat-tree

\\n","line":107,"rawdescription":"\\n\\nData source of tissue tree list component, defines the data in mat-tree\\n","modifierKind":[144]},{"name":"flattener","defaultValue":"new MatTreeFlattener>(\\n (node, level) => ({\\n label: node.label,\\n expandable: (node.children?.length ?? 0) > 0,\\n level,\\n data: node,\\n }),\\n (node) => node.level,\\n (node) => node.expandable,\\n (node) => node.children?.map((id) => this.nodes[id])\\n )","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Flattener of tissue tree list component, returns flat-data structure

\\n","line":92,"rawdescription":"\\n\\nFlattener of tissue tree list component, returns flat-data structure\\n","modifierKind":[144]}],"methodsClass":[{"name":"hasChild","args":[{"name":"_","type":"number","deprecated":false,"deprecationMessage":""},{"name":"node","type":"InternalNode","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"boolean","typeParameters":[],"line":128,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\ncheck if the current node has children\\n","description":"

check if the current node has children

\\n","jsdoctags":[{"name":"_","type":"number","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}},{"name":{"pos":3422,"end":3426,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"node"},"type":"InternalNode","deprecated":false,"deprecationMessage":"","tagName":{"pos":3416,"end":3421,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":"

current selected node

\\n"},{"tagName":{"pos":3455,"end":3462,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":"

boolean, which means if node has children

\\n"}]},{"name":"resetSelection","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":146,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nResets selection and collapes all nodes of the tree.\\n","description":"

Resets selection and collapes all nodes of the tree.

\\n"},{"name":"selectNode","args":[{"name":"node","type":"T","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"void","typeParameters":[],"line":136,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nIt selects the node, which is clicked.\\n","description":"

It selects the node, which is clicked.

\\n","jsdoctags":[{"name":{"pos":3665,"end":3669,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"node"},"type":"T","deprecated":false,"deprecationMessage":"","tagName":{"pos":3659,"end":3664,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":"

Tissue Tree Item, which is clicked

\\n"}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Tabular View for hubMap tissue side-bar

\\n","rawdescription":"\\n\\nTabular View for hubMap tissue side-bar\\n","type":"component","sourceCode":"import { FlatTreeControl } from \'@angular/cdk/tree\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n Input,\\n OnChanges,\\n Output,\\n SimpleChanges,\\n} from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatRippleModule } from \'@angular/material/core\';\\nimport { MatExpansionModule } from \'@angular/material/expansion\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatTreeFlatDataSource, MatTreeFlattener, MatTreeModule } from \'@angular/material/tree\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { LinkId } from \'@hra-ui/cdk/state\';\\n\\n/** Base node type */\\nexport interface DataNode {\\n /** User readable label */\\n label: string;\\n /** Id to pass as a query parameter on navigation */\\n id?: string;\\n /** Link to navigate to on node click */\\n link?: LinkId;\\n /** Nested nodes */\\n children?: K[];\\n}\\n\\n/**\\n * Internal interface for flat tissue data hierarchy\\n */\\ninterface InternalNode> {\\n /** Displayed label */\\n label: string;\\n /** Whether the node can be expanded to display child nodes */\\n expandable: boolean;\\n /** Depth of node in the tree */\\n level: number;\\n /** Associated user node data */\\n data: T;\\n}\\n\\n/**\\n * Tabular View for hubMap tissue side-bar\\n */\\n@Component({\\n selector: \'hra-tissue-tree-list\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatButtonModule,\\n MatTreeModule,\\n MatIconModule,\\n MatExpansionModule,\\n MatRippleModule,\\n LinkDirective,\\n ],\\n templateUrl: \'./tissue-tree-list.component.html\',\\n styleUrls: [\'./tissue-tree-list.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class TissueTreeListComponent> implements OnChanges {\\n /**\\n * Input of tissue tree list component\\n */\\n @Input() nodes: Record = {} as Record;\\n\\n /**\\n * Node selected, to view the data associated with it\\n */\\n @Input() selected?: T = undefined;\\n\\n /**\\n * Output of tissue tree list component\\n */\\n @Output() readonly selectedChange = new EventEmitter();\\n\\n /**\\n * tree controller, used to control the nodes in the tree\\n */\\n readonly control = new FlatTreeControl>(\\n (node) => node.level,\\n (node) => node.expandable\\n );\\n\\n /**\\n * Flattener of tissue tree list component, returns flat-data structure\\n */\\n readonly flattener = new MatTreeFlattener>(\\n (node, level) => ({\\n label: node.label,\\n expandable: (node.children?.length ?? 0) > 0,\\n level,\\n data: node,\\n }),\\n (node) => node.level,\\n (node) => node.expandable,\\n (node) => node.children?.map((id) => this.nodes[id])\\n );\\n\\n /**\\n * Data source of tissue tree list component, defines the data in mat-tree\\n */\\n readonly dataSource = new MatTreeFlatDataSource(this.control, this.flattener);\\n\\n /**\\n * Take actions if any data changes\\n * @param changes changes in data\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'nodes\' in changes) {\\n this.dataSource.data = this.findRootNodes();\\n }\\n if (\'selected\' in changes) {\\n const path = this.selected ? this.dfsFindPath(this.findRootNodes(), this.selected) : [];\\n this.expandPath(path);\\n }\\n }\\n\\n /**\\n * check if the current node has children\\n * @param node current selected node\\n * @returns boolean, which means if node has children\\n */\\n hasChild(_: number, node: InternalNode): boolean {\\n return node.expandable;\\n }\\n\\n /**\\n * It selects the node, which is clicked.\\n * @param node Tissue Tree Item, which is clicked\\n */\\n selectNode(node: T): void {\\n if (this.selected !== node) {\\n this.selected = node;\\n this.selectedChange.emit(this.selected);\\n }\\n }\\n\\n /**\\n * Resets selection and collapes all nodes of the tree.\\n */\\n resetSelection(): void {\\n this.selected = undefined;\\n this.control.collapseAll();\\n }\\n\\n /**\\n * It creates a copy of the input nodes object.\\n * It iterates over it and removes all the children nodes from it.\\n * @returns remaining nodes which are root nodes.\\n */\\n private findRootNodes(): T[] {\\n const { nodes } = this;\\n const roots = { ...this.nodes };\\n for (const key in nodes) {\\n for (const child of nodes[key].children ?? []) {\\n delete roots[child];\\n }\\n }\\n\\n return Object.values(roots);\\n }\\n\\n /**\\n * expands the tree nodes based on the path provided.\\n * @param path is given as an input.\\n */\\n private expandPath(path: DataNode[]): void {\\n const nodes = this.control.dataNodes.filter((node) => path.includes(node.data));\\n nodes.forEach((node) => this.control.expand(node));\\n }\\n\\n /**\\n * It used the logic of depth first search to find the target node.\\n * returns the path to the target node.\\n */\\n private dfsFindPath(nodes: T[], target: T, path: T[] = []): T[] {\\n for (const node of nodes) {\\n path.push(node);\\n if (node === target) {\\n return path;\\n }\\n\\n const savedLength = path.length;\\n const children = node.children?.map((id) => this.nodes[id]) ?? [];\\n if (this.dfsFindPath(children, target, path).length > savedLength) {\\n return path;\\n }\\n\\n path.pop();\\n }\\n\\n return path;\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n display: block;\\n height: calc(100% - 5rem);\\n overflow-y: auto;\\n .row {\\n min-height: 2rem;\\n &.child {\\n padding: 5px 0 5px 64px;\\n }\\n &.selected {\\n background-color: vars.$accent-lighter-rgb;\\n }\\n\\n .toggle {\\n width: 2rem;\\n height: 2rem;\\n padding: 0.25rem;\\n }\\n\\n .label-container {\\n display: flex;\\n align-items: center;\\n height: 2rem;\\n padding: 0 1rem;\\n border-radius: 0.25rem;\\n\\n .link {\\n cursor: pointer;\\n text-decoration: none;\\n color: rgba(vars.$dark-primary-text);\\n }\\n }\\n\\n &.selected .label-container .link {\\n color: vars.$accent-rgb;\\n }\\n }\\n}\\n","styleUrl":"./tissue-tree-list.component.scss"}],"stylesData":"","implements":["OnChanges"],"templateData":"\\n \\n \\n \\n\\n \\n \\n\\n \\n \\n\\n\\n\\n
\\n \\n {{ label }}\\n \\n \\n {{ label }}\\n \\n
\\n\\n"},{"name":"TitleCardComponent","id":"component-TitleCardComponent-dda33e0370aff82797f5b3494c98b25f59e8b87daefd03e828cec8116928222c19885f73255625acfce7c66d590784fd1ad8faa664dac65130f8119fc2670670","file":"src/lib/title-card/title-card.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-title-card","styleUrls":["./title-card.component.scss"],"styles":[],"templateUrl":["./title-card.component.html"],"viewProviders":[],"inputsClass":[{"name":"description","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nDescription for the title card shown to the user","description":"

Description for the title card shown to the user

\\n","line":19,"type":"string","decorators":[]},{"name":"title","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nTitle for the title card shown to the user","description":"

Title for the title card shown to the user

\\n","line":16,"type":"string","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Displays title card to the user with title and description

\\n","rawdescription":"\\nDisplays title card to the user with title and description","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/** Displays title card to the user with title and description */\\n@Component({\\n selector: \'hra-title-card\',\\n standalone: true,\\n imports: [CommonModule, MarkdownModule],\\n templateUrl: \'./title-card.component.html\',\\n styleUrls: [\'./title-card.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class TitleCardComponent {\\n /** Title for the title card shown to the user*/\\n @Input() title = \'\';\\n\\n /** Description for the title card shown to the user*/\\n @Input() description = \'\';\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n\\n .title {\\n margin-bottom: 0.5rem;\\n }\\n}\\n","styleUrl":"./title-card.component.scss"}],"stylesData":"","templateData":"

{{ title }}

\\n\\n"}],"modules":[],"miscellaneous":{"variables":[{"name":"DOWNLOADS_LIST_POSITION","ctype":"miscellaneous","subtype":"variable","file":"src/lib/footer/footer.component.ts","deprecated":false,"deprecationMessage":"","type":"ConnectedPosition[]","defaultValue":"[\\n {\\n panelClass: \'above\',\\n originX: \'start\',\\n originY: \'top\',\\n overlayX: \'start\',\\n overlayY: \'bottom\',\\n offsetY: 0,\\n },\\n {\\n panelClass: \'below\',\\n originX: \'start\',\\n originY: \'bottom\',\\n overlayX: \'start\',\\n overlayY: \'top\',\\n },\\n]","rawdescription":"Positioning value for the download list popup","description":"

Positioning value for the download list popup

\\n"},{"name":"EMPTY_CONTACT_DATA","ctype":"miscellaneous","subtype":"variable","file":"src/lib/contact-modal/contact-modal.component.ts","deprecated":false,"deprecationMessage":"","type":"Partial","defaultValue":"{\\n email: undefined,\\n subject: undefined,\\n message: undefined,\\n}","rawdescription":"Initial empty contact data","description":"

Initial empty contact data

\\n"},{"name":"HOVER_DELAY","ctype":"miscellaneous","subtype":"variable","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"number","defaultValue":"200","rawdescription":"Delay before tooltip becomes visible","description":"

Delay before tooltip becomes visible

\\n"},{"name":"TOOLTIP_POSITIONS","ctype":"miscellaneous","subtype":"variable","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"ConnectedPosition[]","defaultValue":"[\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'start\',\\n overlayY: \'center\',\\n offsetX: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'end\',\\n overlayY: \'center\',\\n offsetX: -8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'top\',\\n offsetY: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'bottom\',\\n offsetY: -8,\\n },\\n]","rawdescription":"Tooltip position settings","description":"

Tooltip position settings

\\n"}],"functions":[],"typealiases":[],"enumerations":[],"groupedVariables":{"src/lib/footer/footer.component.ts":[{"name":"DOWNLOADS_LIST_POSITION","ctype":"miscellaneous","subtype":"variable","file":"src/lib/footer/footer.component.ts","deprecated":false,"deprecationMessage":"","type":"ConnectedPosition[]","defaultValue":"[\\n {\\n panelClass: \'above\',\\n originX: \'start\',\\n originY: \'top\',\\n overlayX: \'start\',\\n overlayY: \'bottom\',\\n offsetY: 0,\\n },\\n {\\n panelClass: \'below\',\\n originX: \'start\',\\n originY: \'bottom\',\\n overlayX: \'start\',\\n overlayY: \'top\',\\n },\\n]","rawdescription":"Positioning value for the download list popup","description":"

Positioning value for the download list popup

\\n"}],"src/lib/contact-modal/contact-modal.component.ts":[{"name":"EMPTY_CONTACT_DATA","ctype":"miscellaneous","subtype":"variable","file":"src/lib/contact-modal/contact-modal.component.ts","deprecated":false,"deprecationMessage":"","type":"Partial","defaultValue":"{\\n email: undefined,\\n subject: undefined,\\n message: undefined,\\n}","rawdescription":"Initial empty contact data","description":"

Initial empty contact data

\\n"}],"src/lib/interactive-svg/interactive-svg.component.ts":[{"name":"HOVER_DELAY","ctype":"miscellaneous","subtype":"variable","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"number","defaultValue":"200","rawdescription":"Delay before tooltip becomes visible","description":"

Delay before tooltip becomes visible

\\n"},{"name":"TOOLTIP_POSITIONS","ctype":"miscellaneous","subtype":"variable","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"ConnectedPosition[]","defaultValue":"[\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'start\',\\n overlayY: \'center\',\\n offsetX: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'end\',\\n overlayY: \'center\',\\n offsetX: -8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'top\',\\n offsetY: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'bottom\',\\n offsetY: -8,\\n },\\n]","rawdescription":"Tooltip position settings","description":"

Tooltip position settings

\\n"}]},"groupedFunctions":{},"groupedEnumerations":{},"groupedTypeAliases":{}}}')},"./dist/compodoc/components-organisms/documentation.json":module=>{"use strict";module.exports=JSON.parse('{"pipes":[],"interfaces":[{"name":"DataCell","id":"interface-DataCell-1a11b32dee89b55746dd02d393406aa7ea06e3d180099074510a109749d06241410786b045f3a9d570f4479be6442014b194d68f340724b0e76b4b0983b59760","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule, MatTableDataSource } from \'@angular/material/table\';\\nimport {\\n BiomarkerTableDataCardComponent,\\n BiomarkerTableDataIconComponent,\\n DataItem,\\n} from \'@hra-ui/components/molecules\';\\nimport { HoverDirective } from \'@hra-ui/cdk\';\\nimport { GradientPoint, SizeLegend } from \'@hra-ui/components/atoms\';\\n\\n/**\\n * RGBTriblet of type RGB to store color\\n */\\ntype RGBTriplet = [number, number, number];\\n\\n/**\\n * An interface representing a single cell of the table.\\n */\\nexport interface DataCell {\\n /** Represents the color of the icon */\\n color: string;\\n /** Represents the size of the icon */\\n size: number;\\n /** Represents the data for the data card */\\n data: {\\n cell: string;\\n biomarker: string;\\n meanExpression: number;\\n /** Number of datasets for this Tissue */\\n dataset_count: number;\\n };\\n}\\n\\n/**\\n * Details of the Tissue\\n */\\nexport interface TissueInfo {\\n /** ID of the Tissue */\\n id: string;\\n /** Name of the Tissue */\\n label: string;\\n}\\n\\n/** Describes the composition of a single row in the table */\\nexport type DataRow = [string, number | undefined, ...(T | undefined)[]];\\n\\n/** Cell types table, describing the types and quanitites of cells for a specific organ */\\n@Component({\\n selector: \'hra-biomarker-table\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatTableModule,\\n BiomarkerTableDataIconComponent,\\n HoverDirective,\\n BiomarkerTableDataCardComponent,\\n ],\\n templateUrl: \'./biomarker-table.component.html\',\\n styleUrls: [\'./biomarker-table.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableComponent implements OnChanges {\\n /**\\n * Input: TissueInfo carrying the details of the tissue open\\n */\\n @Input() tissueInfo: TissueInfo = {\\n id: \'\',\\n label: \'\',\\n };\\n\\n /** Columns for the table */\\n @Input() columns: string[] = [];\\n\\n /** Rows of the table */\\n @Input() data: DataRow[] = [];\\n\\n /** Gradient colors along with their stop points */\\n @Input() gradient: GradientPoint[] = [];\\n\\n /** Taking input for the radius of the circle and the label to be displayed. */\\n @Input() sizes: SizeLegend[] = [];\\n\\n /**Cell name which is hovered, used for highlighting */\\n @Input() hightlightedCellName = \'\';\\n\\n /** Getter method to provide the definations of the columns */\\n get columnsWithTypeAndCount(): string[] {\\n return [\'type\', \'count\', ...this.columns];\\n }\\n\\n /** Source for the table */\\n readonly dataSource = new MatTableDataSource>([]);\\n\\n /**\\n * sets the data source for the table on every change\\n * @param changes object consisting of change in the Input\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.dataSource.data = this.data;\\n }\\n }\\n\\n /** Lerp function to give value beween min and max value based on the given value\\n *\\n * @param value\\n * @param min\\n * @param max\\n * @returns\\n */\\n lerp(value: number, min: number, max: number): number {\\n return min * (1 - value) + max * value;\\n }\\n\\n /**\\n * Converts HexCode to RGB\\n * @param hex\\n * @returns\\n */\\n hex2rgb(hex: string): RGBTriplet {\\n const r = parseInt(hex.slice(1, 3), 16);\\n const g = parseInt(hex.slice(3, 5), 16);\\n const b = parseInt(hex.slice(5, 7), 16);\\n return [r, g, b];\\n }\\n\\n /**\\n * Gets Min and Max color grade based on the meanExpression value\\n * @param meanExpression\\n * @returns\\n */\\n getMinMaxColor(meanExpression: number): { minColor: RGBTriplet; maxColor: RGBTriplet } {\\n const index = this.gradient.findIndex((item, i, arr) => {\\n return meanExpression >= item.percentage && meanExpression <= arr[i + 1]?.percentage;\\n });\\n\\n const minColor: RGBTriplet = this.hex2rgb(this.gradient[index]?.color ?? this.gradient[0].color);\\n const maxColor: RGBTriplet = this.hex2rgb(\\n this.gradient[index + 1]?.color ?? this.gradient[this.gradient.length - 1].color\\n );\\n\\n return { minColor, maxColor };\\n }\\n\\n /**\\n * Gets Min and Max size grade based on the Percentage value\\n * @param percentage\\n * @returns\\n */\\n getMinMaxSize(percentage: number): { minSize: number; maxSize: number } {\\n const index = this.sizes.findIndex((item, i, arr) => {\\n return percentage >= parseFloat(item.label) / 100 && percentage <= parseFloat(arr[i + 1]?.label) / 100;\\n });\\n const minSize: number = this.sizes[index]?.radius ?? this.sizes[0].radius;\\n const maxSize: number = this.sizes[index + 1]?.radius ?? this.sizes[this.sizes.length - 1].radius;\\n return { minSize, maxSize };\\n }\\n\\n /**\\n * Calculates the color of this value on this gradient\\n * @param value\\n * @returns\\n */\\n getColor(value: number): string {\\n const { minColor, maxColor } = this.getMinMaxColor(value);\\n return (\\n \'#\' +\\n minColor\\n .map((min, index) => this.lerp(value, min, maxColor[index]))\\n .map((component) => Math.round(component).toString(16))\\n .join(\'\')\\n );\\n }\\n\\n /**\\n * gets Size of the Cell based on the percentage value\\n * @param value\\n * @returns\\n */\\n getSize(value: number): number {\\n const { minSize, maxSize } = this.getMinMaxSize(value);\\n return this.lerp(value, minSize, maxSize);\\n }\\n\\n /**\\n * rocesses the object for hover data for Table Cell\\n * @param index index of the row of the datasource\\n * @param row row of the datasource\\n * @returns\\n */\\n getHoverData([index, row]: [number, DataRow]): DataItem[][] {\\n if (row[index] === undefined) {\\n return [];\\n }\\n\\n const {\\n tissueInfo: { id, label },\\n } = this;\\n const {\\n data: { cell, biomarker, meanExpression, dataset_count },\\n } = row[index] as T;\\n\\n return [\\n [\\n { label: \'Functional Tissue Unit Name\', value: label },\\n { label: \'Uberon ID\', value: id },\\n { label: \'#Datasets\', value: `${dataset_count ?? 0}` },\\n ],\\n [\\n { label: \'Cell Type Name\', value: row[0] },\\n { label: \'CL ID\', value: cell },\\n { label: \'Number of Cells\', value: `${row[1]}` },\\n ],\\n [\\n { label: \'Gene Name\', value: this.columns[index - 2] },\\n { label: \'HGNC ID\', value: biomarker },\\n { label: \'Mean Expression Value\', value: meanExpression.toFixed(6) },\\n ],\\n ];\\n }\\n}\\n","properties":[{"name":"color","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Represents the color of the icon

\\n","line":22,"rawdescription":"\\nRepresents the color of the icon"},{"name":"data","deprecated":false,"deprecationMessage":"","type":"literal type","optional":false,"description":"

Represents the data for the data card

\\n","line":26,"rawdescription":"\\nRepresents the data for the data card"},{"name":"size","deprecated":false,"deprecationMessage":"","type":"number","optional":false,"description":"

Represents the size of the icon

\\n","line":24,"rawdescription":"\\nRepresents the size of the icon"}],"indexSignatures":[],"kind":165,"description":"

An interface representing a single cell of the table.

\\n","rawdescription":"\\n\\nAn interface representing a single cell of the table.\\n","methods":[]},{"name":"TissueInfo","id":"interface-TissueInfo-1a11b32dee89b55746dd02d393406aa7ea06e3d180099074510a109749d06241410786b045f3a9d570f4479be6442014b194d68f340724b0e76b4b0983b59760","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule, MatTableDataSource } from \'@angular/material/table\';\\nimport {\\n BiomarkerTableDataCardComponent,\\n BiomarkerTableDataIconComponent,\\n DataItem,\\n} from \'@hra-ui/components/molecules\';\\nimport { HoverDirective } from \'@hra-ui/cdk\';\\nimport { GradientPoint, SizeLegend } from \'@hra-ui/components/atoms\';\\n\\n/**\\n * RGBTriblet of type RGB to store color\\n */\\ntype RGBTriplet = [number, number, number];\\n\\n/**\\n * An interface representing a single cell of the table.\\n */\\nexport interface DataCell {\\n /** Represents the color of the icon */\\n color: string;\\n /** Represents the size of the icon */\\n size: number;\\n /** Represents the data for the data card */\\n data: {\\n cell: string;\\n biomarker: string;\\n meanExpression: number;\\n /** Number of datasets for this Tissue */\\n dataset_count: number;\\n };\\n}\\n\\n/**\\n * Details of the Tissue\\n */\\nexport interface TissueInfo {\\n /** ID of the Tissue */\\n id: string;\\n /** Name of the Tissue */\\n label: string;\\n}\\n\\n/** Describes the composition of a single row in the table */\\nexport type DataRow = [string, number | undefined, ...(T | undefined)[]];\\n\\n/** Cell types table, describing the types and quanitites of cells for a specific organ */\\n@Component({\\n selector: \'hra-biomarker-table\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatTableModule,\\n BiomarkerTableDataIconComponent,\\n HoverDirective,\\n BiomarkerTableDataCardComponent,\\n ],\\n templateUrl: \'./biomarker-table.component.html\',\\n styleUrls: [\'./biomarker-table.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableComponent implements OnChanges {\\n /**\\n * Input: TissueInfo carrying the details of the tissue open\\n */\\n @Input() tissueInfo: TissueInfo = {\\n id: \'\',\\n label: \'\',\\n };\\n\\n /** Columns for the table */\\n @Input() columns: string[] = [];\\n\\n /** Rows of the table */\\n @Input() data: DataRow[] = [];\\n\\n /** Gradient colors along with their stop points */\\n @Input() gradient: GradientPoint[] = [];\\n\\n /** Taking input for the radius of the circle and the label to be displayed. */\\n @Input() sizes: SizeLegend[] = [];\\n\\n /**Cell name which is hovered, used for highlighting */\\n @Input() hightlightedCellName = \'\';\\n\\n /** Getter method to provide the definations of the columns */\\n get columnsWithTypeAndCount(): string[] {\\n return [\'type\', \'count\', ...this.columns];\\n }\\n\\n /** Source for the table */\\n readonly dataSource = new MatTableDataSource>([]);\\n\\n /**\\n * sets the data source for the table on every change\\n * @param changes object consisting of change in the Input\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.dataSource.data = this.data;\\n }\\n }\\n\\n /** Lerp function to give value beween min and max value based on the given value\\n *\\n * @param value\\n * @param min\\n * @param max\\n * @returns\\n */\\n lerp(value: number, min: number, max: number): number {\\n return min * (1 - value) + max * value;\\n }\\n\\n /**\\n * Converts HexCode to RGB\\n * @param hex\\n * @returns\\n */\\n hex2rgb(hex: string): RGBTriplet {\\n const r = parseInt(hex.slice(1, 3), 16);\\n const g = parseInt(hex.slice(3, 5), 16);\\n const b = parseInt(hex.slice(5, 7), 16);\\n return [r, g, b];\\n }\\n\\n /**\\n * Gets Min and Max color grade based on the meanExpression value\\n * @param meanExpression\\n * @returns\\n */\\n getMinMaxColor(meanExpression: number): { minColor: RGBTriplet; maxColor: RGBTriplet } {\\n const index = this.gradient.findIndex((item, i, arr) => {\\n return meanExpression >= item.percentage && meanExpression <= arr[i + 1]?.percentage;\\n });\\n\\n const minColor: RGBTriplet = this.hex2rgb(this.gradient[index]?.color ?? this.gradient[0].color);\\n const maxColor: RGBTriplet = this.hex2rgb(\\n this.gradient[index + 1]?.color ?? this.gradient[this.gradient.length - 1].color\\n );\\n\\n return { minColor, maxColor };\\n }\\n\\n /**\\n * Gets Min and Max size grade based on the Percentage value\\n * @param percentage\\n * @returns\\n */\\n getMinMaxSize(percentage: number): { minSize: number; maxSize: number } {\\n const index = this.sizes.findIndex((item, i, arr) => {\\n return percentage >= parseFloat(item.label) / 100 && percentage <= parseFloat(arr[i + 1]?.label) / 100;\\n });\\n const minSize: number = this.sizes[index]?.radius ?? this.sizes[0].radius;\\n const maxSize: number = this.sizes[index + 1]?.radius ?? this.sizes[this.sizes.length - 1].radius;\\n return { minSize, maxSize };\\n }\\n\\n /**\\n * Calculates the color of this value on this gradient\\n * @param value\\n * @returns\\n */\\n getColor(value: number): string {\\n const { minColor, maxColor } = this.getMinMaxColor(value);\\n return (\\n \'#\' +\\n minColor\\n .map((min, index) => this.lerp(value, min, maxColor[index]))\\n .map((component) => Math.round(component).toString(16))\\n .join(\'\')\\n );\\n }\\n\\n /**\\n * gets Size of the Cell based on the percentage value\\n * @param value\\n * @returns\\n */\\n getSize(value: number): number {\\n const { minSize, maxSize } = this.getMinMaxSize(value);\\n return this.lerp(value, minSize, maxSize);\\n }\\n\\n /**\\n * rocesses the object for hover data for Table Cell\\n * @param index index of the row of the datasource\\n * @param row row of the datasource\\n * @returns\\n */\\n getHoverData([index, row]: [number, DataRow]): DataItem[][] {\\n if (row[index] === undefined) {\\n return [];\\n }\\n\\n const {\\n tissueInfo: { id, label },\\n } = this;\\n const {\\n data: { cell, biomarker, meanExpression, dataset_count },\\n } = row[index] as T;\\n\\n return [\\n [\\n { label: \'Functional Tissue Unit Name\', value: label },\\n { label: \'Uberon ID\', value: id },\\n { label: \'#Datasets\', value: `${dataset_count ?? 0}` },\\n ],\\n [\\n { label: \'Cell Type Name\', value: row[0] },\\n { label: \'CL ID\', value: cell },\\n { label: \'Number of Cells\', value: `${row[1]}` },\\n ],\\n [\\n { label: \'Gene Name\', value: this.columns[index - 2] },\\n { label: \'HGNC ID\', value: biomarker },\\n { label: \'Mean Expression Value\', value: meanExpression.toFixed(6) },\\n ],\\n ];\\n }\\n}\\n","properties":[{"name":"id","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

ID of the Tissue

\\n","line":40,"rawdescription":"\\nID of the Tissue"},{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Name of the Tissue

\\n","line":42,"rawdescription":"\\nName of the Tissue"}],"indexSignatures":[],"kind":165,"description":"

Details of the Tissue

\\n","rawdescription":"\\n\\nDetails of the Tissue\\n","methods":[]}],"injectables":[],"guards":[],"interceptors":[],"classes":[],"directives":[],"components":[{"name":"BiomarkerTableComponent","id":"component-BiomarkerTableComponent-1a11b32dee89b55746dd02d393406aa7ea06e3d180099074510a109749d06241410786b045f3a9d570f4479be6442014b194d68f340724b0e76b4b0983b59760","file":"src/lib/biomarker-table/biomarker-table.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-biomarker-table","styleUrls":["./biomarker-table.component.scss"],"styles":[],"templateUrl":["./biomarker-table.component.html"],"viewProviders":[],"inputsClass":[{"name":"columns","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nColumns for the table","description":"

Columns for the table

\\n","line":73,"type":"string[]","decorators":[]},{"name":"data","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nRows of the table","description":"

Rows of the table

\\n","line":76,"type":"DataRow[]","decorators":[]},{"name":"gradient","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nGradient colors along with their stop points","description":"

Gradient colors along with their stop points

\\n","line":79,"type":"GradientPoint[]","decorators":[]},{"name":"hightlightedCellName","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nCell name which is hovered, used for highlighting","description":"

Cell name which is hovered, used for highlighting

\\n","line":85,"type":"string","decorators":[]},{"name":"sizes","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nTaking input for the radius of the circle and the label to be displayed.","description":"

Taking input for the radius of the circle and the label to be displayed.

\\n","line":82,"type":"SizeLegend[]","decorators":[]},{"name":"tissueInfo","defaultValue":"{\\n id: \'\',\\n label: \'\',\\n }","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput: TissueInfo carrying the details of the tissue open\\n","description":"

Input: TissueInfo carrying the details of the tissue open

\\n","line":67,"type":"TissueInfo","decorators":[]}],"outputsClass":[],"propertiesClass":[{"name":"dataSource","defaultValue":"new MatTableDataSource>([])","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Source for the table

\\n","line":93,"rawdescription":"\\nSource for the table","modifierKind":[144]}],"methodsClass":[{"name":"getColor","args":[{"name":"value","type":"number","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"string","typeParameters":[],"line":165,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nCalculates the color of this value on this gradient\\n","description":"

Calculates the color of this value on this gradient

\\n","jsdoctags":[{"name":{"pos":4778,"end":4783,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"value"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":4772,"end":4777,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":4790,"end":4797,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"getHoverData","args":[{"type":"[number, DataRow]","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"[][]","typeParameters":[],"line":192,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nrocesses the object for hover data for Table Cell\\n","description":"

rocesses the object for hover data for Table Cell

\\n","jsdoctags":[{"type":"[number, DataRow]","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}},{"tagName":{"pos":5512,"end":5519,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"getMinMaxColor","args":[{"name":"meanExpression","type":"number","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"literal type","typeParameters":[],"line":133,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nGets Min and Max color grade based on the meanExpression value\\n","description":"

Gets Min and Max color grade based on the meanExpression value

\\n","jsdoctags":[{"name":{"pos":3545,"end":3559,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"meanExpression"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":3539,"end":3544,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":3566,"end":3573,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"getMinMaxSize","args":[{"name":"percentage","type":"number","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"literal type","typeParameters":[],"line":151,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nGets Min and Max size grade based on the Percentage value\\n","description":"

Gets Min and Max size grade based on the Percentage value

\\n","jsdoctags":[{"name":{"pos":4199,"end":4209,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"percentage"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":4193,"end":4198,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":4216,"end":4223,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"getSize","args":[{"name":"value","type":"number","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"number","typeParameters":[],"line":181,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\ngets Size of the Cell based on the percentage value\\n","description":"

gets Size of the Cell based on the percentage value

\\n","jsdoctags":[{"name":{"pos":5181,"end":5186,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"value"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":5175,"end":5180,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":5193,"end":5200,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"hex2rgb","args":[{"name":"hex","type":"string","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"RGBTriplet","typeParameters":[],"line":121,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nConverts HexCode to RGB\\n","description":"

Converts HexCode to RGB

\\n","jsdoctags":[{"name":{"pos":3236,"end":3239,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"hex"},"type":"string","deprecated":false,"deprecationMessage":"","tagName":{"pos":3230,"end":3235,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":3246,"end":3253,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"lerp","args":[{"name":"value","type":"number","deprecated":false,"deprecationMessage":""},{"name":"min","type":"number","deprecated":false,"deprecationMessage":""},{"name":"max","type":"number","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"number","typeParameters":[],"line":112,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nLerp function to give value beween min and max value based on the given value\\n\\n","description":"

Lerp function to give value beween min and max value based on the given value

\\n","jsdoctags":[{"name":{"pos":3024,"end":3029,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"value"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":3018,"end":3023,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"name":{"pos":3042,"end":3045,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"min"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":3036,"end":3041,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"name":{"pos":3058,"end":3061,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"max"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":3052,"end":3057,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":3068,"end":3075,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Cell types table, describing the types and quanitites of cells for a specific organ

\\n","rawdescription":"\\nCell types table, describing the types and quanitites of cells for a specific organ","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule, MatTableDataSource } from \'@angular/material/table\';\\nimport {\\n BiomarkerTableDataCardComponent,\\n BiomarkerTableDataIconComponent,\\n DataItem,\\n} from \'@hra-ui/components/molecules\';\\nimport { HoverDirective } from \'@hra-ui/cdk\';\\nimport { GradientPoint, SizeLegend } from \'@hra-ui/components/atoms\';\\n\\n/**\\n * RGBTriblet of type RGB to store color\\n */\\ntype RGBTriplet = [number, number, number];\\n\\n/**\\n * An interface representing a single cell of the table.\\n */\\nexport interface DataCell {\\n /** Represents the color of the icon */\\n color: string;\\n /** Represents the size of the icon */\\n size: number;\\n /** Represents the data for the data card */\\n data: {\\n cell: string;\\n biomarker: string;\\n meanExpression: number;\\n /** Number of datasets for this Tissue */\\n dataset_count: number;\\n };\\n}\\n\\n/**\\n * Details of the Tissue\\n */\\nexport interface TissueInfo {\\n /** ID of the Tissue */\\n id: string;\\n /** Name of the Tissue */\\n label: string;\\n}\\n\\n/** Describes the composition of a single row in the table */\\nexport type DataRow = [string, number | undefined, ...(T | undefined)[]];\\n\\n/** Cell types table, describing the types and quanitites of cells for a specific organ */\\n@Component({\\n selector: \'hra-biomarker-table\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatTableModule,\\n BiomarkerTableDataIconComponent,\\n HoverDirective,\\n BiomarkerTableDataCardComponent,\\n ],\\n templateUrl: \'./biomarker-table.component.html\',\\n styleUrls: [\'./biomarker-table.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableComponent implements OnChanges {\\n /**\\n * Input: TissueInfo carrying the details of the tissue open\\n */\\n @Input() tissueInfo: TissueInfo = {\\n id: \'\',\\n label: \'\',\\n };\\n\\n /** Columns for the table */\\n @Input() columns: string[] = [];\\n\\n /** Rows of the table */\\n @Input() data: DataRow[] = [];\\n\\n /** Gradient colors along with their stop points */\\n @Input() gradient: GradientPoint[] = [];\\n\\n /** Taking input for the radius of the circle and the label to be displayed. */\\n @Input() sizes: SizeLegend[] = [];\\n\\n /**Cell name which is hovered, used for highlighting */\\n @Input() hightlightedCellName = \'\';\\n\\n /** Getter method to provide the definations of the columns */\\n get columnsWithTypeAndCount(): string[] {\\n return [\'type\', \'count\', ...this.columns];\\n }\\n\\n /** Source for the table */\\n readonly dataSource = new MatTableDataSource>([]);\\n\\n /**\\n * sets the data source for the table on every change\\n * @param changes object consisting of change in the Input\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.dataSource.data = this.data;\\n }\\n }\\n\\n /** Lerp function to give value beween min and max value based on the given value\\n *\\n * @param value\\n * @param min\\n * @param max\\n * @returns\\n */\\n lerp(value: number, min: number, max: number): number {\\n return min * (1 - value) + max * value;\\n }\\n\\n /**\\n * Converts HexCode to RGB\\n * @param hex\\n * @returns\\n */\\n hex2rgb(hex: string): RGBTriplet {\\n const r = parseInt(hex.slice(1, 3), 16);\\n const g = parseInt(hex.slice(3, 5), 16);\\n const b = parseInt(hex.slice(5, 7), 16);\\n return [r, g, b];\\n }\\n\\n /**\\n * Gets Min and Max color grade based on the meanExpression value\\n * @param meanExpression\\n * @returns\\n */\\n getMinMaxColor(meanExpression: number): { minColor: RGBTriplet; maxColor: RGBTriplet } {\\n const index = this.gradient.findIndex((item, i, arr) => {\\n return meanExpression >= item.percentage && meanExpression <= arr[i + 1]?.percentage;\\n });\\n\\n const minColor: RGBTriplet = this.hex2rgb(this.gradient[index]?.color ?? this.gradient[0].color);\\n const maxColor: RGBTriplet = this.hex2rgb(\\n this.gradient[index + 1]?.color ?? this.gradient[this.gradient.length - 1].color\\n );\\n\\n return { minColor, maxColor };\\n }\\n\\n /**\\n * Gets Min and Max size grade based on the Percentage value\\n * @param percentage\\n * @returns\\n */\\n getMinMaxSize(percentage: number): { minSize: number; maxSize: number } {\\n const index = this.sizes.findIndex((item, i, arr) => {\\n return percentage >= parseFloat(item.label) / 100 && percentage <= parseFloat(arr[i + 1]?.label) / 100;\\n });\\n const minSize: number = this.sizes[index]?.radius ?? this.sizes[0].radius;\\n const maxSize: number = this.sizes[index + 1]?.radius ?? this.sizes[this.sizes.length - 1].radius;\\n return { minSize, maxSize };\\n }\\n\\n /**\\n * Calculates the color of this value on this gradient\\n * @param value\\n * @returns\\n */\\n getColor(value: number): string {\\n const { minColor, maxColor } = this.getMinMaxColor(value);\\n return (\\n \'#\' +\\n minColor\\n .map((min, index) => this.lerp(value, min, maxColor[index]))\\n .map((component) => Math.round(component).toString(16))\\n .join(\'\')\\n );\\n }\\n\\n /**\\n * gets Size of the Cell based on the percentage value\\n * @param value\\n * @returns\\n */\\n getSize(value: number): number {\\n const { minSize, maxSize } = this.getMinMaxSize(value);\\n return this.lerp(value, minSize, maxSize);\\n }\\n\\n /**\\n * rocesses the object for hover data for Table Cell\\n * @param index index of the row of the datasource\\n * @param row row of the datasource\\n * @returns\\n */\\n getHoverData([index, row]: [number, DataRow]): DataItem[][] {\\n if (row[index] === undefined) {\\n return [];\\n }\\n\\n const {\\n tissueInfo: { id, label },\\n } = this;\\n const {\\n data: { cell, biomarker, meanExpression, dataset_count },\\n } = row[index] as T;\\n\\n return [\\n [\\n { label: \'Functional Tissue Unit Name\', value: label },\\n { label: \'Uberon ID\', value: id },\\n { label: \'#Datasets\', value: `${dataset_count ?? 0}` },\\n ],\\n [\\n { label: \'Cell Type Name\', value: row[0] },\\n { label: \'CL ID\', value: cell },\\n { label: \'Number of Cells\', value: `${row[1]}` },\\n ],\\n [\\n { label: \'Gene Name\', value: this.columns[index - 2] },\\n { label: \'HGNC ID\', value: biomarker },\\n { label: \'Mean Expression Value\', value: meanExpression.toFixed(6) },\\n ],\\n ];\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'utils\';\\n@use \'variables\' as vars;\\n\\n:host {\\n display: block;\\n\\n .sr-only {\\n @include utils.sr-only();\\n }\\n\\n .table {\\n margin-left: -1px;\\n\\n .highlight {\\n background-color: #f8f9fa;\\n }\\n td.type {\\n text-transform: lowercase;\\n }\\n }\\n\\n .table th {\\n background-color: #fff7f8;\\n color: #59264d;\\n text-align: right;\\n }\\n\\n .table td {\\n border-bottom: 0.063rem solid #d3d3d3;\\n border-left: 0.063rem solid #d3d3d3;\\n }\\n\\n .table tr:first-child td {\\n border-top: 0rem solid #d3d3d3;\\n }\\n\\n tr > td:first-child {\\n text-align: left;\\n padding: 0 2rem;\\n }\\n\\n tr > th:first-child {\\n text-align: left;\\n padding: 0 2rem;\\n }\\n\\n tr > td:last-of-type {\\n border-right: 0.063rem solid #d3d3d3;\\n }\\n\\n tr > th:last-of-type {\\n border-right: 0.063rem solid #d3d3d3;\\n border-left: solid #d3d3d3 1px;\\n }\\n\\n .type {\\n height: 3rem;\\n max-width: 26rem;\\n min-width: 17rem;\\n border-radius: 0rem;\\n white-space: nowrap;\\n }\\n\\n .count {\\n text-align: right;\\n height: 3rem;\\n min-width: 6.5rem;\\n }\\n\\n .count:not(:first-child) {\\n border-left: solid #d3d3d3 1px;\\n }\\n\\n .icon-header {\\n max-width: 5rem;\\n white-space: nowrap;\\n overflow: hidden;\\n text-overflow: ellipsis;\\n }\\n\\n .icon-cell {\\n max-width: 5rem;\\n min-height: 3rem;\\n\\n .icon {\\n margin: auto;\\n }\\n }\\n}\\n\\n::ng-deep .mat-mdc-tab-header {\\n margin-left: -1px !important;\\n}\\n\\n::ng-deep .biomarker-table-hover.full-column-name {\\n display: flex;\\n padding: 1rem 1.5rem;\\n border-radius: 0.5rem;\\n box-shadow: 0.063rem 0.125rem 1rem 0.125rem rgba(0, 0, 0, 0.16);\\n background-color: vars.$primary-contrast-rgb;\\n overflow: auto;\\n max-width: fit-content;\\n}\\n","styleUrl":"./biomarker-table.component.scss"}],"stylesData":"","implements":["OnChanges"],"accessors":{"columnsWithTypeAndCount":{"name":"columnsWithTypeAndCount","getSignature":{"name":"columnsWithTypeAndCount","type":"[]","returnType":"string[]","line":88,"rawdescription":"\\nGetter method to provide the definations of the columns","description":"

Getter method to provide the definations of the columns

\\n"}}},"templateData":"\\n \\n\\n \\n \\n\\n \\n \\n\\n \\n \\n\\n \\n \\n\\n \\n \\n\\n \\n \\n\\n \\n \\n
\\n Cell type table by Biomarker\\n
Cell Type\\n {{ element[0] }}\\n Cell Count\\n {{ element[1] !== undefined ? (element[1] | number) : \'no data\' }}\\n \\n {{ column }}\\n \\n \\n \\n\\n \\n
\\n \\n
\\n\\n\\n
\\n {{ columnName }}\\n
\\n\\n\\n\\n \\n\\n"}],"modules":[],"miscellaneous":{"variables":[],"functions":[],"typealiases":[{"name":"DataRow","ctype":"miscellaneous","subtype":"typealias","rawtype":"[string, , ...[]]","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","description":"

Describes the composition of a single row in the table

\\n","kind":183},{"name":"RGBTriplet","ctype":"miscellaneous","subtype":"typealias","rawtype":"[number, number, number]","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","description":"

RGBTriblet of type RGB to store color

\\n","kind":183}],"enumerations":[],"groupedVariables":{},"groupedFunctions":{},"groupedEnumerations":{},"groupedTypeAliases":{"src/lib/biomarker-table/biomarker-table.component.ts":[{"name":"DataRow","ctype":"miscellaneous","subtype":"typealias","rawtype":"[string, , ...[]]","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","description":"

Describes the composition of a single row in the table

\\n","kind":183},{"name":"RGBTriplet","ctype":"miscellaneous","subtype":"typealias","rawtype":"[number, number, number]","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","description":"

RGBTriblet of type RGB to store color

\\n","kind":183}]}}}')}},__webpack_require__=>{var __webpack_exec__=moduleId=>__webpack_require__(__webpack_require__.s=moduleId);__webpack_require__.O(0,[519],(()=>(__webpack_exec__("./storybook-config-entry.js"),__webpack_exec__("./.storybook/styles.scss?ngGlobalStyle"))));__webpack_require__.O()}]); \ No newline at end of file diff --git a/storybook/components-molecules/project.json b/storybook/components-molecules/project.json index 1c608f467..7acdb5d7c 100644 --- a/storybook/components-molecules/project.json +++ b/storybook/components-molecules/project.json @@ -1 +1 @@ -{"generatedAt":1694197463160,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"nx","packageName":"@nrwl/storybook","version":"15.9.2"},"monorepo":"Nx","packageManager":{"type":"npm","version":"8.19.4"},"framework":{"name":"@storybook/angular","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/angular","storybookVersion":"7.0.2","storybookVersionSpecifier":"^7.0.2","language":"typescript","storybookPackages":{"@nrwl/storybook":{"version":"15.9.2"},"@storybook/angular":{"version":"7.0.2"},"@storybook/core-common":{"version":"7.0.2"},"@storybook/core-server":{"version":"7.0.2"},"@storybook/test-runner":{"version":"0.10.0"},"eslint-plugin-storybook":{"version":"0.6.11"}},"addons":{"@storybook/addon-essentials":{"version":"7.0.2"}}} +{"generatedAt":1694200466834,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"nx","packageName":"@nrwl/storybook","version":"15.9.2"},"monorepo":"Nx","packageManager":{"type":"npm","version":"8.19.4"},"framework":{"name":"@storybook/angular","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/angular","storybookVersion":"7.0.2","storybookVersionSpecifier":"^7.0.2","language":"typescript","storybookPackages":{"@nrwl/storybook":{"version":"15.9.2"},"@storybook/angular":{"version":"7.0.2"},"@storybook/core-common":{"version":"7.0.2"},"@storybook/core-server":{"version":"7.0.2"},"@storybook/test-runner":{"version":"0.10.0"},"eslint-plugin-storybook":{"version":"0.6.11"}},"addons":{"@storybook/addon-essentials":{"version":"7.0.2"}}} diff --git a/storybook/components-molecules/runtime~main.2ea9221c.iframe.bundle.js b/storybook/components-molecules/runtime~main.d01572e2.iframe.bundle.js similarity index 99% rename from storybook/components-molecules/runtime~main.2ea9221c.iframe.bundle.js rename to storybook/components-molecules/runtime~main.d01572e2.iframe.bundle.js index 5baa63f35..56c4dc9fb 100644 --- a/storybook/components-molecules/runtime~main.2ea9221c.iframe.bundle.js +++ b/storybook/components-molecules/runtime~main.d01572e2.iframe.bundle.js @@ -1 +1 @@ -(()=>{"use strict";var deferred,leafPrototypes,getProto,inProgress,__webpack_modules__={},__webpack_module_cache__={};function __webpack_require__(moduleId){var cachedModule=__webpack_module_cache__[moduleId];if(void 0!==cachedModule)return cachedModule.exports;var module=__webpack_module_cache__[moduleId]={id:moduleId,loaded:!1,exports:{}};return __webpack_modules__[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.loaded=!0,module.exports}__webpack_require__.m=__webpack_modules__,__webpack_require__.amdO={},deferred=[],__webpack_require__.O=(result,chunkIds,fn,priority)=>{if(!chunkIds){var notFulfilled=1/0;for(i=0;i=priority)&&Object.keys(__webpack_require__.O).every((key=>__webpack_require__.O[key](chunkIds[j])))?chunkIds.splice(j--,1):(fulfilled=!1,priority0&&deferred[i-1][2]>priority;i--)deferred[i]=deferred[i-1];deferred[i]=[chunkIds,fn,priority]},__webpack_require__.n=module=>{var getter=module&&module.__esModule?()=>module.default:()=>module;return __webpack_require__.d(getter,{a:getter}),getter},getProto=Object.getPrototypeOf?obj=>Object.getPrototypeOf(obj):obj=>obj.__proto__,__webpack_require__.t=function(value,mode){if(1&mode&&(value=this(value)),8&mode)return value;if("object"==typeof value&&value){if(4&mode&&value.__esModule)return value;if(16&mode&&"function"==typeof value.then)return value}var ns=Object.create(null);__webpack_require__.r(ns);var def={};leafPrototypes=leafPrototypes||[null,getProto({}),getProto([]),getProto(getProto)];for(var current=2&mode&&value;"object"==typeof current&&!~leafPrototypes.indexOf(current);current=getProto(current))Object.getOwnPropertyNames(current).forEach((key=>def[key]=()=>value[key]));return def.default=()=>value,__webpack_require__.d(ns,def),ns},__webpack_require__.d=(exports,definition)=>{for(var key in definition)__webpack_require__.o(definition,key)&&!__webpack_require__.o(exports,key)&&Object.defineProperty(exports,key,{enumerable:!0,get:definition[key]})},__webpack_require__.f={},__webpack_require__.e=chunkId=>Promise.all(Object.keys(__webpack_require__.f).reduce(((promises,key)=>(__webpack_require__.f[key](chunkId,promises),promises)),[])),__webpack_require__.u=chunkId=>(({106:"src-lib-screen-size-notice-screen-size-notice-component-stories",181:"src-lib-biomarker-table-data-card-biomarker-table-data-card-component-stories",227:"src-lib-source-list-source-list-component-stories",326:"src-lib-biomarker-table-data-icon-biomarker-table-data-icon-component-stories",442:"src-lib-metrics-metrics-component-stories",487:"src-lib-landing-page-intro-landing-page-intro-component-stories",510:"src-lib-footer-footer-component-stories",514:"src-lib-landing-page-in-depth-landing-page-in-depth-component-stories",522:"src-lib-fullscreen-fullscreen-container-stories",570:"src-lib-contact-modal-contact-modal-component-stories",591:"src-lib-header-header-component-stories",593:"src-lib-tissue-tree-list-tissue-tree-list-component-stories",632:"src-lib-title-card-title-card-component-stories",824:"src-lib-interactive-svg-interactive-svg-stories",976:"src-lib-hra-landing-page-intro-wc-hra-landing-page-intro-wc-component-stories",977:"src-lib-info-modal-info-modal-component-stories"}[chunkId]||chunkId)+"."+{19:"ff8269ff",106:"75d4d678",111:"ead1515a",140:"d67f4659",181:"bee66578",227:"804db38a",256:"711330bc",326:"25fd1c4c",373:"41038c29",384:"c0a7ed0c",415:"d2a35c2f",442:"6b49a2e5",472:"b7d6f1a1",487:"a9ac0c94",510:"f0dbaed2",514:"44df7c79",522:"bfdb6fd0",562:"c8cd5c23",570:"066983cd",583:"54f984a3",591:"905de2c0",593:"30384dac",616:"4215b5f6",617:"477e7336",632:"25d44e14",648:"a18af111",734:"aa2e02c5",761:"26a58c17",824:"8c8b8096",828:"003b1424",839:"26933d95",882:"54d736c3",911:"170e9ebf",976:"2c380790",977:"78ba0f3a",981:"5380b18d",999:"e0ba7867"}[chunkId]+".iframe.bundle.js"),__webpack_require__.miniCssF=chunkId=>{},__webpack_require__.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),__webpack_require__.o=(obj,prop)=>Object.prototype.hasOwnProperty.call(obj,prop),inProgress={},__webpack_require__.l=(url,done,key,chunkId)=>{if(inProgress[url])inProgress[url].push(done);else{var script,needAttach;if(void 0!==key)for(var scripts=document.getElementsByTagName("script"),i=0;i{script.onerror=script.onload=null,clearTimeout(timeout);var doneFns=inProgress[url];if(delete inProgress[url],script.parentNode&&script.parentNode.removeChild(script),doneFns&&doneFns.forEach((fn=>fn(event))),prev)return prev(event)},timeout=setTimeout(onScriptComplete.bind(null,void 0,{type:"timeout",target:script}),12e4);script.onerror=onScriptComplete.bind(null,script.onerror),script.onload=onScriptComplete.bind(null,script.onload),needAttach&&document.head.appendChild(script)}},__webpack_require__.r=exports=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.nmd=module=>(module.paths=[],module.children||(module.children=[]),module),__webpack_require__.p="",(()=>{var installedChunks={303:0};__webpack_require__.f.j=(chunkId,promises)=>{var installedChunkData=__webpack_require__.o(installedChunks,chunkId)?installedChunks[chunkId]:void 0;if(0!==installedChunkData)if(installedChunkData)promises.push(installedChunkData[2]);else if(303!=chunkId){var promise=new Promise(((resolve,reject)=>installedChunkData=installedChunks[chunkId]=[resolve,reject]));promises.push(installedChunkData[2]=promise);var url=__webpack_require__.p+__webpack_require__.u(chunkId),error=new Error;__webpack_require__.l(url,(event=>{if(__webpack_require__.o(installedChunks,chunkId)&&(0!==(installedChunkData=installedChunks[chunkId])&&(installedChunks[chunkId]=void 0),installedChunkData)){var errorType=event&&("load"===event.type?"missing":event.type),realSrc=event&&event.target&&event.target.src;error.message="Loading chunk "+chunkId+" failed.\n("+errorType+": "+realSrc+")",error.name="ChunkLoadError",error.type=errorType,error.request=realSrc,installedChunkData[1](error)}}),"chunk-"+chunkId,chunkId)}else installedChunks[chunkId]=0},__webpack_require__.O.j=chunkId=>0===installedChunks[chunkId];var webpackJsonpCallback=(parentChunkLoadingFunction,data)=>{var moduleId,chunkId,[chunkIds,moreModules,runtime]=data,i=0;if(chunkIds.some((id=>0!==installedChunks[id]))){for(moduleId in moreModules)__webpack_require__.o(moreModules,moduleId)&&(__webpack_require__.m[moduleId]=moreModules[moduleId]);if(runtime)var result=runtime(__webpack_require__)}for(parentChunkLoadingFunction&&parentChunkLoadingFunction(data);i{"use strict";var deferred,leafPrototypes,getProto,inProgress,__webpack_modules__={},__webpack_module_cache__={};function __webpack_require__(moduleId){var cachedModule=__webpack_module_cache__[moduleId];if(void 0!==cachedModule)return cachedModule.exports;var module=__webpack_module_cache__[moduleId]={id:moduleId,loaded:!1,exports:{}};return __webpack_modules__[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.loaded=!0,module.exports}__webpack_require__.m=__webpack_modules__,__webpack_require__.amdO={},deferred=[],__webpack_require__.O=(result,chunkIds,fn,priority)=>{if(!chunkIds){var notFulfilled=1/0;for(i=0;i=priority)&&Object.keys(__webpack_require__.O).every((key=>__webpack_require__.O[key](chunkIds[j])))?chunkIds.splice(j--,1):(fulfilled=!1,priority0&&deferred[i-1][2]>priority;i--)deferred[i]=deferred[i-1];deferred[i]=[chunkIds,fn,priority]},__webpack_require__.n=module=>{var getter=module&&module.__esModule?()=>module.default:()=>module;return __webpack_require__.d(getter,{a:getter}),getter},getProto=Object.getPrototypeOf?obj=>Object.getPrototypeOf(obj):obj=>obj.__proto__,__webpack_require__.t=function(value,mode){if(1&mode&&(value=this(value)),8&mode)return value;if("object"==typeof value&&value){if(4&mode&&value.__esModule)return value;if(16&mode&&"function"==typeof value.then)return value}var ns=Object.create(null);__webpack_require__.r(ns);var def={};leafPrototypes=leafPrototypes||[null,getProto({}),getProto([]),getProto(getProto)];for(var current=2&mode&&value;"object"==typeof current&&!~leafPrototypes.indexOf(current);current=getProto(current))Object.getOwnPropertyNames(current).forEach((key=>def[key]=()=>value[key]));return def.default=()=>value,__webpack_require__.d(ns,def),ns},__webpack_require__.d=(exports,definition)=>{for(var key in definition)__webpack_require__.o(definition,key)&&!__webpack_require__.o(exports,key)&&Object.defineProperty(exports,key,{enumerable:!0,get:definition[key]})},__webpack_require__.f={},__webpack_require__.e=chunkId=>Promise.all(Object.keys(__webpack_require__.f).reduce(((promises,key)=>(__webpack_require__.f[key](chunkId,promises),promises)),[])),__webpack_require__.u=chunkId=>(({106:"src-lib-screen-size-notice-screen-size-notice-component-stories",181:"src-lib-biomarker-table-data-card-biomarker-table-data-card-component-stories",227:"src-lib-source-list-source-list-component-stories",326:"src-lib-biomarker-table-data-icon-biomarker-table-data-icon-component-stories",442:"src-lib-metrics-metrics-component-stories",487:"src-lib-landing-page-intro-landing-page-intro-component-stories",510:"src-lib-footer-footer-component-stories",514:"src-lib-landing-page-in-depth-landing-page-in-depth-component-stories",522:"src-lib-fullscreen-fullscreen-container-stories",570:"src-lib-contact-modal-contact-modal-component-stories",591:"src-lib-header-header-component-stories",593:"src-lib-tissue-tree-list-tissue-tree-list-component-stories",632:"src-lib-title-card-title-card-component-stories",824:"src-lib-interactive-svg-interactive-svg-stories",976:"src-lib-hra-landing-page-intro-wc-hra-landing-page-intro-wc-component-stories",977:"src-lib-info-modal-info-modal-component-stories"}[chunkId]||chunkId)+"."+{19:"ff8269ff",106:"75d4d678",111:"ead1515a",140:"d67f4659",181:"bee66578",227:"804db38a",256:"711330bc",326:"25fd1c4c",373:"41038c29",384:"c0a7ed0c",415:"d2a35c2f",442:"6b49a2e5",472:"b7d6f1a1",487:"a9ac0c94",510:"f0dbaed2",514:"44df7c79",522:"76615d2d",562:"c8cd5c23",570:"066983cd",583:"54f984a3",591:"905de2c0",593:"30384dac",616:"4215b5f6",617:"477e7336",632:"25d44e14",648:"a18af111",734:"aa2e02c5",761:"26a58c17",824:"8c8b8096",828:"003b1424",839:"26933d95",882:"54d736c3",911:"170e9ebf",976:"2c380790",977:"78ba0f3a",981:"5380b18d",999:"e0ba7867"}[chunkId]+".iframe.bundle.js"),__webpack_require__.miniCssF=chunkId=>{},__webpack_require__.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),__webpack_require__.o=(obj,prop)=>Object.prototype.hasOwnProperty.call(obj,prop),inProgress={},__webpack_require__.l=(url,done,key,chunkId)=>{if(inProgress[url])inProgress[url].push(done);else{var script,needAttach;if(void 0!==key)for(var scripts=document.getElementsByTagName("script"),i=0;i{script.onerror=script.onload=null,clearTimeout(timeout);var doneFns=inProgress[url];if(delete inProgress[url],script.parentNode&&script.parentNode.removeChild(script),doneFns&&doneFns.forEach((fn=>fn(event))),prev)return prev(event)},timeout=setTimeout(onScriptComplete.bind(null,void 0,{type:"timeout",target:script}),12e4);script.onerror=onScriptComplete.bind(null,script.onerror),script.onload=onScriptComplete.bind(null,script.onload),needAttach&&document.head.appendChild(script)}},__webpack_require__.r=exports=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.nmd=module=>(module.paths=[],module.children||(module.children=[]),module),__webpack_require__.p="",(()=>{var installedChunks={303:0};__webpack_require__.f.j=(chunkId,promises)=>{var installedChunkData=__webpack_require__.o(installedChunks,chunkId)?installedChunks[chunkId]:void 0;if(0!==installedChunkData)if(installedChunkData)promises.push(installedChunkData[2]);else if(303!=chunkId){var promise=new Promise(((resolve,reject)=>installedChunkData=installedChunks[chunkId]=[resolve,reject]));promises.push(installedChunkData[2]=promise);var url=__webpack_require__.p+__webpack_require__.u(chunkId),error=new Error;__webpack_require__.l(url,(event=>{if(__webpack_require__.o(installedChunks,chunkId)&&(0!==(installedChunkData=installedChunks[chunkId])&&(installedChunks[chunkId]=void 0),installedChunkData)){var errorType=event&&("load"===event.type?"missing":event.type),realSrc=event&&event.target&&event.target.src;error.message="Loading chunk "+chunkId+" failed.\n("+errorType+": "+realSrc+")",error.name="ChunkLoadError",error.type=errorType,error.request=realSrc,installedChunkData[1](error)}}),"chunk-"+chunkId,chunkId)}else installedChunks[chunkId]=0},__webpack_require__.O.j=chunkId=>0===installedChunks[chunkId];var webpackJsonpCallback=(parentChunkLoadingFunction,data)=>{var moduleId,chunkId,[chunkIds,moreModules,runtime]=data,i=0;if(chunkIds.some((id=>0!==installedChunks[id]))){for(moduleId in moreModules)__webpack_require__.o(moreModules,moduleId)&&(__webpack_require__.m[moduleId]=moreModules[moduleId]);if(runtime)var result=runtime(__webpack_require__)}for(parentChunkLoadingFunction&&parentChunkLoadingFunction(data);i{"use strict";module.exports=function(cssWithMappingToString){var list=[];return list.toString=function toString(){return this.map((function(item){var content="",needLayer=void 0!==item[5];return item[4]&&(content+="@supports (".concat(item[4],") {")),item[2]&&(content+="@media ".concat(item[2]," {")),needLayer&&(content+="@layer".concat(item[5].length>0?" ".concat(item[5]):""," {")),content+=cssWithMappingToString(item),needLayer&&(content+="}"),item[2]&&(content+="}"),item[4]&&(content+="}"),content})).join("")},list.i=function i(modules,media,dedupe,supports,layer){"string"==typeof modules&&(modules=[[null,modules,void 0]]);var alreadyImportedModules={};if(dedupe)for(var k=0;k0?" ".concat(item[5]):""," {").concat(item[1],"}")),item[5]=layer),media&&(item[2]?(item[1]="@media ".concat(item[2]," {").concat(item[1],"}"),item[2]=media):item[2]=media),supports&&(item[4]?(item[1]="@supports (".concat(item[4],") {").concat(item[1],"}"),item[4]=supports):item[4]="".concat(supports)),list.push(item))}},list}},"./node_modules/css-loader/dist/runtime/noSourceMaps.js":module=>{"use strict";module.exports=function(i){return i[1]}},"./libs/components/molecules/src/lib/fullscreen/fullscreen-container.component.ts.css?ngResource!=!./node_modules/@ngtools/webpack/src/loaders/inline-resource.js?data=CiAgICAgIDpob3N0IHsKICAgICAgICBkaXNwbGF5OiBibG9jazsKICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7CiAgICAgIH0KICAgIA%3D%3D!./libs/components/molecules/src/lib/fullscreen/fullscreen-container.component.ts":(module,__unused_webpack_exports,__webpack_require__)=>{var ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/noSourceMaps.js"),___CSS_LOADER_EXPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js")(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);___CSS_LOADER_EXPORT___.push([module.id,"\n :host {\n display: block;\n position: relative;\n }\n ",""]),module.exports=___CSS_LOADER_EXPORT___.toString()},"./libs/components/molecules/src/lib/fullscreen/fullscreen-content.component.scss?ngResource":(module,__unused_webpack_exports,__webpack_require__)=>{var ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/noSourceMaps.js"),___CSS_LOADER_EXPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js")(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);___CSS_LOADER_EXPORT___.push([module.id,":host {\n display: block;\n overflow-y: hidden;\n}\n:host.fullscreen-on {\n z-index: 100;\n background: #f8f9fa;\n}",""]),module.exports=___CSS_LOADER_EXPORT___.toString()},"./libs/components/molecules/src/lib/fullscreen/fullscreen-container.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,default:()=>fullscreen_container_stories});var _class,dist=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),fullscreen_content_componentngResource=__webpack_require__("./libs/components/molecules/src/lib/fullscreen/fullscreen-content.component.scss?ngResource"),fullscreen_content_componentngResource_default=__webpack_require__.n(fullscreen_content_componentngResource),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),animations=__webpack_require__("./node_modules/@angular/animations/fesm2020/animations.mjs");let FullscreenContentComponent=((_class=class FullscreenContentComponent{constructor(){this.isFullScreen=!1}}).propDecorators={isFullScreen:[{type:core.HostBinding,args:["class.fullscreen-on"]},{type:core.HostBinding,args:["@animateResize"]}]},_class);FullscreenContentComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"hra-fullscreen-content",standalone:!0,imports:[common.CommonModule],animations:[(0,animations.X$)("animateResize",[(0,animations.SB)("true",(0,animations.oB)({width:"100%",position:"absolute",right:0})),(0,animations.SB)("false",(0,animations.oB)({width:"50%",position:"absolute",right:0})),(0,animations.eR)("true <=> false",[(0,animations.jt)("0.5s ease")])])],template:"",changeDetection:core.ChangeDetectionStrategy.OnPush,styles:[fullscreen_content_componentngResource_default()]})],FullscreenContentComponent);var fullscreen_container_component_class,fullscreen_container_component=__webpack_require__("./libs/components/molecules/src/lib/fullscreen/fullscreen-container.component.ts.css?ngResource!=!./node_modules/@ngtools/webpack/src/loaders/inline-resource.js?data=CiAgICAgIDpob3N0IHsKICAgICAgICBkaXNwbGF5OiBibG9jazsKICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7CiAgICAgIH0KICAgIA%3D%3D!./libs/components/molecules/src/lib/fullscreen/fullscreen-container.component.ts"),fullscreen_container_component_default=__webpack_require__.n(fullscreen_container_component);let FullscreenContainerComponent=(fullscreen_container_component_class=class FullscreenContainerComponent{constructor(){this.fullscreen=!1}ngAfterContentInit(){this.updateFullscreenMode()}ngOnChanges(changes){"fullscreen"in changes&&this.updateFullscreenMode()}updateFullscreenMode(){this.content?.forEach((content=>{content.isFullScreen=this.fullscreen}))}},fullscreen_container_component_class.propDecorators={content:[{type:core.ContentChildren,args:[FullscreenContentComponent]}],fullscreen:[{type:core.Input}]},fullscreen_container_component_class);FullscreenContainerComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"hra-fullscreen-container",standalone:!0,imports:[common.CommonModule,FullscreenContentComponent],template:"",changeDetection:core.ChangeDetectionStrategy.OnPush,styles:[fullscreen_container_component_default()]})],FullscreenContainerComponent);const fullscreen_container_stories={title:"FullscreenContainerComponent",component:FullscreenContainerComponent,decorators:[(0,dist.moduleMetadata)({imports:[FullscreenContentComponent]})]},Default=(content="\n Some content\n \n Other content\n \n",args=>({props:args,template:`\n \n ${content}\n \n `}));var content;Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:"Template(`\n Some content\n \n Other content\n \n`)",...Default.parameters?.docs?.source}}}}}]); \ No newline at end of file diff --git a/storybook/components-molecules/src-lib-fullscreen-fullscreen-container-stories.bfdb6fd0.iframe.bundle.js b/storybook/components-molecules/src-lib-fullscreen-fullscreen-container-stories.bfdb6fd0.iframe.bundle.js deleted file mode 100644 index dc92b0a15..000000000 --- a/storybook/components-molecules/src-lib-fullscreen-fullscreen-container-stories.bfdb6fd0.iframe.bundle.js +++ /dev/null @@ -1 +0,0 @@ -(self.webpackChunkhra_ui=self.webpackChunkhra_ui||[]).push([[522],{"./node_modules/css-loader/dist/runtime/api.js":module=>{"use strict";module.exports=function(cssWithMappingToString){var list=[];return list.toString=function toString(){return this.map((function(item){var content="",needLayer=void 0!==item[5];return item[4]&&(content+="@supports (".concat(item[4],") {")),item[2]&&(content+="@media ".concat(item[2]," {")),needLayer&&(content+="@layer".concat(item[5].length>0?" ".concat(item[5]):""," {")),content+=cssWithMappingToString(item),needLayer&&(content+="}"),item[2]&&(content+="}"),item[4]&&(content+="}"),content})).join("")},list.i=function i(modules,media,dedupe,supports,layer){"string"==typeof modules&&(modules=[[null,modules,void 0]]);var alreadyImportedModules={};if(dedupe)for(var k=0;k0?" ".concat(item[5]):""," {").concat(item[1],"}")),item[5]=layer),media&&(item[2]?(item[1]="@media ".concat(item[2]," {").concat(item[1],"}"),item[2]=media):item[2]=media),supports&&(item[4]?(item[1]="@supports (".concat(item[4],") {").concat(item[1],"}"),item[4]=supports):item[4]="".concat(supports)),list.push(item))}},list}},"./node_modules/css-loader/dist/runtime/noSourceMaps.js":module=>{"use strict";module.exports=function(i){return i[1]}},"./libs/components/molecules/src/lib/fullscreen/fullscreen-container.component.ts.css?ngResource!=!./node_modules/@ngtools/webpack/src/loaders/inline-resource.js?data=CiAgICAgIDpob3N0IHsKICAgICAgICBkaXNwbGF5OiBibG9jazsKICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7CiAgICAgIH0KICAgIA%3D%3D!./libs/components/molecules/src/lib/fullscreen/fullscreen-container.component.ts":(module,__unused_webpack_exports,__webpack_require__)=>{var ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/noSourceMaps.js"),___CSS_LOADER_EXPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js")(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);___CSS_LOADER_EXPORT___.push([module.id,"\n :host {\n display: block;\n position: relative;\n }\n ",""]),module.exports=___CSS_LOADER_EXPORT___.toString()},"./libs/components/molecules/src/lib/fullscreen/fullscreen-content.component.scss?ngResource":(module,__unused_webpack_exports,__webpack_require__)=>{var ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/noSourceMaps.js"),___CSS_LOADER_EXPORT___=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js")(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);___CSS_LOADER_EXPORT___.push([module.id,":host {\n display: block;\n overflow-y: hidden;\n transition: width 0.5s ease;\n width: 50%;\n}\n:host.fullscreen-on {\n z-index: 100;\n background: #f8f9fa;\n}",""]),module.exports=___CSS_LOADER_EXPORT___.toString()},"./libs/components/molecules/src/lib/fullscreen/fullscreen-container.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,default:()=>fullscreen_container_stories});var _class,dist=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),fullscreen_content_componentngResource=__webpack_require__("./libs/components/molecules/src/lib/fullscreen/fullscreen-content.component.scss?ngResource"),fullscreen_content_componentngResource_default=__webpack_require__.n(fullscreen_content_componentngResource),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),animations=__webpack_require__("./node_modules/@angular/animations/fesm2020/animations.mjs");let FullscreenContentComponent=((_class=class FullscreenContentComponent{constructor(){this.isFullScreen=!1}}).propDecorators={isFullScreen:[{type:core.HostBinding,args:["class.fullscreen-on"]},{type:core.HostBinding,args:["@animateResize"]}]},_class);FullscreenContentComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"hra-fullscreen-content",standalone:!0,imports:[common.CommonModule],animations:[(0,animations.X$)("animateResize",[(0,animations.SB)("true",(0,animations.oB)({width:"100%",position:"absolute",right:0})),(0,animations.SB)("false",(0,animations.oB)({width:"50%",position:"absolute",right:0})),(0,animations.eR)("true <=> false",[(0,animations.jt)("0.5s ease")])])],template:"",changeDetection:core.ChangeDetectionStrategy.OnPush,styles:[fullscreen_content_componentngResource_default()]})],FullscreenContentComponent);var fullscreen_container_component_class,fullscreen_container_component=__webpack_require__("./libs/components/molecules/src/lib/fullscreen/fullscreen-container.component.ts.css?ngResource!=!./node_modules/@ngtools/webpack/src/loaders/inline-resource.js?data=CiAgICAgIDpob3N0IHsKICAgICAgICBkaXNwbGF5OiBibG9jazsKICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7CiAgICAgIH0KICAgIA%3D%3D!./libs/components/molecules/src/lib/fullscreen/fullscreen-container.component.ts"),fullscreen_container_component_default=__webpack_require__.n(fullscreen_container_component);let FullscreenContainerComponent=(fullscreen_container_component_class=class FullscreenContainerComponent{constructor(){this.fullscreen=!1}ngAfterContentInit(){this.updateFullscreenMode()}ngOnChanges(changes){"fullscreen"in changes&&this.updateFullscreenMode()}updateFullscreenMode(){this.content?.forEach((content=>{content.isFullScreen=this.fullscreen}))}},fullscreen_container_component_class.propDecorators={content:[{type:core.ContentChildren,args:[FullscreenContentComponent]}],fullscreen:[{type:core.Input}]},fullscreen_container_component_class);FullscreenContainerComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"hra-fullscreen-container",standalone:!0,imports:[common.CommonModule,FullscreenContentComponent],template:"",changeDetection:core.ChangeDetectionStrategy.OnPush,styles:[fullscreen_container_component_default()]})],FullscreenContainerComponent);const fullscreen_container_stories={title:"FullscreenContainerComponent",component:FullscreenContainerComponent,decorators:[(0,dist.moduleMetadata)({imports:[FullscreenContentComponent]})]},Default=(content="\n Some content\n \n Other content\n \n",args=>({props:args,template:`\n \n ${content}\n \n `}));var content;Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:"Template(`\n Some content\n \n Other content\n \n`)",...Default.parameters?.docs?.source}}}}}]); \ No newline at end of file diff --git a/storybook/components-organisms/iframe.html b/storybook/components-organisms/iframe.html index fc509d619..69d6f202f 100644 --- a/storybook/components-organisms/iframe.html +++ b/storybook/components-organisms/iframe.html @@ -352,4 +352,4 @@ import './650.12fd21a8.iframe.bundle.js'; - import './main.91f7f2e6.iframe.bundle.js'; \ No newline at end of file + import './main.26f98233.iframe.bundle.js'; \ No newline at end of file diff --git a/storybook/components-organisms/main.26f98233.iframe.bundle.js b/storybook/components-organisms/main.26f98233.iframe.bundle.js new file mode 100644 index 000000000..b85c43a74 --- /dev/null +++ b/storybook/components-organisms/main.26f98233.iframe.bundle.js @@ -0,0 +1 @@ +(self.webpackChunkhra_ui=self.webpackChunkhra_ui||[]).push([[179],{"./dist/compodoc sync recursive ^\\.\\/.*\\/documentation\\.json$":(module,__unused_webpack_exports,__webpack_require__)=>{var map={"./components-behavioral/documentation.json":"./dist/compodoc/components-behavioral/documentation.json","./components-molecules/documentation.json":"./dist/compodoc/components-molecules/documentation.json","./components-organisms/documentation.json":"./dist/compodoc/components-organisms/documentation.json"};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id="./dist/compodoc sync recursive ^\\.\\/.*\\/documentation\\.json$"},"./libs/components/organisms lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/organisms(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.(js%7Cjsx%7Cts%7Ctsx))$":(module,__unused_webpack_exports,__webpack_require__)=>{var map={"./src/lib/biomarker-table/biomarker-table.component.stories":["./libs/components/organisms/src/lib/biomarker-table/biomarker-table.component.stories.ts",253,614],"./src/lib/biomarker-table/biomarker-table.component.stories.ts":["./libs/components/organisms/src/lib/biomarker-table/biomarker-table.component.stories.ts",253,614]};function webpackAsyncContext(req){if(!__webpack_require__.o(map,req))return Promise.resolve().then((()=>{var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}));var ids=map[req],id=ids[0];return Promise.all(ids.slice(1).map(__webpack_require__.e)).then((()=>__webpack_require__(id)))}webpackAsyncContext.keys=()=>Object.keys(map),webpackAsyncContext.id="./libs/components/organisms lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/organisms(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.(js%7Cjsx%7Cts%7Ctsx))$",module.exports=webpackAsyncContext},"./libs/components/organisms lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/organisms(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.mdx)$":module=>{function webpackEmptyAsyncContext(req){return Promise.resolve().then((()=>{var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}))}webpackEmptyAsyncContext.keys=()=>[],webpackEmptyAsyncContext.resolve=webpackEmptyAsyncContext,webpackEmptyAsyncContext.id="./libs/components/organisms lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/organisms(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.mdx)$",module.exports=webpackEmptyAsyncContext},"./.storybook/styles.scss?ngGlobalStyle":()=>{},"./libs/components/organisms/.storybook/preview.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{argTypesEnhancers:()=>argTypesEnhancers,decorators:()=>decorators,parameters:()=>parameters});var http=__webpack_require__("./node_modules/@angular/common/fesm2020/http.mjs"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),animations=__webpack_require__("./node_modules/@angular/platform-browser/fesm2020/animations.mjs"),ngxs_logger_plugin=__webpack_require__("./node_modules/@ngxs/logger-plugin/fesm2015/ngxs-logger-plugin.js"),ngxs_store=__webpack_require__("./node_modules/@ngxs/store/fesm2015/ngxs-store.js"),angular=__webpack_require__("./node_modules/@storybook/addon-docs/angular/index.js"),dist=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),ngx_markdown=__webpack_require__("./node_modules/ngx-markdown/fesm2020/ngx-markdown.mjs"),tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),angular_material_css_vars=__webpack_require__("./node_modules/angular-material-css-vars/fesm2020/angular-material-css-vars.mjs"),js_yaml=__webpack_require__("./node_modules/js-yaml/dist/js-yaml.mjs"),map=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/map.js"),tap=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/tap.js"),Observable=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/Observable.js");class Load{constructor(url){this.url=url,this.type=Load.type}}Load.type="[Theming] Load Theming File";var lib=__webpack_require__("./node_modules/zod/lib/index.mjs");const THEMING_FILE_SCHEMA=lib.z.record(lib.z.nativeEnum(angular_material_css_vars.Rm),lib.z.string());let ThemingState=class ThemingState{constructor(){this.http=(0,core.inject)(http.eN),this.materialVars=(0,core.inject)(angular_material_css_vars.jO)}load(ctx,{url}){return this.http.get(url,{responseType:"text"}).pipe((0,map.U)((data=>(0,js_yaml.zD)(data,{filename:url}))),(0,map.U)((data=>THEMING_FILE_SCHEMA.parse(data))),(0,tap.b)((data=>ctx.setState(data))),(0,tap.b)((data=>this.setVariables(data))))}setVariables(data){for(const[key,value]of Object.entries(data))this.materialVars.setVariable(key,value)}};(0,tslib_es6.gn)([(0,ngxs_store.aU)(Load),(0,tslib_es6.w6)("design:type",Function),(0,tslib_es6.w6)("design:paramtypes",[Object,Load]),(0,tslib_es6.w6)("design:returntype",Observable.y)],ThemingState.prototype,"load",null),ThemingState=(0,tslib_es6.gn)([(0,ngxs_store.ZM)({name:"theming",defaults:{}}),(0,core.Injectable)()],ThemingState);let ThemingModule=class ThemingModule{};function parseDefaultValue(type){const{defaultValue,type:typeDef}=type;if(void 0===defaultValue||"string"!=typeof defaultValue||"string"===typeDef?.name)return defaultValue;switch(typeDef?.name){case"array":case"boolean":case"number":case"object":try{return new Function("return "+defaultValue)()}catch(_error){return}case"enum":return typeDef.value.includes(defaultValue)?defaultValue:void 0;default:return}}ThemingModule=(0,tslib_es6.gn)([(0,core.NgModule)({imports:[angular_material_css_vars.Pe.forRoot({}),ngxs_store.$l.forFeature([ThemingState])]})],ThemingModule);const parameters={actions:{argTypesRegex:"^on[A-Z].*"},controls:{matchers:{color:/(background|color)$/i,date:/Date$/}},docs:{inlineStories:!0}},argTypesEnhancers=[function fixArgTypes(){return context=>{const argTypes={...context.argTypes},exclude=[...context.parameters.controls?.exclude??[]];for(const[key,type]of Object.entries(argTypes))switch(type.table.category){case"inputs":const defaultValue=parseDefaultValue(type);defaultValue!==type.defaultValue&&(argTypes[key]={...type,defaultValue});break;case"outputs":argTypes[key]={...type,defaultValue:void 0};break;default:exclude.push(key)}return context.parameters.controls={...context.parameters.controls,exclude},argTypes}}()],decorators=[(0,dist.applicationConfig)({providers:[(0,core.importProvidersFrom)(animations.BrowserAnimationsModule,http.JF,ngxs_store.$l.forRoot([],{developmentMode:!0}),ngxs_logger_plugin.xz.forRoot(),ngx_markdown.JP.forRoot({loader:http.eN}),ThemingModule)]}),(0,dist.componentWrapperDecorator)((story=>`\n
${story}
\n
\n `)),function addState(){return(fn,ctx)=>{const config=ctx.parameters.state;return config?(0,dist.applicationConfig)({providers:[(0,core.importProvidersFrom)(ngxs_store.$l.forFeature(config.states)),{provide:core.APP_INITIALIZER,multi:!0,useFactory:store=>()=>{const{actions}=config;return actions&&actions.length>0?store.dispatch(actions):void 0},deps:[ngxs_store.yh]}]})(fn,ctx):fn(ctx)}}()];!function setDocs(library){const docs=__webpack_require__("./dist/compodoc sync recursive ^\\.\\/.*\\/documentation\\.json$")(`./${library}/documentation.json`);(0,angular.P)(docs)}("components-organisms")},"./storybook-config-entry.js":(__unused_webpack_module,__unused_webpack___webpack_exports__,__webpack_require__)=>{"use strict";var dist=__webpack_require__("./node_modules/@storybook/global/dist/index.mjs"),external_STORYBOOK_MODULE_PREVIEW_API_=__webpack_require__("@storybook/preview-api");const external_STORYBOOK_MODULE_CHANNEL_POSTMESSAGE_namespaceObject=__STORYBOOK_MODULE_CHANNEL_POSTMESSAGE__,external_STORYBOOK_MODULE_CHANNEL_WEBSOCKET_namespaceObject=__STORYBOOK_MODULE_CHANNEL_WEBSOCKET__;var asyncToGenerator=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js");const pipeline=x=>x(),importers=[function(){var _ref=(0,asyncToGenerator.Z)((function*(path){if(!/^\.[\\/](?:libs\/components\/organisms(?:\/(?!\.)(?:(?:(?!(?:^|\/)\.).)*?)\/|\/|$)(?!\.)(?=.)[^/]*?\.stories\.mdx)$/.exec(path))return;const pathRemainder=path.substring(28);return __webpack_require__("./libs/components/organisms lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/organisms(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.mdx)$")("./"+pathRemainder)}));return function(_x){return _ref.apply(this,arguments)}}(),function(){var _ref2=(0,asyncToGenerator.Z)((function*(path){if(!/^\.[\\/](?:libs\/components\/organisms(?:\/(?!\.)(?:(?:(?!(?:^|\/)\.).)*?)\/|\/|$)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$/.exec(path))return;const pathRemainder=path.substring(28);return __webpack_require__("./libs/components/organisms lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/organisms(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.(js%7Cjsx%7Cts%7Ctsx))$")("./"+pathRemainder)}));return function(_x2){return _ref2.apply(this,arguments)}}()];function _importFn(){return(_importFn=(0,asyncToGenerator.Z)((function*(path){for(let i=0;iimporters[i](path)));if(moduleExports)return moduleExports}}))).apply(this,arguments)}const{SERVER_CHANNEL_URL}=dist.global,channel=(0,external_STORYBOOK_MODULE_CHANNEL_POSTMESSAGE_namespaceObject.createChannel)({page:"preview"});if(external_STORYBOOK_MODULE_PREVIEW_API_.addons.setChannel(channel),SERVER_CHANNEL_URL){const serverChannel=(0,external_STORYBOOK_MODULE_CHANNEL_WEBSOCKET_namespaceObject.createChannel)({url:SERVER_CHANNEL_URL});external_STORYBOOK_MODULE_PREVIEW_API_.addons.setServerChannel(serverChannel),window.__STORYBOOK_SERVER_CHANNEL__=serverChannel}const preview=new external_STORYBOOK_MODULE_PREVIEW_API_.PreviewWeb;window.__STORYBOOK_PREVIEW__=preview,window.__STORYBOOK_STORY_STORE__=preview.storyStore,window.__STORYBOOK_ADDONS_CHANNEL__=channel,window.__STORYBOOK_CLIENT_API__=new external_STORYBOOK_MODULE_PREVIEW_API_.ClientApi({storyStore:preview.storyStore}),preview.initialize({importFn:function importFn(_x3){return _importFn.apply(this,arguments)},getProjectAnnotations:()=>(0,external_STORYBOOK_MODULE_PREVIEW_API_.composeConfigs)([__webpack_require__("./node_modules/@storybook/angular/dist/client/docs/config.js"),__webpack_require__("./node_modules/@storybook/angular/dist/client/config.js"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/docs/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/actions/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/backgrounds/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/measure/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/outline/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/highlight/preview.mjs"),__webpack_require__("./libs/components/organisms/.storybook/preview.ts")])})},"./node_modules/@storybook/addon-docs/dist sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="./node_modules/@storybook/addon-docs/dist sync recursive",module.exports=webpackEmptyContext},"@storybook/channels":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CHANNELS__},"@storybook/client-logger":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CLIENT_LOGGER__},"@storybook/core-client":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CORE_CLIENT__},"@storybook/core-events":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CORE_EVENTS__},"@storybook/preview-api":module=>{"use strict";module.exports=__STORYBOOK_MODULE_PREVIEW_API__},"./dist/compodoc/components-behavioral/documentation.json":module=>{"use strict";module.exports=JSON.parse('{"pipes":[],"interfaces":[],"injectables":[],"guards":[],"interceptors":[],"classes":[],"directives":[],"components":[{"name":"BiomarkerDetailsComponent","id":"component-BiomarkerDetailsComponent-77362795c55e59d8109b5a13e3d57e4774ce01b5484ac21237c42d2857f2de4ecd80ec15ae66e99983246bdc3de1df675717253be566d7ba0efe1495a48c9f3c","file":"src/lib/biomarker-details/biomarker-details.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-biomarker-details","styleUrls":["./biomarker-details.component.scss"],"styles":[],"templateUrl":["./biomarker-details.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"collaborateText","defaultValue":"\'Collaborate with the HRA Team\'","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

button text of empty biomarker component.

\\n","line":106,"rawdescription":"\\n\\nbutton text of empty biomarker component.\\n","modifierKind":[144]},{"name":"gradientHoverInfo","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.GradientLegendInfo)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Info to be shown on the tooltip for Gradient Legend

\\n","line":58,"rawdescription":"\\nInfo to be shown on the tooltip for Gradient Legend","modifierKind":[144]},{"name":"gradients","defaultValue":"selectQuerySnapshot(RR.field, Ids.GradientLegend, RTypes.Gradient, \'points\' as const, [])<\\n GradientPoint[]\\n >","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Gradient colors along with their stop points

\\n","line":67,"rawdescription":"\\nGradient colors along with their stop points","modifierKind":[144]},{"name":"iri","defaultValue":"selectSnapshot(ActiveFtuSelectors.iri)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Iri of medical illustration behavior component

\\n","line":80,"rawdescription":"\\n\\nIri of medical illustration behavior component\\n","modifierKind":[144]},{"name":"isTableFullScreen","defaultValue":"false","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Indicates if the table is fully shown, defaults to false

\\n","line":64,"rawdescription":"\\nIndicates if the table is fully shown, defaults to false"},{"name":"message","defaultValue":"`We currently do not have cell type data for this biomarker.\\n

Please contact us to discuss your dataset.`","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

message markdown of empty biomarker component.

\\n","line":111,"rawdescription":"\\n\\nmessage markdown of empty biomarker component.\\n","modifierKind":[144]},{"name":"selectedOnHovered","defaultValue":"selectSnapshot(IllustratorSelectors.selectedOnHovered)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Selects the cells hovered currently to highlight in table

\\n","line":88,"rawdescription":"\\nSelects the cells hovered currently to highlight in table","modifierKind":[144]},{"name":"sizeHoverInfo","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.SizeLegendInfo)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Info to be shown on the tooltip for Size Legend

\\n","line":61,"rawdescription":"\\nInfo to be shown on the tooltip for Size Legend","modifierKind":[144]},{"name":"sizes","defaultValue":"selectQuerySnapshot(RR.field, Ids.SizeLegend, RTypes.Size, \'sizes\' as const, [])","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Taking input for the radius of the circle and the label to be displayed.

\\n","line":72,"rawdescription":"\\nTaking input for the radius of the circle and the label to be displayed.","modifierKind":[144]},{"name":"source","defaultValue":"selectSnapshot(SourceRefsSelectors.sourceReferences)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

List of sources with titles and links displayed to the user

\\n","line":75,"rawdescription":"\\nList of sources with titles and links displayed to the user","modifierKind":[144]},{"name":"tabs","defaultValue":"selectSnapshot(CellSummarySelectors.aggregates)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Table tabs

\\n","line":55,"rawdescription":"\\nTable tabs","modifierKind":[144]},{"name":"tissues","defaultValue":"selectSnapshot(TissueLibrarySelectors.tissues)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Get all tissues

\\n","line":85,"rawdescription":"\\n\\nGet all tissues\\n","modifierKind":[144]}],"methodsClass":[{"name":"collaborate","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":129,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which opens the contact modal dialog box","description":"

A function which opens the contact modal dialog box

\\n"},{"name":"toggleFullscreen","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":123,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function that toggles isTableFullScreen and\\ncalls the setScreenMode function.\\n","description":"

A function that toggles isTableFullScreen and\\ncalls the setScreenMode function.

\\n"}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

The component displays the biomarker details which includes the details, gradient legends, size legends and source lists

\\n","rawdescription":"\\nThe component displays the biomarker details which includes the details, gradient legends, size legends and source lists","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, inject } from \'@angular/core\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatTabsModule } from \'@angular/material/tabs\';\\nimport { HoverDirective } from \'@hra-ui/cdk\';\\nimport { dispatch, selectQuerySnapshot, selectSnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RR } from \'@hra-ui/cdk/state\';\\nimport { ActiveFtuSelectors, IllustratorSelectors, ScreenModeAction, TissueLibrarySelectors } from \'@hra-ui/state\';\\nimport {\\n EmptyBiomarkerComponent,\\n GradientLegendComponent,\\n GradientPoint,\\n LabelBoxComponent,\\n SizeLegend,\\n SizeLegendComponent,\\n} from \'@hra-ui/components/atoms\';\\nimport { BiomarkerTableDataCardComponent, SourceListComponent } from \'@hra-ui/components/molecules\';\\nimport { BiomarkerTableComponent, TissueInfo } from \'@hra-ui/components/organisms\';\\nimport { CellSummarySelectors, ResourceIds as Ids, ResourceTypes as RTypes, SourceRefsSelectors } from \'@hra-ui/state\';\\nimport { MatDialog, MatDialogConfig, MatDialogModule } from \'@angular/material/dialog\';\\nimport { ContactBehaviorComponent } from \'../contact-behavior/contact-behavior.component\';\\n\\n/**\\n * PlaceHolder for Empty Tissue Info\\n */\\nconst EMPTY_TISSUE_INFO: TissueInfo = {\\n id: \'\',\\n label: \'\',\\n};\\n\\n/** The component displays the biomarker details which includes the details, gradient legends, size legends and source lists*/\\n@Component({\\n selector: \'ftu-biomarker-details\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatIconModule,\\n MatTabsModule,\\n MatDialogModule,\\n BiomarkerTableComponent,\\n BiomarkerTableDataCardComponent,\\n GradientLegendComponent,\\n HoverDirective,\\n LabelBoxComponent,\\n SizeLegendComponent,\\n SourceListComponent,\\n EmptyBiomarkerComponent,\\n ],\\n templateUrl: \'./biomarker-details.component.html\',\\n styleUrls: [\'./biomarker-details.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerDetailsComponent {\\n /** Table tabs */\\n readonly tabs = selectSnapshot(CellSummarySelectors.aggregates);\\n\\n /** Info to be shown on the tooltip for Gradient Legend */\\n readonly gradientHoverInfo = selectQuerySnapshot(RR.anyText, Ids.GradientLegendInfo);\\n\\n /** Info to be shown on the tooltip for Size Legend */\\n readonly sizeHoverInfo = selectQuerySnapshot(RR.anyText, Ids.SizeLegendInfo);\\n\\n /** Indicates if the table is fully shown, defaults to false*/\\n isTableFullScreen = false;\\n\\n /** Gradient colors along with their stop points */\\n readonly gradients = selectQuerySnapshot(RR.field, Ids.GradientLegend, RTypes.Gradient, \'points\' as const, [])<\\n GradientPoint[]\\n >;\\n\\n /** Taking input for the radius of the circle and the label to be displayed. */\\n readonly sizes = selectQuerySnapshot(RR.field, Ids.SizeLegend, RTypes.Size, \'sizes\' as const, []);\\n\\n /** List of sources with titles and links displayed to the user */\\n readonly source = selectSnapshot(SourceRefsSelectors.sourceReferences);\\n\\n /**\\n * Iri of medical illustration behavior component\\n */\\n readonly iri = selectSnapshot(ActiveFtuSelectors.iri);\\n\\n /**\\n * Get all tissues\\n */\\n readonly tissues = selectSnapshot(TissueLibrarySelectors.tissues);\\n\\n /** Selects the cells hovered currently to highlight in table */\\n readonly selectedOnHovered = selectSnapshot(IllustratorSelectors.selectedOnHovered);\\n\\n /**\\n * Gets tissue title from the list of tissues\\n */\\n get tissueInfo(): TissueInfo {\\n const iri = this.iri();\\n const tissues = this.tissues();\\n if (iri === undefined) {\\n return EMPTY_TISSUE_INFO;\\n }\\n const { id, label } = tissues[iri];\\n return { id, label };\\n }\\n\\n /**\\n * button text of empty biomarker component.\\n */\\n readonly collaborateText = \'Collaborate with the HRA Team\';\\n\\n /**\\n * message markdown of empty biomarker component.\\n */\\n readonly message = `We currently do not have cell type data for this biomarker.\\n

Please contact us to discuss your dataset.`;\\n\\n /** A dispatcher function to set the screen mode */\\n private readonly setScreenMode = dispatch(ScreenModeAction.Set);\\n\\n /** A dialog box which shows contact modal after clicking on contact */\\n private readonly dialog = inject(MatDialog);\\n\\n /** A function that toggles isTableFullScreen and\\n * calls the setScreenMode function.\\n */\\n toggleFullscreen(): void {\\n this.isTableFullScreen = !this.isTableFullScreen;\\n this.setScreenMode(this.isTableFullScreen);\\n }\\n\\n /** A function which opens the contact modal dialog box */\\n collaborate(): void {\\n const dialogConfig = new MatDialogConfig();\\n dialogConfig.disableClose = true;\\n this.dialog.open(ContactBehaviorComponent, dialogConfig);\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n display: grid;\\n grid-template-columns: 1fr 1fr auto;\\n grid-template-rows: 3.5rem minmax(5rem, 2fr) 3rem 5rem minmax(5rem, 1fr);\\n grid-template-areas:\\n \'table-header table-header table-header\'\\n \'table table table\'\\n \'gradient-legend-header size-legend-header .\'\\n \'gradient-legend size-legend .\'\\n \'source-list source-list source-list\';\\n overflow-y: auto;\\n\\n .table-header {\\n grid-area: table-header;\\n border-bottom: 0.063rem solid #d3d3d3;\\n height: 3.5rem;\\n font-weight: 400;\\n }\\n\\n .table {\\n grid-area: table;\\n max-width: 100%;\\n overflow: auto;\\n border-bottom: 0.063rem solid #d3d3d3;\\n\\n ::ng-deep .table-tab-header {\\n padding-left: 1rem;\\n padding-right: 1rem;\\n border-left: 0.063rem solid #d3d3d3;\\n border-bottom: 0.063rem solid #d3d3d3;\\n background-color: white;\\n font-weight: 400;\\n letter-spacing: 0;\\n\\n &:last-child {\\n border-right: 0.063rem solid #d3d3d3;\\n }\\n\\n &.mdc-tab-indicator--active {\\n background-color: #f8f9fa;\\n }\\n\\n &:hover {\\n background-color: #f8f9fa;\\n }\\n .mat-tab__text-label {\\n --palette-accent-500-rgb: #243142;\\n }\\n }\\n }\\n\\n ::ng-deep {\\n .table-tab-header > .mdc-tab__content > span {\\n color: vars.$primary;\\n }\\n .mat-mdc-tab-group.mat-accent .mat-mdc-tab:not(.mat-mdc-tab-disabled).mdc-tab--active .mdc-tab__text-label {\\n color: vars.$primary;\\n }\\n }\\n\\n .legend-header {\\n color: vars.$dark-primary-text;\\n border-top: 0.063rem solid #d3d3d3;\\n border-bottom: 0.063rem solid #d3d3d3;\\n border-right: 0.063rem solid #d3d3d3;\\n\\n &.gradient {\\n grid-area: gradient-legend-header;\\n }\\n\\n &.size {\\n grid-area: size-legend-header;\\n }\\n\\n .icon {\\n margin-left: 0.6rem;\\n width: unset;\\n }\\n }\\n\\n .legend {\\n padding: 1rem 2rem;\\n border-right: 0.063rem solid #d3d3d3;\\n\\n &.gradient {\\n grid-area: gradient-legend;\\n\\n .content {\\n width: 10rem;\\n }\\n }\\n\\n &.size {\\n grid-area: size-legend;\\n }\\n }\\n\\n .source-list {\\n grid-area: source-list;\\n }\\n\\n .cursor {\\n cursor: default;\\n }\\n}\\n\\n::ng-deep .biomarker-details.info-tooltip {\\n display: flex;\\n padding: 1rem;\\n border: 1px solid #a8a3a3;\\n border-radius: 0.5rem;\\n box-shadow: 1px 2px 16px 2px #00000029;\\n background-color: vars.$primary-contrast-rgb;\\n max-width: 21rem;\\n font-size: small;\\n font-family: Inter;\\n}\\n","styleUrl":"./biomarker-details.component.scss"}],"stylesData":"","accessors":{"tissueInfo":{"name":"tissueInfo","getSignature":{"name":"tissueInfo","type":"","returnType":"TissueInfo","line":93,"rawdescription":"\\n\\nGets tissue title from the list of tissues\\n","description":"

Gets tissue title from the list of tissues

\\n"}}},"templateData":"\\n Cell Types by Gene Biomarkers\\n \\n {{ isTableFullScreen ? \'close_fullscreen\' : \'open_in_full\' }}\\n \\n\\n\\n\\n \\n \\n \\n \\n\\n\\n\\n Biomarker Expression Mean in FTU\\n info_outlined\\n\\n
\\n \\n
\\n\\n\\n Percentage of Cells in FTU\\n info_outlined\\n\\n
\\n \\n
\\n\\n
\\n \\n
\\n\\n\\n
\\n {{ tooltip }}\\n
\\n\\n"},{"name":"BiomarkerDetailsWcComponent","id":"component-BiomarkerDetailsWcComponent-2a35b01614cd4a83a9546a33b9e03200b2f96e7d06e07e8803741ed0f77a8815075e35be5e35822c9fb46279ff45ee49dbbfc6fc96f328f11a42b7f9898a30ef","file":"src/lib/biomarker-details-wc/biomarker-details-wc.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-wc-biomarker-details","styleUrls":["./biomarker-details-wc.component.scss"],"styles":[],"templateUrl":["./biomarker-details-wc.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"collaborateText","defaultValue":"\'Collaborate with the HRA Team\'","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

button text of empty biomarker component.

\\n","line":145,"rawdescription":"\\n\\nbutton text of empty biomarker component.\\n","modifierKind":[144]},{"name":"currentUrl","defaultValue":"selectSnapshot(IllustratorSelectors.url)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Current illustration url

\\n","line":71,"rawdescription":"\\n\\nCurrent illustration url\\n","modifierKind":[144]},{"name":"gradientHoverInfo","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.GradientLegendInfo)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Info to be shown on the tooltip for Gradient Legend

\\n","line":111,"rawdescription":"\\nInfo to be shown on the tooltip for Gradient Legend","modifierKind":[144]},{"name":"gradients","defaultValue":"selectQuerySnapshot(RR.field, Ids.GradientLegend, RTypes.Gradient, \'points\' as const, [])<\\n GradientPoint[]\\n >","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Gradient colors along with their stop points

\\n","line":120,"rawdescription":"\\nGradient colors along with their stop points","modifierKind":[144]},{"name":"iri","defaultValue":"selectSnapshot(ActiveFtuSelectors.iri)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Iri of medical illustration behavior component

\\n","line":81,"rawdescription":"\\n\\nIri of medical illustration behavior component\\n","modifierKind":[144]},{"name":"isTableFullScreen","defaultValue":"false","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Indicates if the table is fully shown, defaults to false

\\n","line":117,"rawdescription":"\\nIndicates if the table is fully shown, defaults to false"},{"name":"mapping","defaultValue":"selectSnapshot(IllustratorSelectors.mapping)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Current mapping file

\\n","line":76,"rawdescription":"\\n\\nCurrent mapping file\\n","modifierKind":[144]},{"name":"message","defaultValue":"`We currently do not have cell type data for this biomarker.\\n

Please contact us to discuss your dataset.`","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

message markdown of empty biomarker component.

\\n","line":150,"rawdescription":"\\n\\nmessage markdown of empty biomarker component.\\n","modifierKind":[144]},{"name":"sizeHoverInfo","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.SizeLegendInfo)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Info to be shown on the tooltip for Size Legend

\\n","line":114,"rawdescription":"\\nInfo to be shown on the tooltip for Size Legend","modifierKind":[144]},{"name":"sizes","defaultValue":"selectQuerySnapshot(RR.field, Ids.SizeLegend, RTypes.Size, \'sizes\' as const, [])","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Taking input for the radius of the circle and the label to be displayed.

\\n","line":125,"rawdescription":"\\nTaking input for the radius of the circle and the label to be displayed.","modifierKind":[144]},{"name":"source","defaultValue":"selectSnapshot(SourceRefsSelectors.sourceReferences)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

List of sources with titles and links displayed to the user

\\n","line":128,"rawdescription":"\\nList of sources with titles and links displayed to the user","modifierKind":[144]},{"name":"tabs","defaultValue":"selectSnapshot(CellSummarySelectors.aggregates)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Table tabs

\\n","line":108,"rawdescription":"\\nTable tabs","modifierKind":[144]},{"name":"tissues","defaultValue":"selectSnapshot(TissueLibrarySelectors.tissues)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Get all tissues

\\n","line":86,"rawdescription":"\\n\\nGet all tissues\\n","modifierKind":[144]},{"name":"updateNodeOnClicked","defaultValue":"dispatch(IllustratorActions.SetClicked)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Updates the active node on node click

\\n","line":105,"rawdescription":"\\n\\nUpdates the active node on node click\\n","modifierKind":[144]},{"name":"updateNodeOnHover","defaultValue":"dispatch(IllustratorActions.SetHover)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Updates the active node on node hover

\\n","line":100,"rawdescription":"\\n\\nUpdates the active node on node hover\\n","modifierKind":[144]}],"methodsClass":[{"name":"collaborate","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":167,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which opens the contact modal dialog box","description":"

A function which opens the contact modal dialog box

\\n"},{"name":"toggleFullscreen","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":162,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function that toggles isTableFullScreen and\\ncalls the setScreenMode function.\\n","description":"

A function that toggles isTableFullScreen and\\ncalls the setScreenMode function.

\\n"}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for Biomarker Table Details Web component

\\n","rawdescription":"\\nComponent for Biomarker Table Details Web component","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, inject } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatTabsModule } from \'@angular/material/tabs\';\\nimport { HoverDirective } from \'@hra-ui/cdk\';\\nimport { selectSnapshot, selectQuerySnapshot, dispatch } from \'@hra-ui/cdk/injectors\';\\nimport {\\n GradientLegendComponent,\\n LabelBoxComponent,\\n SizeLegendComponent,\\n EmptyBiomarkerComponent,\\n GradientPoint,\\n SizeLegend,\\n} from \'@hra-ui/components/atoms\';\\nimport {\\n BiomarkerTableDataCardComponent,\\n InteractiveSvgComponent,\\n SourceListComponent,\\n} from \'@hra-ui/components/molecules\';\\nimport { TissueInfo, BiomarkerTableComponent } from \'@hra-ui/components/organisms\';\\nimport {\\n ActiveFtuSelectors,\\n TissueLibrarySelectors,\\n ScreenModeAction,\\n IllustratorActions,\\n IllustratorSelectors,\\n CellSummarySelectors,\\n ResourceIds as Ids,\\n ResourceTypes as RTypes,\\n SourceRefsSelectors,\\n} from \'@hra-ui/state\';\\nimport { ResourceRegistrySelectors as RR } from \'@hra-ui/cdk/state\';\\nimport { MatDialog, MatDialogConfig } from \'@angular/material/dialog\';\\nimport { ContactBehaviorComponent } from \'../contact-behavior/contact-behavior.component\';\\n\\n/**\\n * PlaceHolder for Empty Tissue Info\\n */\\nconst EMPTY_TISSUE_INFO: TissueInfo = {\\n id: \'\',\\n label: \'\',\\n};\\n\\n/** Component for Biomarker Table Details Web component */\\n@Component({\\n selector: \'ftu-wc-biomarker-details\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatIconModule,\\n MatTabsModule,\\n\\n BiomarkerTableComponent,\\n BiomarkerTableDataCardComponent,\\n GradientLegendComponent,\\n HoverDirective,\\n LabelBoxComponent,\\n SizeLegendComponent,\\n SourceListComponent,\\n EmptyBiomarkerComponent,\\n InteractiveSvgComponent,\\n ],\\n templateUrl: \'./biomarker-details-wc.component.html\',\\n styleUrls: [\'./biomarker-details-wc.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerDetailsWcComponent {\\n /**\\n * Current illustration url\\n */\\n readonly currentUrl = selectSnapshot(IllustratorSelectors.url);\\n\\n /**\\n * Current mapping file\\n */\\n readonly mapping = selectSnapshot(IllustratorSelectors.mapping);\\n\\n /**\\n * Iri of medical illustration behavior component\\n */\\n readonly iri = selectSnapshot(ActiveFtuSelectors.iri);\\n\\n /**\\n * Get all tissues\\n */\\n readonly tissues = selectSnapshot(TissueLibrarySelectors.tissues);\\n\\n /**\\n * Gets tissue title from the list of tissues\\n */\\n get tissueTitle(): string {\\n const iri = this.iri();\\n const tissues = this.tissues();\\n return iri ? tissues[iri].label : \'\';\\n }\\n\\n /**\\n * Updates the active node on node hover\\n */\\n readonly updateNodeOnHover = dispatch(IllustratorActions.SetHover);\\n\\n /**\\n * Updates the active node on node click\\n */\\n readonly updateNodeOnClicked = dispatch(IllustratorActions.SetClicked);\\n\\n /** Table tabs */\\n readonly tabs = selectSnapshot(CellSummarySelectors.aggregates);\\n\\n /** Info to be shown on the tooltip for Gradient Legend */\\n readonly gradientHoverInfo = selectQuerySnapshot(RR.anyText, Ids.GradientLegendInfo);\\n\\n /** Info to be shown on the tooltip for Size Legend */\\n readonly sizeHoverInfo = selectQuerySnapshot(RR.anyText, Ids.SizeLegendInfo);\\n\\n /** Indicates if the table is fully shown, defaults to false*/\\n isTableFullScreen = false;\\n\\n /** Gradient colors along with their stop points */\\n readonly gradients = selectQuerySnapshot(RR.field, Ids.GradientLegend, RTypes.Gradient, \'points\' as const, [])<\\n GradientPoint[]\\n >;\\n\\n /** Taking input for the radius of the circle and the label to be displayed. */\\n readonly sizes = selectQuerySnapshot(RR.field, Ids.SizeLegend, RTypes.Size, \'sizes\' as const, []);\\n\\n /** List of sources with titles and links displayed to the user */\\n readonly source = selectSnapshot(SourceRefsSelectors.sourceReferences);\\n /**\\n * Gets tissue title from the list of tissues\\n */\\n get tissueInfo(): TissueInfo {\\n const iri = this.iri();\\n const tissues = this.tissues();\\n if (iri === undefined) {\\n return EMPTY_TISSUE_INFO;\\n }\\n const { id, label } = tissues[iri];\\n return { id, label };\\n }\\n\\n /**\\n * button text of empty biomarker component.\\n */\\n readonly collaborateText = \'Collaborate with the HRA Team\';\\n\\n /**\\n * message markdown of empty biomarker component.\\n */\\n readonly message = `We currently do not have cell type data for this biomarker.\\n

Please contact us to discuss your dataset.`;\\n\\n /** A dispatcher function to set the screen mode */\\n private readonly setScreenMode = dispatch(ScreenModeAction.Set);\\n\\n /** A dialog box which shows contact modal after clicking on contact */\\n private readonly dialog = inject(MatDialog);\\n\\n /** A function that toggles isTableFullScreen and\\n * calls the setScreenMode function.\\n */\\n toggleFullscreen(): void {\\n this.isTableFullScreen = !this.isTableFullScreen;\\n this.setScreenMode(this.isTableFullScreen);\\n }\\n /** A function which opens the contact modal dialog box */\\n collaborate(): void {\\n const dialogConfig = new MatDialogConfig();\\n dialogConfig.disableClose = true;\\n this.dialog.open(ContactBehaviorComponent, dialogConfig);\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n ::ng-deep .extraTab {\\n border: 0.063rem solid #d3d3d3;\\n border-top: 0;\\n }\\n\\n .table-header {\\n grid-area: table-header;\\n border: 0.063rem solid #d3d3d3;\\n width: 43rem;\\n height: 3.5rem;\\n }\\n\\n .table {\\n grid-area: table;\\n max-width: 100%;\\n overflow: auto;\\n border: 0.063rem solid #d3d3d3;\\n\\n ::ng-deep .table-tab-header {\\n padding-left: 1rem;\\n padding-right: 1rem;\\n border-left: 0.063rem solid #d3d3d3;\\n border-bottom: 0.063rem solid #d3d3d3;\\n\\n &:last-child {\\n border-right: 0.063rem solid #d3d3d3;\\n }\\n\\n &.mdc-tab-indicator--active {\\n background-color: #f8f9fa;\\n }\\n }\\n }\\n\\n hra-biomarker-table {\\n overflow-y: auto;\\n overflow-x: auto;\\n }\\n\\n .legends {\\n display: inline-flex;\\n width: 100%;\\n .legends-right {\\n width: 50%;\\n }\\n .legends-left {\\n width: 50%;\\n }\\n }\\n\\n .legend-header {\\n color: vars.$dark-primary-text;\\n border-top: 0.063rem solid #d3d3d3;\\n border-bottom: 0.063rem solid #d3d3d3;\\n border-right: 0.063rem solid #d3d3d3;\\n\\n &.gradient {\\n grid-area: gradient-legend-header;\\n }\\n\\n &.size {\\n grid-area: size-legend-header;\\n }\\n\\n .icon {\\n margin-left: 0.6rem;\\n }\\n }\\n\\n .legend {\\n padding: 1rem 2rem;\\n border-right: 0.063rem solid #d3d3d3;\\n\\n &.gradient {\\n grid-area: gradient-legend;\\n\\n .content {\\n width: 10rem;\\n }\\n }\\n\\n &.size {\\n grid-area: size-legend;\\n }\\n }\\n\\n .source-list {\\n grid-area: source-list;\\n\\n .content {\\n width: min-content;\\n }\\n }\\n}\\n\\n::ng-deep .biomarker-details.info-tooltip {\\n display: flex;\\n padding: 1rem;\\n border: 1px solid #a8a3a3;\\n border-radius: 0.5rem;\\n box-shadow: 1px 2px 16px 2px #00000029;\\n background-color: vars.$primary-contrast-rgb;\\n max-width: 21rem;\\n font-size: small;\\n}\\n","styleUrl":"./biomarker-details-wc.component.scss"}],"stylesData":"","accessors":{"tissueTitle":{"name":"tissueTitle","getSignature":{"name":"tissueTitle","type":"string","returnType":"string","line":91,"rawdescription":"\\n\\nGets tissue title from the list of tissues\\n","description":"

Gets tissue title from the list of tissues

\\n"}},"tissueInfo":{"name":"tissueInfo","getSignature":{"name":"tissueInfo","type":"","returnType":"TissueInfo","line":132,"rawdescription":"\\n\\nGets tissue title from the list of tissues\\n","description":"

Gets tissue title from the list of tissues

\\n"}}},"templateData":"\\n {{ tissueTitle }}: FTU Illustration\\n \\n {{ isTableFullScreen ? \'close_fullscreen\' : \'open_in_full\' }}\\n \\n\\n\\n\\n \\n \\n \\n \\n \\n \\n\\n
\\n
\\n \\n Biomarker Expression Mean in FTU\\n info_outlined\\n \\n
\\n \\n
\\n
\\n\\n
\\n \\n Percentage of Cells in FTU\\n info_outlined\\n \\n
\\n \\n
\\n
\\n
\\n \\n \\n \\n
\\n \\n
\\n\\n \\n
\\n {{ tooltip }}\\n
\\n \\n \\n\\n"},{"name":"ContactBehaviorComponent","id":"component-ContactBehaviorComponent-b9d5e223798d92be933b5dbadc75b1d6c247f7b00beb75f933bb07b0a4949d22458ee53931ca654d0b255f40508dbf23ef4e516e2f80368415a86fdfe44d60b6","file":"src/lib/contact-behavior/contact-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-contact-behavior","styleUrls":["./contact-behavior.component.scss"],"styles":[],"templateUrl":["./contact-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"description","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.ContactAcknowledgement)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Information modal message to the user

\\n","line":29,"rawdescription":"\\nInformation modal message to the user","modifierKind":[144]},{"name":"postMessageTemplate","deprecated":false,"deprecationMessage":"","type":"TemplateRef","optional":false,"description":"

A template to post a message

\\n","line":20,"rawdescription":"\\nA template to post a message","decorators":[{"name":"ViewChild","stringifiedArguments":"\'postMessage\'"}],"modifierKind":[144]},{"name":"productLogoUrl","defaultValue":"selectQuerySnapshot(RR.url, Ids.ProductLogoUrl)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product logo URL to displayed on the left side.

\\n","line":23,"rawdescription":"\\nInput for product logo URL to displayed on the left side.","modifierKind":[144]},{"name":"productTitle","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.ProductTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product title to displayed on the left side.

\\n","line":26,"rawdescription":"\\nInput for product title to displayed on the left side.","modifierKind":[144]},{"name":"sendMessage","defaultValue":"dispatch(ContactActions.SendMessage)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

A dispatcher function to send message entered by user

\\n","line":32,"rawdescription":"\\nA dispatcher function to send message entered by user","modifierKind":[144]}],"methodsClass":[{"name":"close","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":51,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which closes the \'Contact us\' dialog and the acknowledgement dialog.","description":"

A function which closes the 'Contact us' dialog and the acknowledgement dialog.

\\n"},{"name":"submit","args":[{"name":"message","type":"ContactData","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"void","typeParameters":[],"line":44,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which sends/dispatches a message which contains email, subject, and message. And also opens the acknowledgement dialog box.","description":"

A function which sends/dispatches a message which contains email, subject, and message. And also opens the acknowledgement dialog box.

\\n","jsdoctags":[{"name":"message","type":"ContactData","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

A Component for contact behavior which sends the message entered by the user and shows an acknowledgement

\\n","rawdescription":"\\nA Component for contact behavior which sends the message entered by the user and shows an acknowledgement","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, inject, TemplateRef, ViewChild } from \'@angular/core\';\\nimport { MatDialog, MatDialogModule, MatDialogRef } from \'@angular/material/dialog\';\\nimport { dispatch, selectQuerySnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RR } from \'@hra-ui/cdk/state\';\\nimport { ContactData, ContactModalComponent, InfoModalComponent } from \'@hra-ui/components/molecules\';\\nimport { ResourceIds as Ids, ContactActions } from \'@hra-ui/state\';\\n\\n/** A Component for contact behavior which sends the message entered by the user and shows an acknowledgement */\\n@Component({\\n selector: \'ftu-contact-behavior\',\\n standalone: true,\\n imports: [CommonModule, MatDialogModule, ContactModalComponent, InfoModalComponent],\\n templateUrl: \'./contact-behavior.component.html\',\\n styleUrls: [\'./contact-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class ContactBehaviorComponent {\\n /** A template to post a message */\\n @ViewChild(\'postMessage\') readonly postMessageTemplate!: TemplateRef;\\n\\n /** Input for product logo URL to displayed on the left side. */\\n readonly productLogoUrl = selectQuerySnapshot(RR.url, Ids.ProductLogoUrl);\\n\\n /** Input for product title to displayed on the left side. */\\n readonly productTitle = selectQuerySnapshot(RR.anyText, Ids.ProductTitle);\\n\\n /** Information modal message to the user */\\n readonly description = selectQuerySnapshot(RR.anyText, Ids.ContactAcknowledgement);\\n\\n /** A dispatcher function to send message entered by user */\\n readonly sendMessage = dispatch(ContactActions.SendMessage);\\n\\n /** A dialog box which shows user an acknowledgement after clicking on submit */\\n private readonly dialog = inject(MatDialog);\\n\\n /** A mat form field dialog which accepts the email, subject, and message of user and validates it */\\n private readonly selfRef = inject(MatDialogRef, { optional: true });\\n\\n /** Dialog box which references the acknowledgement dialog box */\\n private postRef?: MatDialogRef;\\n\\n /** A function which sends/dispatches a message which contains email, subject, and message. And also opens the acknowledgement dialog box. */\\n submit(message: ContactData): void {\\n this.sendMessage(message);\\n this.selfRef?.close();\\n this.postRef = this.dialog.open(this.postMessageTemplate);\\n }\\n\\n /** A function which closes the \'Contact us\' dialog and the acknowledgement dialog. */\\n close(): void {\\n this.postRef?.close();\\n this.selfRef?.close();\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n\\n .contact-modal {\\n width: 41rem;\\n height: 40rem;\\n }\\n\\n .info-modal {\\n width: 35rem;\\n height: 11.8rem;\\n }\\n\\n @media screen and (max-height: 328px) {\\n .contact-modal {\\n height: calc(100vh - 2rem);\\n }\\n }\\n}\\n","styleUrl":"./contact-behavior.component.scss"}],"stylesData":"","templateData":"\\n\\n\\n\\n \\n \\n\\n"},{"name":"FooterBehaviorComponent","id":"component-FooterBehaviorComponent-d9ecf51e28e6cdbe2f77b2f819a2e3df3acd0382e946f213975e78af53f6c11b1a7a013fefb862cfa9449b9973d2ea3497fa9687d6c04eb492751c2a83c17410","file":"src/lib/footer-behavior/footer-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-footer-behavior","styleUrls":["./footer-behavior.component.scss"],"styles":[],"templateUrl":["./footer-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"download","defaultValue":"dispatch(DownloadActions.Download)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

A dispatcher function to download file in specified format

\\n","line":39,"rawdescription":"\\nA dispatcher function to download file in specified format","modifierKind":[144]},{"name":"downloadFormats","defaultValue":"selectSnapshot(DownloadSelectors.formats)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Selects a snapshot of the current value of the available download formats

\\n","line":27,"rawdescription":"\\nSelects a snapshot of the current value of the available download formats","modifierKind":[144]},{"name":"embed","defaultValue":"LinkIds.Embed","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Embed link routing after clicking on Embed

\\n","line":36,"rawdescription":"\\nEmbed link routing after clicking on Embed","modifierKind":[144]},{"name":"hraPortal","defaultValue":"LinkIds.Portal","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Hra portal link routing after clicking on HRA Portal

\\n","line":30,"rawdescription":"\\nHra portal link routing after clicking on HRA Portal","modifierKind":[144]},{"name":"illustrationMetadata","defaultValue":"LinkIds.Illustration","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Metadata page link routing after clicking on Illustration

\\n","line":33,"rawdescription":"\\nMetadata page link routing after clicking on Illustration","modifierKind":[144]},{"name":"productLogoUrl","defaultValue":"selectQuerySnapshot(RR.url, Ids.ProductLogoUrl)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product logo URL to displayed on the left side.

\\n","line":21,"rawdescription":"\\nInput for product logo URL to displayed on the left side.","modifierKind":[144]},{"name":"productTitle","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.ProductTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product title to displayed on the left side.

\\n","line":24,"rawdescription":"\\nInput for product title to displayed on the left side.","modifierKind":[144]},{"name":"size","defaultValue":"selectSnapshot(ScreenModeSelectors.size)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Selects the current value of the available ScreenMode Size

\\n","line":41,"rawdescription":"\\nSelects the current value of the available ScreenMode Size","modifierKind":[144]}],"methodsClass":[{"name":"contact","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":47,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which opens the contact modal dialog box","description":"

A function which opens the contact modal dialog box

\\n"}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

A component for footer behavior which provides functionality for various buttons in footer

\\n","rawdescription":"\\nA component for footer behavior which provides functionality for various buttons in footer","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, inject } from \'@angular/core\';\\nimport { MatDialog, MatDialogConfig, MatDialogModule } from \'@angular/material/dialog\';\\nimport { dispatch, selectQuerySnapshot, selectSnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RR } from \'@hra-ui/cdk/state\';\\nimport { FooterComponent } from \'@hra-ui/components/molecules\';\\nimport { DownloadActions, DownloadSelectors, ResourceIds as Ids, LinkIds, ScreenModeSelectors } from \'@hra-ui/state\';\\nimport { ContactBehaviorComponent } from \'../contact-behavior/contact-behavior.component\';\\n\\n/** A component for footer behavior which provides functionality for various buttons in footer */\\n@Component({\\n selector: \'ftu-footer-behavior\',\\n standalone: true,\\n imports: [CommonModule, MatDialogModule, FooterComponent, ContactBehaviorComponent],\\n templateUrl: \'./footer-behavior.component.html\',\\n styleUrls: [\'./footer-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class FooterBehaviorComponent {\\n /** Input for product logo URL to displayed on the left side. */\\n readonly productLogoUrl = selectQuerySnapshot(RR.url, Ids.ProductLogoUrl);\\n\\n /** Input for product title to displayed on the left side. */\\n readonly productTitle = selectQuerySnapshot(RR.anyText, Ids.ProductTitle);\\n\\n /** Selects a snapshot of the current value of the available download formats */\\n readonly downloadFormats = selectSnapshot(DownloadSelectors.formats);\\n\\n /** Hra portal link routing after clicking on HRA Portal */\\n readonly hraPortal = LinkIds.Portal;\\n\\n /** Metadata page link routing after clicking on Illustration */\\n readonly illustrationMetadata = LinkIds.Illustration;\\n\\n /** Embed link routing after clicking on Embed */\\n readonly embed = LinkIds.Embed;\\n\\n /** A dispatcher function to download file in specified format */\\n readonly download = dispatch(DownloadActions.Download);\\n /** Selects the current value of the available ScreenMode Size */\\n readonly size = selectSnapshot(ScreenModeSelectors.size);\\n\\n /** A dialog box which shows contact modal after clicking on contact */\\n private readonly dialog = inject(MatDialog);\\n\\n /** A function which opens the contact modal dialog box */\\n contact(): void {\\n const dialogConfig = new MatDialogConfig();\\n dialogConfig.disableClose = true;\\n this.dialog.open(ContactBehaviorComponent, dialogConfig);\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n}\\n","styleUrl":"./footer-behavior.component.scss"}],"stylesData":"","templateData":"\\n\\n"},{"name":"HeaderBehaviorComponent","id":"component-HeaderBehaviorComponent-a76f74e70c7aacab4debd2492e1302dc534513cd4598dce499fc0d4f09bf0a16fc333bcb4bb100ffc9dbcb5427533473060400e0ae5eb7051dac7768474ae300","file":"src/lib/header-behavior/header-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-header-behavior","styleUrls":["./header-behavior.component.scss"],"styles":[],"templateUrl":["./header-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"aboutLink","defaultValue":"LinkIds.About","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for about link for user click action.

\\n","line":41,"rawdescription":"\\n\\nInput for about link for user click action.\\n","modifierKind":[144]},{"name":"appTitle","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.AppTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for app title to show on the left side.

\\n","line":31,"rawdescription":"\\n\\nInput for app title to show on the left side.\\n","modifierKind":[144]},{"name":"productLogoUrl","defaultValue":"selectQuerySnapshot(RR.url, Ids.ProductLogoUrl)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product logo URL to displayed on the left side.

\\n","line":21,"rawdescription":"\\n\\nInput for product logo URL to displayed on the left side.\\n","modifierKind":[144]},{"name":"productTitle","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.ProductTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product title to displayed on the left side.

\\n","line":26,"rawdescription":"\\n\\nInput for product title to displayed on the left side.\\n","modifierKind":[144]},{"name":"productTitleLink","defaultValue":"LinkIds.ProductTitle","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product title link for user click action

\\n","line":36,"rawdescription":"\\n\\nInput for product title link for user click action\\n","modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for Header Behavior

\\n","rawdescription":"\\nComponent for Header Behavior","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component } from \'@angular/core\';\\nimport { selectQuerySnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RR } from \'@hra-ui/cdk/state\';\\nimport { HeaderComponent } from \'@hra-ui/components/molecules\';\\nimport { ResourceIds as Ids, LinkIds } from \'@hra-ui/state\';\\n\\n/** Component for Header Behavior */\\n@Component({\\n selector: \'ftu-header-behavior\',\\n standalone: true,\\n imports: [CommonModule, HeaderComponent],\\n templateUrl: \'./header-behavior.component.html\',\\n styleUrls: [\'./header-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class HeaderBehaviorComponent {\\n /**\\n * Input for product logo URL to displayed on the left side.\\n */\\n readonly productLogoUrl = selectQuerySnapshot(RR.url, Ids.ProductLogoUrl);\\n\\n /**\\n * Input for product title to displayed on the left side.\\n */\\n readonly productTitle = selectQuerySnapshot(RR.anyText, Ids.ProductTitle);\\n\\n /**\\n * Input for app title to show on the left side.\\n */\\n readonly appTitle = selectQuerySnapshot(RR.anyText, Ids.AppTitle);\\n\\n /**\\n * Input for product title link for user click action\\n */\\n readonly productTitleLink = LinkIds.ProductTitle;\\n\\n /**\\n * Input for about link for user click action.\\n */\\n readonly aboutLink = LinkIds.About;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n}\\n","styleUrl":"./header-behavior.component.scss"}],"stylesData":"","templateData":"\\n\\n"},{"name":"HraLandingPageIntroWcBehaviourComponent","id":"component-HraLandingPageIntroWcBehaviourComponent-b8c2509d12b92bff8ab139855b712563f2a92e8aa91e8ecc05714063b91b1765ade0e9c6e691367a2eaa4724d94d6dfe4ade28c89da03cfcf6eae21630452b23","file":"src/lib/hra-landing-page-intro-wc-behaviour/hra-landing-page-intro-wc-behaviour.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-wc-intro","styleUrls":["./hra-landing-page-intro-wc-behaviour.component.scss"],"styles":[],"templateUrl":["./hra-landing-page-intro-wc-behaviour.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"landingPageIntroDescription","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPageDescription)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro description

\\n","line":21,"rawdescription":"\\nselect snapshot for landing page intro description","modifierKind":[144]},{"name":"landingPageIntroPartners","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPagePartners)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro partners

\\n","line":25,"rawdescription":"\\nselect snapshot for landing page intro partners","modifierKind":[144]},{"name":"landingPageIntroReadMore","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPageIntroReadMore)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro partners

\\n","line":23,"rawdescription":"\\nselect snapshot for landing page intro partners","modifierKind":[144]},{"name":"landingPageIntroTitle","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.LandingPageTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for Landing Page title

\\n","line":19,"rawdescription":"\\nselect snapshot for Landing Page title","modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for LandingPage Intro Behaviour: Web component

\\n","rawdescription":"\\nComponent for LandingPage Intro Behaviour: Web component","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { HraLandingPageIntroWcComponent } from \'@hra-ui/components/molecules\';\\nimport { ResourceRegistrySelectors as RRS } from \'@hra-ui/cdk/state\';\\nimport { selectQuerySnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceIds as RIds } from \'@hra-ui/state\';\\n\\n/** Component for LandingPage Intro Behaviour: Web component */\\n@Component({\\n selector: \'ftu-wc-intro\',\\n standalone: true,\\n imports: [CommonModule, HraLandingPageIntroWcComponent],\\n templateUrl: \'./hra-landing-page-intro-wc-behaviour.component.html\',\\n styleUrls: [\'./hra-landing-page-intro-wc-behaviour.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class HraLandingPageIntroWcBehaviourComponent {\\n /** select snapshot for Landing Page title */\\n readonly landingPageIntroTitle = selectQuerySnapshot(RRS.anyText, RIds.LandingPageTitle);\\n /** select snapshot for landing page intro description */\\n readonly landingPageIntroDescription = selectQuerySnapshot(RRS.markdown, RIds.LandingPageDescription);\\n /** select snapshot for landing page intro partners */\\n readonly landingPageIntroReadMore = selectQuerySnapshot(RRS.markdown, RIds.LandingPageIntroReadMore);\\n /** select snapshot for landing page intro partners */\\n readonly landingPageIntroPartners = selectQuerySnapshot(RRS.markdown, RIds.LandingPagePartners);\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n\\n .intro {\\n display: inline-grid;\\n border: 1px solid #e2e7e9;\\n padding: 24px 32px 24px 32px;\\n width: 71rem;\\n }\\n}\\n","styleUrl":"./hra-landing-page-intro-wc-behaviour.component.scss"}],"stylesData":"","templateData":"\\n"},{"name":"LandingPageContentComponent","id":"component-LandingPageContentComponent-d72615e2863b7f2f08c767452a75c71c9e079687610cd3e50b54f72f11546184f7ad55c5304741d79adb9bb9ea161cdac4253ae6fb1cbbf15040f2814110616a","file":"src/lib/landing-page-content/landing-page-content.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-landing-page-content","styleUrls":["./landing-page-content.component.scss"],"styles":[],"templateUrl":["./landing-page-content.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"intersectableEls","deprecated":false,"deprecationMessage":"","type":"QueryList","optional":false,"description":"

array of element refs for intersectables

\\n","line":34,"rawdescription":"\\narray of element refs for intersectables","decorators":[{"name":"ViewChildren","stringifiedArguments":"\'intersectable\', {read: ElementRef}"}],"modifierKind":[144]},{"name":"landingPageDepthDescription","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPageDepthDescription)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page depth description

\\n","line":57,"rawdescription":"\\nselect snapshot for landing page depth description","modifierKind":[144]},{"name":"landingPageDepthImg","defaultValue":"selectQuerySnapshot(RRS.url, RIds.LandingPageDepthImg)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page depth img

\\n","line":61,"rawdescription":"\\nselect snapshot for landing page depth img","modifierKind":[144]},{"name":"landingPageDepthMoreText","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.LandingPageDepthMoreText)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot forlanding page depth more text

\\n","line":59,"rawdescription":"\\nselect snapshot forlanding page depth more text","modifierKind":[144]},{"name":"landingPageDepthTitle","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.LandingPageDepthTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page depth title

\\n","line":55,"rawdescription":"\\nselect snapshot for landing page depth title","modifierKind":[144]},{"name":"landingPageIntroDescription","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPageDescription)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro description

\\n","line":40,"rawdescription":"\\nselect snapshot for landing page intro description","modifierKind":[144]},{"name":"landingPageIntroImg","defaultValue":"selectQuerySnapshot(RRS.url, RIds.LandingPageIntroImg)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro img

\\n","line":47,"rawdescription":"\\nselect snapshot for landing page intro img","modifierKind":[144]},{"name":"landingPageIntroMoreText","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.LandingPageIntroMoreText)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro more text

\\n","line":45,"rawdescription":"\\nselect snapshot for landing page intro more text","modifierKind":[144]},{"name":"landingPageIntroPartners","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPagePartners)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro partners

\\n","line":42,"rawdescription":"\\nselect snapshot for landing page intro partners","modifierKind":[144]},{"name":"landingPageIntroTitle","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.LandingPageTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for Landing Page title

\\n","line":37,"rawdescription":"\\nselect snapshot for Landing Page title","modifierKind":[144]},{"name":"LinkIds","defaultValue":"LinkIds","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Expose links for use it template

\\n","line":64,"rawdescription":"\\nExpose links for use it template","modifierKind":[144]},{"name":"metrics","defaultValue":"selectQuerySnapshot(RRS.field, RIds.Metrics, RTypes.Metrics, \'metrics\' as const, [])","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for metrics

\\n","line":49,"rawdescription":"\\nselect snapshot for metrics","modifierKind":[144]},{"name":"metricsLogo","defaultValue":"selectQuerySnapshot(RRS.url, RIds.MetricsLogo)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for metrics logo

\\n","line":53,"rawdescription":"\\nselect snapshot for metrics logo","modifierKind":[144]},{"name":"metricsTitle","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.MetricsTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for metrics title

\\n","line":51,"rawdescription":"\\nselect snapshot for metrics title","modifierKind":[144]}],"methodsClass":[{"name":"handleIntersection","args":[{"name":"entries","type":"IntersectionObserverEntry[]","deprecated":false,"deprecationMessage":""},{"name":"observer","type":"IntersectionObserver","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"void","typeParameters":[],"line":82,"deprecated":false,"deprecationMessage":"","rawdescription":"\\ncallback function for intersection observer","description":"

callback function for intersection observer

\\n","jsdoctags":[{"name":"entries","type":"IntersectionObserverEntry[]","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}},{"name":"observer","type":"IntersectionObserver","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for LandingPageContent Behavior

\\n","rawdescription":"\\nComponent for LandingPageContent Behavior","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport {\\n AfterViewInit,\\n ChangeDetectionStrategy,\\n Component,\\n ElementRef,\\n inject,\\n QueryList,\\n Renderer2,\\n ViewChildren,\\n} from \'@angular/core\';\\nimport { injectDestroy$, selectQuerySnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RRS } from \'@hra-ui/cdk/state\';\\nimport {\\n LandingPageInDepthComponent,\\n LandingPageIntroComponent,\\n MetricItem,\\n MetricsComponent,\\n} from \'@hra-ui/components/molecules\';\\nimport { LinkIds, ResourceIds as RIds, ResourceTypes as RTypes } from \'@hra-ui/state\';\\n\\n/** Component for LandingPageContent Behavior */\\n@Component({\\n selector: \'ftu-landing-page-content\',\\n standalone: true,\\n imports: [CommonModule, LandingPageIntroComponent, MetricsComponent, LandingPageInDepthComponent],\\n templateUrl: \'./landing-page-content.component.html\',\\n styleUrls: [\'./landing-page-content.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class LandingPageContentComponent implements AfterViewInit {\\n /** array of element refs for intersectables */\\n @ViewChildren(\'intersectable\', { read: ElementRef })\\n readonly intersectableEls!: QueryList;\\n\\n /** select snapshot for Landing Page title */\\n readonly landingPageIntroTitle = selectQuerySnapshot(RRS.anyText, RIds.LandingPageTitle);\\n\\n /** select snapshot for landing page intro description */\\n readonly landingPageIntroDescription = selectQuerySnapshot(RRS.markdown, RIds.LandingPageDescription);\\n /** select snapshot for landing page intro partners */\\n readonly landingPageIntroPartners = selectQuerySnapshot(RRS.markdown, RIds.LandingPagePartners);\\n\\n /** select snapshot for landing page intro more text */\\n readonly landingPageIntroMoreText = selectQuerySnapshot(RRS.anyText, RIds.LandingPageIntroMoreText);\\n /** select snapshot for landing page intro img */\\n readonly landingPageIntroImg = selectQuerySnapshot(RRS.url, RIds.LandingPageIntroImg);\\n /** select snapshot for metrics */\\n readonly metrics = selectQuerySnapshot(RRS.field, RIds.Metrics, RTypes.Metrics, \'metrics\' as const, []);\\n /** select snapshot for metrics title */\\n readonly metricsTitle = selectQuerySnapshot(RRS.anyText, RIds.MetricsTitle);\\n /** select snapshot for metrics logo */\\n readonly metricsLogo = selectQuerySnapshot(RRS.url, RIds.MetricsLogo);\\n /** select snapshot for landing page depth title */\\n readonly landingPageDepthTitle = selectQuerySnapshot(RRS.anyText, RIds.LandingPageDepthTitle);\\n /** select snapshot for landing page depth description */\\n readonly landingPageDepthDescription = selectQuerySnapshot(RRS.markdown, RIds.LandingPageDepthDescription);\\n /** select snapshot forlanding page depth more text */\\n readonly landingPageDepthMoreText = selectQuerySnapshot(RRS.anyText, RIds.LandingPageDepthMoreText);\\n /** select snapshot for landing page depth img */\\n readonly landingPageDepthImg = selectQuerySnapshot(RRS.url, RIds.LandingPageDepthImg);\\n\\n /** Expose links for use it template */\\n readonly LinkIds = LinkIds;\\n\\n /** Renderer to add class for animation */\\n private readonly renderer = inject(Renderer2);\\n /** destroys observer */\\n private readonly destroy$ = injectDestroy$();\\n\\n /** creates an observer after view init */\\n ngAfterViewInit(): void {\\n const observer = new IntersectionObserver(this.handleIntersection.bind(this), {\\n threshold: 0.18,\\n });\\n\\n this.intersectableEls.forEach((el) => observer.observe(el.nativeElement));\\n this.destroy$.subscribe(() => observer.disconnect());\\n }\\n\\n /** callback function for intersection observer */\\n handleIntersection(entries: IntersectionObserverEntry[], observer: IntersectionObserver): void {\\n for (const { isIntersecting, target } of entries) {\\n if (isIntersecting) {\\n this.renderer.addClass(target, \'visible\');\\n observer.unobserve(target);\\n }\\n }\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n overflow-x: hidden;\\n\\n .intro {\\n margin: 3.5rem 2rem;\\n }\\n\\n .metrics {\\n opacity: 0;\\n\\n &.visible {\\n animation: fadeIn 2s ease-in forwards;\\n }\\n }\\n\\n .in-depth {\\n opacity: 0;\\n\\n &.visible {\\n overflow: hidden;\\n animation: slideIn 2s ease-in-out forwards;\\n }\\n }\\n}\\n\\n@keyframes fadeIn {\\n 0% {\\n opacity: 0;\\n }\\n\\n 100% {\\n opacity: 1;\\n }\\n}\\n\\n@keyframes slideIn {\\n 0% {\\n transform: translateX(200%);\\n opacity: 1;\\n }\\n\\n 100% {\\n transform: translateX(0);\\n opacity: 1;\\n }\\n}\\n","styleUrl":"./landing-page-content.component.scss"}],"stylesData":"","implements":["AfterViewInit"],"templateData":"\\n\\n\\n\\n\\n\\n"},{"name":"MedicalIllustrationBehaviorComponent","id":"component-MedicalIllustrationBehaviorComponent-6fea78f0a6011315eef3ff0e9cf3f451130b68d93388f1b8ff7f362f6c7f2ec8bbad2f6518d0329f94a749b1e02a1018129acf2b8340f015397957c3e0fd985d","file":"src/lib/medical-illustration-behavior/medical-illustration-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-medical-illustration-behavior","styleUrls":["./medical-illustration-behavior.component.scss"],"styles":[],"templateUrl":["./medical-illustration-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"currentUrl","defaultValue":"selectSnapshot(IllustratorSelectors.url)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Current illustration url

\\n","line":23,"rawdescription":"\\n\\nCurrent illustration url\\n","modifierKind":[144]},{"name":"iri","defaultValue":"selectSnapshot(ActiveFtuSelectors.iri)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Iri of medical illustration behavior component

\\n","line":33,"rawdescription":"\\n\\nIri of medical illustration behavior component\\n","modifierKind":[144]},{"name":"mapping","defaultValue":"selectSnapshot(IllustratorSelectors.mapping)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Current mapping file

\\n","line":28,"rawdescription":"\\n\\nCurrent mapping file\\n","modifierKind":[144]},{"name":"tissues","defaultValue":"selectSnapshot(TissueLibrarySelectors.tissues)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Get all tissues

\\n","line":38,"rawdescription":"\\n\\nGet all tissues\\n","modifierKind":[144]},{"name":"updateNodeOnClicked","defaultValue":"dispatch(IllustratorActions.SetClicked)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Updates the active node on node click

\\n","line":57,"rawdescription":"\\n\\nUpdates the active node on node click\\n","modifierKind":[144]},{"name":"updateNodeOnHover","defaultValue":"dispatch(IllustratorActions.SetHover)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Updates the active node on node hover

\\n","line":52,"rawdescription":"\\n\\nUpdates the active node on node hover\\n","modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Behavior component for medical illustration component

\\n","rawdescription":"\\n\\nBehavior component for medical illustration component\\n","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component } from \'@angular/core\';\\nimport { dispatch, selectSnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { LabelBoxComponent } from \'@hra-ui/components/atoms\';\\nimport { InteractiveSvgComponent } from \'@hra-ui/components/molecules\';\\nimport { ActiveFtuSelectors, IllustratorActions, IllustratorSelectors, TissueLibrarySelectors } from \'@hra-ui/state\';\\n\\n/**\\n * Behavior component for medical illustration component\\n */\\n@Component({\\n selector: \'ftu-medical-illustration-behavior\',\\n standalone: true,\\n imports: [CommonModule, InteractiveSvgComponent, LabelBoxComponent],\\n templateUrl: \'./medical-illustration-behavior.component.html\',\\n styleUrls: [\'./medical-illustration-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class MedicalIllustrationBehaviorComponent {\\n /**\\n * Current illustration url\\n */\\n readonly currentUrl = selectSnapshot(IllustratorSelectors.url);\\n\\n /**\\n * Current mapping file\\n */\\n readonly mapping = selectSnapshot(IllustratorSelectors.mapping);\\n\\n /**\\n * Iri of medical illustration behavior component\\n */\\n readonly iri = selectSnapshot(ActiveFtuSelectors.iri);\\n\\n /**\\n * Get all tissues\\n */\\n readonly tissues = selectSnapshot(TissueLibrarySelectors.tissues);\\n\\n /**\\n * Gets tissue title from the list of tissues\\n */\\n get tissueTitle(): string {\\n const iri = this.iri();\\n const tissues = this.tissues();\\n return iri ? tissues[iri].label : \'\';\\n }\\n\\n /**\\n * Updates the active node on node hover\\n */\\n readonly updateNodeOnHover = dispatch(IllustratorActions.SetHover);\\n\\n /**\\n * Updates the active node on node click\\n */\\n readonly updateNodeOnClicked = dispatch(IllustratorActions.SetClicked);\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n hra-label-box {\\n border-bottom: 0.063rem solid #d3d3d3;\\n width: 100%;\\n height: 3.5rem;\\n }\\n}\\n","styleUrl":"./medical-illustration-behavior.component.scss"}],"stylesData":"","accessors":{"tissueTitle":{"name":"tissueTitle","getSignature":{"name":"tissueTitle","type":"string","returnType":"string","line":43,"rawdescription":"\\n\\nGets tissue title from the list of tissues\\n","description":"

Gets tissue title from the list of tissues

\\n"}}},"templateData":"{{ tissueTitle }}\\n\\n\\n"},{"name":"ScreenNoticeBehaviorComponent","id":"component-ScreenNoticeBehaviorComponent-de4fc156bf7f658d9ca0a8d114626d829387a03f3b206cb5439f1ad22b9e157cbc51e850b06eb8f0b9dd48a75acb723b42c7fd79d0c50694757e9d23cac9f416","file":"src/lib/screen-notice-behavior/screen-notice-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-ui-screen-notice-behavior","styleUrls":["./screen-notice-behavior.component.scss"],"styles":[],"templateUrl":["./screen-notice-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"content","defaultValue":"selectQuerySnapshot(RR.anyText, ResourceIds.ScreenSizeNoticeContent)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Content of screen notice behavior component

\\n","line":21,"rawdescription":"\\nContent of screen notice behavior component","modifierKind":[144]},{"name":"portal","defaultValue":"LinkIds.Portal","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Hra portal link routing after clicking on HRA Portal

\\n","line":24,"rawdescription":"\\nHra portal link routing after clicking on HRA Portal","modifierKind":[144]}],"methodsClass":[{"name":"close","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":33,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which closes the screen size notice dialog box","description":"

A function which closes the screen size notice dialog box

\\n"}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

A component for screen size notice behavior which provides the content to be displayed and provides functionality\\nfor the buttons on the notice modal

\\n","rawdescription":"\\nA component for screen size notice behavior which provides the content to be displayed and provides functionality\\nfor the buttons on the notice modal","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, inject } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { dispatch, selectQuerySnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RR, StorageActions, StorageId } from \'@hra-ui/cdk/state\';\\nimport { ResourceIds, LinkIds } from \'@hra-ui/state\';\\nimport { ScreenSizeNoticeComponent } from \'@hra-ui/components/molecules\';\\nimport { MatDialogRef } from \'@angular/material/dialog\';\\n\\n/** A component for screen size notice behavior which provides the content to be displayed and provides functionality\\n * for the buttons on the notice modal */\\n@Component({\\n selector: \'ftu-ui-screen-notice-behavior\',\\n standalone: true,\\n imports: [CommonModule, ScreenSizeNoticeComponent],\\n templateUrl: \'./screen-notice-behavior.component.html\',\\n styleUrls: [\'./screen-notice-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class ScreenNoticeBehaviorComponent {\\n /** Content of screen notice behavior component*/\\n readonly content = selectQuerySnapshot(RR.anyText, ResourceIds.ScreenSizeNoticeContent);\\n\\n /** Hra portal link routing after clicking on HRA Portal*/\\n readonly portal = LinkIds.Portal;\\n\\n /** Reference for the screen size notice dialog box*/\\n private readonly ref = inject(MatDialogRef, { optional: true });\\n\\n /** A dispatcher function that sets the Local Storage as \'shown\'*/\\n private readonly setScreenNoticeShown = dispatch(StorageActions.Set, StorageId.Local, \'screen-size-notice\', \'shown\');\\n\\n /** A function which closes the screen size notice dialog box*/\\n close(): void {\\n this.setScreenNoticeShown();\\n this.ref?.close();\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n}\\n","styleUrl":"./screen-notice-behavior.component.scss"}],"stylesData":"","templateData":" \\n"},{"name":"TissueLibraryBehaviorComponent","id":"component-TissueLibraryBehaviorComponent-1565978e9f70870b546b49f929236ee86c2eb9cc241e10b805863df59e4d66dca72495ffa8c27a7f282e396acc84f78b6724255570a4eab733a3af995543b47a","file":"src/lib/tissue-library-behavior/tissue-library-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-tissue-library-behavior","styleUrls":["./tissue-library-behavior.component.scss"],"styles":[],"templateUrl":["./tissue-library-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"list","deprecated":false,"deprecationMessage":"","type":"TissueTreeListComponent","optional":true,"description":"

Reference to the TissueTreeListComponent.

\\n","line":25,"rawdescription":"\\n\\nReference to the TissueTreeListComponent.\\n","decorators":[{"name":"ViewChild","stringifiedArguments":"\'list\', {static: true}"}],"modifierKind":[144]},{"name":"selected","deprecated":false,"deprecationMessage":"","type":"Tissue","optional":true,"description":"

Selected of tissue library behavior component

\\n","line":34,"rawdescription":"\\n\\nSelected of tissue library behavior component\\n"},{"name":"tissues","defaultValue":"selectSnapshot(TissueLibrarySelectors.tissues)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for tissues data

\\n","line":30,"rawdescription":"\\n\\nInput for tissues data\\n","modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for Tissue Library Behavior

\\n","rawdescription":"\\n\\nComponent for Tissue Library Behavior\\n","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, ViewChild } from \'@angular/core\';\\nimport { select$, selectSnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { TissueTreeListComponent } from \'@hra-ui/components/molecules\';\\nimport { Tissue } from \'@hra-ui/services\';\\nimport { ActiveFtuSelectors, TissueLibrarySelectors } from \'@hra-ui/state\';\\nimport { LabelBoxComponent } from \'@hra-ui/components/atoms\';\\n\\n/**\\n * Component for Tissue Library Behavior\\n */\\n@Component({\\n selector: \'ftu-tissue-library-behavior\',\\n standalone: true,\\n imports: [CommonModule, LabelBoxComponent, TissueTreeListComponent],\\n templateUrl: \'./tissue-library-behavior.component.html\',\\n styleUrls: [\'./tissue-library-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class TissueLibraryBehaviorComponent {\\n /**\\n * Reference to the TissueTreeListComponent.\\n */\\n @ViewChild(\'list\', { static: true })\\n readonly list?: TissueTreeListComponent;\\n\\n /**\\n * Input for tissues data\\n */\\n readonly tissues = selectSnapshot(TissueLibrarySelectors.tissues);\\n /**\\n * Selected of tissue library behavior component\\n */\\n selected?: Tissue;\\n\\n /**\\n * Sets the TissueItem instance as undefined if\\n * the url is undefined\\n */\\n constructor() {\\n /** Get iris from the observable else reset selection if\\n * iri is undefined\\n */\\n select$(ActiveFtuSelectors.iri).subscribe((iri) => {\\n this.selected = iri && this.tissues()[iri];\\n if (iri === undefined) {\\n this.list?.resetSelection();\\n }\\n });\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n .label {\\n border-bottom: 1px solid #e2e7e9;\\n width: 100%;\\n height: 3.5rem;\\n }\\n}\\n","styleUrl":"./tissue-library-behavior.component.scss"}],"stylesData":"","constructorObj":{"name":"constructor","description":"

Sets the TissueItem instance as undefined if\\nthe url is undefined

\\n","deprecated":false,"deprecationMessage":"","args":[],"line":34,"rawdescription":"\\n\\nSets the TissueItem instance as undefined if\\nthe url is undefined\\n"},"templateData":"FTU Library\\n \\n"}],"modules":[],"miscellaneous":{"variables":[{"name":"EMPTY_TISSUE_INFO","ctype":"miscellaneous","subtype":"variable","file":"src/lib/biomarker-details/biomarker-details.component.ts","deprecated":false,"deprecationMessage":"","type":"TissueInfo","defaultValue":"{\\n id: \'\',\\n label: \'\',\\n}","rawdescription":"PlaceHolder for Empty Tissue Info","description":"

PlaceHolder for Empty Tissue Info

\\n"},{"name":"EMPTY_TISSUE_INFO","ctype":"miscellaneous","subtype":"variable","file":"src/lib/biomarker-details-wc/biomarker-details-wc.component.ts","deprecated":false,"deprecationMessage":"","type":"TissueInfo","defaultValue":"{\\n id: \'\',\\n label: \'\',\\n}","rawdescription":"PlaceHolder for Empty Tissue Info","description":"

PlaceHolder for Empty Tissue Info

\\n"}],"functions":[],"typealiases":[],"enumerations":[],"groupedVariables":{"src/lib/biomarker-details/biomarker-details.component.ts":[{"name":"EMPTY_TISSUE_INFO","ctype":"miscellaneous","subtype":"variable","file":"src/lib/biomarker-details/biomarker-details.component.ts","deprecated":false,"deprecationMessage":"","type":"TissueInfo","defaultValue":"{\\n id: \'\',\\n label: \'\',\\n}","rawdescription":"PlaceHolder for Empty Tissue Info","description":"

PlaceHolder for Empty Tissue Info

\\n"}],"src/lib/biomarker-details-wc/biomarker-details-wc.component.ts":[{"name":"EMPTY_TISSUE_INFO","ctype":"miscellaneous","subtype":"variable","file":"src/lib/biomarker-details-wc/biomarker-details-wc.component.ts","deprecated":false,"deprecationMessage":"","type":"TissueInfo","defaultValue":"{\\n id: \'\',\\n label: \'\',\\n}","rawdescription":"PlaceHolder for Empty Tissue Info","description":"

PlaceHolder for Empty Tissue Info

\\n"}]},"groupedFunctions":{},"groupedEnumerations":{},"groupedTypeAliases":{}}}')},"./dist/compodoc/components-molecules/documentation.json":module=>{"use strict";module.exports=JSON.parse('{"pipes":[],"interfaces":[{"name":"ContactData","id":"interface-ContactData-309310b2740da63be5ea5aaa894ef73ced8bed2a86b50643af4dd031551d6cdb7b26ece6b3328d0e31c21e46f940bd8b901f5665c241ca2a4cb38f39631bd8a3","file":"src/lib/contact-modal/contact-modal.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EmailInputComponent, RequiredInputComponent, RequiredTextboxComponent } from \'@hra-ui/components/atoms\';\\nimport { produce } from \'immer\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/**\\n An interface representing contact data information which will be emitted if all the fields are in correct format.\\n */\\nexport interface ContactData {\\n /** The email address of the person submitting the form. */\\n email: string;\\n /** The subject line of the message being sent. */\\n subject: string;\\n /** The body of the message being sent. */\\n message: string;\\n}\\n\\n/** Initial empty contact data */\\nconst EMPTY_CONTACT_DATA: Partial = {\\n email: undefined,\\n subject: undefined,\\n message: undefined,\\n};\\n\\n/**\\n * Contact modal component.\\n */\\n@Component({\\n selector: \'hra-contact-modal\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatButtonModule,\\n MatIconModule,\\n EmailInputComponent,\\n MarkdownModule,\\n RequiredTextboxComponent,\\n RequiredInputComponent,\\n ],\\n templateUrl: \'./contact-modal.component.html\',\\n styleUrls: [\'./contact-modal.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class ContactModalComponent {\\n /** Input for product logo URL to displayed on the left side. */\\n @Input() productLogoUrl = \'\';\\n\\n /** Input for product title to displayed on the left side. */\\n @Input() productTitle = \'\';\\n\\n /** Emits when the submit button is clicked and all the values are appropriate. */\\n @Output() readonly submitClick = new EventEmitter();\\n\\n /** Emits when the cancel button or close icon is clicked */\\n @Output() readonly closeClick = new EventEmitter();\\n\\n /** A function to disable the submit button. If all the values are in approproiate format, then it will be enabled. */\\n get disableSubmit(): boolean {\\n return Object.values(this.contactData).some((value) => value === undefined);\\n }\\n\\n /** Asigns the undefined initially to all the input fields. */\\n contactData = EMPTY_CONTACT_DATA;\\n\\n /** Updates the contact data object with a new value for a given key. */\\n updateData(key: K, value?: ContactData[K]): void {\\n this.contactData = produce(this.contactData, (draft) => {\\n draft[key] = value;\\n });\\n }\\n\\n /** It emits the updated value of contact data */\\n submit(): void {\\n this.submitClick.emit(this.contactData as ContactData);\\n }\\n}\\n","properties":[{"name":"email","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

The email address of the person submitting the form.

\\n","line":14,"rawdescription":"\\nThe email address of the person submitting the form."},{"name":"message","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

The body of the message being sent.

\\n","line":18,"rawdescription":"\\nThe body of the message being sent."},{"name":"subject","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

The subject line of the message being sent.

\\n","line":16,"rawdescription":"\\nThe subject line of the message being sent."}],"indexSignatures":[],"kind":165,"description":"

An interface representing contact data information which will be emitted if all the fields are in correct format.

\\n","rawdescription":"\\n\\nAn interface representing contact data information which will be emitted if all the fields are in correct format.\\n","methods":[]},{"name":"DataItem","id":"interface-DataItem-dba50a1e9cbac5f9733930bd6b04d1ac5fda31ee6342e13da75314f7b5dbbf46c436aab104bfc47abdc323e9ff42aeeb0047ee89577f639d3979c6964344bbd7","file":"src/lib/biomarker-table-data-card/biomarker-table-data-card.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule } from \'@angular/material/table\';\\n\\n/** An item which defines a string label and a string value */\\nexport interface DataItem {\\n /** A string property that represents the label */\\n label: string;\\n /** A string property that represents the value */\\n value: string;\\n}\\n\\n/** An item which represents a section with a data item and an indicator for the last item in the section */\\nexport interface SectionItem {\\n /** A number property that represents the section number */\\n section: number;\\n /** A DateItem property that represents a section and its data */\\n data: DataItem;\\n /** A boolean property that represents the last item of a section */\\n isLastItem: boolean;\\n}\\n\\n/** This component displays a table with sections, where each section contains a list of items with a label and a value. */\\n@Component({\\n selector: \'hra-biomarker-table-data-card\',\\n standalone: true,\\n imports: [CommonModule, MatTableModule],\\n templateUrl: \'./biomarker-table-data-card.component.html\',\\n styleUrls: [\'./biomarker-table-data-card.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableDataCardComponent implements OnChanges {\\n /** Nested list of DataItems for each section which is displayed to the user */\\n @Input() data: DataItem[][] = [];\\n\\n /** Converted nested array of DataItem into Flat array of SectionItem */\\n sectionItems: SectionItem[] = [];\\n\\n /** Triggers an update on sectionItems array when data is changed */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.updateSectionItems();\\n }\\n }\\n\\n /** Updates sectionItems array when data is changed */\\n private updateSectionItems(): void {\\n const newSectionItems: SectionItem[] = [];\\n\\n this.data.forEach((section, sectionIndex) => {\\n section.forEach((item, itemIndex) => {\\n newSectionItems.push({\\n data: item,\\n section: sectionIndex,\\n isLastItem: itemIndex === section.length - 1,\\n });\\n });\\n });\\n\\n this.sectionItems = newSectionItems;\\n }\\n}\\n","properties":[{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

A string property that represents the label

\\n","line":8,"rawdescription":"\\nA string property that represents the label"},{"name":"value","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

A string property that represents the value

\\n","line":10,"rawdescription":"\\nA string property that represents the value"}],"indexSignatures":[],"kind":165,"description":"

An item which defines a string label and a string value

\\n","rawdescription":"\\nAn item which defines a string label and a string value","methods":[]},{"name":"DataNode","id":"interface-DataNode-8544338e8c5e11dd440f8b104bfa31552155bc5006289770258a8e940978177df7797adcb9bafb5b09a9943913ecf339692d528f868c6846be5c3de8a6270237","file":"src/lib/tissue-tree-list/tissue-tree-list.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { FlatTreeControl } from \'@angular/cdk/tree\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n Input,\\n OnChanges,\\n Output,\\n SimpleChanges,\\n} from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatRippleModule } from \'@angular/material/core\';\\nimport { MatExpansionModule } from \'@angular/material/expansion\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatTreeFlatDataSource, MatTreeFlattener, MatTreeModule } from \'@angular/material/tree\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { LinkId } from \'@hra-ui/cdk/state\';\\n\\n/** Base node type */\\nexport interface DataNode {\\n /** User readable label */\\n label: string;\\n /** Id to pass as a query parameter on navigation */\\n id?: string;\\n /** Link to navigate to on node click */\\n link?: LinkId;\\n /** Nested nodes */\\n children?: K[];\\n}\\n\\n/**\\n * Internal interface for flat tissue data hierarchy\\n */\\ninterface InternalNode> {\\n /** Displayed label */\\n label: string;\\n /** Whether the node can be expanded to display child nodes */\\n expandable: boolean;\\n /** Depth of node in the tree */\\n level: number;\\n /** Associated user node data */\\n data: T;\\n}\\n\\n/**\\n * Tabular View for hubMap tissue side-bar\\n */\\n@Component({\\n selector: \'hra-tissue-tree-list\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatButtonModule,\\n MatTreeModule,\\n MatIconModule,\\n MatExpansionModule,\\n MatRippleModule,\\n LinkDirective,\\n ],\\n templateUrl: \'./tissue-tree-list.component.html\',\\n styleUrls: [\'./tissue-tree-list.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class TissueTreeListComponent> implements OnChanges {\\n /**\\n * Input of tissue tree list component\\n */\\n @Input() nodes: Record = {} as Record;\\n\\n /**\\n * Node selected, to view the data associated with it\\n */\\n @Input() selected?: T = undefined;\\n\\n /**\\n * Output of tissue tree list component\\n */\\n @Output() readonly selectedChange = new EventEmitter();\\n\\n /**\\n * tree controller, used to control the nodes in the tree\\n */\\n readonly control = new FlatTreeControl>(\\n (node) => node.level,\\n (node) => node.expandable\\n );\\n\\n /**\\n * Flattener of tissue tree list component, returns flat-data structure\\n */\\n readonly flattener = new MatTreeFlattener>(\\n (node, level) => ({\\n label: node.label,\\n expandable: (node.children?.length ?? 0) > 0,\\n level,\\n data: node,\\n }),\\n (node) => node.level,\\n (node) => node.expandable,\\n (node) => node.children?.map((id) => this.nodes[id])\\n );\\n\\n /**\\n * Data source of tissue tree list component, defines the data in mat-tree\\n */\\n readonly dataSource = new MatTreeFlatDataSource(this.control, this.flattener);\\n\\n /**\\n * Take actions if any data changes\\n * @param changes changes in data\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'nodes\' in changes) {\\n this.dataSource.data = this.findRootNodes();\\n }\\n if (\'selected\' in changes) {\\n const path = this.selected ? this.dfsFindPath(this.findRootNodes(), this.selected) : [];\\n this.expandPath(path);\\n }\\n }\\n\\n /**\\n * check if the current node has children\\n * @param node current selected node\\n * @returns boolean, which means if node has children\\n */\\n hasChild(_: number, node: InternalNode): boolean {\\n return node.expandable;\\n }\\n\\n /**\\n * It selects the node, which is clicked.\\n * @param node Tissue Tree Item, which is clicked\\n */\\n selectNode(node: T): void {\\n if (this.selected !== node) {\\n this.selected = node;\\n this.selectedChange.emit(this.selected);\\n }\\n }\\n\\n /**\\n * Resets selection and collapes all nodes of the tree.\\n */\\n resetSelection(): void {\\n this.selected = undefined;\\n this.control.collapseAll();\\n }\\n\\n /**\\n * It creates a copy of the input nodes object.\\n * It iterates over it and removes all the children nodes from it.\\n * @returns remaining nodes which are root nodes.\\n */\\n private findRootNodes(): T[] {\\n const { nodes } = this;\\n const roots = { ...this.nodes };\\n for (const key in nodes) {\\n for (const child of nodes[key].children ?? []) {\\n delete roots[child];\\n }\\n }\\n\\n return Object.values(roots);\\n }\\n\\n /**\\n * expands the tree nodes based on the path provided.\\n * @param path is given as an input.\\n */\\n private expandPath(path: DataNode[]): void {\\n const nodes = this.control.dataNodes.filter((node) => path.includes(node.data));\\n nodes.forEach((node) => this.control.expand(node));\\n }\\n\\n /**\\n * It used the logic of depth first search to find the target node.\\n * returns the path to the target node.\\n */\\n private dfsFindPath(nodes: T[], target: T, path: T[] = []): T[] {\\n for (const node of nodes) {\\n path.push(node);\\n if (node === target) {\\n return path;\\n }\\n\\n const savedLength = path.length;\\n const children = node.children?.map((id) => this.nodes[id]) ?? [];\\n if (this.dfsFindPath(children, target, path).length > savedLength) {\\n return path;\\n }\\n\\n path.pop();\\n }\\n\\n return path;\\n }\\n}\\n","properties":[{"name":"children","deprecated":false,"deprecationMessage":"","type":"K[]","optional":true,"description":"

Nested nodes

\\n","line":29,"rawdescription":"\\nNested nodes"},{"name":"id","deprecated":false,"deprecationMessage":"","type":"string","optional":true,"description":"

Id to pass as a query parameter on navigation

\\n","line":25,"rawdescription":"\\nId to pass as a query parameter on navigation"},{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

User readable label

\\n","line":23,"rawdescription":"\\nUser readable label"},{"name":"link","deprecated":false,"deprecationMessage":"","type":"LinkId","optional":true,"description":"

Link to navigate to on node click

\\n","line":27,"rawdescription":"\\nLink to navigate to on node click"}],"indexSignatures":[],"kind":165,"description":"

Base node type

\\n","rawdescription":"\\nBase node type","methods":[]},{"name":"DownloadFormat","id":"interface-DownloadFormat-45c5a61fc5d68c201808fb76ff867f9a7cf8e42e6ef95ae08b440dbd37ce63eb4c77c3da0597ef90973854d65522a3ba496eeb5eccbe75750c1fd2f5abf52e6b","file":"src/lib/footer/footer.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { ConnectedPosition, OverlayModule } from \'@angular/cdk/overlay\';\\nimport { MatListModule } from \'@angular/material/list\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { EMPTY_LINK } from \'@hra-ui/cdk/state\';\\n\\n/**\\n * Base type for different download format options.\\n */\\nexport interface DownloadFormat {\\n /**\\n * User readable format label\\n */\\n label: string;\\n}\\n\\n/**\\n * Positioning value for the download list popup\\n */\\nconst DOWNLOADS_LIST_POSITION: ConnectedPosition[] = [\\n {\\n panelClass: \'above\',\\n originX: \'start\',\\n originY: \'top\',\\n overlayX: \'start\',\\n overlayY: \'bottom\',\\n offsetY: 0,\\n },\\n {\\n panelClass: \'below\',\\n originX: \'start\',\\n originY: \'bottom\',\\n overlayX: \'start\',\\n overlayY: \'top\',\\n },\\n];\\n\\n/**\\n * Component for footer that displays its content at the bottom of the page with different action buttons.\\n */\\n@Component({\\n selector: \'hra-footer\',\\n standalone: true,\\n imports: [CommonModule, MatButtonModule, MatIconModule, OverlayModule, MatListModule, LinkDirective],\\n templateUrl: \'./footer.component.html\',\\n styleUrls: [\'./footer.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class FooterComponent {\\n /** Host binding of footer component */\\n @HostBinding(\'class\')\\n @Input()\\n size: \'small\' | \'large\' = \'large\';\\n\\n /** Input for product logo URL to displayed on the left side. */\\n @Input() productLogoUrl = \'\';\\n\\n /** Input for product title to displayed on the left side. */\\n @Input() productTitle = \'\';\\n\\n /** Input for HRA Portal link */\\n @Input() hraPortal = EMPTY_LINK;\\n\\n /** Input for Illustration metadata page link in HRA Portal */\\n @Input() illustrationMetadata = EMPTY_LINK;\\n\\n /** Input for embed link in HRA Portal */\\n @Input() embed = EMPTY_LINK;\\n\\n /** Different download formats options displayed to the user */\\n @Input() downloadFormats: T[] = [];\\n\\n /** Emits the selected download format */\\n @Output() readonly download = new EventEmitter();\\n\\n /** Emits when the contact button is clicked */\\n @Output() readonly contactClick = new EventEmitter();\\n\\n /** Download list popup overlay positioning */\\n readonly DOWNLOADS_LIST_POSITION = DOWNLOADS_LIST_POSITION;\\n\\n /** Gets whether the footer required is small */\\n get isSmall(): boolean {\\n return this.size === \'small\';\\n }\\n\\n /** Whether the download list panel is open */\\n downloadListOpen = false;\\n}\\n","properties":[{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

User readable format label

\\n","line":17,"rawdescription":"\\n\\nUser readable format label\\n"}],"indexSignatures":[],"kind":165,"description":"

Base type for different download format options.

\\n","rawdescription":"\\n\\nBase type for different download format options.\\n","methods":[]},{"name":"InternalNode","id":"interface-InternalNode-8544338e8c5e11dd440f8b104bfa31552155bc5006289770258a8e940978177df7797adcb9bafb5b09a9943913ecf339692d528f868c6846be5c3de8a6270237","file":"src/lib/tissue-tree-list/tissue-tree-list.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { FlatTreeControl } from \'@angular/cdk/tree\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n Input,\\n OnChanges,\\n Output,\\n SimpleChanges,\\n} from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatRippleModule } from \'@angular/material/core\';\\nimport { MatExpansionModule } from \'@angular/material/expansion\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatTreeFlatDataSource, MatTreeFlattener, MatTreeModule } from \'@angular/material/tree\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { LinkId } from \'@hra-ui/cdk/state\';\\n\\n/** Base node type */\\nexport interface DataNode {\\n /** User readable label */\\n label: string;\\n /** Id to pass as a query parameter on navigation */\\n id?: string;\\n /** Link to navigate to on node click */\\n link?: LinkId;\\n /** Nested nodes */\\n children?: K[];\\n}\\n\\n/**\\n * Internal interface for flat tissue data hierarchy\\n */\\ninterface InternalNode> {\\n /** Displayed label */\\n label: string;\\n /** Whether the node can be expanded to display child nodes */\\n expandable: boolean;\\n /** Depth of node in the tree */\\n level: number;\\n /** Associated user node data */\\n data: T;\\n}\\n\\n/**\\n * Tabular View for hubMap tissue side-bar\\n */\\n@Component({\\n selector: \'hra-tissue-tree-list\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatButtonModule,\\n MatTreeModule,\\n MatIconModule,\\n MatExpansionModule,\\n MatRippleModule,\\n LinkDirective,\\n ],\\n templateUrl: \'./tissue-tree-list.component.html\',\\n styleUrls: [\'./tissue-tree-list.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class TissueTreeListComponent> implements OnChanges {\\n /**\\n * Input of tissue tree list component\\n */\\n @Input() nodes: Record = {} as Record;\\n\\n /**\\n * Node selected, to view the data associated with it\\n */\\n @Input() selected?: T = undefined;\\n\\n /**\\n * Output of tissue tree list component\\n */\\n @Output() readonly selectedChange = new EventEmitter();\\n\\n /**\\n * tree controller, used to control the nodes in the tree\\n */\\n readonly control = new FlatTreeControl>(\\n (node) => node.level,\\n (node) => node.expandable\\n );\\n\\n /**\\n * Flattener of tissue tree list component, returns flat-data structure\\n */\\n readonly flattener = new MatTreeFlattener>(\\n (node, level) => ({\\n label: node.label,\\n expandable: (node.children?.length ?? 0) > 0,\\n level,\\n data: node,\\n }),\\n (node) => node.level,\\n (node) => node.expandable,\\n (node) => node.children?.map((id) => this.nodes[id])\\n );\\n\\n /**\\n * Data source of tissue tree list component, defines the data in mat-tree\\n */\\n readonly dataSource = new MatTreeFlatDataSource(this.control, this.flattener);\\n\\n /**\\n * Take actions if any data changes\\n * @param changes changes in data\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'nodes\' in changes) {\\n this.dataSource.data = this.findRootNodes();\\n }\\n if (\'selected\' in changes) {\\n const path = this.selected ? this.dfsFindPath(this.findRootNodes(), this.selected) : [];\\n this.expandPath(path);\\n }\\n }\\n\\n /**\\n * check if the current node has children\\n * @param node current selected node\\n * @returns boolean, which means if node has children\\n */\\n hasChild(_: number, node: InternalNode): boolean {\\n return node.expandable;\\n }\\n\\n /**\\n * It selects the node, which is clicked.\\n * @param node Tissue Tree Item, which is clicked\\n */\\n selectNode(node: T): void {\\n if (this.selected !== node) {\\n this.selected = node;\\n this.selectedChange.emit(this.selected);\\n }\\n }\\n\\n /**\\n * Resets selection and collapes all nodes of the tree.\\n */\\n resetSelection(): void {\\n this.selected = undefined;\\n this.control.collapseAll();\\n }\\n\\n /**\\n * It creates a copy of the input nodes object.\\n * It iterates over it and removes all the children nodes from it.\\n * @returns remaining nodes which are root nodes.\\n */\\n private findRootNodes(): T[] {\\n const { nodes } = this;\\n const roots = { ...this.nodes };\\n for (const key in nodes) {\\n for (const child of nodes[key].children ?? []) {\\n delete roots[child];\\n }\\n }\\n\\n return Object.values(roots);\\n }\\n\\n /**\\n * expands the tree nodes based on the path provided.\\n * @param path is given as an input.\\n */\\n private expandPath(path: DataNode[]): void {\\n const nodes = this.control.dataNodes.filter((node) => path.includes(node.data));\\n nodes.forEach((node) => this.control.expand(node));\\n }\\n\\n /**\\n * It used the logic of depth first search to find the target node.\\n * returns the path to the target node.\\n */\\n private dfsFindPath(nodes: T[], target: T, path: T[] = []): T[] {\\n for (const node of nodes) {\\n path.push(node);\\n if (node === target) {\\n return path;\\n }\\n\\n const savedLength = path.length;\\n const children = node.children?.map((id) => this.nodes[id]) ?? [];\\n if (this.dfsFindPath(children, target, path).length > savedLength) {\\n return path;\\n }\\n\\n path.pop();\\n }\\n\\n return path;\\n }\\n}\\n","properties":[{"name":"data","deprecated":false,"deprecationMessage":"","type":"T","optional":false,"description":"

Associated user node data

\\n","line":43,"rawdescription":"\\nAssociated user node data"},{"name":"expandable","deprecated":false,"deprecationMessage":"","type":"boolean","optional":false,"description":"

Whether the node can be expanded to display child nodes

\\n","line":39,"rawdescription":"\\nWhether the node can be expanded to display child nodes"},{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Displayed label

\\n","line":37,"rawdescription":"\\nDisplayed label"},{"name":"level","deprecated":false,"deprecationMessage":"","type":"number","optional":false,"description":"

Depth of node in the tree

\\n","line":41,"rawdescription":"\\nDepth of node in the tree"}],"indexSignatures":[],"kind":165,"description":"

Internal interface for flat tissue data hierarchy

\\n","rawdescription":"\\n\\nInternal interface for flat tissue data hierarchy\\n","methods":[]},{"name":"MetricItem","id":"interface-MetricItem-e52c0a1cdf090042d1924c4907a4034774cbb442217faca9ec5035e76d2796116cf55644ecf49ae040fdea1168f9c5d99f6ce15b2079f70de3d853fece481b30","file":"src/lib/metrics/metrics.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\n\\n/**\\n An interface representing a single metric with an icon, value and description.\\n */\\nexport interface MetricItem {\\n /** Represents the icon associated with the metric. */\\n icon: string;\\n /** Describes the numberical value of the metric. */\\n value: string;\\n /** Describes the type of metric. */\\n description: string;\\n}\\n/**\\n * Describes the metrics for the HuBMAP project.\\n */\\n@Component({\\n selector: \'hra-metrics\',\\n standalone: true,\\n imports: [CommonModule],\\n templateUrl: \'./metrics.component.html\',\\n styleUrls: [\'./metrics.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class MetricsComponent {\\n /** Main title of metrics component. */\\n @Input() title = \'\';\\n\\n /** Logo of metrics component. */\\n @Input() logo = \'\';\\n\\n /** List of metrics that will be shown to the user. */\\n @Input() metrics: MetricItem[] = [];\\n}\\n","properties":[{"name":"description","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Describes the type of metric.

\\n","line":13,"rawdescription":"\\nDescribes the type of metric."},{"name":"icon","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Represents the icon associated with the metric.

\\n","line":9,"rawdescription":"\\nRepresents the icon associated with the metric."},{"name":"value","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Describes the numberical value of the metric.

\\n","line":11,"rawdescription":"\\nDescribes the numberical value of the metric."}],"indexSignatures":[],"kind":165,"description":"

An interface representing a single metric with an icon, value and description.

\\n","rawdescription":"\\n\\nAn interface representing a single metric with an icon, value and description.\\n","methods":[]},{"name":"NodeMapEntry","id":"interface-NodeMapEntry-34dafc0493fcadf92dd676bebad498e3798e87879ccd7ab9c56dfb6b52cf51b41a6b132fa4c00fa2f32867f3f84829bef3163da37de19cf480f10a8cd94e74f1","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ConnectedPosition, OverlayModule } from \'@angular/cdk/overlay\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n inject,\\n Input,\\n OnChanges,\\n OnDestroy,\\n Output,\\n Renderer2,\\n SimpleChanges,\\n ViewEncapsulation,\\n} from \'@angular/core\';\\nimport { TooltipComponent } from \'@hra-ui/components/atoms\';\\nimport { InlineSVGModule, SVGScriptEvalMode } from \'ng-inline-svg-2\';\\nimport { BehaviorSubject, debounce, fromEventPattern, Observable, Subject, takeUntil, timer } from \'rxjs\';\\nimport { NodeEventHandler } from \'rxjs/internal/observable/fromEvent\';\\n\\n/** Delay before tooltip becomes visible */\\nconst HOVER_DELAY = 200;\\n\\n/** Tooltip position settings */\\nconst TOOLTIP_POSITIONS: ConnectedPosition[] = [\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'start\',\\n overlayY: \'center\',\\n offsetX: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'end\',\\n overlayY: \'center\',\\n offsetX: -8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'top\',\\n offsetY: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'bottom\',\\n offsetY: -8,\\n },\\n];\\n\\n/** Node tooltip data */\\nexport interface NodeTooltipData {\\n /** Node name */\\n node: string;\\n /** Center point of hovered node in screen coordinates */\\n origin: { x: number; y: number };\\n}\\n\\n/** Interface for node entries */\\nexport interface NodeMapEntry {\\n /** Node label */\\n label: string;\\n /** Node id in svg */\\n id: string;\\n /** Ontology id of cell type */\\n ontologyId: string;\\n}\\n\\n/**\\n * Interactive SVG component\\n */\\n@Component({\\n selector: \'hra-interactive-svg\',\\n standalone: true,\\n imports: [CommonModule, InlineSVGModule, OverlayModule, TooltipComponent],\\n templateUrl: \'./interactive-svg.component.html\',\\n styleUrls: [\'./interactive-svg.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n encapsulation: ViewEncapsulation.ShadowDom,\\n})\\nexport class InteractiveSvgComponent implements OnChanges, OnDestroy {\\n /** SVG url */\\n @Input() url?: string;\\n\\n /** Mapping info */\\n @Input() mapping: T[] = [];\\n\\n /** Highlighted ontology id */\\n @Input() highlightId?: string;\\n\\n /** Emits node id when hovered */\\n @Output() readonly nodeHover = new EventEmitter();\\n\\n /** Emits node id when clicked */\\n @Output() readonly nodeClick = new EventEmitter();\\n\\n /** SVG script eval mode */\\n readonly NEVER_EVAL_SCRIPTS = SVGScriptEvalMode.NEVER;\\n\\n /** Tooltip position settings */\\n readonly TOOLTIP_POSITIONS = TOOLTIP_POSITIONS;\\n\\n /** Observable of node hover data or undefined when there is no active hover */\\n readonly nodeHoverData$ = new BehaviorSubject(undefined);\\n\\n /** Observable of node hover with a timer */\\n readonly nodeHoverDelayedData$ = this.nodeHoverData$.pipe(debounce((event) => timer(event ? HOVER_DELAY : 0)));\\n\\n /** Custom renderer */\\n private readonly renderer = inject(Renderer2);\\n\\n /** Destroys */\\n private destroy$ = new Subject();\\n\\n /** Crosswalk element of svg */\\n private crosswalkEl?: Element;\\n\\n /** List of highlighted svg elements */\\n private highlightedElements: Element[] = [];\\n\\n /**\\n * Updates the highlighting based on current highlight id\\n * @param changes\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'highlightId\' in changes) {\\n this.resetHighlight();\\n this.setHighlight();\\n }\\n }\\n\\n /**\\n * Highlights cells that match highlightId\\n */\\n private setHighlight() {\\n const { mapping, highlightId, crosswalkEl } = this;\\n const entry = mapping.find(({ ontologyId }) => ontologyId === highlightId);\\n if (!entry || !crosswalkEl) {\\n return;\\n }\\n\\n let id = this.encodeId(entry.id);\\n const element = crosswalkEl.querySelector(`#${id}`);\\n if (!element) {\\n return;\\n } else if (element.nodeName !== \'g\') {\\n id = element.parentElement?.id ?? \'\';\\n }\\n\\n const elements = crosswalkEl.querySelectorAll(`#${id} :is(path, polygon, polyline)`);\\n this.highlightedElements = Array.from(elements);\\n elements.forEach((el) => el.classList.add(\'click-active\'));\\n }\\n\\n /**\\n * Resets all highlighted elements in the svg\\n */\\n private resetHighlight(): void {\\n for (const el of this.highlightedElements) {\\n el.classList.remove(\'click-active\');\\n }\\n this.highlightedElements = [];\\n }\\n\\n /**\\n * Clears observables on destroy\\n */\\n ngOnDestroy(): void {\\n this.clear();\\n }\\n\\n /**\\n * Sets SVG element\\n * @param el SVG element\\n */\\n setSvgElement(el: SVGElement): void {\\n this.clear();\\n this.crosswalkEl = el.querySelector(\'[id^=\\"Crosswalk\\"]\') ?? undefined;\\n if (this.crosswalkEl) {\\n // Move to front (i.e. last child in svg)\\n this.renderer.appendChild(el, this.crosswalkEl);\\n this.attachCrosswalkHover(this.crosswalkEl);\\n }\\n }\\n\\n /**\\n * Removes underscores from id\\n * @param name Node name\\n * @returns node name without underscores\\n */\\n formatNodeName(name: string): string {\\n return name.replace(/_/g, \' \');\\n }\\n\\n /**\\n * Attaches crosswalk hover\\n * @param el element\\n */\\n private attachCrosswalkHover(el: Element): void {\\n this.attachEvent(el, \'mouseover\').subscribe((event) => this.onCrosswalkHover(event));\\n this.attachEvent(el, \'mouseout\').subscribe(() => this.onCrosswalkHover(undefined as never as MouseEvent));\\n this.attachEvent(el, \'click\').subscribe((event) => this.nodeClick.emit(this.getNode(event)));\\n }\\n\\n /**\\n * Finds matching node in data from a hovered element\\n * @param event Mouse event\\n */\\n private onCrosswalkHover(event: MouseEvent): void {\\n if (event) {\\n const node = this.getNode(event);\\n if (node) {\\n this.nodeHoverData$.next({\\n node: node.label,\\n origin: {\\n x: event.clientX,\\n y: event.clientY,\\n },\\n });\\n this.nodeHover.emit(node); //emits node entry\\n }\\n } else {\\n this.nodeHoverData$.next(undefined);\\n this.nodeHover.emit();\\n }\\n }\\n\\n /**\\n * Clears observables\\n */\\n private clear(): void {\\n this.destroy$.next();\\n this.destroy$.complete();\\n this.destroy$ = new Subject();\\n }\\n\\n /**\\n * Returns entry from mapping if target, parent, or grandparent id matches the node name\\n * @param event Event\\n * @returns Node entry that matches the target id\\n */\\n private getNode(event: Event): T | undefined {\\n const targetId = (event.target as Element).id;\\n const parentId = (event.target as Element).parentElement?.id ?? \'\';\\n const grandparentId = (event.target as Element).parentElement?.parentElement?.id ?? \'\';\\n const idCollection = [targetId, parentId, grandparentId];\\n for (const id of idCollection) {\\n const decodedID = this.decodeId(id);\\n const match = this.mapping.find(\\n (item) => item.id?.toLowerCase() === decodedID.toLowerCase() //search mapping by name for matching node entry\\n );\\n if (match) {\\n return match;\\n }\\n }\\n return undefined;\\n }\\n\\n /**\\n * Decodes id into a normal string\\n * @param id Undecoded ID\\n * @returns id\\n */\\n private decodeId(id: string): string {\\n const replacer = (_match: string, hex: string) => String.fromCharCode(Number.parseInt(hex, 16));\\n return id.replace(/_x([\\\\da-f]+)_/gi, replacer);\\n }\\n\\n /**\\n * Turns normal string into decoded SVG id\\n * @param id id\\n * @returns Encoded id\\n */\\n private encodeId(id: string): string {\\n const replacer = (match: string) => `_x${match.charCodeAt(0).toString(16).toUpperCase()}_`;\\n return id.replace(/[^a-z0-9-]/gi, replacer);\\n }\\n\\n /**\\n * Attaches an event listener\\n * @template K\\n * @param el Element\\n * @param event Event\\n * @returns Observable\\n */\\n private attachEvent(el: Element, event: K): Observable {\\n const { renderer, destroy$ } = this;\\n const add = (handler: NodeEventHandler) => renderer.listen(el, event, handler);\\n const remove = (_handler: NodeEventHandler, unlisten: () => void) => unlisten();\\n return fromEventPattern(add, remove).pipe(takeUntil(destroy$));\\n }\\n}\\n","properties":[{"name":"id","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Node id in svg

\\n","line":69,"rawdescription":"\\nNode id in svg"},{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Node label

\\n","line":67,"rawdescription":"\\nNode label"},{"name":"ontologyId","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Ontology id of cell type

\\n","line":71,"rawdescription":"\\nOntology id of cell type"}],"indexSignatures":[],"kind":165,"description":"

Interface for node entries

\\n","rawdescription":"\\nInterface for node entries","methods":[]},{"name":"NodeTooltipData","id":"interface-NodeTooltipData-34dafc0493fcadf92dd676bebad498e3798e87879ccd7ab9c56dfb6b52cf51b41a6b132fa4c00fa2f32867f3f84829bef3163da37de19cf480f10a8cd94e74f1","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ConnectedPosition, OverlayModule } from \'@angular/cdk/overlay\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n inject,\\n Input,\\n OnChanges,\\n OnDestroy,\\n Output,\\n Renderer2,\\n SimpleChanges,\\n ViewEncapsulation,\\n} from \'@angular/core\';\\nimport { TooltipComponent } from \'@hra-ui/components/atoms\';\\nimport { InlineSVGModule, SVGScriptEvalMode } from \'ng-inline-svg-2\';\\nimport { BehaviorSubject, debounce, fromEventPattern, Observable, Subject, takeUntil, timer } from \'rxjs\';\\nimport { NodeEventHandler } from \'rxjs/internal/observable/fromEvent\';\\n\\n/** Delay before tooltip becomes visible */\\nconst HOVER_DELAY = 200;\\n\\n/** Tooltip position settings */\\nconst TOOLTIP_POSITIONS: ConnectedPosition[] = [\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'start\',\\n overlayY: \'center\',\\n offsetX: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'end\',\\n overlayY: \'center\',\\n offsetX: -8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'top\',\\n offsetY: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'bottom\',\\n offsetY: -8,\\n },\\n];\\n\\n/** Node tooltip data */\\nexport interface NodeTooltipData {\\n /** Node name */\\n node: string;\\n /** Center point of hovered node in screen coordinates */\\n origin: { x: number; y: number };\\n}\\n\\n/** Interface for node entries */\\nexport interface NodeMapEntry {\\n /** Node label */\\n label: string;\\n /** Node id in svg */\\n id: string;\\n /** Ontology id of cell type */\\n ontologyId: string;\\n}\\n\\n/**\\n * Interactive SVG component\\n */\\n@Component({\\n selector: \'hra-interactive-svg\',\\n standalone: true,\\n imports: [CommonModule, InlineSVGModule, OverlayModule, TooltipComponent],\\n templateUrl: \'./interactive-svg.component.html\',\\n styleUrls: [\'./interactive-svg.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n encapsulation: ViewEncapsulation.ShadowDom,\\n})\\nexport class InteractiveSvgComponent implements OnChanges, OnDestroy {\\n /** SVG url */\\n @Input() url?: string;\\n\\n /** Mapping info */\\n @Input() mapping: T[] = [];\\n\\n /** Highlighted ontology id */\\n @Input() highlightId?: string;\\n\\n /** Emits node id when hovered */\\n @Output() readonly nodeHover = new EventEmitter();\\n\\n /** Emits node id when clicked */\\n @Output() readonly nodeClick = new EventEmitter();\\n\\n /** SVG script eval mode */\\n readonly NEVER_EVAL_SCRIPTS = SVGScriptEvalMode.NEVER;\\n\\n /** Tooltip position settings */\\n readonly TOOLTIP_POSITIONS = TOOLTIP_POSITIONS;\\n\\n /** Observable of node hover data or undefined when there is no active hover */\\n readonly nodeHoverData$ = new BehaviorSubject(undefined);\\n\\n /** Observable of node hover with a timer */\\n readonly nodeHoverDelayedData$ = this.nodeHoverData$.pipe(debounce((event) => timer(event ? HOVER_DELAY : 0)));\\n\\n /** Custom renderer */\\n private readonly renderer = inject(Renderer2);\\n\\n /** Destroys */\\n private destroy$ = new Subject();\\n\\n /** Crosswalk element of svg */\\n private crosswalkEl?: Element;\\n\\n /** List of highlighted svg elements */\\n private highlightedElements: Element[] = [];\\n\\n /**\\n * Updates the highlighting based on current highlight id\\n * @param changes\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'highlightId\' in changes) {\\n this.resetHighlight();\\n this.setHighlight();\\n }\\n }\\n\\n /**\\n * Highlights cells that match highlightId\\n */\\n private setHighlight() {\\n const { mapping, highlightId, crosswalkEl } = this;\\n const entry = mapping.find(({ ontologyId }) => ontologyId === highlightId);\\n if (!entry || !crosswalkEl) {\\n return;\\n }\\n\\n let id = this.encodeId(entry.id);\\n const element = crosswalkEl.querySelector(`#${id}`);\\n if (!element) {\\n return;\\n } else if (element.nodeName !== \'g\') {\\n id = element.parentElement?.id ?? \'\';\\n }\\n\\n const elements = crosswalkEl.querySelectorAll(`#${id} :is(path, polygon, polyline)`);\\n this.highlightedElements = Array.from(elements);\\n elements.forEach((el) => el.classList.add(\'click-active\'));\\n }\\n\\n /**\\n * Resets all highlighted elements in the svg\\n */\\n private resetHighlight(): void {\\n for (const el of this.highlightedElements) {\\n el.classList.remove(\'click-active\');\\n }\\n this.highlightedElements = [];\\n }\\n\\n /**\\n * Clears observables on destroy\\n */\\n ngOnDestroy(): void {\\n this.clear();\\n }\\n\\n /**\\n * Sets SVG element\\n * @param el SVG element\\n */\\n setSvgElement(el: SVGElement): void {\\n this.clear();\\n this.crosswalkEl = el.querySelector(\'[id^=\\"Crosswalk\\"]\') ?? undefined;\\n if (this.crosswalkEl) {\\n // Move to front (i.e. last child in svg)\\n this.renderer.appendChild(el, this.crosswalkEl);\\n this.attachCrosswalkHover(this.crosswalkEl);\\n }\\n }\\n\\n /**\\n * Removes underscores from id\\n * @param name Node name\\n * @returns node name without underscores\\n */\\n formatNodeName(name: string): string {\\n return name.replace(/_/g, \' \');\\n }\\n\\n /**\\n * Attaches crosswalk hover\\n * @param el element\\n */\\n private attachCrosswalkHover(el: Element): void {\\n this.attachEvent(el, \'mouseover\').subscribe((event) => this.onCrosswalkHover(event));\\n this.attachEvent(el, \'mouseout\').subscribe(() => this.onCrosswalkHover(undefined as never as MouseEvent));\\n this.attachEvent(el, \'click\').subscribe((event) => this.nodeClick.emit(this.getNode(event)));\\n }\\n\\n /**\\n * Finds matching node in data from a hovered element\\n * @param event Mouse event\\n */\\n private onCrosswalkHover(event: MouseEvent): void {\\n if (event) {\\n const node = this.getNode(event);\\n if (node) {\\n this.nodeHoverData$.next({\\n node: node.label,\\n origin: {\\n x: event.clientX,\\n y: event.clientY,\\n },\\n });\\n this.nodeHover.emit(node); //emits node entry\\n }\\n } else {\\n this.nodeHoverData$.next(undefined);\\n this.nodeHover.emit();\\n }\\n }\\n\\n /**\\n * Clears observables\\n */\\n private clear(): void {\\n this.destroy$.next();\\n this.destroy$.complete();\\n this.destroy$ = new Subject();\\n }\\n\\n /**\\n * Returns entry from mapping if target, parent, or grandparent id matches the node name\\n * @param event Event\\n * @returns Node entry that matches the target id\\n */\\n private getNode(event: Event): T | undefined {\\n const targetId = (event.target as Element).id;\\n const parentId = (event.target as Element).parentElement?.id ?? \'\';\\n const grandparentId = (event.target as Element).parentElement?.parentElement?.id ?? \'\';\\n const idCollection = [targetId, parentId, grandparentId];\\n for (const id of idCollection) {\\n const decodedID = this.decodeId(id);\\n const match = this.mapping.find(\\n (item) => item.id?.toLowerCase() === decodedID.toLowerCase() //search mapping by name for matching node entry\\n );\\n if (match) {\\n return match;\\n }\\n }\\n return undefined;\\n }\\n\\n /**\\n * Decodes id into a normal string\\n * @param id Undecoded ID\\n * @returns id\\n */\\n private decodeId(id: string): string {\\n const replacer = (_match: string, hex: string) => String.fromCharCode(Number.parseInt(hex, 16));\\n return id.replace(/_x([\\\\da-f]+)_/gi, replacer);\\n }\\n\\n /**\\n * Turns normal string into decoded SVG id\\n * @param id id\\n * @returns Encoded id\\n */\\n private encodeId(id: string): string {\\n const replacer = (match: string) => `_x${match.charCodeAt(0).toString(16).toUpperCase()}_`;\\n return id.replace(/[^a-z0-9-]/gi, replacer);\\n }\\n\\n /**\\n * Attaches an event listener\\n * @template K\\n * @param el Element\\n * @param event Event\\n * @returns Observable\\n */\\n private attachEvent(el: Element, event: K): Observable {\\n const { renderer, destroy$ } = this;\\n const add = (handler: NodeEventHandler) => renderer.listen(el, event, handler);\\n const remove = (_handler: NodeEventHandler, unlisten: () => void) => unlisten();\\n return fromEventPattern(add, remove).pipe(takeUntil(destroy$));\\n }\\n}\\n","properties":[{"name":"node","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Node name

\\n","line":59,"rawdescription":"\\nNode name"},{"name":"origin","deprecated":false,"deprecationMessage":"","type":"literal type","optional":false,"description":"

Center point of hovered node in screen coordinates

\\n","line":61,"rawdescription":"\\nCenter point of hovered node in screen coordinates"}],"indexSignatures":[],"kind":165,"description":"

Node tooltip data

\\n","rawdescription":"\\nNode tooltip data","methods":[]},{"name":"SectionItem","id":"interface-SectionItem-dba50a1e9cbac5f9733930bd6b04d1ac5fda31ee6342e13da75314f7b5dbbf46c436aab104bfc47abdc323e9ff42aeeb0047ee89577f639d3979c6964344bbd7","file":"src/lib/biomarker-table-data-card/biomarker-table-data-card.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule } from \'@angular/material/table\';\\n\\n/** An item which defines a string label and a string value */\\nexport interface DataItem {\\n /** A string property that represents the label */\\n label: string;\\n /** A string property that represents the value */\\n value: string;\\n}\\n\\n/** An item which represents a section with a data item and an indicator for the last item in the section */\\nexport interface SectionItem {\\n /** A number property that represents the section number */\\n section: number;\\n /** A DateItem property that represents a section and its data */\\n data: DataItem;\\n /** A boolean property that represents the last item of a section */\\n isLastItem: boolean;\\n}\\n\\n/** This component displays a table with sections, where each section contains a list of items with a label and a value. */\\n@Component({\\n selector: \'hra-biomarker-table-data-card\',\\n standalone: true,\\n imports: [CommonModule, MatTableModule],\\n templateUrl: \'./biomarker-table-data-card.component.html\',\\n styleUrls: [\'./biomarker-table-data-card.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableDataCardComponent implements OnChanges {\\n /** Nested list of DataItems for each section which is displayed to the user */\\n @Input() data: DataItem[][] = [];\\n\\n /** Converted nested array of DataItem into Flat array of SectionItem */\\n sectionItems: SectionItem[] = [];\\n\\n /** Triggers an update on sectionItems array when data is changed */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.updateSectionItems();\\n }\\n }\\n\\n /** Updates sectionItems array when data is changed */\\n private updateSectionItems(): void {\\n const newSectionItems: SectionItem[] = [];\\n\\n this.data.forEach((section, sectionIndex) => {\\n section.forEach((item, itemIndex) => {\\n newSectionItems.push({\\n data: item,\\n section: sectionIndex,\\n isLastItem: itemIndex === section.length - 1,\\n });\\n });\\n });\\n\\n this.sectionItems = newSectionItems;\\n }\\n}\\n","properties":[{"name":"data","deprecated":false,"deprecationMessage":"","type":"DataItem","optional":false,"description":"

A DateItem property that represents a section and its data

\\n","line":18,"rawdescription":"\\nA DateItem property that represents a section and its data"},{"name":"isLastItem","deprecated":false,"deprecationMessage":"","type":"boolean","optional":false,"description":"

A boolean property that represents the last item of a section

\\n","line":20,"rawdescription":"\\nA boolean property that represents the last item of a section"},{"name":"section","deprecated":false,"deprecationMessage":"","type":"number","optional":false,"description":"

A number property that represents the section number

\\n","line":16,"rawdescription":"\\nA number property that represents the section number"}],"indexSignatures":[],"kind":165,"description":"

An item which represents a section with a data item and an indicator for the last item in the section

\\n","rawdescription":"\\nAn item which represents a section with a data item and an indicator for the last item in the section","methods":[]},{"name":"SourceListItem","id":"interface-SourceListItem-f0d0464b044f898be3752719190f2d8ad8511283d4daafb2f8b17bd0f4dfa0290abbbeb293819664c07134fcaee5a64313aaf72d69e335a063e244c2ba1d7c0c","file":"src/lib/source-list/source-list.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule } from \'@angular/material/table\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EmptyBiomarkerComponent, LabelBoxComponent } from \'@hra-ui/components/atoms\';\\n\\n/** SourceListItem interface contains title and link to the dataset for the SourceList*/\\nexport interface SourceListItem {\\n /** Title of the dataset in the SourceList */\\n title: string;\\n\\n /** Label of the dataset in the SourceList */\\n label: string;\\n\\n /** Link to the dataset in the SourceList */\\n link: string;\\n}\\n\\n/** This component shows list of sources with title and links to the datasets */\\n@Component({\\n selector: \'hra-source-list\',\\n standalone: true,\\n imports: [CommonModule, MatTableModule, MatIconModule, LabelBoxComponent, EmptyBiomarkerComponent],\\n templateUrl: \'./source-list.component.html\',\\n styleUrls: [\'./source-list.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class SourceListComponent {\\n /** List of sources with titles and links displayed to the user */\\n @Input() sources: SourceListItem[] = [];\\n /**\\n * Input buttonon text of empty biomarker component.\\n */\\n @Input() collaborateText = \'\';\\n\\n /**\\n * Input message markdown of empty biomarker component.\\n */\\n @Input() message = \'\';\\n /**\\n * Show table of source list component which toggles to true or false\\n * based on click\\n */\\n showTable = true;\\n\\n /** Emits when the contact button is clicked */\\n @Output() readonly collaborateClick = new EventEmitter();\\n\\n /**\\n * It changes the value of showTable to false if value it true\\n * and vice versa\\n */\\n toggleTable(): void {\\n this.showTable = !this.showTable;\\n }\\n}\\n","properties":[{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Label of the dataset in the SourceList

\\n","line":13,"rawdescription":"\\nLabel of the dataset in the SourceList"},{"name":"link","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Link to the dataset in the SourceList

\\n","line":16,"rawdescription":"\\nLink to the dataset in the SourceList"},{"name":"title","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Title of the dataset in the SourceList

\\n","line":10,"rawdescription":"\\nTitle of the dataset in the SourceList"}],"indexSignatures":[],"kind":165,"description":"

SourceListItem interface contains title and link to the dataset for the SourceList

\\n","rawdescription":"\\nSourceListItem interface contains title and link to the dataset for the SourceList","methods":[]}],"injectables":[],"guards":[],"interceptors":[],"classes":[],"directives":[],"components":[{"name":"BiomarkerTableDataCardComponent","id":"component-BiomarkerTableDataCardComponent-dba50a1e9cbac5f9733930bd6b04d1ac5fda31ee6342e13da75314f7b5dbbf46c436aab104bfc47abdc323e9ff42aeeb0047ee89577f639d3979c6964344bbd7","file":"src/lib/biomarker-table-data-card/biomarker-table-data-card.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-biomarker-table-data-card","styleUrls":["./biomarker-table-data-card.component.scss"],"styles":[],"templateUrl":["./biomarker-table-data-card.component.html"],"viewProviders":[],"inputsClass":[{"name":"data","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nNested list of DataItems for each section which is displayed to the user","description":"

Nested list of DataItems for each section which is displayed to the user

\\n","line":34,"type":"DataItem[][]","decorators":[]}],"outputsClass":[],"propertiesClass":[{"name":"sectionItems","defaultValue":"[]","deprecated":false,"deprecationMessage":"","type":"SectionItem[]","optional":false,"description":"

Converted nested array of DataItem into Flat array of SectionItem

\\n","line":37,"rawdescription":"\\nConverted nested array of DataItem into Flat array of SectionItem"}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

This component displays a table with sections, where each section contains a list of items with a label and a value.

\\n","rawdescription":"\\nThis component displays a table with sections, where each section contains a list of items with a label and a value.","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule } from \'@angular/material/table\';\\n\\n/** An item which defines a string label and a string value */\\nexport interface DataItem {\\n /** A string property that represents the label */\\n label: string;\\n /** A string property that represents the value */\\n value: string;\\n}\\n\\n/** An item which represents a section with a data item and an indicator for the last item in the section */\\nexport interface SectionItem {\\n /** A number property that represents the section number */\\n section: number;\\n /** A DateItem property that represents a section and its data */\\n data: DataItem;\\n /** A boolean property that represents the last item of a section */\\n isLastItem: boolean;\\n}\\n\\n/** This component displays a table with sections, where each section contains a list of items with a label and a value. */\\n@Component({\\n selector: \'hra-biomarker-table-data-card\',\\n standalone: true,\\n imports: [CommonModule, MatTableModule],\\n templateUrl: \'./biomarker-table-data-card.component.html\',\\n styleUrls: [\'./biomarker-table-data-card.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableDataCardComponent implements OnChanges {\\n /** Nested list of DataItems for each section which is displayed to the user */\\n @Input() data: DataItem[][] = [];\\n\\n /** Converted nested array of DataItem into Flat array of SectionItem */\\n sectionItems: SectionItem[] = [];\\n\\n /** Triggers an update on sectionItems array when data is changed */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.updateSectionItems();\\n }\\n }\\n\\n /** Updates sectionItems array when data is changed */\\n private updateSectionItems(): void {\\n const newSectionItems: SectionItem[] = [];\\n\\n this.data.forEach((section, sectionIndex) => {\\n section.forEach((item, itemIndex) => {\\n newSectionItems.push({\\n data: item,\\n section: sectionIndex,\\n isLastItem: itemIndex === section.length - 1,\\n });\\n });\\n });\\n\\n this.sectionItems = newSectionItems;\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'utils\';\\n@use \'variables\' as vars;\\n\\n:host {\\n display: flex;\\n padding: 1rem 1.5rem;\\n border-radius: 0.5rem;\\n box-shadow: 0.063rem 0.125rem 1rem 0.125rem rgba(0, 0, 0, 0.16);\\n background-color: vars.$primary-contrast-rgb;\\n\\n .mat-mdc-cell {\\n padding: 0.25rem 0rem;\\n }\\n\\n .mat-mdc-row {\\n height: fit-content;\\n }\\n\\n .no-border {\\n border: none;\\n }\\n\\n .label {\\n color: #243142;\\n padding-right: 3rem;\\n }\\n\\n .value {\\n color: #4c5a69;\\n }\\n\\n .sr-only {\\n @include utils.sr-only();\\n }\\n}\\n","styleUrl":"./biomarker-table-data-card.component.scss"}],"stylesData":"","implements":["OnChanges"],"templateData":"
No data
\\n 0\\" [dataSource]=\\"sectionItems\\">\\n \\n\\n \x3c!-- Label Column --\x3e\\n \\n \\n \\n \\n\\n \x3c!-- Value Column --\x3e\\n \\n \\n \\n \\n\\n \\n
\\n Biomarker Table Data Card\\n
Item Label\\n {{ element.data.label }}\\n Item Value\\n {{ element.data.value }}\\n
\\n"},{"name":"BiomarkerTableDataIconComponent","id":"component-BiomarkerTableDataIconComponent-0fab04062dee70e0c4d57bfdc6f056400c9b82591b050c6912b9e59a896e1a5535f884a104c1d3f95c19721a049ca51f5b2a953512dc1d6a501c29d5399a063c","file":"src/lib/biomarker-table-data-icon/biomarker-table-data-icon.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-biomarker-table-data-icon","styleUrls":["./biomarker-table-data-icon.component.scss"],"styles":[],"template":"","templateUrl":[],"viewProviders":[],"inputsClass":[{"name":"color","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nRepresents the color of the icon","description":"

Represents the color of the icon

\\n","line":17,"type":"string","decorators":[]},{"name":"size","defaultValue":"0","deprecated":false,"deprecationMessage":"","rawdescription":"\\nRepresents the size of the icon","description":"

Represents the size of the icon

\\n","line":20,"type":"number","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Describes the data icon for the table

\\n","rawdescription":"\\n\\nDescribes the data icon for the table\\n","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, HostBinding, Input } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\n\\n/**\\n * Describes the data icon for the table\\n */\\n@Component({\\n selector: \'hra-biomarker-table-data-icon\',\\n standalone: true,\\n imports: [CommonModule],\\n template: \'\',\\n styleUrls: [\'./biomarker-table-data-icon.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableDataIconComponent {\\n /** Represents the color of the icon */\\n @HostBinding(\'style.background-color\') @Input() color = \'\';\\n\\n /** Represents the size of the icon */\\n @HostBinding(\'style.--radius.rem\') @Input() size = 0;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n border-radius: 50%;\\n --radius: 0.625rem;\\n width: var(--radius);\\n height: var(--radius);\\n}\\n","styleUrl":"./biomarker-table-data-icon.component.scss"}],"stylesData":""},{"name":"ContactModalComponent","id":"component-ContactModalComponent-309310b2740da63be5ea5aaa894ef73ced8bed2a86b50643af4dd031551d6cdb7b26ece6b3328d0e31c21e46f940bd8b901f5665c241ca2a4cb38f39631bd8a3","file":"src/lib/contact-modal/contact-modal.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-contact-modal","styleUrls":["./contact-modal.component.scss"],"styles":[],"templateUrl":["./contact-modal.component.html"],"viewProviders":[],"inputsClass":[{"name":"productLogoUrl","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for product logo URL to displayed on the left side.","description":"

Input for product logo URL to displayed on the left side.

\\n","line":49,"type":"string","decorators":[]},{"name":"productTitle","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for product title to displayed on the left side.","description":"

Input for product title to displayed on the left side.

\\n","line":52,"type":"string","decorators":[]}],"outputsClass":[{"name":"closeClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the cancel button or close icon is clicked","description":"

Emits when the cancel button or close icon is clicked

\\n","line":58,"type":"EventEmitter"},{"name":"submitClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the submit button is clicked and all the values are appropriate.","description":"

Emits when the submit button is clicked and all the values are appropriate.

\\n","line":55,"type":"EventEmitter"}],"propertiesClass":[{"name":"contactData","defaultValue":"EMPTY_CONTACT_DATA","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Asigns the undefined initially to all the input fields.

\\n","line":66,"rawdescription":"\\nAsigns the undefined initially to all the input fields."}],"methodsClass":[{"name":"submit","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":76,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nIt emits the updated value of contact data","description":"

It emits the updated value of contact data

\\n"},{"name":"updateData","args":[{"name":"key","type":"K","deprecated":false,"deprecationMessage":""},{"name":"value","type":"","deprecated":false,"deprecationMessage":"","optional":true}],"optional":false,"returnType":"void","typeParameters":["K"],"line":69,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nUpdates the contact data object with a new value for a given key.","description":"

Updates the contact data object with a new value for a given key.

\\n","jsdoctags":[{"name":"key","type":"K","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}},{"name":"value","type":"","deprecated":false,"deprecationMessage":"","optional":true,"tagName":{"text":"param"}}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Contact modal component.

\\n","rawdescription":"\\n\\nContact modal component.\\n","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EmailInputComponent, RequiredInputComponent, RequiredTextboxComponent } from \'@hra-ui/components/atoms\';\\nimport { produce } from \'immer\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/**\\n An interface representing contact data information which will be emitted if all the fields are in correct format.\\n */\\nexport interface ContactData {\\n /** The email address of the person submitting the form. */\\n email: string;\\n /** The subject line of the message being sent. */\\n subject: string;\\n /** The body of the message being sent. */\\n message: string;\\n}\\n\\n/** Initial empty contact data */\\nconst EMPTY_CONTACT_DATA: Partial = {\\n email: undefined,\\n subject: undefined,\\n message: undefined,\\n};\\n\\n/**\\n * Contact modal component.\\n */\\n@Component({\\n selector: \'hra-contact-modal\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatButtonModule,\\n MatIconModule,\\n EmailInputComponent,\\n MarkdownModule,\\n RequiredTextboxComponent,\\n RequiredInputComponent,\\n ],\\n templateUrl: \'./contact-modal.component.html\',\\n styleUrls: [\'./contact-modal.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class ContactModalComponent {\\n /** Input for product logo URL to displayed on the left side. */\\n @Input() productLogoUrl = \'\';\\n\\n /** Input for product title to displayed on the left side. */\\n @Input() productTitle = \'\';\\n\\n /** Emits when the submit button is clicked and all the values are appropriate. */\\n @Output() readonly submitClick = new EventEmitter();\\n\\n /** Emits when the cancel button or close icon is clicked */\\n @Output() readonly closeClick = new EventEmitter();\\n\\n /** A function to disable the submit button. If all the values are in approproiate format, then it will be enabled. */\\n get disableSubmit(): boolean {\\n return Object.values(this.contactData).some((value) => value === undefined);\\n }\\n\\n /** Asigns the undefined initially to all the input fields. */\\n contactData = EMPTY_CONTACT_DATA;\\n\\n /** Updates the contact data object with a new value for a given key. */\\n updateData(key: K, value?: ContactData[K]): void {\\n this.contactData = produce(this.contactData, (draft) => {\\n draft[key] = value;\\n });\\n }\\n\\n /** It emits the updated value of contact data */\\n submit(): void {\\n this.submitClick.emit(this.contactData as ContactData);\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n position: relative;\\n padding-top: 2rem;\\n margin-right: 1.5rem;\\n margin-left: 1.5rem;\\n font-family: \'Inter\';\\n\\n .product-logo {\\n display: flex;\\n align-items: center;\\n\\n .product-logo-image {\\n margin-right: 1rem;\\n }\\n\\n .product-title {\\n color: #990000;\\n margin: 0;\\n font-weight: 600;\\n }\\n }\\n\\n .close {\\n position: absolute;\\n top: 1.5rem;\\n right: 0rem;\\n }\\n\\n .submit {\\n margin-right: 1.5rem;\\n }\\n\\n .submit,\\n .cancel {\\n width: 7.5rem;\\n }\\n\\n .email {\\n margin-top: 1.25rem;\\n }\\n\\n .message-field {\\n margin-top: 1rem;\\n }\\n\\n .subject-field {\\n margin-top: 1rem;\\n }\\n\\n .desc {\\n margin-top: 1.5rem;\\n }\\n}\\n","styleUrl":"./contact-modal.component.scss"}],"stylesData":"","accessors":{"disableSubmit":{"name":"disableSubmit","getSignature":{"name":"disableSubmit","type":"boolean","returnType":"boolean","line":61,"rawdescription":"\\nA function to disable the submit button. If all the values are in approproiate format, then it will be enabled.","description":"

A function to disable the submit button. If all the values are in approproiate format, then it will be enabled.

\\n"}}},"templateData":"\\n \\"Prodoct\\n

{{ productTitle }}

\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n"},{"name":"FooterComponent","id":"component-FooterComponent-45c5a61fc5d68c201808fb76ff867f9a7cf8e42e6ef95ae08b440dbd37ce63eb4c77c3da0597ef90973854d65522a3ba496eeb5eccbe75750c1fd2f5abf52e6b","file":"src/lib/footer/footer.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-footer","styleUrls":["./footer.component.scss"],"styles":[],"templateUrl":["./footer.component.html"],"viewProviders":[],"inputsClass":[{"name":"downloadFormats","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nDifferent download formats options displayed to the user","description":"

Different download formats options displayed to the user

\\n","line":74,"type":"T[]","decorators":[]},{"name":"embed","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for embed link in HRA Portal","description":"

Input for embed link in HRA Portal

\\n","line":71,"type":"any","decorators":[]},{"name":"hraPortal","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for HRA Portal link","description":"

Input for HRA Portal link

\\n","line":65,"type":"any","decorators":[]},{"name":"illustrationMetadata","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for Illustration metadata page link in HRA Portal","description":"

Input for Illustration metadata page link in HRA Portal

\\n","line":68,"type":"any","decorators":[]},{"name":"productLogoUrl","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for product logo URL to displayed on the left side.","description":"

Input for product logo URL to displayed on the left side.

\\n","line":59,"type":"string","decorators":[]},{"name":"productTitle","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for product title to displayed on the left side.","description":"

Input for product title to displayed on the left side.

\\n","line":62,"type":"string","decorators":[]},{"name":"size","defaultValue":"\'large\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nHost binding of footer component","description":"

Host binding of footer component

\\n","line":56,"type":"\\"small\\" | \\"large\\"","decorators":[]}],"outputsClass":[{"name":"contactClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the contact button is clicked","description":"

Emits when the contact button is clicked

\\n","line":80,"type":"EventEmitter"},{"name":"download","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits the selected download format","description":"

Emits the selected download format

\\n","line":77,"type":"EventEmitter"}],"propertiesClass":[{"name":"downloadListOpen","defaultValue":"false","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Whether the download list panel is open

\\n","line":91,"rawdescription":"\\nWhether the download list panel is open"},{"name":"DOWNLOADS_LIST_POSITION","defaultValue":"DOWNLOADS_LIST_POSITION","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Download list popup overlay positioning

\\n","line":83,"rawdescription":"\\nDownload list popup overlay positioning","modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for footer that displays its content at the bottom of the page with different action buttons.

\\n","rawdescription":"\\n\\nComponent for footer that displays its content at the bottom of the page with different action buttons.\\n","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { ConnectedPosition, OverlayModule } from \'@angular/cdk/overlay\';\\nimport { MatListModule } from \'@angular/material/list\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { EMPTY_LINK } from \'@hra-ui/cdk/state\';\\n\\n/**\\n * Base type for different download format options.\\n */\\nexport interface DownloadFormat {\\n /**\\n * User readable format label\\n */\\n label: string;\\n}\\n\\n/**\\n * Positioning value for the download list popup\\n */\\nconst DOWNLOADS_LIST_POSITION: ConnectedPosition[] = [\\n {\\n panelClass: \'above\',\\n originX: \'start\',\\n originY: \'top\',\\n overlayX: \'start\',\\n overlayY: \'bottom\',\\n offsetY: 0,\\n },\\n {\\n panelClass: \'below\',\\n originX: \'start\',\\n originY: \'bottom\',\\n overlayX: \'start\',\\n overlayY: \'top\',\\n },\\n];\\n\\n/**\\n * Component for footer that displays its content at the bottom of the page with different action buttons.\\n */\\n@Component({\\n selector: \'hra-footer\',\\n standalone: true,\\n imports: [CommonModule, MatButtonModule, MatIconModule, OverlayModule, MatListModule, LinkDirective],\\n templateUrl: \'./footer.component.html\',\\n styleUrls: [\'./footer.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class FooterComponent {\\n /** Host binding of footer component */\\n @HostBinding(\'class\')\\n @Input()\\n size: \'small\' | \'large\' = \'large\';\\n\\n /** Input for product logo URL to displayed on the left side. */\\n @Input() productLogoUrl = \'\';\\n\\n /** Input for product title to displayed on the left side. */\\n @Input() productTitle = \'\';\\n\\n /** Input for HRA Portal link */\\n @Input() hraPortal = EMPTY_LINK;\\n\\n /** Input for Illustration metadata page link in HRA Portal */\\n @Input() illustrationMetadata = EMPTY_LINK;\\n\\n /** Input for embed link in HRA Portal */\\n @Input() embed = EMPTY_LINK;\\n\\n /** Different download formats options displayed to the user */\\n @Input() downloadFormats: T[] = [];\\n\\n /** Emits the selected download format */\\n @Output() readonly download = new EventEmitter();\\n\\n /** Emits when the contact button is clicked */\\n @Output() readonly contactClick = new EventEmitter();\\n\\n /** Download list popup overlay positioning */\\n readonly DOWNLOADS_LIST_POSITION = DOWNLOADS_LIST_POSITION;\\n\\n /** Gets whether the footer required is small */\\n get isSmall(): boolean {\\n return this.size === \'small\';\\n }\\n\\n /** Whether the download list panel is open */\\n downloadListOpen = false;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: flex;\\n padding: 1rem 2rem;\\n border-top: 0.063rem solid #e2e7e9;\\n align-items: center;\\n background-color: #f8f9fa;\\n gap: 1rem;\\n\\n --palette-primary-500: #abcdef;\\n\\n .controls {\\n display: flex;\\n justify-content: flex-end;\\n }\\n .filler {\\n flex-grow: 1;\\n }\\n\\n .product-title {\\n color: #990000;\\n margin-right: 0rem;\\n }\\n\\n a {\\n cursor: pointer;\\n display: flex;\\n }\\n\\n .product-logo-image {\\n height: 1.2rem;\\n margin-right: 1rem;\\n }\\n\\n button {\\n justify-content: center;\\n align-items: center;\\n min-width: 9rem;\\n min-height: 3rem;\\n gap: 0.5rem;\\n\\n --palette-primary-100-rgb: #4c5a69;\\n --palette-primary-500-rgb: #243142;\\n\\n &.mat-accent {\\n &:active {\\n --palette-primary-700-rgb: #4c5a69;\\n }\\n .mat-icon {\\n z-index: 1;\\n }\\n }\\n }\\n}\\n\\n::ng-deep {\\n .download-options-panel {\\n box-shadow: 0.1rem 0.1rem 0.4rem 0.2rem #dad7d7;\\n background-color: #ffffff;\\n }\\n}\\n::ng-deep .download-button {\\n .mdc-button__label {\\n display: flex;\\n gap: 0.5rem;\\n }\\n}\\n","styleUrl":"./footer.component.scss"}],"stylesData":"","accessors":{"isSmall":{"name":"isSmall","getSignature":{"name":"isSmall","type":"boolean","returnType":"boolean","line":86,"rawdescription":"\\nGets whether the footer required is small","description":"

Gets whether the footer required is small

\\n"}}},"templateData":"\\n
\\n\\n\\n\\n\\n download \\n Download\\n\\n\\n\\n\\n
\\n\\n\\n\\n\\n\\n\\n \\n \\n {{ format.label }}\\n \\n \\n\\n"},{"name":"FullscreenContainerComponent","id":"component-FullscreenContainerComponent-78edc2b37cbc90a17be0fcca4ed7291593d5f3d12c4ea823de3f9510c13bad4492bc5cd65823726fc7e333c874880c17093ff9d20096fd92e20137c8cc4f75af","file":"src/lib/fullscreen/fullscreen-container.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-fullscreen-container","styleUrls":[],"styles":["\\n :host {\\n display: block;\\n position: relative;\\n }\\n "],"template":"","templateUrl":[],"viewProviders":[],"inputsClass":[{"name":"fullscreen","defaultValue":"false","deprecated":false,"deprecationMessage":"","rawdescription":"\\nA boolean input property that controls the fullscreen mode","description":"

A boolean input property that controls the fullscreen mode

\\n","line":38,"type":"boolean","decorators":[]}],"outputsClass":[],"propertiesClass":[{"name":"content","deprecated":false,"deprecationMessage":"","type":"QueryList","optional":true,"description":"

A property that gets a reference to any child components of type FullscreenContentComponent that are projected into the component's content area

\\n","line":35,"rawdescription":"\\nA property that gets a reference to any child components of type FullscreenContentComponent that are projected into the component\'s content area","decorators":[{"name":"ContentChildren","stringifiedArguments":"FullscreenContentComponent"}],"modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

A component that wraps any child components of type FullscreenContentComponent and\\nsets their isFullScreen property to true or false based on its own fullscreen input property

\\n","rawdescription":"\\nA component that wraps any child components of type FullscreenContentComponent and\\nsets their isFullScreen property to true or false based on its own fullscreen input property\\n","type":"component","sourceCode":"import {\\n AfterContentInit,\\n ChangeDetectionStrategy,\\n Component,\\n ContentChildren,\\n Input,\\n OnChanges,\\n QueryList,\\n SimpleChanges,\\n} from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { FullscreenContentComponent } from \'./fullscreen-content.component\';\\n\\n/** A component that wraps any child components of type FullscreenContentComponent and\\n * sets their isFullScreen property to true or false based on its own fullscreen input property\\n */\\n@Component({\\n selector: \'hra-fullscreen-container\',\\n standalone: true,\\n imports: [CommonModule, FullscreenContentComponent],\\n template: \'\',\\n styles: [\\n `\\n :host {\\n display: block;\\n position: relative;\\n }\\n `,\\n ],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class FullscreenContainerComponent implements AfterContentInit, OnChanges {\\n /** A property that gets a reference to any child components of type FullscreenContentComponent that are projected into the component\'s content area */\\n @ContentChildren(FullscreenContentComponent)\\n readonly content?: QueryList;\\n\\n /** A boolean input property that controls the fullscreen mode */\\n @Input() fullscreen = false;\\n\\n /** It calls the updateFullscreenMode method to set the isFullScreen property of the child\\n * FullscreenContentComponent instances based on the value of the fullscreen input property\\n */\\n ngAfterContentInit(): void {\\n this.updateFullscreenMode();\\n }\\n\\n /** It checks if the fullscreen input property has changed, and calls the updateFullscreenMode method if it has */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'fullscreen\' in changes) {\\n this.updateFullscreenMode();\\n }\\n }\\n\\n /** A private method that sets the isFullScreen property of each child FullscreenContentComponent based on the value of the fullscreen */\\n private updateFullscreenMode(): void {\\n this.content?.forEach((content) => {\\n content.isFullScreen = this.fullscreen;\\n });\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":"","stylesData":"\\n :host {\\n display: block;\\n position: relative;\\n }\\n \\n","implements":["AfterContentInit","OnChanges"]},{"name":"FullscreenContentComponent","id":"component-FullscreenContentComponent-061cdd7c639f9c53e46272aaf23ed318885fbcf937978d8940b0f0baf165576129c5897204992603662d7b530bcd8d63a7d7a97602a18e97b7f1711f84c4725f","file":"src/lib/fullscreen/fullscreen-content.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-fullscreen-content","styleUrls":["./fullscreen-content.component.scss"],"styles":[],"template":"","templateUrl":[],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"isFullScreen","defaultValue":"false","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

This binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true

\\n","line":40,"rawdescription":"\\nThis binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true","decorators":[{"name":"HostBinding","stringifiedArguments":"\'class.fullscreen-on\'"},{"name":"HostBinding","stringifiedArguments":"\'@animateResize\'"}]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[{"name":"@animateResize","defaultValue":"false","deprecated":false,"deprecationMessage":"","rawdescription":"\\nThis binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true","description":"

This binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true

\\n","line":40,"type":"boolean","decorators":[]},{"name":"class.fullscreen-on","defaultValue":"false","deprecated":false,"deprecationMessage":"","rawdescription":"\\nThis binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true","description":"

This binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true

\\n","line":40,"type":"boolean","decorators":[]}],"hostListeners":[],"description":"

A component that displays its content in fullscreen mode when its isFullScreen property is set to true

\\n","rawdescription":"\\nA component that displays its content in fullscreen mode when its isFullScreen property is set to true","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, HostBinding } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { animate, state, style, transition, trigger } from \'@angular/animations\';\\n\\n/** A component that displays its content in fullscreen mode when its isFullScreen property is set to true */\\n@Component({\\n selector: \'hra-fullscreen-content\',\\n standalone: true,\\n imports: [CommonModule],\\n animations: [\\n trigger(\'animateResize\', [\\n state(\\n \'true\',\\n style({\\n width: \'100%\',\\n position: \'absolute\',\\n right: 0,\\n })\\n ),\\n state(\\n \'false\',\\n style({\\n width: \'50%\',\\n position: \'absolute\',\\n right: 0,\\n })\\n ),\\n transition(\'true <=> false\', [animate(\'0.5s ease\')]),\\n ]),\\n ],\\n template: \'\',\\n styleUrls: [\'./fullscreen-content.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class FullscreenContentComponent {\\n /** This binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true */\\n @HostBinding(\'class.fullscreen-on\')\\n /** This binds the isFullScreen property to the @animateResize when isFullScreen is true */\\n @HostBinding(\'@animateResize\')\\n isFullScreen = false;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n overflow-y: hidden;\\n\\n &.fullscreen-on {\\n z-index: 100;\\n background: #f8f9fa;\\n }\\n}\\n","styleUrl":"./fullscreen-content.component.scss"}],"stylesData":""},{"name":"HeaderComponent","id":"component-HeaderComponent-81f5689eacf69c8f1658a62e299bcad0df485f2cc8e6664f3f16cfa7d30400e53a54549f6aa8125abb2fc207fb428887c0a19dde695063a2d92611d78d9c6956","file":"src/lib/header/header.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-header","styleUrls":["./header.component.scss"],"styles":[],"templateUrl":["./header.component.html"],"viewProviders":[],"inputsClass":[{"name":"aboutLink","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for about link","description":"

Input for about link

\\n","line":40,"type":"any","decorators":[]},{"name":"appTitle","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput for app title to show on the left side.\\n","description":"

Input for app title to show on the left side.

\\n","line":34,"type":"string","decorators":[]},{"name":"productLogoUrl","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput for product logo URL to displayed on the left side.\\n","description":"

Input for product logo URL to displayed on the left side.

\\n","line":24,"type":"string","decorators":[]},{"name":"productTitle","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput for product title to displayed on the left side.\\n","description":"

Input for product title to displayed on the left side.

\\n","line":29,"type":"string","decorators":[]},{"name":"productTitleLink","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for Product Title link","description":"

Input for Product Title link

\\n","line":37,"type":"any","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Header component, displays on top of every page.

\\n","rawdescription":"\\n\\nHeader component, displays on top of every page.\\n","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatRippleModule } from \'@angular/material/core\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { EMPTY_LINK } from \'@hra-ui/cdk\';\\n\\n/**\\n * Header component, displays on top of every page.\\n */\\n@Component({\\n selector: \'hra-header\',\\n standalone: true,\\n imports: [CommonModule, MatButtonModule, MatIconModule, MatRippleModule, LinkDirective],\\n templateUrl: \'./header.component.html\',\\n styleUrls: [\'./header.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class HeaderComponent {\\n /**\\n * Input for product logo URL to displayed on the left side.\\n */\\n @Input() productLogoUrl = \'\';\\n\\n /**\\n * Input for product title to displayed on the left side.\\n */\\n @Input() productTitle = \'\';\\n\\n /**\\n * Input for app title to show on the left side.\\n */\\n @Input() appTitle = \'\';\\n\\n /** Input for Product Title link */\\n @Input() productTitleLink = EMPTY_LINK;\\n\\n /** Input for about link */\\n @Input() aboutLink = EMPTY_LINK;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'utils\';\\n@use \'variables\' as vars;\\n\\n:host {\\n display: flex;\\n align-items: center;\\n height: 5rem;\\n padding: 0 2rem 0 1rem;\\n\\n @include utils.define-flex-filler();\\n\\n h1 {\\n // Reset margins for h1 elements\\n margin: 0;\\n }\\n\\n .product {\\n display: flex;\\n align-items: center;\\n text-decoration: none;\\n // Style the ripple animation\\n padding: 0 1rem;\\n border-radius: 0.25rem;\\n\\n &:hover {\\n cursor: pointer;\\n }\\n\\n .text {\\n margin-left: 1rem;\\n font-weight: 600;\\n color: vars.$accent-rgb;\\n }\\n }\\n\\n .app {\\n margin-left: 0.5rem;\\n }\\n\\n .about {\\n width: 9rem;\\n height: 3rem;\\n text-decoration: none;\\n span {\\n border-bottom: 1px solid var(--palette-primary-500-rgb);\\n }\\n .icon {\\n width: 1.5rem;\\n height: 1.5rem;\\n font-size: 1.5rem;\\n }\\n }\\n\\n @media (max-width: 30rem) {\\n height: 4.5rem;\\n\\n .product .text,\\n .about .text {\\n @include utils.sr-only();\\n }\\n\\n .product {\\n height: 2.5rem;\\n padding: 0 0.25rem;\\n\\n .logo {\\n width: 1.5rem;\\n height: 1.5rem;\\n }\\n }\\n\\n .app {\\n font-size: 1rem;\\n line-height: 1.5rem;\\n }\\n\\n .about {\\n min-width: 2.5rem;\\n width: 2.5rem;\\n height: 2.5rem;\\n padding: 0;\\n\\n .icon {\\n margin: 0;\\n }\\n }\\n }\\n\\n @media (max-width: 20rem) {\\n padding: 0;\\n }\\n}\\n","styleUrl":"./header.component.scss"}],"stylesData":"","templateData":"\\n \\n

{{ productTitle }}

\\n\\n

{{ appTitle }}

\\n\\n
\\n\\n\\n info_outlined\\n About\\n\\n"},{"name":"HraLandingPageIntroWcComponent","id":"component-HraLandingPageIntroWcComponent-57ba89b5fa60bec2ad59de1cc52e4d3002935eab8da7f77895b1d7b507237df7df5d8fa2fec4dd3ba498b8d06fc5f70758beb2ba67ccbb24f2819798948e81d4","file":"src/lib/hra-landing-page-intro-wc/hra-landing-page-intro-wc.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-ui-hra-landing-page-intro-wc","styleUrls":["./hra-landing-page-intro-wc.component.scss"],"styles":[],"templateUrl":["./hra-landing-page-intro-wc.component.html"],"viewProviders":[],"inputsClass":[{"name":"description","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nDescription for FTU Explorer","description":"

Description for FTU Explorer

\\n","line":19,"type":"string","decorators":[]},{"name":"partners","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nThank you message to partners","description":"

Thank you message to partners

\\n","line":22,"type":"string","decorators":[]},{"name":"readMore","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nIntro Image file url","description":"

Intro Image file url

\\n","line":25,"type":"string","decorators":[]},{"name":"title","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nIntro title for FTU Explorer","description":"

Intro title for FTU Explorer

\\n","line":16,"type":"string","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for LandingPage Intro - Web coomponent

\\n","rawdescription":"\\nComponent for LandingPage Intro - Web coomponent","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/** Component for LandingPage Intro - Web coomponent */\\n@Component({\\n selector: \'hra-ui-hra-landing-page-intro-wc\',\\n standalone: true,\\n imports: [CommonModule, MarkdownModule],\\n templateUrl: \'./hra-landing-page-intro-wc.component.html\',\\n styleUrls: [\'./hra-landing-page-intro-wc.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class HraLandingPageIntroWcComponent {\\n /** Intro title for FTU Explorer */\\n @Input() title = \'\';\\n\\n /** Description for FTU Explorer */\\n @Input() description = \'\';\\n\\n /** Thank you message to partners */\\n @Input() partners = \'\';\\n\\n /** Intro Image file url */\\n @Input() readMore = \'\';\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n gap: 8px;\\n padding: 24px, 32px, 24px, 32px;\\n .title {\\n font-size: 20px;\\n font-family: Inter;\\n font-weight: 400;\\n line-height: 24px;\\n letter-spacing: 0em;\\n text-align: left;\\n }\\n\\n .description .partners .readMore {\\n font-family: Inter;\\n font-size: 16px;\\n font-weight: 400;\\n line-height: 24px;\\n letter-spacing: 0em;\\n text-align: left;\\n }\\n ::ng-deep a {\\n color: vars.$primary-rgb;\\n font-weight: 700;\\n }\\n ::ng-deep p {\\n margin: 0;\\n }\\n}\\n","styleUrl":"./hra-landing-page-intro-wc.component.scss"}],"stylesData":"","templateData":"

{{ title }}

\\n\\n\\n\\n\\n\\n\\n"},{"name":"InfoModalComponent","id":"component-InfoModalComponent-56dc03e6960f4005149bab8dbf6a5b713061505964f6b3cc7d33868ed7f83aff7dbf222ccf66999864c6313f218c20f849715b3ebcc4d2ea44285c6e07811662","file":"src/lib/info-modal/info-modal.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-info-modal","styleUrls":["./info-modal.component.scss"],"styles":[],"templateUrl":["./info-modal.component.html"],"viewProviders":[],"inputsClass":[{"name":"description","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInformation modal message to the user","description":"

Information modal message to the user

\\n","line":24,"type":"string","decorators":[]},{"name":"productLogoUrl","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nProduct logo shown to the user","description":"

Product logo shown to the user

\\n","line":21,"type":"string","decorators":[]},{"name":"productTitle","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nProduct title shown to the user","description":"

Product title shown to the user

\\n","line":18,"type":"string","decorators":[]}],"outputsClass":[{"name":"closeClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the close icon is clicked","description":"

Emits when the close icon is clicked

\\n","line":27,"type":"EventEmitter"}],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Displays an information modal to the user with the product title and logo and description

\\n","rawdescription":"\\nDisplays an information modal to the user with the product title and logo and description","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/** Displays an information modal to the user with the product title and logo and description */\\n@Component({\\n selector: \'hra-info-modal\',\\n standalone: true,\\n imports: [CommonModule, MatButtonModule, MatIconModule, MarkdownModule],\\n templateUrl: \'./info-modal.component.html\',\\n styleUrls: [\'./info-modal.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class InfoModalComponent {\\n /** Product title shown to the user */\\n @Input() productTitle = \'\';\\n\\n /** Product logo shown to the user */\\n @Input() productLogoUrl = \'\';\\n\\n /** Information modal message to the user */\\n @Input() description = \'\';\\n\\n /** Emits when the close icon is clicked */\\n @Output() readonly closeClick = new EventEmitter();\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n position: relative;\\n padding: 2rem 2rem 1.25rem 2rem;\\n\\n .close {\\n position: absolute;\\n top: 1.5rem;\\n right: 1.5rem;\\n }\\n\\n .title {\\n display: flex;\\n align-items: center;\\n\\n .product-logo-image {\\n height: 2.75rem;\\n margin-right: 1rem;\\n }\\n\\n .product-title {\\n margin: 0;\\n color: #990000;\\n }\\n }\\n\\n .description {\\n display: block;\\n margin-top: 1rem;\\n }\\n}\\n","styleUrl":"./info-modal.component.scss"}],"stylesData":"","templateData":"\\n \\"Prodoct\\n

{{ productTitle }}

\\n\\n\\n\\n\\n\\n"},{"name":"InteractiveSvgComponent","id":"component-InteractiveSvgComponent-34dafc0493fcadf92dd676bebad498e3798e87879ccd7ab9c56dfb6b52cf51b41a6b132fa4c00fa2f32867f3f84829bef3163da37de19cf480f10a8cd94e74f1","file":"src/lib/interactive-svg/interactive-svg.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":["ViewEncapsulation.ShadowDom"],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-interactive-svg","styleUrls":["./interactive-svg.component.scss"],"styles":[],"templateUrl":["./interactive-svg.component.html"],"viewProviders":[],"inputsClass":[{"name":"highlightId","deprecated":false,"deprecationMessage":"","rawdescription":"\\nHighlighted ontology id","description":"

Highlighted ontology id

\\n","line":94,"type":"string","decorators":[]},{"name":"mapping","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nMapping info","description":"

Mapping info

\\n","line":91,"type":"T[]","decorators":[]},{"name":"url","deprecated":false,"deprecationMessage":"","rawdescription":"\\nSVG url","description":"

SVG url

\\n","line":88,"type":"string","decorators":[]}],"outputsClass":[{"name":"nodeClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits node id when clicked","description":"

Emits node id when clicked

\\n","line":100,"type":"EventEmitter"},{"name":"nodeHover","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits node id when hovered","description":"

Emits node id when hovered

\\n","line":97,"type":"EventEmitter"}],"propertiesClass":[{"name":"NEVER_EVAL_SCRIPTS","defaultValue":"SVGScriptEvalMode.NEVER","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

SVG script eval mode

\\n","line":103,"rawdescription":"\\nSVG script eval mode","modifierKind":[144]},{"name":"nodeHoverData$","defaultValue":"new BehaviorSubject(undefined)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Observable of node hover data or undefined when there is no active hover

\\n","line":109,"rawdescription":"\\nObservable of node hover data or undefined when there is no active hover","modifierKind":[144]},{"name":"nodeHoverDelayedData$","defaultValue":"this.nodeHoverData$.pipe(debounce((event) => timer(event ? HOVER_DELAY : 0)))","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Observable of node hover with a timer

\\n","line":112,"rawdescription":"\\nObservable of node hover with a timer","modifierKind":[144]},{"name":"TOOLTIP_POSITIONS","defaultValue":"TOOLTIP_POSITIONS","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Tooltip position settings

\\n","line":106,"rawdescription":"\\nTooltip position settings","modifierKind":[144]}],"methodsClass":[{"name":"formatNodeName","args":[{"name":"name","type":"string","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"string","typeParameters":[],"line":196,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nRemoves underscores from id\\n","description":"

Removes underscores from id

\\n","jsdoctags":[{"name":{"pos":4993,"end":4997,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"name"},"type":"string","deprecated":false,"deprecationMessage":"","tagName":{"pos":4987,"end":4992,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":"

Node name

\\n"},{"tagName":{"pos":5014,"end":5021,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":"

node name without underscores

\\n"}]},{"name":"setSvgElement","args":[{"name":"el","type":"SVGElement","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"void","typeParameters":[],"line":181,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nSets SVG element\\n","description":"

Sets SVG element

\\n","jsdoctags":[{"name":{"pos":4595,"end":4597,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"el"},"type":"SVGElement","deprecated":false,"deprecationMessage":"","tagName":{"pos":4589,"end":4594,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":"

SVG element

\\n"}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Interactive SVG component

\\n","rawdescription":"\\n\\nInteractive SVG component\\n","type":"component","sourceCode":"import { ConnectedPosition, OverlayModule } from \'@angular/cdk/overlay\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n inject,\\n Input,\\n OnChanges,\\n OnDestroy,\\n Output,\\n Renderer2,\\n SimpleChanges,\\n ViewEncapsulation,\\n} from \'@angular/core\';\\nimport { TooltipComponent } from \'@hra-ui/components/atoms\';\\nimport { InlineSVGModule, SVGScriptEvalMode } from \'ng-inline-svg-2\';\\nimport { BehaviorSubject, debounce, fromEventPattern, Observable, Subject, takeUntil, timer } from \'rxjs\';\\nimport { NodeEventHandler } from \'rxjs/internal/observable/fromEvent\';\\n\\n/** Delay before tooltip becomes visible */\\nconst HOVER_DELAY = 200;\\n\\n/** Tooltip position settings */\\nconst TOOLTIP_POSITIONS: ConnectedPosition[] = [\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'start\',\\n overlayY: \'center\',\\n offsetX: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'end\',\\n overlayY: \'center\',\\n offsetX: -8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'top\',\\n offsetY: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'bottom\',\\n offsetY: -8,\\n },\\n];\\n\\n/** Node tooltip data */\\nexport interface NodeTooltipData {\\n /** Node name */\\n node: string;\\n /** Center point of hovered node in screen coordinates */\\n origin: { x: number; y: number };\\n}\\n\\n/** Interface for node entries */\\nexport interface NodeMapEntry {\\n /** Node label */\\n label: string;\\n /** Node id in svg */\\n id: string;\\n /** Ontology id of cell type */\\n ontologyId: string;\\n}\\n\\n/**\\n * Interactive SVG component\\n */\\n@Component({\\n selector: \'hra-interactive-svg\',\\n standalone: true,\\n imports: [CommonModule, InlineSVGModule, OverlayModule, TooltipComponent],\\n templateUrl: \'./interactive-svg.component.html\',\\n styleUrls: [\'./interactive-svg.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n encapsulation: ViewEncapsulation.ShadowDom,\\n})\\nexport class InteractiveSvgComponent implements OnChanges, OnDestroy {\\n /** SVG url */\\n @Input() url?: string;\\n\\n /** Mapping info */\\n @Input() mapping: T[] = [];\\n\\n /** Highlighted ontology id */\\n @Input() highlightId?: string;\\n\\n /** Emits node id when hovered */\\n @Output() readonly nodeHover = new EventEmitter();\\n\\n /** Emits node id when clicked */\\n @Output() readonly nodeClick = new EventEmitter();\\n\\n /** SVG script eval mode */\\n readonly NEVER_EVAL_SCRIPTS = SVGScriptEvalMode.NEVER;\\n\\n /** Tooltip position settings */\\n readonly TOOLTIP_POSITIONS = TOOLTIP_POSITIONS;\\n\\n /** Observable of node hover data or undefined when there is no active hover */\\n readonly nodeHoverData$ = new BehaviorSubject(undefined);\\n\\n /** Observable of node hover with a timer */\\n readonly nodeHoverDelayedData$ = this.nodeHoverData$.pipe(debounce((event) => timer(event ? HOVER_DELAY : 0)));\\n\\n /** Custom renderer */\\n private readonly renderer = inject(Renderer2);\\n\\n /** Destroys */\\n private destroy$ = new Subject();\\n\\n /** Crosswalk element of svg */\\n private crosswalkEl?: Element;\\n\\n /** List of highlighted svg elements */\\n private highlightedElements: Element[] = [];\\n\\n /**\\n * Updates the highlighting based on current highlight id\\n * @param changes\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'highlightId\' in changes) {\\n this.resetHighlight();\\n this.setHighlight();\\n }\\n }\\n\\n /**\\n * Highlights cells that match highlightId\\n */\\n private setHighlight() {\\n const { mapping, highlightId, crosswalkEl } = this;\\n const entry = mapping.find(({ ontologyId }) => ontologyId === highlightId);\\n if (!entry || !crosswalkEl) {\\n return;\\n }\\n\\n let id = this.encodeId(entry.id);\\n const element = crosswalkEl.querySelector(`#${id}`);\\n if (!element) {\\n return;\\n } else if (element.nodeName !== \'g\') {\\n id = element.parentElement?.id ?? \'\';\\n }\\n\\n const elements = crosswalkEl.querySelectorAll(`#${id} :is(path, polygon, polyline)`);\\n this.highlightedElements = Array.from(elements);\\n elements.forEach((el) => el.classList.add(\'click-active\'));\\n }\\n\\n /**\\n * Resets all highlighted elements in the svg\\n */\\n private resetHighlight(): void {\\n for (const el of this.highlightedElements) {\\n el.classList.remove(\'click-active\');\\n }\\n this.highlightedElements = [];\\n }\\n\\n /**\\n * Clears observables on destroy\\n */\\n ngOnDestroy(): void {\\n this.clear();\\n }\\n\\n /**\\n * Sets SVG element\\n * @param el SVG element\\n */\\n setSvgElement(el: SVGElement): void {\\n this.clear();\\n this.crosswalkEl = el.querySelector(\'[id^=\\"Crosswalk\\"]\') ?? undefined;\\n if (this.crosswalkEl) {\\n // Move to front (i.e. last child in svg)\\n this.renderer.appendChild(el, this.crosswalkEl);\\n this.attachCrosswalkHover(this.crosswalkEl);\\n }\\n }\\n\\n /**\\n * Removes underscores from id\\n * @param name Node name\\n * @returns node name without underscores\\n */\\n formatNodeName(name: string): string {\\n return name.replace(/_/g, \' \');\\n }\\n\\n /**\\n * Attaches crosswalk hover\\n * @param el element\\n */\\n private attachCrosswalkHover(el: Element): void {\\n this.attachEvent(el, \'mouseover\').subscribe((event) => this.onCrosswalkHover(event));\\n this.attachEvent(el, \'mouseout\').subscribe(() => this.onCrosswalkHover(undefined as never as MouseEvent));\\n this.attachEvent(el, \'click\').subscribe((event) => this.nodeClick.emit(this.getNode(event)));\\n }\\n\\n /**\\n * Finds matching node in data from a hovered element\\n * @param event Mouse event\\n */\\n private onCrosswalkHover(event: MouseEvent): void {\\n if (event) {\\n const node = this.getNode(event);\\n if (node) {\\n this.nodeHoverData$.next({\\n node: node.label,\\n origin: {\\n x: event.clientX,\\n y: event.clientY,\\n },\\n });\\n this.nodeHover.emit(node); //emits node entry\\n }\\n } else {\\n this.nodeHoverData$.next(undefined);\\n this.nodeHover.emit();\\n }\\n }\\n\\n /**\\n * Clears observables\\n */\\n private clear(): void {\\n this.destroy$.next();\\n this.destroy$.complete();\\n this.destroy$ = new Subject();\\n }\\n\\n /**\\n * Returns entry from mapping if target, parent, or grandparent id matches the node name\\n * @param event Event\\n * @returns Node entry that matches the target id\\n */\\n private getNode(event: Event): T | undefined {\\n const targetId = (event.target as Element).id;\\n const parentId = (event.target as Element).parentElement?.id ?? \'\';\\n const grandparentId = (event.target as Element).parentElement?.parentElement?.id ?? \'\';\\n const idCollection = [targetId, parentId, grandparentId];\\n for (const id of idCollection) {\\n const decodedID = this.decodeId(id);\\n const match = this.mapping.find(\\n (item) => item.id?.toLowerCase() === decodedID.toLowerCase() //search mapping by name for matching node entry\\n );\\n if (match) {\\n return match;\\n }\\n }\\n return undefined;\\n }\\n\\n /**\\n * Decodes id into a normal string\\n * @param id Undecoded ID\\n * @returns id\\n */\\n private decodeId(id: string): string {\\n const replacer = (_match: string, hex: string) => String.fromCharCode(Number.parseInt(hex, 16));\\n return id.replace(/_x([\\\\da-f]+)_/gi, replacer);\\n }\\n\\n /**\\n * Turns normal string into decoded SVG id\\n * @param id id\\n * @returns Encoded id\\n */\\n private encodeId(id: string): string {\\n const replacer = (match: string) => `_x${match.charCodeAt(0).toString(16).toUpperCase()}_`;\\n return id.replace(/[^a-z0-9-]/gi, replacer);\\n }\\n\\n /**\\n * Attaches an event listener\\n * @template K\\n * @param el Element\\n * @param event Event\\n * @returns Observable\\n */\\n private attachEvent(el: Element, event: K): Observable {\\n const { renderer, destroy$ } = this;\\n const add = (handler: NodeEventHandler) => renderer.listen(el, event, handler);\\n const remove = (_handler: NodeEventHandler, unlisten: () => void) => unlisten();\\n return fromEventPattern(add, remove).pipe(takeUntil(destroy$));\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":".svg {\\n max-height: calc(100vh - 14rem);\\n overflow-y: auto;\\n}\\nsvg {\\n max-height: calc(100vh - 10rem);\\n width: 100%;\\n}\\n\\n[id^=\'Crosswalk\'] {\\n :is(path, polygon, polyline) {\\n fill: transparent;\\n stroke: transparent;\\n }\\n\\n .hover-active & g:hover > :is(path, polygon, polyline),\\n .hover-active & g > g:hover > :is(path, polygon, polyline),\\n .click-active {\\n fill: hsl(0deg 100% 50%);\\n mix-blend-mode: saturation;\\n }\\n}\\n\\n::-webkit-scrollbar {\\n width: 0.5rem;\\n height: 0.5rem;\\n}\\n\\n::-webkit-scrollbar-track {\\n background: #f8f9fa;\\n border: 0.063rem solid #d3d3d3;\\n}\\n\\n::-webkit-scrollbar-thumb {\\n background: #a0abb4;\\n border-radius: 0.5rem;\\n}\\n","styleUrl":"./interactive-svg.component.scss"}],"stylesData":"","implements":["OnChanges","OnDestroy"],"templateData":"\\n\\n\\n \\n \\n \\n\\n"},{"name":"LandingPageInDepthComponent","id":"component-LandingPageInDepthComponent-266cc77d12f81268af62a259a42675f25c0be65e3cab6881ce7afcd3dbaa4ab87e767f669fc822ea592327de677787a00c9eb4a5b9b1171d78fe6aefc8cc439b","file":"src/lib/landing-page-in-depth/landing-page-in-depth.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-landing-page-in-depth","styleUrls":["./landing-page-in-depth.component.scss"],"styles":[],"templateUrl":["./landing-page-in-depth.component.html"],"viewProviders":[],"inputsClass":[{"name":"description","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nImage description shown to the user","description":"

Image description shown to the user

\\n","line":24,"type":"string","decorators":[]},{"name":"img","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nImage shown to the user","description":"

Image shown to the user

\\n","line":27,"type":"string","decorators":[]},{"name":"moreLink","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nLink to navigate to on more button click","description":"

Link to navigate to on more button click

\\n","line":33,"type":"any","decorators":[]},{"name":"moreText","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nText for more button","description":"

Text for more button

\\n","line":30,"type":"string","decorators":[]},{"name":"title","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nImage title shown to the user","description":"

Image title shown to the user

\\n","line":21,"type":"string","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Displays the image and also corresponding title and text along with a button to read more

\\n","rawdescription":"\\n\\nDisplays the image and also corresponding title and text along with a button to read more\\n","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EMPTY_LINK, LinkDirective } from \'@hra-ui/cdk\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/**\\n * Displays the image and also corresponding title and text along with a button to read more\\n */\\n@Component({\\n selector: \'hra-landing-page-in-depth\',\\n standalone: true,\\n imports: [CommonModule, MarkdownModule, MatButtonModule, MatIconModule, LinkDirective],\\n templateUrl: \'./landing-page-in-depth.component.html\',\\n styleUrls: [\'./landing-page-in-depth.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class LandingPageInDepthComponent {\\n /** Image title shown to the user */\\n @Input() title = \'\';\\n\\n /** Image description shown to the user */\\n @Input() description = \'\';\\n\\n /** Image shown to the user */\\n @Input() img = \'\';\\n\\n /** Text for more button */\\n @Input() moreText = \'\';\\n\\n /** Link to navigate to on more button click */\\n @Input() moreLink = EMPTY_LINK;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n display: grid;\\n grid-template-columns: 2fr 3fr;\\n grid-template-rows: auto auto 1fr;\\n column-gap: 2rem;\\n row-gap: 2rem;\\n padding: 3.5rem 2rem;\\n\\n .image {\\n grid-column: 1;\\n grid-row: 1 / span 3;\\n width: 100%;\\n height: auto;\\n align-self: center;\\n border-radius: 1rem;\\n box-shadow: 0.06rem 0.13rem 1rem 0.13rem #00000029;\\n }\\n\\n .title {\\n font-size: 2rem;\\n line-height: 2.5rem;\\n margin: 0;\\n }\\n\\n .description {\\n font-size: 1rem;\\n line-height: 1.5rem;\\n\\n ::ng-deep p {\\n margin: 0;\\n }\\n\\n ::ng-deep a {\\n color: vars.$primary-rgb;\\n font-weight: 700;\\n }\\n }\\n\\n .more-button {\\n width: fit-content;\\n height: 3rem;\\n }\\n}\\n","styleUrl":"./landing-page-in-depth.component.scss"}],"stylesData":"","templateData":"\\"\\"\\n

{{ title }}

\\n\\n\\n"},{"name":"LandingPageIntroComponent","id":"component-LandingPageIntroComponent-8e48a2ad3d32eea60c9dee7976b3dbc195b3a8107a3c174ac68b4696362903f19522bad089b509daae23505334aa5361945e7a8124fd32f17a6834c349c87aed","file":"src/lib/landing-page-intro/landing-page-intro.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-landing-page-intro","styleUrls":["./landing-page-intro.component.scss"],"styles":[],"templateUrl":["./landing-page-intro.component.html"],"viewProviders":[],"inputsClass":[{"name":"description","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nDescription for FTU Explorer","description":"

Description for FTU Explorer

\\n","line":22,"type":"string","decorators":[]},{"name":"img","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nIntro Image file url","description":"

Intro Image file url

\\n","line":28,"type":"string","decorators":[]},{"name":"moreLink","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nLink to navigate to on more button click","description":"

Link to navigate to on more button click

\\n","line":34,"type":"any","decorators":[]},{"name":"moreText","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nText for more button","description":"

Text for more button

\\n","line":31,"type":"string","decorators":[]},{"name":"partners","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nThank you message to partners","description":"

Thank you message to partners

\\n","line":25,"type":"string","decorators":[]},{"name":"title","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nIntro title for FTU Explorer","description":"

Intro title for FTU Explorer

\\n","line":19,"type":"string","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for LandingPage Intro

\\n","rawdescription":"\\nComponent for LandingPage Intro","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EMPTY_LINK, LinkDirective } from \'@hra-ui/cdk\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/** Component for LandingPage Intro */\\n@Component({\\n selector: \'hra-landing-page-intro\',\\n standalone: true,\\n imports: [CommonModule, MatButtonModule, MatIconModule, MarkdownModule, LinkDirective],\\n templateUrl: \'./landing-page-intro.component.html\',\\n styleUrls: [\'./landing-page-intro.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class LandingPageIntroComponent {\\n /** Intro title for FTU Explorer */\\n @Input() title = \'\';\\n\\n /** Description for FTU Explorer */\\n @Input() description = \'\';\\n\\n /** Thank you message to partners */\\n @Input() partners = \'\';\\n\\n /** Intro Image file url */\\n @Input() img = \'\';\\n\\n /** Text for more button */\\n @Input() moreText = \'\';\\n\\n /** Link to navigate to on more button click */\\n @Input() moreLink = EMPTY_LINK;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n display: grid;\\n grid-template-columns: 3fr 2fr;\\n grid-template-rows: auto auto 3rem 1fr;\\n align-items: start;\\n column-gap: 2rem;\\n row-gap: 2rem;\\n\\n .title {\\n font-size: 3rem;\\n line-height: 4rem;\\n margin: 0;\\n }\\n\\n .more-button {\\n width: fit-content;\\n height: 3rem;\\n }\\n\\n .image {\\n grid-column: 2;\\n grid-row: 1 / span 4;\\n place-self: center;\\n width: 100%;\\n height: auto;\\n }\\n\\n .description,\\n .partners {\\n ::ng-deep p {\\n margin: 0;\\n }\\n\\n ::ng-deep a {\\n color: vars.$primary-rgb;\\n font-weight: 700;\\n }\\n }\\n\\n .red-theme {\\n background-color: #990000;\\n border-color: #990000;\\n &:hover {\\n background-color: #990000;\\n border-color: #990000;\\n\\n mat-icon {\\n transform: translateX(30%);\\n transition: 0.5s;\\n }\\n }\\n\\n &:active,\\n &:focus,\\n &:focus:not(:hover) {\\n background-color: #990000;\\n border-color: #990000;\\n\\n ::ng-deep .mat-mdc-focus-indicator {\\n background-color: #990000 !important;\\n border-color: #990000;\\n }\\n }\\n }\\n}\\n","styleUrl":"./landing-page-intro.component.scss"}],"stylesData":"","templateData":"

{{ title }}

\\n\\n\\n\\n\\n\\n\\"alt\\"\\n"},{"name":"MetricsComponent","id":"component-MetricsComponent-e52c0a1cdf090042d1924c4907a4034774cbb442217faca9ec5035e76d2796116cf55644ecf49ae040fdea1168f9c5d99f6ce15b2079f70de3d853fece481b30","file":"src/lib/metrics/metrics.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-metrics","styleUrls":["./metrics.component.scss"],"styles":[],"templateUrl":["./metrics.component.html"],"viewProviders":[],"inputsClass":[{"name":"logo","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nLogo of metrics component.","description":"

Logo of metrics component.

\\n","line":31,"type":"string","decorators":[]},{"name":"metrics","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nList of metrics that will be shown to the user.","description":"

List of metrics that will be shown to the user.

\\n","line":34,"type":"MetricItem[]","decorators":[]},{"name":"title","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nMain title of metrics component.","description":"

Main title of metrics component.

\\n","line":28,"type":"string","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Describes the metrics for the HuBMAP project.

\\n","rawdescription":"\\n\\nDescribes the metrics for the HuBMAP project.\\n","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\n\\n/**\\n An interface representing a single metric with an icon, value and description.\\n */\\nexport interface MetricItem {\\n /** Represents the icon associated with the metric. */\\n icon: string;\\n /** Describes the numberical value of the metric. */\\n value: string;\\n /** Describes the type of metric. */\\n description: string;\\n}\\n/**\\n * Describes the metrics for the HuBMAP project.\\n */\\n@Component({\\n selector: \'hra-metrics\',\\n standalone: true,\\n imports: [CommonModule],\\n templateUrl: \'./metrics.component.html\',\\n styleUrls: [\'./metrics.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class MetricsComponent {\\n /** Main title of metrics component. */\\n @Input() title = \'\';\\n\\n /** Logo of metrics component. */\\n @Input() logo = \'\';\\n\\n /** List of metrics that will be shown to the user. */\\n @Input() metrics: MetricItem[] = [];\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n padding: 2rem 0 0 0;\\n background: #f8f9fa;\\n gap: 0.5rem;\\n\\n .logo {\\n height: 2.75rem;\\n }\\n\\n .header-title {\\n font-size: 2rem;\\n line-height: 2.5rem;\\n }\\n\\n .metrics {\\n display: flex;\\n flex-direction: row;\\n overflow-x: auto;\\n max-width: 100%;\\n gap: 2rem;\\n padding: 2rem 1.75rem;\\n\\n .metric {\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n min-width: 14.25rem;\\n height: 14.75rem;\\n padding-top: 2rem;\\n padding-bottom: 2rem;\\n\\n .logo {\\n margin-bottom: 2rem;\\n }\\n\\n .value {\\n font-size: 3rem;\\n line-height: 4rem;\\n margin-bottom: 0.25rem;\\n }\\n\\n .description {\\n font-size: 1rem;\\n text-align: center;\\n }\\n }\\n }\\n}\\n","styleUrl":"./metrics.component.scss"}],"stylesData":"","templateData":"\\"\\"\\n{{ title }}\\n\\n
\\n
\\n \\"\\"\\n {{ item.value }} \\n {{ item.description }} \\n
\\n
\\n"},{"name":"ScreenSizeNoticeComponent","id":"component-ScreenSizeNoticeComponent-6b641a220201d969fb228ecf72f5e7a8fc87da742b8a53350bc9c27cea9c54a6493313826b99ec8c34dfd7004772a27748e45af5b0c9ead80bdf168a781117f8","file":"src/lib/screen-size-notice/screen-size-notice.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-screen-size-notice","styleUrls":["./screen-size-notice.component.scss"],"styles":[],"templateUrl":["./screen-size-notice.component.html"],"viewProviders":[],"inputsClass":[{"name":"content","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput for passing screen size notice content\\n","description":"

Input for passing screen size notice content

\\n","line":23,"type":"string","decorators":[]},{"name":"portal","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput of screen size notice component\\n","description":"

Input of screen size notice component

\\n","line":28,"type":"any","decorators":[]}],"outputsClass":[{"name":"proceedClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the proceed button is clicked","description":"

Emits when the proceed button is clicked

\\n","line":31,"type":"EventEmitter"}],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

The screen size notice component displays a notice for the users specifying the required screen size

\\n","rawdescription":"\\n\\nThe screen size notice component displays a notice for the users specifying the required screen size\\n","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EMPTY_LINK, LinkDirective } from \'@hra-ui/cdk\';\\n\\n/**\\n * The screen size notice component displays a notice for the users specifying the required screen size\\n */\\n@Component({\\n selector: \'hra-screen-size-notice\',\\n standalone: true,\\n imports: [CommonModule, MarkdownModule, MatButtonModule, MatIconModule, LinkDirective],\\n templateUrl: \'./screen-size-notice.component.html\',\\n styleUrls: [\'./screen-size-notice.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class ScreenSizeNoticeComponent {\\n /**\\n * Input for passing screen size notice content\\n */\\n @Input() content = \'\';\\n\\n /**\\n * Input of screen size notice component\\n */\\n @Input() portal = EMPTY_LINK;\\n\\n /** Emits when the proceed button is clicked */\\n @Output() readonly proceedClick = new EventEmitter();\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: none;\\n position: relative;\\n border-radius: 0.5rem;\\n padding: 1.5rem;\\n flex-direction: column;\\n\\n .header-close {\\n position: absolute;\\n top: 0.625rem;\\n right: 1rem;\\n }\\n\\n h3 {\\n margin: 0 0 1rem 0;\\n font-weight: 700;\\n }\\n\\n .btn-stroked {\\n font-weight: 700;\\n margin-bottom: 1rem;\\n margin-top: 1rem;\\n padding: 0.75rem 0;\\n letter-spacing: 0.5px;\\n }\\n\\n .btn-flat {\\n font-weight: 700;\\n font-size: 16px;\\n padding: 0.75rem 0;\\n letter-spacing: 0.5px;\\n color: white;\\n }\\n\\n .content {\\n font-size: 1rem;\\n line-height: 1.5rem;\\n letter-spacing: 0.5px;\\n }\\n\\n @media (max-width: 480px) {\\n display: flex;\\n }\\n}\\n","styleUrl":"./screen-size-notice.component.scss"}],"stylesData":"","templateData":"

Screen Size Notice

\\n\\n\\n\\n Human Reference Atlas Portal \\n"},{"name":"SourceListComponent","id":"component-SourceListComponent-f0d0464b044f898be3752719190f2d8ad8511283d4daafb2f8b17bd0f4dfa0290abbbeb293819664c07134fcaee5a64313aaf72d69e335a063e244c2ba1d7c0c","file":"src/lib/source-list/source-list.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-source-list","styleUrls":["./source-list.component.scss"],"styles":[],"templateUrl":["./source-list.component.html"],"viewProviders":[],"inputsClass":[{"name":"collaborateText","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput buttonon text of empty biomarker component.\\n","description":"

Input buttonon text of empty biomarker component.

\\n","line":34,"type":"string","decorators":[]},{"name":"message","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput message markdown of empty biomarker component.\\n","description":"

Input message markdown of empty biomarker component.

\\n","line":39,"type":"string","decorators":[]},{"name":"sources","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nList of sources with titles and links displayed to the user","description":"

List of sources with titles and links displayed to the user

\\n","line":30,"type":"SourceListItem[]","decorators":[]}],"outputsClass":[{"name":"collaborateClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the contact button is clicked","description":"

Emits when the contact button is clicked

\\n","line":47,"type":"EventEmitter"}],"propertiesClass":[{"name":"showTable","defaultValue":"true","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Show table of source list component which toggles to true or false\\nbased on click

\\n","line":44,"rawdescription":"\\n\\nShow table of source list component which toggles to true or false\\nbased on click\\n"}],"methodsClass":[{"name":"toggleTable","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":53,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nIt changes the value of showTable to false if value it true\\nand vice versa\\n","description":"

It changes the value of showTable to false if value it true\\nand vice versa

\\n"}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

This component shows list of sources with title and links to the datasets

\\n","rawdescription":"\\nThis component shows list of sources with title and links to the datasets","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule } from \'@angular/material/table\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EmptyBiomarkerComponent, LabelBoxComponent } from \'@hra-ui/components/atoms\';\\n\\n/** SourceListItem interface contains title and link to the dataset for the SourceList*/\\nexport interface SourceListItem {\\n /** Title of the dataset in the SourceList */\\n title: string;\\n\\n /** Label of the dataset in the SourceList */\\n label: string;\\n\\n /** Link to the dataset in the SourceList */\\n link: string;\\n}\\n\\n/** This component shows list of sources with title and links to the datasets */\\n@Component({\\n selector: \'hra-source-list\',\\n standalone: true,\\n imports: [CommonModule, MatTableModule, MatIconModule, LabelBoxComponent, EmptyBiomarkerComponent],\\n templateUrl: \'./source-list.component.html\',\\n styleUrls: [\'./source-list.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class SourceListComponent {\\n /** List of sources with titles and links displayed to the user */\\n @Input() sources: SourceListItem[] = [];\\n /**\\n * Input buttonon text of empty biomarker component.\\n */\\n @Input() collaborateText = \'\';\\n\\n /**\\n * Input message markdown of empty biomarker component.\\n */\\n @Input() message = \'\';\\n /**\\n * Show table of source list component which toggles to true or false\\n * based on click\\n */\\n showTable = true;\\n\\n /** Emits when the contact button is clicked */\\n @Output() readonly collaborateClick = new EventEmitter();\\n\\n /**\\n * It changes the value of showTable to false if value it true\\n * and vice versa\\n */\\n toggleTable(): void {\\n this.showTable = !this.showTable;\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'utils\';\\n@use \'variables\' as vars;\\n\\n:host {\\n display: block;\\n height: 100%;\\n\\n .sr-only {\\n @include utils.sr-only();\\n }\\n\\n .toggle {\\n display: flex;\\n align-items: center;\\n height: 3.5rem;\\n grid-area: source-list-header;\\n color: var(--dark-primary-text);\\n border-top: 0.063rem solid #d3d3d3;\\n border-bottom: 0.063rem solid #d3d3d3;\\n }\\n\\n .table-content {\\n height: calc(100% - 3.5rem);\\n overflow: auto;\\n\\n &.hidden {\\n display: none;\\n }\\n\\n table {\\n height: 100%;\\n }\\n\\n .mat-mdc-cell {\\n vertical-align: top;\\n border: none;\\n padding: 0.25rem 0.875rem;\\n font-size: 1rem;\\n }\\n\\n ::ng-deep .mdc-data-table__content {\\n display: block;\\n padding: 1rem 0rem;\\n }\\n }\\n}\\n","styleUrl":"./source-list.component.scss"}],"stylesData":"","templateData":"\\n Source Data\\n \\n {{ showTable ? \'keyboard_arrow_down\' : \'keyboard_arrow_up\' }}\\n \\n\\n\\n
\\n \\n \\n\\n \x3c!-- Position Column --\x3e\\n \\n \\n \\n \\n\\n \x3c!-- Data Column --\x3e\\n \\n \\n \\n \\n\\n \\n
\\n Source List Table with Title and Links\\n
Item Number{{ i + 1 }}.Title and Link\\n {{ element.title }}\\n
\\n {{ element.label }}\\n
\\n \\n
\\n"},{"name":"TissueTreeListComponent","id":"component-TissueTreeListComponent-8544338e8c5e11dd440f8b104bfa31552155bc5006289770258a8e940978177df7797adcb9bafb5b09a9943913ecf339692d528f868c6846be5c3de8a6270237","file":"src/lib/tissue-tree-list/tissue-tree-list.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-tissue-tree-list","styleUrls":["./tissue-tree-list.component.scss"],"styles":[],"templateUrl":["./tissue-tree-list.component.html"],"viewProviders":[],"inputsClass":[{"name":"nodes","defaultValue":"{} as Record","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput of tissue tree list component\\n","description":"

Input of tissue tree list component

\\n","line":69,"type":"Record","decorators":[]},{"name":"selected","defaultValue":"undefined","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nNode selected, to view the data associated with it\\n","description":"

Node selected, to view the data associated with it

\\n","line":74,"type":"T","decorators":[]}],"outputsClass":[{"name":"selectedChange","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nOutput of tissue tree list component\\n","description":"

Output of tissue tree list component

\\n","line":79,"type":"EventEmitter"}],"propertiesClass":[{"name":"control","defaultValue":"new FlatTreeControl>(\\n (node) => node.level,\\n (node) => node.expandable\\n )","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

tree controller, used to control the nodes in the tree

\\n","line":84,"rawdescription":"\\n\\ntree controller, used to control the nodes in the tree\\n","modifierKind":[144]},{"name":"dataSource","defaultValue":"new MatTreeFlatDataSource(this.control, this.flattener)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Data source of tissue tree list component, defines the data in mat-tree

\\n","line":107,"rawdescription":"\\n\\nData source of tissue tree list component, defines the data in mat-tree\\n","modifierKind":[144]},{"name":"flattener","defaultValue":"new MatTreeFlattener>(\\n (node, level) => ({\\n label: node.label,\\n expandable: (node.children?.length ?? 0) > 0,\\n level,\\n data: node,\\n }),\\n (node) => node.level,\\n (node) => node.expandable,\\n (node) => node.children?.map((id) => this.nodes[id])\\n )","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Flattener of tissue tree list component, returns flat-data structure

\\n","line":92,"rawdescription":"\\n\\nFlattener of tissue tree list component, returns flat-data structure\\n","modifierKind":[144]}],"methodsClass":[{"name":"hasChild","args":[{"name":"_","type":"number","deprecated":false,"deprecationMessage":""},{"name":"node","type":"InternalNode","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"boolean","typeParameters":[],"line":128,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\ncheck if the current node has children\\n","description":"

check if the current node has children

\\n","jsdoctags":[{"name":"_","type":"number","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}},{"name":{"pos":3422,"end":3426,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"node"},"type":"InternalNode","deprecated":false,"deprecationMessage":"","tagName":{"pos":3416,"end":3421,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":"

current selected node

\\n"},{"tagName":{"pos":3455,"end":3462,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":"

boolean, which means if node has children

\\n"}]},{"name":"resetSelection","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":146,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nResets selection and collapes all nodes of the tree.\\n","description":"

Resets selection and collapes all nodes of the tree.

\\n"},{"name":"selectNode","args":[{"name":"node","type":"T","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"void","typeParameters":[],"line":136,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nIt selects the node, which is clicked.\\n","description":"

It selects the node, which is clicked.

\\n","jsdoctags":[{"name":{"pos":3665,"end":3669,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"node"},"type":"T","deprecated":false,"deprecationMessage":"","tagName":{"pos":3659,"end":3664,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":"

Tissue Tree Item, which is clicked

\\n"}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Tabular View for hubMap tissue side-bar

\\n","rawdescription":"\\n\\nTabular View for hubMap tissue side-bar\\n","type":"component","sourceCode":"import { FlatTreeControl } from \'@angular/cdk/tree\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n Input,\\n OnChanges,\\n Output,\\n SimpleChanges,\\n} from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatRippleModule } from \'@angular/material/core\';\\nimport { MatExpansionModule } from \'@angular/material/expansion\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatTreeFlatDataSource, MatTreeFlattener, MatTreeModule } from \'@angular/material/tree\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { LinkId } from \'@hra-ui/cdk/state\';\\n\\n/** Base node type */\\nexport interface DataNode {\\n /** User readable label */\\n label: string;\\n /** Id to pass as a query parameter on navigation */\\n id?: string;\\n /** Link to navigate to on node click */\\n link?: LinkId;\\n /** Nested nodes */\\n children?: K[];\\n}\\n\\n/**\\n * Internal interface for flat tissue data hierarchy\\n */\\ninterface InternalNode> {\\n /** Displayed label */\\n label: string;\\n /** Whether the node can be expanded to display child nodes */\\n expandable: boolean;\\n /** Depth of node in the tree */\\n level: number;\\n /** Associated user node data */\\n data: T;\\n}\\n\\n/**\\n * Tabular View for hubMap tissue side-bar\\n */\\n@Component({\\n selector: \'hra-tissue-tree-list\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatButtonModule,\\n MatTreeModule,\\n MatIconModule,\\n MatExpansionModule,\\n MatRippleModule,\\n LinkDirective,\\n ],\\n templateUrl: \'./tissue-tree-list.component.html\',\\n styleUrls: [\'./tissue-tree-list.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class TissueTreeListComponent> implements OnChanges {\\n /**\\n * Input of tissue tree list component\\n */\\n @Input() nodes: Record = {} as Record;\\n\\n /**\\n * Node selected, to view the data associated with it\\n */\\n @Input() selected?: T = undefined;\\n\\n /**\\n * Output of tissue tree list component\\n */\\n @Output() readonly selectedChange = new EventEmitter();\\n\\n /**\\n * tree controller, used to control the nodes in the tree\\n */\\n readonly control = new FlatTreeControl>(\\n (node) => node.level,\\n (node) => node.expandable\\n );\\n\\n /**\\n * Flattener of tissue tree list component, returns flat-data structure\\n */\\n readonly flattener = new MatTreeFlattener>(\\n (node, level) => ({\\n label: node.label,\\n expandable: (node.children?.length ?? 0) > 0,\\n level,\\n data: node,\\n }),\\n (node) => node.level,\\n (node) => node.expandable,\\n (node) => node.children?.map((id) => this.nodes[id])\\n );\\n\\n /**\\n * Data source of tissue tree list component, defines the data in mat-tree\\n */\\n readonly dataSource = new MatTreeFlatDataSource(this.control, this.flattener);\\n\\n /**\\n * Take actions if any data changes\\n * @param changes changes in data\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'nodes\' in changes) {\\n this.dataSource.data = this.findRootNodes();\\n }\\n if (\'selected\' in changes) {\\n const path = this.selected ? this.dfsFindPath(this.findRootNodes(), this.selected) : [];\\n this.expandPath(path);\\n }\\n }\\n\\n /**\\n * check if the current node has children\\n * @param node current selected node\\n * @returns boolean, which means if node has children\\n */\\n hasChild(_: number, node: InternalNode): boolean {\\n return node.expandable;\\n }\\n\\n /**\\n * It selects the node, which is clicked.\\n * @param node Tissue Tree Item, which is clicked\\n */\\n selectNode(node: T): void {\\n if (this.selected !== node) {\\n this.selected = node;\\n this.selectedChange.emit(this.selected);\\n }\\n }\\n\\n /**\\n * Resets selection and collapes all nodes of the tree.\\n */\\n resetSelection(): void {\\n this.selected = undefined;\\n this.control.collapseAll();\\n }\\n\\n /**\\n * It creates a copy of the input nodes object.\\n * It iterates over it and removes all the children nodes from it.\\n * @returns remaining nodes which are root nodes.\\n */\\n private findRootNodes(): T[] {\\n const { nodes } = this;\\n const roots = { ...this.nodes };\\n for (const key in nodes) {\\n for (const child of nodes[key].children ?? []) {\\n delete roots[child];\\n }\\n }\\n\\n return Object.values(roots);\\n }\\n\\n /**\\n * expands the tree nodes based on the path provided.\\n * @param path is given as an input.\\n */\\n private expandPath(path: DataNode[]): void {\\n const nodes = this.control.dataNodes.filter((node) => path.includes(node.data));\\n nodes.forEach((node) => this.control.expand(node));\\n }\\n\\n /**\\n * It used the logic of depth first search to find the target node.\\n * returns the path to the target node.\\n */\\n private dfsFindPath(nodes: T[], target: T, path: T[] = []): T[] {\\n for (const node of nodes) {\\n path.push(node);\\n if (node === target) {\\n return path;\\n }\\n\\n const savedLength = path.length;\\n const children = node.children?.map((id) => this.nodes[id]) ?? [];\\n if (this.dfsFindPath(children, target, path).length > savedLength) {\\n return path;\\n }\\n\\n path.pop();\\n }\\n\\n return path;\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n display: block;\\n height: calc(100% - 5rem);\\n overflow-y: auto;\\n .row {\\n min-height: 2rem;\\n &.child {\\n padding: 5px 0 5px 64px;\\n }\\n &.selected {\\n background-color: vars.$accent-lighter-rgb;\\n }\\n\\n .toggle {\\n width: 2rem;\\n height: 2rem;\\n padding: 0.25rem;\\n }\\n\\n .label-container {\\n display: flex;\\n align-items: center;\\n height: 2rem;\\n padding: 0 1rem;\\n border-radius: 0.25rem;\\n\\n .link {\\n cursor: pointer;\\n text-decoration: none;\\n color: rgba(vars.$dark-primary-text);\\n }\\n }\\n\\n &.selected .label-container .link {\\n color: vars.$accent-rgb;\\n }\\n }\\n}\\n","styleUrl":"./tissue-tree-list.component.scss"}],"stylesData":"","implements":["OnChanges"],"templateData":"\\n \\n \\n \\n\\n \\n \\n\\n \\n \\n\\n\\n\\n
\\n \\n {{ label }}\\n \\n \\n {{ label }}\\n \\n
\\n\\n"},{"name":"TitleCardComponent","id":"component-TitleCardComponent-dda33e0370aff82797f5b3494c98b25f59e8b87daefd03e828cec8116928222c19885f73255625acfce7c66d590784fd1ad8faa664dac65130f8119fc2670670","file":"src/lib/title-card/title-card.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-title-card","styleUrls":["./title-card.component.scss"],"styles":[],"templateUrl":["./title-card.component.html"],"viewProviders":[],"inputsClass":[{"name":"description","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nDescription for the title card shown to the user","description":"

Description for the title card shown to the user

\\n","line":19,"type":"string","decorators":[]},{"name":"title","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nTitle for the title card shown to the user","description":"

Title for the title card shown to the user

\\n","line":16,"type":"string","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Displays title card to the user with title and description

\\n","rawdescription":"\\nDisplays title card to the user with title and description","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/** Displays title card to the user with title and description */\\n@Component({\\n selector: \'hra-title-card\',\\n standalone: true,\\n imports: [CommonModule, MarkdownModule],\\n templateUrl: \'./title-card.component.html\',\\n styleUrls: [\'./title-card.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class TitleCardComponent {\\n /** Title for the title card shown to the user*/\\n @Input() title = \'\';\\n\\n /** Description for the title card shown to the user*/\\n @Input() description = \'\';\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n\\n .title {\\n margin-bottom: 0.5rem;\\n }\\n}\\n","styleUrl":"./title-card.component.scss"}],"stylesData":"","templateData":"

{{ title }}

\\n\\n"}],"modules":[],"miscellaneous":{"variables":[{"name":"DOWNLOADS_LIST_POSITION","ctype":"miscellaneous","subtype":"variable","file":"src/lib/footer/footer.component.ts","deprecated":false,"deprecationMessage":"","type":"ConnectedPosition[]","defaultValue":"[\\n {\\n panelClass: \'above\',\\n originX: \'start\',\\n originY: \'top\',\\n overlayX: \'start\',\\n overlayY: \'bottom\',\\n offsetY: 0,\\n },\\n {\\n panelClass: \'below\',\\n originX: \'start\',\\n originY: \'bottom\',\\n overlayX: \'start\',\\n overlayY: \'top\',\\n },\\n]","rawdescription":"Positioning value for the download list popup","description":"

Positioning value for the download list popup

\\n"},{"name":"EMPTY_CONTACT_DATA","ctype":"miscellaneous","subtype":"variable","file":"src/lib/contact-modal/contact-modal.component.ts","deprecated":false,"deprecationMessage":"","type":"Partial","defaultValue":"{\\n email: undefined,\\n subject: undefined,\\n message: undefined,\\n}","rawdescription":"Initial empty contact data","description":"

Initial empty contact data

\\n"},{"name":"HOVER_DELAY","ctype":"miscellaneous","subtype":"variable","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"number","defaultValue":"200","rawdescription":"Delay before tooltip becomes visible","description":"

Delay before tooltip becomes visible

\\n"},{"name":"TOOLTIP_POSITIONS","ctype":"miscellaneous","subtype":"variable","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"ConnectedPosition[]","defaultValue":"[\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'start\',\\n overlayY: \'center\',\\n offsetX: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'end\',\\n overlayY: \'center\',\\n offsetX: -8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'top\',\\n offsetY: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'bottom\',\\n offsetY: -8,\\n },\\n]","rawdescription":"Tooltip position settings","description":"

Tooltip position settings

\\n"}],"functions":[],"typealiases":[],"enumerations":[],"groupedVariables":{"src/lib/footer/footer.component.ts":[{"name":"DOWNLOADS_LIST_POSITION","ctype":"miscellaneous","subtype":"variable","file":"src/lib/footer/footer.component.ts","deprecated":false,"deprecationMessage":"","type":"ConnectedPosition[]","defaultValue":"[\\n {\\n panelClass: \'above\',\\n originX: \'start\',\\n originY: \'top\',\\n overlayX: \'start\',\\n overlayY: \'bottom\',\\n offsetY: 0,\\n },\\n {\\n panelClass: \'below\',\\n originX: \'start\',\\n originY: \'bottom\',\\n overlayX: \'start\',\\n overlayY: \'top\',\\n },\\n]","rawdescription":"Positioning value for the download list popup","description":"

Positioning value for the download list popup

\\n"}],"src/lib/contact-modal/contact-modal.component.ts":[{"name":"EMPTY_CONTACT_DATA","ctype":"miscellaneous","subtype":"variable","file":"src/lib/contact-modal/contact-modal.component.ts","deprecated":false,"deprecationMessage":"","type":"Partial","defaultValue":"{\\n email: undefined,\\n subject: undefined,\\n message: undefined,\\n}","rawdescription":"Initial empty contact data","description":"

Initial empty contact data

\\n"}],"src/lib/interactive-svg/interactive-svg.component.ts":[{"name":"HOVER_DELAY","ctype":"miscellaneous","subtype":"variable","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"number","defaultValue":"200","rawdescription":"Delay before tooltip becomes visible","description":"

Delay before tooltip becomes visible

\\n"},{"name":"TOOLTIP_POSITIONS","ctype":"miscellaneous","subtype":"variable","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"ConnectedPosition[]","defaultValue":"[\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'start\',\\n overlayY: \'center\',\\n offsetX: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'end\',\\n overlayY: \'center\',\\n offsetX: -8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'top\',\\n offsetY: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'bottom\',\\n offsetY: -8,\\n },\\n]","rawdescription":"Tooltip position settings","description":"

Tooltip position settings

\\n"}]},"groupedFunctions":{},"groupedEnumerations":{},"groupedTypeAliases":{}}}')},"./dist/compodoc/components-organisms/documentation.json":module=>{"use strict";module.exports=JSON.parse('{"pipes":[],"interfaces":[{"name":"DataCell","id":"interface-DataCell-1a11b32dee89b55746dd02d393406aa7ea06e3d180099074510a109749d06241410786b045f3a9d570f4479be6442014b194d68f340724b0e76b4b0983b59760","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule, MatTableDataSource } from \'@angular/material/table\';\\nimport {\\n BiomarkerTableDataCardComponent,\\n BiomarkerTableDataIconComponent,\\n DataItem,\\n} from \'@hra-ui/components/molecules\';\\nimport { HoverDirective } from \'@hra-ui/cdk\';\\nimport { GradientPoint, SizeLegend } from \'@hra-ui/components/atoms\';\\n\\n/**\\n * RGBTriblet of type RGB to store color\\n */\\ntype RGBTriplet = [number, number, number];\\n\\n/**\\n * An interface representing a single cell of the table.\\n */\\nexport interface DataCell {\\n /** Represents the color of the icon */\\n color: string;\\n /** Represents the size of the icon */\\n size: number;\\n /** Represents the data for the data card */\\n data: {\\n cell: string;\\n biomarker: string;\\n meanExpression: number;\\n /** Number of datasets for this Tissue */\\n dataset_count: number;\\n };\\n}\\n\\n/**\\n * Details of the Tissue\\n */\\nexport interface TissueInfo {\\n /** ID of the Tissue */\\n id: string;\\n /** Name of the Tissue */\\n label: string;\\n}\\n\\n/** Describes the composition of a single row in the table */\\nexport type DataRow = [string, number | undefined, ...(T | undefined)[]];\\n\\n/** Cell types table, describing the types and quanitites of cells for a specific organ */\\n@Component({\\n selector: \'hra-biomarker-table\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatTableModule,\\n BiomarkerTableDataIconComponent,\\n HoverDirective,\\n BiomarkerTableDataCardComponent,\\n ],\\n templateUrl: \'./biomarker-table.component.html\',\\n styleUrls: [\'./biomarker-table.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableComponent implements OnChanges {\\n /**\\n * Input: TissueInfo carrying the details of the tissue open\\n */\\n @Input() tissueInfo: TissueInfo = {\\n id: \'\',\\n label: \'\',\\n };\\n\\n /** Columns for the table */\\n @Input() columns: string[] = [];\\n\\n /** Rows of the table */\\n @Input() data: DataRow[] = [];\\n\\n /** Gradient colors along with their stop points */\\n @Input() gradient: GradientPoint[] = [];\\n\\n /** Taking input for the radius of the circle and the label to be displayed. */\\n @Input() sizes: SizeLegend[] = [];\\n\\n /**Cell name which is hovered, used for highlighting */\\n @Input() hightlightedCellName = \'\';\\n\\n /** Getter method to provide the definations of the columns */\\n get columnsWithTypeAndCount(): string[] {\\n return [\'type\', \'count\', ...this.columns];\\n }\\n\\n /** Source for the table */\\n readonly dataSource = new MatTableDataSource>([]);\\n\\n /**\\n * sets the data source for the table on every change\\n * @param changes object consisting of change in the Input\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.dataSource.data = this.data;\\n }\\n }\\n\\n /** Lerp function to give value beween min and max value based on the given value\\n *\\n * @param value\\n * @param min\\n * @param max\\n * @returns\\n */\\n lerp(value: number, min: number, max: number): number {\\n return min * (1 - value) + max * value;\\n }\\n\\n /**\\n * Converts HexCode to RGB\\n * @param hex\\n * @returns\\n */\\n hex2rgb(hex: string): RGBTriplet {\\n const r = parseInt(hex.slice(1, 3), 16);\\n const g = parseInt(hex.slice(3, 5), 16);\\n const b = parseInt(hex.slice(5, 7), 16);\\n return [r, g, b];\\n }\\n\\n /**\\n * Gets Min and Max color grade based on the meanExpression value\\n * @param meanExpression\\n * @returns\\n */\\n getMinMaxColor(meanExpression: number): { minColor: RGBTriplet; maxColor: RGBTriplet } {\\n const index = this.gradient.findIndex((item, i, arr) => {\\n return meanExpression >= item.percentage && meanExpression <= arr[i + 1]?.percentage;\\n });\\n\\n const minColor: RGBTriplet = this.hex2rgb(this.gradient[index]?.color ?? this.gradient[0].color);\\n const maxColor: RGBTriplet = this.hex2rgb(\\n this.gradient[index + 1]?.color ?? this.gradient[this.gradient.length - 1].color\\n );\\n\\n return { minColor, maxColor };\\n }\\n\\n /**\\n * Gets Min and Max size grade based on the Percentage value\\n * @param percentage\\n * @returns\\n */\\n getMinMaxSize(percentage: number): { minSize: number; maxSize: number } {\\n const index = this.sizes.findIndex((item, i, arr) => {\\n return percentage >= parseFloat(item.label) / 100 && percentage <= parseFloat(arr[i + 1]?.label) / 100;\\n });\\n const minSize: number = this.sizes[index]?.radius ?? this.sizes[0].radius;\\n const maxSize: number = this.sizes[index + 1]?.radius ?? this.sizes[this.sizes.length - 1].radius;\\n return { minSize, maxSize };\\n }\\n\\n /**\\n * Calculates the color of this value on this gradient\\n * @param value\\n * @returns\\n */\\n getColor(value: number): string {\\n const { minColor, maxColor } = this.getMinMaxColor(value);\\n return (\\n \'#\' +\\n minColor\\n .map((min, index) => this.lerp(value, min, maxColor[index]))\\n .map((component) => Math.round(component).toString(16))\\n .join(\'\')\\n );\\n }\\n\\n /**\\n * gets Size of the Cell based on the percentage value\\n * @param value\\n * @returns\\n */\\n getSize(value: number): number {\\n const { minSize, maxSize } = this.getMinMaxSize(value);\\n return this.lerp(value, minSize, maxSize);\\n }\\n\\n /**\\n * rocesses the object for hover data for Table Cell\\n * @param index index of the row of the datasource\\n * @param row row of the datasource\\n * @returns\\n */\\n getHoverData([index, row]: [number, DataRow]): DataItem[][] {\\n if (row[index] === undefined) {\\n return [];\\n }\\n\\n const {\\n tissueInfo: { id, label },\\n } = this;\\n const {\\n data: { cell, biomarker, meanExpression, dataset_count },\\n } = row[index] as T;\\n\\n return [\\n [\\n { label: \'Functional Tissue Unit Name\', value: label },\\n { label: \'Uberon ID\', value: id },\\n { label: \'#Datasets\', value: `${dataset_count ?? 0}` },\\n ],\\n [\\n { label: \'Cell Type Name\', value: row[0] },\\n { label: \'CL ID\', value: cell },\\n { label: \'Number of Cells\', value: `${row[1]}` },\\n ],\\n [\\n { label: \'Gene Name\', value: this.columns[index - 2] },\\n { label: \'HGNC ID\', value: biomarker },\\n { label: \'Mean Expression Value\', value: meanExpression.toFixed(6) },\\n ],\\n ];\\n }\\n}\\n","properties":[{"name":"color","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Represents the color of the icon

\\n","line":22,"rawdescription":"\\nRepresents the color of the icon"},{"name":"data","deprecated":false,"deprecationMessage":"","type":"literal type","optional":false,"description":"

Represents the data for the data card

\\n","line":26,"rawdescription":"\\nRepresents the data for the data card"},{"name":"size","deprecated":false,"deprecationMessage":"","type":"number","optional":false,"description":"

Represents the size of the icon

\\n","line":24,"rawdescription":"\\nRepresents the size of the icon"}],"indexSignatures":[],"kind":165,"description":"

An interface representing a single cell of the table.

\\n","rawdescription":"\\n\\nAn interface representing a single cell of the table.\\n","methods":[]},{"name":"TissueInfo","id":"interface-TissueInfo-1a11b32dee89b55746dd02d393406aa7ea06e3d180099074510a109749d06241410786b045f3a9d570f4479be6442014b194d68f340724b0e76b4b0983b59760","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule, MatTableDataSource } from \'@angular/material/table\';\\nimport {\\n BiomarkerTableDataCardComponent,\\n BiomarkerTableDataIconComponent,\\n DataItem,\\n} from \'@hra-ui/components/molecules\';\\nimport { HoverDirective } from \'@hra-ui/cdk\';\\nimport { GradientPoint, SizeLegend } from \'@hra-ui/components/atoms\';\\n\\n/**\\n * RGBTriblet of type RGB to store color\\n */\\ntype RGBTriplet = [number, number, number];\\n\\n/**\\n * An interface representing a single cell of the table.\\n */\\nexport interface DataCell {\\n /** Represents the color of the icon */\\n color: string;\\n /** Represents the size of the icon */\\n size: number;\\n /** Represents the data for the data card */\\n data: {\\n cell: string;\\n biomarker: string;\\n meanExpression: number;\\n /** Number of datasets for this Tissue */\\n dataset_count: number;\\n };\\n}\\n\\n/**\\n * Details of the Tissue\\n */\\nexport interface TissueInfo {\\n /** ID of the Tissue */\\n id: string;\\n /** Name of the Tissue */\\n label: string;\\n}\\n\\n/** Describes the composition of a single row in the table */\\nexport type DataRow = [string, number | undefined, ...(T | undefined)[]];\\n\\n/** Cell types table, describing the types and quanitites of cells for a specific organ */\\n@Component({\\n selector: \'hra-biomarker-table\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatTableModule,\\n BiomarkerTableDataIconComponent,\\n HoverDirective,\\n BiomarkerTableDataCardComponent,\\n ],\\n templateUrl: \'./biomarker-table.component.html\',\\n styleUrls: [\'./biomarker-table.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableComponent implements OnChanges {\\n /**\\n * Input: TissueInfo carrying the details of the tissue open\\n */\\n @Input() tissueInfo: TissueInfo = {\\n id: \'\',\\n label: \'\',\\n };\\n\\n /** Columns for the table */\\n @Input() columns: string[] = [];\\n\\n /** Rows of the table */\\n @Input() data: DataRow[] = [];\\n\\n /** Gradient colors along with their stop points */\\n @Input() gradient: GradientPoint[] = [];\\n\\n /** Taking input for the radius of the circle and the label to be displayed. */\\n @Input() sizes: SizeLegend[] = [];\\n\\n /**Cell name which is hovered, used for highlighting */\\n @Input() hightlightedCellName = \'\';\\n\\n /** Getter method to provide the definations of the columns */\\n get columnsWithTypeAndCount(): string[] {\\n return [\'type\', \'count\', ...this.columns];\\n }\\n\\n /** Source for the table */\\n readonly dataSource = new MatTableDataSource>([]);\\n\\n /**\\n * sets the data source for the table on every change\\n * @param changes object consisting of change in the Input\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.dataSource.data = this.data;\\n }\\n }\\n\\n /** Lerp function to give value beween min and max value based on the given value\\n *\\n * @param value\\n * @param min\\n * @param max\\n * @returns\\n */\\n lerp(value: number, min: number, max: number): number {\\n return min * (1 - value) + max * value;\\n }\\n\\n /**\\n * Converts HexCode to RGB\\n * @param hex\\n * @returns\\n */\\n hex2rgb(hex: string): RGBTriplet {\\n const r = parseInt(hex.slice(1, 3), 16);\\n const g = parseInt(hex.slice(3, 5), 16);\\n const b = parseInt(hex.slice(5, 7), 16);\\n return [r, g, b];\\n }\\n\\n /**\\n * Gets Min and Max color grade based on the meanExpression value\\n * @param meanExpression\\n * @returns\\n */\\n getMinMaxColor(meanExpression: number): { minColor: RGBTriplet; maxColor: RGBTriplet } {\\n const index = this.gradient.findIndex((item, i, arr) => {\\n return meanExpression >= item.percentage && meanExpression <= arr[i + 1]?.percentage;\\n });\\n\\n const minColor: RGBTriplet = this.hex2rgb(this.gradient[index]?.color ?? this.gradient[0].color);\\n const maxColor: RGBTriplet = this.hex2rgb(\\n this.gradient[index + 1]?.color ?? this.gradient[this.gradient.length - 1].color\\n );\\n\\n return { minColor, maxColor };\\n }\\n\\n /**\\n * Gets Min and Max size grade based on the Percentage value\\n * @param percentage\\n * @returns\\n */\\n getMinMaxSize(percentage: number): { minSize: number; maxSize: number } {\\n const index = this.sizes.findIndex((item, i, arr) => {\\n return percentage >= parseFloat(item.label) / 100 && percentage <= parseFloat(arr[i + 1]?.label) / 100;\\n });\\n const minSize: number = this.sizes[index]?.radius ?? this.sizes[0].radius;\\n const maxSize: number = this.sizes[index + 1]?.radius ?? this.sizes[this.sizes.length - 1].radius;\\n return { minSize, maxSize };\\n }\\n\\n /**\\n * Calculates the color of this value on this gradient\\n * @param value\\n * @returns\\n */\\n getColor(value: number): string {\\n const { minColor, maxColor } = this.getMinMaxColor(value);\\n return (\\n \'#\' +\\n minColor\\n .map((min, index) => this.lerp(value, min, maxColor[index]))\\n .map((component) => Math.round(component).toString(16))\\n .join(\'\')\\n );\\n }\\n\\n /**\\n * gets Size of the Cell based on the percentage value\\n * @param value\\n * @returns\\n */\\n getSize(value: number): number {\\n const { minSize, maxSize } = this.getMinMaxSize(value);\\n return this.lerp(value, minSize, maxSize);\\n }\\n\\n /**\\n * rocesses the object for hover data for Table Cell\\n * @param index index of the row of the datasource\\n * @param row row of the datasource\\n * @returns\\n */\\n getHoverData([index, row]: [number, DataRow]): DataItem[][] {\\n if (row[index] === undefined) {\\n return [];\\n }\\n\\n const {\\n tissueInfo: { id, label },\\n } = this;\\n const {\\n data: { cell, biomarker, meanExpression, dataset_count },\\n } = row[index] as T;\\n\\n return [\\n [\\n { label: \'Functional Tissue Unit Name\', value: label },\\n { label: \'Uberon ID\', value: id },\\n { label: \'#Datasets\', value: `${dataset_count ?? 0}` },\\n ],\\n [\\n { label: \'Cell Type Name\', value: row[0] },\\n { label: \'CL ID\', value: cell },\\n { label: \'Number of Cells\', value: `${row[1]}` },\\n ],\\n [\\n { label: \'Gene Name\', value: this.columns[index - 2] },\\n { label: \'HGNC ID\', value: biomarker },\\n { label: \'Mean Expression Value\', value: meanExpression.toFixed(6) },\\n ],\\n ];\\n }\\n}\\n","properties":[{"name":"id","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

ID of the Tissue

\\n","line":40,"rawdescription":"\\nID of the Tissue"},{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Name of the Tissue

\\n","line":42,"rawdescription":"\\nName of the Tissue"}],"indexSignatures":[],"kind":165,"description":"

Details of the Tissue

\\n","rawdescription":"\\n\\nDetails of the Tissue\\n","methods":[]}],"injectables":[],"guards":[],"interceptors":[],"classes":[],"directives":[],"components":[{"name":"BiomarkerTableComponent","id":"component-BiomarkerTableComponent-1a11b32dee89b55746dd02d393406aa7ea06e3d180099074510a109749d06241410786b045f3a9d570f4479be6442014b194d68f340724b0e76b4b0983b59760","file":"src/lib/biomarker-table/biomarker-table.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-biomarker-table","styleUrls":["./biomarker-table.component.scss"],"styles":[],"templateUrl":["./biomarker-table.component.html"],"viewProviders":[],"inputsClass":[{"name":"columns","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nColumns for the table","description":"

Columns for the table

\\n","line":73,"type":"string[]","decorators":[]},{"name":"data","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nRows of the table","description":"

Rows of the table

\\n","line":76,"type":"DataRow[]","decorators":[]},{"name":"gradient","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nGradient colors along with their stop points","description":"

Gradient colors along with their stop points

\\n","line":79,"type":"GradientPoint[]","decorators":[]},{"name":"hightlightedCellName","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nCell name which is hovered, used for highlighting","description":"

Cell name which is hovered, used for highlighting

\\n","line":85,"type":"string","decorators":[]},{"name":"sizes","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nTaking input for the radius of the circle and the label to be displayed.","description":"

Taking input for the radius of the circle and the label to be displayed.

\\n","line":82,"type":"SizeLegend[]","decorators":[]},{"name":"tissueInfo","defaultValue":"{\\n id: \'\',\\n label: \'\',\\n }","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput: TissueInfo carrying the details of the tissue open\\n","description":"

Input: TissueInfo carrying the details of the tissue open

\\n","line":67,"type":"TissueInfo","decorators":[]}],"outputsClass":[],"propertiesClass":[{"name":"dataSource","defaultValue":"new MatTableDataSource>([])","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Source for the table

\\n","line":93,"rawdescription":"\\nSource for the table","modifierKind":[144]}],"methodsClass":[{"name":"getColor","args":[{"name":"value","type":"number","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"string","typeParameters":[],"line":165,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nCalculates the color of this value on this gradient\\n","description":"

Calculates the color of this value on this gradient

\\n","jsdoctags":[{"name":{"pos":4778,"end":4783,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"value"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":4772,"end":4777,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":4790,"end":4797,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"getHoverData","args":[{"type":"[number, DataRow]","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"[][]","typeParameters":[],"line":192,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nrocesses the object for hover data for Table Cell\\n","description":"

rocesses the object for hover data for Table Cell

\\n","jsdoctags":[{"type":"[number, DataRow]","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}},{"tagName":{"pos":5512,"end":5519,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"getMinMaxColor","args":[{"name":"meanExpression","type":"number","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"literal type","typeParameters":[],"line":133,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nGets Min and Max color grade based on the meanExpression value\\n","description":"

Gets Min and Max color grade based on the meanExpression value

\\n","jsdoctags":[{"name":{"pos":3545,"end":3559,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"meanExpression"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":3539,"end":3544,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":3566,"end":3573,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"getMinMaxSize","args":[{"name":"percentage","type":"number","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"literal type","typeParameters":[],"line":151,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nGets Min and Max size grade based on the Percentage value\\n","description":"

Gets Min and Max size grade based on the Percentage value

\\n","jsdoctags":[{"name":{"pos":4199,"end":4209,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"percentage"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":4193,"end":4198,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":4216,"end":4223,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"getSize","args":[{"name":"value","type":"number","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"number","typeParameters":[],"line":181,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\ngets Size of the Cell based on the percentage value\\n","description":"

gets Size of the Cell based on the percentage value

\\n","jsdoctags":[{"name":{"pos":5181,"end":5186,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"value"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":5175,"end":5180,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":5193,"end":5200,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"hex2rgb","args":[{"name":"hex","type":"string","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"RGBTriplet","typeParameters":[],"line":121,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nConverts HexCode to RGB\\n","description":"

Converts HexCode to RGB

\\n","jsdoctags":[{"name":{"pos":3236,"end":3239,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"hex"},"type":"string","deprecated":false,"deprecationMessage":"","tagName":{"pos":3230,"end":3235,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":3246,"end":3253,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"lerp","args":[{"name":"value","type":"number","deprecated":false,"deprecationMessage":""},{"name":"min","type":"number","deprecated":false,"deprecationMessage":""},{"name":"max","type":"number","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"number","typeParameters":[],"line":112,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nLerp function to give value beween min and max value based on the given value\\n\\n","description":"

Lerp function to give value beween min and max value based on the given value

\\n","jsdoctags":[{"name":{"pos":3024,"end":3029,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"value"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":3018,"end":3023,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"name":{"pos":3042,"end":3045,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"min"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":3036,"end":3041,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"name":{"pos":3058,"end":3061,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"max"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":3052,"end":3057,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":3068,"end":3075,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Cell types table, describing the types and quanitites of cells for a specific organ

\\n","rawdescription":"\\nCell types table, describing the types and quanitites of cells for a specific organ","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule, MatTableDataSource } from \'@angular/material/table\';\\nimport {\\n BiomarkerTableDataCardComponent,\\n BiomarkerTableDataIconComponent,\\n DataItem,\\n} from \'@hra-ui/components/molecules\';\\nimport { HoverDirective } from \'@hra-ui/cdk\';\\nimport { GradientPoint, SizeLegend } from \'@hra-ui/components/atoms\';\\n\\n/**\\n * RGBTriblet of type RGB to store color\\n */\\ntype RGBTriplet = [number, number, number];\\n\\n/**\\n * An interface representing a single cell of the table.\\n */\\nexport interface DataCell {\\n /** Represents the color of the icon */\\n color: string;\\n /** Represents the size of the icon */\\n size: number;\\n /** Represents the data for the data card */\\n data: {\\n cell: string;\\n biomarker: string;\\n meanExpression: number;\\n /** Number of datasets for this Tissue */\\n dataset_count: number;\\n };\\n}\\n\\n/**\\n * Details of the Tissue\\n */\\nexport interface TissueInfo {\\n /** ID of the Tissue */\\n id: string;\\n /** Name of the Tissue */\\n label: string;\\n}\\n\\n/** Describes the composition of a single row in the table */\\nexport type DataRow = [string, number | undefined, ...(T | undefined)[]];\\n\\n/** Cell types table, describing the types and quanitites of cells for a specific organ */\\n@Component({\\n selector: \'hra-biomarker-table\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatTableModule,\\n BiomarkerTableDataIconComponent,\\n HoverDirective,\\n BiomarkerTableDataCardComponent,\\n ],\\n templateUrl: \'./biomarker-table.component.html\',\\n styleUrls: [\'./biomarker-table.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableComponent implements OnChanges {\\n /**\\n * Input: TissueInfo carrying the details of the tissue open\\n */\\n @Input() tissueInfo: TissueInfo = {\\n id: \'\',\\n label: \'\',\\n };\\n\\n /** Columns for the table */\\n @Input() columns: string[] = [];\\n\\n /** Rows of the table */\\n @Input() data: DataRow[] = [];\\n\\n /** Gradient colors along with their stop points */\\n @Input() gradient: GradientPoint[] = [];\\n\\n /** Taking input for the radius of the circle and the label to be displayed. */\\n @Input() sizes: SizeLegend[] = [];\\n\\n /**Cell name which is hovered, used for highlighting */\\n @Input() hightlightedCellName = \'\';\\n\\n /** Getter method to provide the definations of the columns */\\n get columnsWithTypeAndCount(): string[] {\\n return [\'type\', \'count\', ...this.columns];\\n }\\n\\n /** Source for the table */\\n readonly dataSource = new MatTableDataSource>([]);\\n\\n /**\\n * sets the data source for the table on every change\\n * @param changes object consisting of change in the Input\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.dataSource.data = this.data;\\n }\\n }\\n\\n /** Lerp function to give value beween min and max value based on the given value\\n *\\n * @param value\\n * @param min\\n * @param max\\n * @returns\\n */\\n lerp(value: number, min: number, max: number): number {\\n return min * (1 - value) + max * value;\\n }\\n\\n /**\\n * Converts HexCode to RGB\\n * @param hex\\n * @returns\\n */\\n hex2rgb(hex: string): RGBTriplet {\\n const r = parseInt(hex.slice(1, 3), 16);\\n const g = parseInt(hex.slice(3, 5), 16);\\n const b = parseInt(hex.slice(5, 7), 16);\\n return [r, g, b];\\n }\\n\\n /**\\n * Gets Min and Max color grade based on the meanExpression value\\n * @param meanExpression\\n * @returns\\n */\\n getMinMaxColor(meanExpression: number): { minColor: RGBTriplet; maxColor: RGBTriplet } {\\n const index = this.gradient.findIndex((item, i, arr) => {\\n return meanExpression >= item.percentage && meanExpression <= arr[i + 1]?.percentage;\\n });\\n\\n const minColor: RGBTriplet = this.hex2rgb(this.gradient[index]?.color ?? this.gradient[0].color);\\n const maxColor: RGBTriplet = this.hex2rgb(\\n this.gradient[index + 1]?.color ?? this.gradient[this.gradient.length - 1].color\\n );\\n\\n return { minColor, maxColor };\\n }\\n\\n /**\\n * Gets Min and Max size grade based on the Percentage value\\n * @param percentage\\n * @returns\\n */\\n getMinMaxSize(percentage: number): { minSize: number; maxSize: number } {\\n const index = this.sizes.findIndex((item, i, arr) => {\\n return percentage >= parseFloat(item.label) / 100 && percentage <= parseFloat(arr[i + 1]?.label) / 100;\\n });\\n const minSize: number = this.sizes[index]?.radius ?? this.sizes[0].radius;\\n const maxSize: number = this.sizes[index + 1]?.radius ?? this.sizes[this.sizes.length - 1].radius;\\n return { minSize, maxSize };\\n }\\n\\n /**\\n * Calculates the color of this value on this gradient\\n * @param value\\n * @returns\\n */\\n getColor(value: number): string {\\n const { minColor, maxColor } = this.getMinMaxColor(value);\\n return (\\n \'#\' +\\n minColor\\n .map((min, index) => this.lerp(value, min, maxColor[index]))\\n .map((component) => Math.round(component).toString(16))\\n .join(\'\')\\n );\\n }\\n\\n /**\\n * gets Size of the Cell based on the percentage value\\n * @param value\\n * @returns\\n */\\n getSize(value: number): number {\\n const { minSize, maxSize } = this.getMinMaxSize(value);\\n return this.lerp(value, minSize, maxSize);\\n }\\n\\n /**\\n * rocesses the object for hover data for Table Cell\\n * @param index index of the row of the datasource\\n * @param row row of the datasource\\n * @returns\\n */\\n getHoverData([index, row]: [number, DataRow]): DataItem[][] {\\n if (row[index] === undefined) {\\n return [];\\n }\\n\\n const {\\n tissueInfo: { id, label },\\n } = this;\\n const {\\n data: { cell, biomarker, meanExpression, dataset_count },\\n } = row[index] as T;\\n\\n return [\\n [\\n { label: \'Functional Tissue Unit Name\', value: label },\\n { label: \'Uberon ID\', value: id },\\n { label: \'#Datasets\', value: `${dataset_count ?? 0}` },\\n ],\\n [\\n { label: \'Cell Type Name\', value: row[0] },\\n { label: \'CL ID\', value: cell },\\n { label: \'Number of Cells\', value: `${row[1]}` },\\n ],\\n [\\n { label: \'Gene Name\', value: this.columns[index - 2] },\\n { label: \'HGNC ID\', value: biomarker },\\n { label: \'Mean Expression Value\', value: meanExpression.toFixed(6) },\\n ],\\n ];\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'utils\';\\n@use \'variables\' as vars;\\n\\n:host {\\n display: block;\\n\\n .sr-only {\\n @include utils.sr-only();\\n }\\n\\n .table {\\n margin-left: -1px;\\n\\n .highlight {\\n background-color: #f8f9fa;\\n }\\n td.type {\\n text-transform: lowercase;\\n }\\n }\\n\\n .table th {\\n background-color: #fff7f8;\\n color: #59264d;\\n text-align: right;\\n }\\n\\n .table td {\\n border-bottom: 0.063rem solid #d3d3d3;\\n border-left: 0.063rem solid #d3d3d3;\\n }\\n\\n .table tr:first-child td {\\n border-top: 0rem solid #d3d3d3;\\n }\\n\\n tr > td:first-child {\\n text-align: left;\\n padding: 0 2rem;\\n }\\n\\n tr > th:first-child {\\n text-align: left;\\n padding: 0 2rem;\\n }\\n\\n tr > td:last-of-type {\\n border-right: 0.063rem solid #d3d3d3;\\n }\\n\\n tr > th:last-of-type {\\n border-right: 0.063rem solid #d3d3d3;\\n border-left: solid #d3d3d3 1px;\\n }\\n\\n .type {\\n height: 3rem;\\n max-width: 26rem;\\n min-width: 17rem;\\n border-radius: 0rem;\\n white-space: nowrap;\\n }\\n\\n .count {\\n text-align: right;\\n height: 3rem;\\n min-width: 6.5rem;\\n }\\n\\n .count:not(:first-child) {\\n border-left: solid #d3d3d3 1px;\\n }\\n\\n .icon-header {\\n max-width: 5rem;\\n white-space: nowrap;\\n overflow: hidden;\\n text-overflow: ellipsis;\\n }\\n\\n .icon-cell {\\n max-width: 5rem;\\n min-height: 3rem;\\n\\n .icon {\\n margin: auto;\\n }\\n }\\n}\\n\\n::ng-deep .mat-mdc-tab-header {\\n margin-left: -1px !important;\\n}\\n\\n::ng-deep .biomarker-table-hover.full-column-name {\\n display: flex;\\n padding: 1rem 1.5rem;\\n border-radius: 0.5rem;\\n box-shadow: 0.063rem 0.125rem 1rem 0.125rem rgba(0, 0, 0, 0.16);\\n background-color: vars.$primary-contrast-rgb;\\n overflow: auto;\\n max-width: fit-content;\\n}\\n","styleUrl":"./biomarker-table.component.scss"}],"stylesData":"","implements":["OnChanges"],"accessors":{"columnsWithTypeAndCount":{"name":"columnsWithTypeAndCount","getSignature":{"name":"columnsWithTypeAndCount","type":"[]","returnType":"string[]","line":88,"rawdescription":"\\nGetter method to provide the definations of the columns","description":"

Getter method to provide the definations of the columns

\\n"}}},"templateData":"\\n \\n\\n \\n \\n\\n \\n \\n\\n \\n \\n\\n \\n \\n\\n \\n \\n\\n \\n \\n\\n \\n \\n
\\n Cell type table by Biomarker\\n
Cell Type\\n {{ element[0] }}\\n Cell Count\\n {{ element[1] !== undefined ? (element[1] | number) : \'no data\' }}\\n \\n {{ column }}\\n \\n \\n \\n\\n \\n
\\n \\n
\\n\\n\\n
\\n {{ columnName }}\\n
\\n\\n\\n\\n \\n\\n"}],"modules":[],"miscellaneous":{"variables":[],"functions":[],"typealiases":[{"name":"DataRow","ctype":"miscellaneous","subtype":"typealias","rawtype":"[string, , ...[]]","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","description":"

Describes the composition of a single row in the table

\\n","kind":183},{"name":"RGBTriplet","ctype":"miscellaneous","subtype":"typealias","rawtype":"[number, number, number]","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","description":"

RGBTriblet of type RGB to store color

\\n","kind":183}],"enumerations":[],"groupedVariables":{},"groupedFunctions":{},"groupedEnumerations":{},"groupedTypeAliases":{"src/lib/biomarker-table/biomarker-table.component.ts":[{"name":"DataRow","ctype":"miscellaneous","subtype":"typealias","rawtype":"[string, , ...[]]","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","description":"

Describes the composition of a single row in the table

\\n","kind":183},{"name":"RGBTriplet","ctype":"miscellaneous","subtype":"typealias","rawtype":"[number, number, number]","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","description":"

RGBTriblet of type RGB to store color

\\n","kind":183}]}}}')}},__webpack_require__=>{var __webpack_exec__=moduleId=>__webpack_require__(__webpack_require__.s=moduleId);__webpack_require__.O(0,[650],(()=>(__webpack_exec__("./storybook-config-entry.js"),__webpack_exec__("./.storybook/styles.scss?ngGlobalStyle"))));__webpack_require__.O()}]); \ No newline at end of file diff --git a/storybook/components-organisms/main.91f7f2e6.iframe.bundle.js b/storybook/components-organisms/main.91f7f2e6.iframe.bundle.js deleted file mode 100644 index 5fad78aa9..000000000 --- a/storybook/components-organisms/main.91f7f2e6.iframe.bundle.js +++ /dev/null @@ -1 +0,0 @@ -(self.webpackChunkhra_ui=self.webpackChunkhra_ui||[]).push([[179],{"./dist/compodoc sync recursive ^\\.\\/.*\\/documentation\\.json$":(module,__unused_webpack_exports,__webpack_require__)=>{var map={"./components-behavioral/documentation.json":"./dist/compodoc/components-behavioral/documentation.json","./components-molecules/documentation.json":"./dist/compodoc/components-molecules/documentation.json","./components-organisms/documentation.json":"./dist/compodoc/components-organisms/documentation.json"};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id="./dist/compodoc sync recursive ^\\.\\/.*\\/documentation\\.json$"},"./libs/components/organisms lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/organisms(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.(js%7Cjsx%7Cts%7Ctsx))$":(module,__unused_webpack_exports,__webpack_require__)=>{var map={"./src/lib/biomarker-table/biomarker-table.component.stories":["./libs/components/organisms/src/lib/biomarker-table/biomarker-table.component.stories.ts",253,614],"./src/lib/biomarker-table/biomarker-table.component.stories.ts":["./libs/components/organisms/src/lib/biomarker-table/biomarker-table.component.stories.ts",253,614]};function webpackAsyncContext(req){if(!__webpack_require__.o(map,req))return Promise.resolve().then((()=>{var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}));var ids=map[req],id=ids[0];return Promise.all(ids.slice(1).map(__webpack_require__.e)).then((()=>__webpack_require__(id)))}webpackAsyncContext.keys=()=>Object.keys(map),webpackAsyncContext.id="./libs/components/organisms lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/organisms(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.(js%7Cjsx%7Cts%7Ctsx))$",module.exports=webpackAsyncContext},"./libs/components/organisms lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/organisms(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.mdx)$":module=>{function webpackEmptyAsyncContext(req){return Promise.resolve().then((()=>{var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}))}webpackEmptyAsyncContext.keys=()=>[],webpackEmptyAsyncContext.resolve=webpackEmptyAsyncContext,webpackEmptyAsyncContext.id="./libs/components/organisms lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/organisms(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.mdx)$",module.exports=webpackEmptyAsyncContext},"./.storybook/styles.scss?ngGlobalStyle":()=>{},"./libs/components/organisms/.storybook/preview.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{argTypesEnhancers:()=>argTypesEnhancers,decorators:()=>decorators,parameters:()=>parameters});var http=__webpack_require__("./node_modules/@angular/common/fesm2020/http.mjs"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),animations=__webpack_require__("./node_modules/@angular/platform-browser/fesm2020/animations.mjs"),ngxs_logger_plugin=__webpack_require__("./node_modules/@ngxs/logger-plugin/fesm2015/ngxs-logger-plugin.js"),ngxs_store=__webpack_require__("./node_modules/@ngxs/store/fesm2015/ngxs-store.js"),angular=__webpack_require__("./node_modules/@storybook/addon-docs/angular/index.js"),dist=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),ngx_markdown=__webpack_require__("./node_modules/ngx-markdown/fesm2020/ngx-markdown.mjs"),tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),angular_material_css_vars=__webpack_require__("./node_modules/angular-material-css-vars/fesm2020/angular-material-css-vars.mjs"),js_yaml=__webpack_require__("./node_modules/js-yaml/dist/js-yaml.mjs"),map=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/map.js"),tap=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/tap.js"),Observable=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/Observable.js");class Load{constructor(url){this.url=url,this.type=Load.type}}Load.type="[Theming] Load Theming File";var lib=__webpack_require__("./node_modules/zod/lib/index.mjs");const THEMING_FILE_SCHEMA=lib.z.record(lib.z.nativeEnum(angular_material_css_vars.Rm),lib.z.string());let ThemingState=class ThemingState{constructor(){this.http=(0,core.inject)(http.eN),this.materialVars=(0,core.inject)(angular_material_css_vars.jO)}load(ctx,{url}){return this.http.get(url,{responseType:"text"}).pipe((0,map.U)((data=>(0,js_yaml.zD)(data,{filename:url}))),(0,map.U)((data=>THEMING_FILE_SCHEMA.parse(data))),(0,tap.b)((data=>ctx.setState(data))),(0,tap.b)((data=>this.setVariables(data))))}setVariables(data){for(const[key,value]of Object.entries(data))this.materialVars.setVariable(key,value)}};(0,tslib_es6.gn)([(0,ngxs_store.aU)(Load),(0,tslib_es6.w6)("design:type",Function),(0,tslib_es6.w6)("design:paramtypes",[Object,Load]),(0,tslib_es6.w6)("design:returntype",Observable.y)],ThemingState.prototype,"load",null),ThemingState=(0,tslib_es6.gn)([(0,ngxs_store.ZM)({name:"theming",defaults:{}}),(0,core.Injectable)()],ThemingState);let ThemingModule=class ThemingModule{};function parseDefaultValue(type){const{defaultValue,type:typeDef}=type;if(void 0===defaultValue||"string"!=typeof defaultValue||"string"===typeDef?.name)return defaultValue;switch(typeDef?.name){case"array":case"boolean":case"number":case"object":try{return new Function("return "+defaultValue)()}catch(_error){return}case"enum":return typeDef.value.includes(defaultValue)?defaultValue:void 0;default:return}}ThemingModule=(0,tslib_es6.gn)([(0,core.NgModule)({imports:[angular_material_css_vars.Pe.forRoot({}),ngxs_store.$l.forFeature([ThemingState])]})],ThemingModule);const parameters={actions:{argTypesRegex:"^on[A-Z].*"},controls:{matchers:{color:/(background|color)$/i,date:/Date$/}},docs:{inlineStories:!0}},argTypesEnhancers=[function fixArgTypes(){return context=>{const argTypes={...context.argTypes},exclude=[...context.parameters.controls?.exclude??[]];for(const[key,type]of Object.entries(argTypes))switch(type.table.category){case"inputs":const defaultValue=parseDefaultValue(type);defaultValue!==type.defaultValue&&(argTypes[key]={...type,defaultValue});break;case"outputs":argTypes[key]={...type,defaultValue:void 0};break;default:exclude.push(key)}return context.parameters.controls={...context.parameters.controls,exclude},argTypes}}()],decorators=[(0,dist.applicationConfig)({providers:[(0,core.importProvidersFrom)(animations.BrowserAnimationsModule,http.JF,ngxs_store.$l.forRoot([],{developmentMode:!0}),ngxs_logger_plugin.xz.forRoot(),ngx_markdown.JP.forRoot({loader:http.eN}),ThemingModule)]}),(0,dist.componentWrapperDecorator)((story=>`\n
${story}
\n
\n `)),function addState(){return(fn,ctx)=>{const config=ctx.parameters.state;return config?(0,dist.applicationConfig)({providers:[(0,core.importProvidersFrom)(ngxs_store.$l.forFeature(config.states)),{provide:core.APP_INITIALIZER,multi:!0,useFactory:store=>()=>{const{actions}=config;return actions&&actions.length>0?store.dispatch(actions):void 0},deps:[ngxs_store.yh]}]})(fn,ctx):fn(ctx)}}()];!function setDocs(library){const docs=__webpack_require__("./dist/compodoc sync recursive ^\\.\\/.*\\/documentation\\.json$")(`./${library}/documentation.json`);(0,angular.P)(docs)}("components-organisms")},"./storybook-config-entry.js":(__unused_webpack_module,__unused_webpack___webpack_exports__,__webpack_require__)=>{"use strict";var dist=__webpack_require__("./node_modules/@storybook/global/dist/index.mjs"),external_STORYBOOK_MODULE_PREVIEW_API_=__webpack_require__("@storybook/preview-api");const external_STORYBOOK_MODULE_CHANNEL_POSTMESSAGE_namespaceObject=__STORYBOOK_MODULE_CHANNEL_POSTMESSAGE__,external_STORYBOOK_MODULE_CHANNEL_WEBSOCKET_namespaceObject=__STORYBOOK_MODULE_CHANNEL_WEBSOCKET__;var asyncToGenerator=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js");const pipeline=x=>x(),importers=[function(){var _ref=(0,asyncToGenerator.Z)((function*(path){if(!/^\.[\\/](?:libs\/components\/organisms(?:\/(?!\.)(?:(?:(?!(?:^|\/)\.).)*?)\/|\/|$)(?!\.)(?=.)[^/]*?\.stories\.mdx)$/.exec(path))return;const pathRemainder=path.substring(28);return __webpack_require__("./libs/components/organisms lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/organisms(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.mdx)$")("./"+pathRemainder)}));return function(_x){return _ref.apply(this,arguments)}}(),function(){var _ref2=(0,asyncToGenerator.Z)((function*(path){if(!/^\.[\\/](?:libs\/components\/organisms(?:\/(?!\.)(?:(?:(?!(?:^|\/)\.).)*?)\/|\/|$)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$/.exec(path))return;const pathRemainder=path.substring(28);return __webpack_require__("./libs/components/organisms lazy recursive ^\\.\\/.*$ include: (?:\\/libs\\/components\\/organisms(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.(js%7Cjsx%7Cts%7Ctsx))$")("./"+pathRemainder)}));return function(_x2){return _ref2.apply(this,arguments)}}()];function _importFn(){return(_importFn=(0,asyncToGenerator.Z)((function*(path){for(let i=0;iimporters[i](path)));if(moduleExports)return moduleExports}}))).apply(this,arguments)}const{SERVER_CHANNEL_URL}=dist.global,channel=(0,external_STORYBOOK_MODULE_CHANNEL_POSTMESSAGE_namespaceObject.createChannel)({page:"preview"});if(external_STORYBOOK_MODULE_PREVIEW_API_.addons.setChannel(channel),SERVER_CHANNEL_URL){const serverChannel=(0,external_STORYBOOK_MODULE_CHANNEL_WEBSOCKET_namespaceObject.createChannel)({url:SERVER_CHANNEL_URL});external_STORYBOOK_MODULE_PREVIEW_API_.addons.setServerChannel(serverChannel),window.__STORYBOOK_SERVER_CHANNEL__=serverChannel}const preview=new external_STORYBOOK_MODULE_PREVIEW_API_.PreviewWeb;window.__STORYBOOK_PREVIEW__=preview,window.__STORYBOOK_STORY_STORE__=preview.storyStore,window.__STORYBOOK_ADDONS_CHANNEL__=channel,window.__STORYBOOK_CLIENT_API__=new external_STORYBOOK_MODULE_PREVIEW_API_.ClientApi({storyStore:preview.storyStore}),preview.initialize({importFn:function importFn(_x3){return _importFn.apply(this,arguments)},getProjectAnnotations:()=>(0,external_STORYBOOK_MODULE_PREVIEW_API_.composeConfigs)([__webpack_require__("./node_modules/@storybook/angular/dist/client/docs/config.js"),__webpack_require__("./node_modules/@storybook/angular/dist/client/config.js"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/docs/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/actions/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/backgrounds/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/measure/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/outline/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/highlight/preview.mjs"),__webpack_require__("./libs/components/organisms/.storybook/preview.ts")])})},"./node_modules/@storybook/addon-docs/dist sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="./node_modules/@storybook/addon-docs/dist sync recursive",module.exports=webpackEmptyContext},"@storybook/channels":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CHANNELS__},"@storybook/client-logger":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CLIENT_LOGGER__},"@storybook/core-client":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CORE_CLIENT__},"@storybook/core-events":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CORE_EVENTS__},"@storybook/preview-api":module=>{"use strict";module.exports=__STORYBOOK_MODULE_PREVIEW_API__},"./dist/compodoc/components-behavioral/documentation.json":module=>{"use strict";module.exports=JSON.parse('{"pipes":[],"interfaces":[],"injectables":[],"guards":[],"interceptors":[],"classes":[],"directives":[],"components":[{"name":"BiomarkerDetailsComponent","id":"component-BiomarkerDetailsComponent-77362795c55e59d8109b5a13e3d57e4774ce01b5484ac21237c42d2857f2de4ecd80ec15ae66e99983246bdc3de1df675717253be566d7ba0efe1495a48c9f3c","file":"src/lib/biomarker-details/biomarker-details.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-biomarker-details","styleUrls":["./biomarker-details.component.scss"],"styles":[],"templateUrl":["./biomarker-details.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"collaborateText","defaultValue":"\'Collaborate with the HRA Team\'","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

button text of empty biomarker component.

\\n","line":106,"rawdescription":"\\n\\nbutton text of empty biomarker component.\\n","modifierKind":[144]},{"name":"gradientHoverInfo","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.GradientLegendInfo)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Info to be shown on the tooltip for Gradient Legend

\\n","line":58,"rawdescription":"\\nInfo to be shown on the tooltip for Gradient Legend","modifierKind":[144]},{"name":"gradients","defaultValue":"selectQuerySnapshot(RR.field, Ids.GradientLegend, RTypes.Gradient, \'points\' as const, [])<\\n GradientPoint[]\\n >","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Gradient colors along with their stop points

\\n","line":67,"rawdescription":"\\nGradient colors along with their stop points","modifierKind":[144]},{"name":"iri","defaultValue":"selectSnapshot(ActiveFtuSelectors.iri)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Iri of medical illustration behavior component

\\n","line":80,"rawdescription":"\\n\\nIri of medical illustration behavior component\\n","modifierKind":[144]},{"name":"isTableFullScreen","defaultValue":"false","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Indicates if the table is fully shown, defaults to false

\\n","line":64,"rawdescription":"\\nIndicates if the table is fully shown, defaults to false"},{"name":"message","defaultValue":"`We currently do not have cell type data for this biomarker.\\n

Please contact us to discuss your dataset.`","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

message markdown of empty biomarker component.

\\n","line":111,"rawdescription":"\\n\\nmessage markdown of empty biomarker component.\\n","modifierKind":[144]},{"name":"selectedOnHovered","defaultValue":"selectSnapshot(IllustratorSelectors.selectedOnHovered)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Selects the cells hovered currently to highlight in table

\\n","line":88,"rawdescription":"\\nSelects the cells hovered currently to highlight in table","modifierKind":[144]},{"name":"sizeHoverInfo","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.SizeLegendInfo)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Info to be shown on the tooltip for Size Legend

\\n","line":61,"rawdescription":"\\nInfo to be shown on the tooltip for Size Legend","modifierKind":[144]},{"name":"sizes","defaultValue":"selectQuerySnapshot(RR.field, Ids.SizeLegend, RTypes.Size, \'sizes\' as const, [])","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Taking input for the radius of the circle and the label to be displayed.

\\n","line":72,"rawdescription":"\\nTaking input for the radius of the circle and the label to be displayed.","modifierKind":[144]},{"name":"source","defaultValue":"selectSnapshot(SourceRefsSelectors.sourceReferences)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

List of sources with titles and links displayed to the user

\\n","line":75,"rawdescription":"\\nList of sources with titles and links displayed to the user","modifierKind":[144]},{"name":"tabs","defaultValue":"selectSnapshot(CellSummarySelectors.aggregates)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Table tabs

\\n","line":55,"rawdescription":"\\nTable tabs","modifierKind":[144]},{"name":"tissues","defaultValue":"selectSnapshot(TissueLibrarySelectors.tissues)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Get all tissues

\\n","line":85,"rawdescription":"\\n\\nGet all tissues\\n","modifierKind":[144]}],"methodsClass":[{"name":"collaborate","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":129,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which opens the contact modal dialog box","description":"

A function which opens the contact modal dialog box

\\n"},{"name":"toggleFullscreen","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":123,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function that toggles isTableFullScreen and\\ncalls the setScreenMode function.\\n","description":"

A function that toggles isTableFullScreen and\\ncalls the setScreenMode function.

\\n"}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

The component displays the biomarker details which includes the details, gradient legends, size legends and source lists

\\n","rawdescription":"\\nThe component displays the biomarker details which includes the details, gradient legends, size legends and source lists","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, inject } from \'@angular/core\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatTabsModule } from \'@angular/material/tabs\';\\nimport { HoverDirective } from \'@hra-ui/cdk\';\\nimport { dispatch, selectQuerySnapshot, selectSnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RR } from \'@hra-ui/cdk/state\';\\nimport { ActiveFtuSelectors, IllustratorSelectors, ScreenModeAction, TissueLibrarySelectors } from \'@hra-ui/state\';\\nimport {\\n EmptyBiomarkerComponent,\\n GradientLegendComponent,\\n GradientPoint,\\n LabelBoxComponent,\\n SizeLegend,\\n SizeLegendComponent,\\n} from \'@hra-ui/components/atoms\';\\nimport { BiomarkerTableDataCardComponent, SourceListComponent } from \'@hra-ui/components/molecules\';\\nimport { BiomarkerTableComponent, TissueInfo } from \'@hra-ui/components/organisms\';\\nimport { CellSummarySelectors, ResourceIds as Ids, ResourceTypes as RTypes, SourceRefsSelectors } from \'@hra-ui/state\';\\nimport { MatDialog, MatDialogConfig, MatDialogModule } from \'@angular/material/dialog\';\\nimport { ContactBehaviorComponent } from \'../contact-behavior/contact-behavior.component\';\\n\\n/**\\n * PlaceHolder for Empty Tissue Info\\n */\\nconst EMPTY_TISSUE_INFO: TissueInfo = {\\n id: \'\',\\n label: \'\',\\n};\\n\\n/** The component displays the biomarker details which includes the details, gradient legends, size legends and source lists*/\\n@Component({\\n selector: \'ftu-biomarker-details\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatIconModule,\\n MatTabsModule,\\n MatDialogModule,\\n BiomarkerTableComponent,\\n BiomarkerTableDataCardComponent,\\n GradientLegendComponent,\\n HoverDirective,\\n LabelBoxComponent,\\n SizeLegendComponent,\\n SourceListComponent,\\n EmptyBiomarkerComponent,\\n ],\\n templateUrl: \'./biomarker-details.component.html\',\\n styleUrls: [\'./biomarker-details.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerDetailsComponent {\\n /** Table tabs */\\n readonly tabs = selectSnapshot(CellSummarySelectors.aggregates);\\n\\n /** Info to be shown on the tooltip for Gradient Legend */\\n readonly gradientHoverInfo = selectQuerySnapshot(RR.anyText, Ids.GradientLegendInfo);\\n\\n /** Info to be shown on the tooltip for Size Legend */\\n readonly sizeHoverInfo = selectQuerySnapshot(RR.anyText, Ids.SizeLegendInfo);\\n\\n /** Indicates if the table is fully shown, defaults to false*/\\n isTableFullScreen = false;\\n\\n /** Gradient colors along with their stop points */\\n readonly gradients = selectQuerySnapshot(RR.field, Ids.GradientLegend, RTypes.Gradient, \'points\' as const, [])<\\n GradientPoint[]\\n >;\\n\\n /** Taking input for the radius of the circle and the label to be displayed. */\\n readonly sizes = selectQuerySnapshot(RR.field, Ids.SizeLegend, RTypes.Size, \'sizes\' as const, []);\\n\\n /** List of sources with titles and links displayed to the user */\\n readonly source = selectSnapshot(SourceRefsSelectors.sourceReferences);\\n\\n /**\\n * Iri of medical illustration behavior component\\n */\\n readonly iri = selectSnapshot(ActiveFtuSelectors.iri);\\n\\n /**\\n * Get all tissues\\n */\\n readonly tissues = selectSnapshot(TissueLibrarySelectors.tissues);\\n\\n /** Selects the cells hovered currently to highlight in table */\\n readonly selectedOnHovered = selectSnapshot(IllustratorSelectors.selectedOnHovered);\\n\\n /**\\n * Gets tissue title from the list of tissues\\n */\\n get tissueInfo(): TissueInfo {\\n const iri = this.iri();\\n const tissues = this.tissues();\\n if (iri === undefined) {\\n return EMPTY_TISSUE_INFO;\\n }\\n const { id, label } = tissues[iri];\\n return { id, label };\\n }\\n\\n /**\\n * button text of empty biomarker component.\\n */\\n readonly collaborateText = \'Collaborate with the HRA Team\';\\n\\n /**\\n * message markdown of empty biomarker component.\\n */\\n readonly message = `We currently do not have cell type data for this biomarker.\\n

Please contact us to discuss your dataset.`;\\n\\n /** A dispatcher function to set the screen mode */\\n private readonly setScreenMode = dispatch(ScreenModeAction.Set);\\n\\n /** A dialog box which shows contact modal after clicking on contact */\\n private readonly dialog = inject(MatDialog);\\n\\n /** A function that toggles isTableFullScreen and\\n * calls the setScreenMode function.\\n */\\n toggleFullscreen(): void {\\n this.isTableFullScreen = !this.isTableFullScreen;\\n this.setScreenMode(this.isTableFullScreen);\\n }\\n\\n /** A function which opens the contact modal dialog box */\\n collaborate(): void {\\n const dialogConfig = new MatDialogConfig();\\n dialogConfig.disableClose = true;\\n this.dialog.open(ContactBehaviorComponent, dialogConfig);\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n display: grid;\\n grid-template-columns: 1fr 1fr auto;\\n grid-template-rows: 3.5rem minmax(5rem, 2fr) 3rem 5rem minmax(5rem, 1fr);\\n grid-template-areas:\\n \'table-header table-header table-header\'\\n \'table table table\'\\n \'gradient-legend-header size-legend-header .\'\\n \'gradient-legend size-legend .\'\\n \'source-list source-list source-list\';\\n overflow-y: auto;\\n\\n .table-header {\\n grid-area: table-header;\\n border-bottom: 0.063rem solid #d3d3d3;\\n height: 3.5rem;\\n }\\n\\n .table {\\n grid-area: table;\\n max-width: 100%;\\n overflow: auto;\\n border-bottom: 0.063rem solid #d3d3d3;\\n\\n ::ng-deep .table-tab-header {\\n padding-left: 1rem;\\n padding-right: 1rem;\\n border-left: 0.063rem solid #d3d3d3;\\n border-bottom: 0.063rem solid #d3d3d3;\\n background-color: white;\\n\\n &:last-child {\\n border-right: 0.063rem solid #d3d3d3;\\n }\\n\\n &.mdc-tab-indicator--active {\\n background-color: #f8f9fa;\\n }\\n\\n &:hover {\\n background-color: #f8f9fa;\\n }\\n }\\n }\\n\\n .legend-header {\\n color: vars.$dark-primary-text;\\n border-top: 0.063rem solid #d3d3d3;\\n border-bottom: 0.063rem solid #d3d3d3;\\n border-right: 0.063rem solid #d3d3d3;\\n\\n &.gradient {\\n grid-area: gradient-legend-header;\\n }\\n\\n &.size {\\n grid-area: size-legend-header;\\n }\\n\\n .icon {\\n margin-left: 0.6rem;\\n width: unset;\\n }\\n }\\n\\n .legend {\\n padding: 1rem 2rem;\\n border-right: 0.063rem solid #d3d3d3;\\n\\n &.gradient {\\n grid-area: gradient-legend;\\n\\n .content {\\n width: 10rem;\\n }\\n }\\n\\n &.size {\\n grid-area: size-legend;\\n }\\n }\\n\\n .source-list {\\n grid-area: source-list;\\n }\\n\\n .cursor {\\n cursor: default;\\n }\\n}\\n\\n::ng-deep .biomarker-details.info-tooltip {\\n display: flex;\\n padding: 1rem;\\n border: 1px solid #a8a3a3;\\n border-radius: 0.5rem;\\n box-shadow: 1px 2px 16px 2px #00000029;\\n background-color: vars.$primary-contrast-rgb;\\n max-width: 21rem;\\n font-size: small;\\n font-family: Inter;\\n}\\n","styleUrl":"./biomarker-details.component.scss"}],"stylesData":"","accessors":{"tissueInfo":{"name":"tissueInfo","getSignature":{"name":"tissueInfo","type":"","returnType":"TissueInfo","line":93,"rawdescription":"\\n\\nGets tissue title from the list of tissues\\n","description":"

Gets tissue title from the list of tissues

\\n"}}},"templateData":"\\n Cell Types by Gene Biomarkers\\n \\n {{ isTableFullScreen ? \'close_fullscreen\' : \'open_in_full\' }}\\n \\n\\n\\n\\n \\n \\n \\n \\n\\n\\n\\n Biomarker Expression Mean in FTU\\n info_outlined\\n\\n
\\n \\n
\\n\\n\\n Percentage of Cells in FTU\\n info_outlined\\n\\n
\\n \\n
\\n\\n
\\n \\n
\\n\\n\\n
\\n {{ tooltip }}\\n
\\n\\n"},{"name":"BiomarkerDetailsWcComponent","id":"component-BiomarkerDetailsWcComponent-2a35b01614cd4a83a9546a33b9e03200b2f96e7d06e07e8803741ed0f77a8815075e35be5e35822c9fb46279ff45ee49dbbfc6fc96f328f11a42b7f9898a30ef","file":"src/lib/biomarker-details-wc/biomarker-details-wc.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-wc-biomarker-details","styleUrls":["./biomarker-details-wc.component.scss"],"styles":[],"templateUrl":["./biomarker-details-wc.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"collaborateText","defaultValue":"\'Collaborate with the HRA Team\'","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

button text of empty biomarker component.

\\n","line":145,"rawdescription":"\\n\\nbutton text of empty biomarker component.\\n","modifierKind":[144]},{"name":"currentUrl","defaultValue":"selectSnapshot(IllustratorSelectors.url)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Current illustration url

\\n","line":71,"rawdescription":"\\n\\nCurrent illustration url\\n","modifierKind":[144]},{"name":"gradientHoverInfo","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.GradientLegendInfo)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Info to be shown on the tooltip for Gradient Legend

\\n","line":111,"rawdescription":"\\nInfo to be shown on the tooltip for Gradient Legend","modifierKind":[144]},{"name":"gradients","defaultValue":"selectQuerySnapshot(RR.field, Ids.GradientLegend, RTypes.Gradient, \'points\' as const, [])<\\n GradientPoint[]\\n >","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Gradient colors along with their stop points

\\n","line":120,"rawdescription":"\\nGradient colors along with their stop points","modifierKind":[144]},{"name":"iri","defaultValue":"selectSnapshot(ActiveFtuSelectors.iri)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Iri of medical illustration behavior component

\\n","line":81,"rawdescription":"\\n\\nIri of medical illustration behavior component\\n","modifierKind":[144]},{"name":"isTableFullScreen","defaultValue":"false","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Indicates if the table is fully shown, defaults to false

\\n","line":117,"rawdescription":"\\nIndicates if the table is fully shown, defaults to false"},{"name":"mapping","defaultValue":"selectSnapshot(IllustratorSelectors.mapping)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Current mapping file

\\n","line":76,"rawdescription":"\\n\\nCurrent mapping file\\n","modifierKind":[144]},{"name":"message","defaultValue":"`We currently do not have cell type data for this biomarker.\\n

Please contact us to discuss your dataset.`","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

message markdown of empty biomarker component.

\\n","line":150,"rawdescription":"\\n\\nmessage markdown of empty biomarker component.\\n","modifierKind":[144]},{"name":"sizeHoverInfo","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.SizeLegendInfo)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Info to be shown on the tooltip for Size Legend

\\n","line":114,"rawdescription":"\\nInfo to be shown on the tooltip for Size Legend","modifierKind":[144]},{"name":"sizes","defaultValue":"selectQuerySnapshot(RR.field, Ids.SizeLegend, RTypes.Size, \'sizes\' as const, [])","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Taking input for the radius of the circle and the label to be displayed.

\\n","line":125,"rawdescription":"\\nTaking input for the radius of the circle and the label to be displayed.","modifierKind":[144]},{"name":"source","defaultValue":"selectSnapshot(SourceRefsSelectors.sourceReferences)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

List of sources with titles and links displayed to the user

\\n","line":128,"rawdescription":"\\nList of sources with titles and links displayed to the user","modifierKind":[144]},{"name":"tabs","defaultValue":"selectSnapshot(CellSummarySelectors.aggregates)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Table tabs

\\n","line":108,"rawdescription":"\\nTable tabs","modifierKind":[144]},{"name":"tissues","defaultValue":"selectSnapshot(TissueLibrarySelectors.tissues)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Get all tissues

\\n","line":86,"rawdescription":"\\n\\nGet all tissues\\n","modifierKind":[144]},{"name":"updateNodeOnClicked","defaultValue":"dispatch(IllustratorActions.SetClicked)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Updates the active node on node click

\\n","line":105,"rawdescription":"\\n\\nUpdates the active node on node click\\n","modifierKind":[144]},{"name":"updateNodeOnHover","defaultValue":"dispatch(IllustratorActions.SetHover)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Updates the active node on node hover

\\n","line":100,"rawdescription":"\\n\\nUpdates the active node on node hover\\n","modifierKind":[144]}],"methodsClass":[{"name":"collaborate","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":167,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which opens the contact modal dialog box","description":"

A function which opens the contact modal dialog box

\\n"},{"name":"toggleFullscreen","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":162,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function that toggles isTableFullScreen and\\ncalls the setScreenMode function.\\n","description":"

A function that toggles isTableFullScreen and\\ncalls the setScreenMode function.

\\n"}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for Biomarker Table Details Web component

\\n","rawdescription":"\\nComponent for Biomarker Table Details Web component","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, inject } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatTabsModule } from \'@angular/material/tabs\';\\nimport { HoverDirective } from \'@hra-ui/cdk\';\\nimport { selectSnapshot, selectQuerySnapshot, dispatch } from \'@hra-ui/cdk/injectors\';\\nimport {\\n GradientLegendComponent,\\n LabelBoxComponent,\\n SizeLegendComponent,\\n EmptyBiomarkerComponent,\\n GradientPoint,\\n SizeLegend,\\n} from \'@hra-ui/components/atoms\';\\nimport {\\n BiomarkerTableDataCardComponent,\\n InteractiveSvgComponent,\\n SourceListComponent,\\n} from \'@hra-ui/components/molecules\';\\nimport { TissueInfo, BiomarkerTableComponent } from \'@hra-ui/components/organisms\';\\nimport {\\n ActiveFtuSelectors,\\n TissueLibrarySelectors,\\n ScreenModeAction,\\n IllustratorActions,\\n IllustratorSelectors,\\n CellSummarySelectors,\\n ResourceIds as Ids,\\n ResourceTypes as RTypes,\\n SourceRefsSelectors,\\n} from \'@hra-ui/state\';\\nimport { ResourceRegistrySelectors as RR } from \'@hra-ui/cdk/state\';\\nimport { MatDialog, MatDialogConfig } from \'@angular/material/dialog\';\\nimport { ContactBehaviorComponent } from \'../contact-behavior/contact-behavior.component\';\\n\\n/**\\n * PlaceHolder for Empty Tissue Info\\n */\\nconst EMPTY_TISSUE_INFO: TissueInfo = {\\n id: \'\',\\n label: \'\',\\n};\\n\\n/** Component for Biomarker Table Details Web component */\\n@Component({\\n selector: \'ftu-wc-biomarker-details\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatIconModule,\\n MatTabsModule,\\n\\n BiomarkerTableComponent,\\n BiomarkerTableDataCardComponent,\\n GradientLegendComponent,\\n HoverDirective,\\n LabelBoxComponent,\\n SizeLegendComponent,\\n SourceListComponent,\\n EmptyBiomarkerComponent,\\n InteractiveSvgComponent,\\n ],\\n templateUrl: \'./biomarker-details-wc.component.html\',\\n styleUrls: [\'./biomarker-details-wc.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerDetailsWcComponent {\\n /**\\n * Current illustration url\\n */\\n readonly currentUrl = selectSnapshot(IllustratorSelectors.url);\\n\\n /**\\n * Current mapping file\\n */\\n readonly mapping = selectSnapshot(IllustratorSelectors.mapping);\\n\\n /**\\n * Iri of medical illustration behavior component\\n */\\n readonly iri = selectSnapshot(ActiveFtuSelectors.iri);\\n\\n /**\\n * Get all tissues\\n */\\n readonly tissues = selectSnapshot(TissueLibrarySelectors.tissues);\\n\\n /**\\n * Gets tissue title from the list of tissues\\n */\\n get tissueTitle(): string {\\n const iri = this.iri();\\n const tissues = this.tissues();\\n return iri ? tissues[iri].label : \'\';\\n }\\n\\n /**\\n * Updates the active node on node hover\\n */\\n readonly updateNodeOnHover = dispatch(IllustratorActions.SetHover);\\n\\n /**\\n * Updates the active node on node click\\n */\\n readonly updateNodeOnClicked = dispatch(IllustratorActions.SetClicked);\\n\\n /** Table tabs */\\n readonly tabs = selectSnapshot(CellSummarySelectors.aggregates);\\n\\n /** Info to be shown on the tooltip for Gradient Legend */\\n readonly gradientHoverInfo = selectQuerySnapshot(RR.anyText, Ids.GradientLegendInfo);\\n\\n /** Info to be shown on the tooltip for Size Legend */\\n readonly sizeHoverInfo = selectQuerySnapshot(RR.anyText, Ids.SizeLegendInfo);\\n\\n /** Indicates if the table is fully shown, defaults to false*/\\n isTableFullScreen = false;\\n\\n /** Gradient colors along with their stop points */\\n readonly gradients = selectQuerySnapshot(RR.field, Ids.GradientLegend, RTypes.Gradient, \'points\' as const, [])<\\n GradientPoint[]\\n >;\\n\\n /** Taking input for the radius of the circle and the label to be displayed. */\\n readonly sizes = selectQuerySnapshot(RR.field, Ids.SizeLegend, RTypes.Size, \'sizes\' as const, []);\\n\\n /** List of sources with titles and links displayed to the user */\\n readonly source = selectSnapshot(SourceRefsSelectors.sourceReferences);\\n /**\\n * Gets tissue title from the list of tissues\\n */\\n get tissueInfo(): TissueInfo {\\n const iri = this.iri();\\n const tissues = this.tissues();\\n if (iri === undefined) {\\n return EMPTY_TISSUE_INFO;\\n }\\n const { id, label } = tissues[iri];\\n return { id, label };\\n }\\n\\n /**\\n * button text of empty biomarker component.\\n */\\n readonly collaborateText = \'Collaborate with the HRA Team\';\\n\\n /**\\n * message markdown of empty biomarker component.\\n */\\n readonly message = `We currently do not have cell type data for this biomarker.\\n

Please contact us to discuss your dataset.`;\\n\\n /** A dispatcher function to set the screen mode */\\n private readonly setScreenMode = dispatch(ScreenModeAction.Set);\\n\\n /** A dialog box which shows contact modal after clicking on contact */\\n private readonly dialog = inject(MatDialog);\\n\\n /** A function that toggles isTableFullScreen and\\n * calls the setScreenMode function.\\n */\\n toggleFullscreen(): void {\\n this.isTableFullScreen = !this.isTableFullScreen;\\n this.setScreenMode(this.isTableFullScreen);\\n }\\n /** A function which opens the contact modal dialog box */\\n collaborate(): void {\\n const dialogConfig = new MatDialogConfig();\\n dialogConfig.disableClose = true;\\n this.dialog.open(ContactBehaviorComponent, dialogConfig);\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n ::ng-deep .extraTab {\\n border: 0.063rem solid #d3d3d3;\\n border-top: 0;\\n }\\n\\n .table-header {\\n grid-area: table-header;\\n border: 0.063rem solid #d3d3d3;\\n width: 43rem;\\n height: 3.5rem;\\n }\\n\\n .table {\\n grid-area: table;\\n max-width: 100%;\\n overflow: auto;\\n border: 0.063rem solid #d3d3d3;\\n\\n ::ng-deep .table-tab-header {\\n padding-left: 1rem;\\n padding-right: 1rem;\\n border-left: 0.063rem solid #d3d3d3;\\n border-bottom: 0.063rem solid #d3d3d3;\\n\\n &:last-child {\\n border-right: 0.063rem solid #d3d3d3;\\n }\\n\\n &.mdc-tab-indicator--active {\\n background-color: #f8f9fa;\\n }\\n }\\n }\\n\\n hra-biomarker-table {\\n overflow-y: auto;\\n overflow-x: auto;\\n }\\n\\n .legends {\\n display: inline-flex;\\n width: 100%;\\n .legends-right {\\n width: 50%;\\n }\\n .legends-left {\\n width: 50%;\\n }\\n }\\n\\n .legend-header {\\n color: vars.$dark-primary-text;\\n border-top: 0.063rem solid #d3d3d3;\\n border-bottom: 0.063rem solid #d3d3d3;\\n border-right: 0.063rem solid #d3d3d3;\\n\\n &.gradient {\\n grid-area: gradient-legend-header;\\n }\\n\\n &.size {\\n grid-area: size-legend-header;\\n }\\n\\n .icon {\\n margin-left: 0.6rem;\\n }\\n }\\n\\n .legend {\\n padding: 1rem 2rem;\\n border-right: 0.063rem solid #d3d3d3;\\n\\n &.gradient {\\n grid-area: gradient-legend;\\n\\n .content {\\n width: 10rem;\\n }\\n }\\n\\n &.size {\\n grid-area: size-legend;\\n }\\n }\\n\\n .source-list {\\n grid-area: source-list;\\n\\n .content {\\n width: min-content;\\n }\\n }\\n}\\n\\n::ng-deep .biomarker-details.info-tooltip {\\n display: flex;\\n padding: 1rem;\\n border: 1px solid #a8a3a3;\\n border-radius: 0.5rem;\\n box-shadow: 1px 2px 16px 2px #00000029;\\n background-color: vars.$primary-contrast-rgb;\\n max-width: 21rem;\\n font-size: small;\\n}\\n","styleUrl":"./biomarker-details-wc.component.scss"}],"stylesData":"","accessors":{"tissueTitle":{"name":"tissueTitle","getSignature":{"name":"tissueTitle","type":"string","returnType":"string","line":91,"rawdescription":"\\n\\nGets tissue title from the list of tissues\\n","description":"

Gets tissue title from the list of tissues

\\n"}},"tissueInfo":{"name":"tissueInfo","getSignature":{"name":"tissueInfo","type":"","returnType":"TissueInfo","line":132,"rawdescription":"\\n\\nGets tissue title from the list of tissues\\n","description":"

Gets tissue title from the list of tissues

\\n"}}},"templateData":"\\n {{ tissueTitle }}: FTU Illustration\\n \\n {{ isTableFullScreen ? \'close_fullscreen\' : \'open_in_full\' }}\\n \\n\\n\\n\\n \\n \\n \\n \\n \\n \\n\\n
\\n
\\n \\n Biomarker Expression Mean in FTU\\n info_outlined\\n \\n
\\n \\n
\\n
\\n\\n
\\n \\n Percentage of Cells in FTU\\n info_outlined\\n \\n
\\n \\n
\\n
\\n
\\n \\n \\n \\n
\\n \\n
\\n\\n \\n
\\n {{ tooltip }}\\n
\\n \\n \\n\\n"},{"name":"ContactBehaviorComponent","id":"component-ContactBehaviorComponent-b9d5e223798d92be933b5dbadc75b1d6c247f7b00beb75f933bb07b0a4949d22458ee53931ca654d0b255f40508dbf23ef4e516e2f80368415a86fdfe44d60b6","file":"src/lib/contact-behavior/contact-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-contact-behavior","styleUrls":["./contact-behavior.component.scss"],"styles":[],"templateUrl":["./contact-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"description","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.ContactAcknowledgement)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Information modal message to the user

\\n","line":29,"rawdescription":"\\nInformation modal message to the user","modifierKind":[144]},{"name":"postMessageTemplate","deprecated":false,"deprecationMessage":"","type":"TemplateRef","optional":false,"description":"

A template to post a message

\\n","line":20,"rawdescription":"\\nA template to post a message","decorators":[{"name":"ViewChild","stringifiedArguments":"\'postMessage\'"}],"modifierKind":[144]},{"name":"productLogoUrl","defaultValue":"selectQuerySnapshot(RR.url, Ids.ProductLogoUrl)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product logo URL to displayed on the left side.

\\n","line":23,"rawdescription":"\\nInput for product logo URL to displayed on the left side.","modifierKind":[144]},{"name":"productTitle","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.ProductTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product title to displayed on the left side.

\\n","line":26,"rawdescription":"\\nInput for product title to displayed on the left side.","modifierKind":[144]},{"name":"sendMessage","defaultValue":"dispatch(ContactActions.SendMessage)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

A dispatcher function to send message entered by user

\\n","line":32,"rawdescription":"\\nA dispatcher function to send message entered by user","modifierKind":[144]}],"methodsClass":[{"name":"close","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":51,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which closes the \'Contact us\' dialog and the acknowledgement dialog.","description":"

A function which closes the 'Contact us' dialog and the acknowledgement dialog.

\\n"},{"name":"submit","args":[{"name":"message","type":"ContactData","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"void","typeParameters":[],"line":44,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which sends/dispatches a message which contains email, subject, and message. And also opens the acknowledgement dialog box.","description":"

A function which sends/dispatches a message which contains email, subject, and message. And also opens the acknowledgement dialog box.

\\n","jsdoctags":[{"name":"message","type":"ContactData","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

A Component for contact behavior which sends the message entered by the user and shows an acknowledgement

\\n","rawdescription":"\\nA Component for contact behavior which sends the message entered by the user and shows an acknowledgement","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, inject, TemplateRef, ViewChild } from \'@angular/core\';\\nimport { MatDialog, MatDialogModule, MatDialogRef } from \'@angular/material/dialog\';\\nimport { dispatch, selectQuerySnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RR } from \'@hra-ui/cdk/state\';\\nimport { ContactData, ContactModalComponent, InfoModalComponent } from \'@hra-ui/components/molecules\';\\nimport { ResourceIds as Ids, ContactActions } from \'@hra-ui/state\';\\n\\n/** A Component for contact behavior which sends the message entered by the user and shows an acknowledgement */\\n@Component({\\n selector: \'ftu-contact-behavior\',\\n standalone: true,\\n imports: [CommonModule, MatDialogModule, ContactModalComponent, InfoModalComponent],\\n templateUrl: \'./contact-behavior.component.html\',\\n styleUrls: [\'./contact-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class ContactBehaviorComponent {\\n /** A template to post a message */\\n @ViewChild(\'postMessage\') readonly postMessageTemplate!: TemplateRef;\\n\\n /** Input for product logo URL to displayed on the left side. */\\n readonly productLogoUrl = selectQuerySnapshot(RR.url, Ids.ProductLogoUrl);\\n\\n /** Input for product title to displayed on the left side. */\\n readonly productTitle = selectQuerySnapshot(RR.anyText, Ids.ProductTitle);\\n\\n /** Information modal message to the user */\\n readonly description = selectQuerySnapshot(RR.anyText, Ids.ContactAcknowledgement);\\n\\n /** A dispatcher function to send message entered by user */\\n readonly sendMessage = dispatch(ContactActions.SendMessage);\\n\\n /** A dialog box which shows user an acknowledgement after clicking on submit */\\n private readonly dialog = inject(MatDialog);\\n\\n /** A mat form field dialog which accepts the email, subject, and message of user and validates it */\\n private readonly selfRef = inject(MatDialogRef, { optional: true });\\n\\n /** Dialog box which references the acknowledgement dialog box */\\n private postRef?: MatDialogRef;\\n\\n /** A function which sends/dispatches a message which contains email, subject, and message. And also opens the acknowledgement dialog box. */\\n submit(message: ContactData): void {\\n this.sendMessage(message);\\n this.selfRef?.close();\\n this.postRef = this.dialog.open(this.postMessageTemplate);\\n }\\n\\n /** A function which closes the \'Contact us\' dialog and the acknowledgement dialog. */\\n close(): void {\\n this.postRef?.close();\\n this.selfRef?.close();\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n\\n .contact-modal {\\n width: 41rem;\\n height: 40rem;\\n }\\n\\n .info-modal {\\n width: 35rem;\\n height: 11.8rem;\\n }\\n\\n @media screen and (max-height: 328px) {\\n .contact-modal {\\n height: calc(100vh - 2rem);\\n }\\n }\\n}\\n","styleUrl":"./contact-behavior.component.scss"}],"stylesData":"","templateData":"\\n\\n\\n\\n \\n \\n\\n"},{"name":"FooterBehaviorComponent","id":"component-FooterBehaviorComponent-d9ecf51e28e6cdbe2f77b2f819a2e3df3acd0382e946f213975e78af53f6c11b1a7a013fefb862cfa9449b9973d2ea3497fa9687d6c04eb492751c2a83c17410","file":"src/lib/footer-behavior/footer-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-footer-behavior","styleUrls":["./footer-behavior.component.scss"],"styles":[],"templateUrl":["./footer-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"download","defaultValue":"dispatch(DownloadActions.Download)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

A dispatcher function to download file in specified format

\\n","line":39,"rawdescription":"\\nA dispatcher function to download file in specified format","modifierKind":[144]},{"name":"downloadFormats","defaultValue":"selectSnapshot(DownloadSelectors.formats)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Selects a snapshot of the current value of the available download formats

\\n","line":27,"rawdescription":"\\nSelects a snapshot of the current value of the available download formats","modifierKind":[144]},{"name":"embed","defaultValue":"LinkIds.Embed","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Embed link routing after clicking on Embed

\\n","line":36,"rawdescription":"\\nEmbed link routing after clicking on Embed","modifierKind":[144]},{"name":"hraPortal","defaultValue":"LinkIds.Portal","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Hra portal link routing after clicking on HRA Portal

\\n","line":30,"rawdescription":"\\nHra portal link routing after clicking on HRA Portal","modifierKind":[144]},{"name":"illustrationMetadata","defaultValue":"LinkIds.Illustration","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Metadata page link routing after clicking on Illustration

\\n","line":33,"rawdescription":"\\nMetadata page link routing after clicking on Illustration","modifierKind":[144]},{"name":"productLogoUrl","defaultValue":"selectQuerySnapshot(RR.url, Ids.ProductLogoUrl)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product logo URL to displayed on the left side.

\\n","line":21,"rawdescription":"\\nInput for product logo URL to displayed on the left side.","modifierKind":[144]},{"name":"productTitle","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.ProductTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product title to displayed on the left side.

\\n","line":24,"rawdescription":"\\nInput for product title to displayed on the left side.","modifierKind":[144]},{"name":"size","defaultValue":"selectSnapshot(ScreenModeSelectors.size)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Selects the current value of the available ScreenMode Size

\\n","line":41,"rawdescription":"\\nSelects the current value of the available ScreenMode Size","modifierKind":[144]}],"methodsClass":[{"name":"contact","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":47,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which opens the contact modal dialog box","description":"

A function which opens the contact modal dialog box

\\n"}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

A component for footer behavior which provides functionality for various buttons in footer

\\n","rawdescription":"\\nA component for footer behavior which provides functionality for various buttons in footer","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, inject } from \'@angular/core\';\\nimport { MatDialog, MatDialogConfig, MatDialogModule } from \'@angular/material/dialog\';\\nimport { dispatch, selectQuerySnapshot, selectSnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RR } from \'@hra-ui/cdk/state\';\\nimport { FooterComponent } from \'@hra-ui/components/molecules\';\\nimport { DownloadActions, DownloadSelectors, ResourceIds as Ids, LinkIds, ScreenModeSelectors } from \'@hra-ui/state\';\\nimport { ContactBehaviorComponent } from \'../contact-behavior/contact-behavior.component\';\\n\\n/** A component for footer behavior which provides functionality for various buttons in footer */\\n@Component({\\n selector: \'ftu-footer-behavior\',\\n standalone: true,\\n imports: [CommonModule, MatDialogModule, FooterComponent, ContactBehaviorComponent],\\n templateUrl: \'./footer-behavior.component.html\',\\n styleUrls: [\'./footer-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class FooterBehaviorComponent {\\n /** Input for product logo URL to displayed on the left side. */\\n readonly productLogoUrl = selectQuerySnapshot(RR.url, Ids.ProductLogoUrl);\\n\\n /** Input for product title to displayed on the left side. */\\n readonly productTitle = selectQuerySnapshot(RR.anyText, Ids.ProductTitle);\\n\\n /** Selects a snapshot of the current value of the available download formats */\\n readonly downloadFormats = selectSnapshot(DownloadSelectors.formats);\\n\\n /** Hra portal link routing after clicking on HRA Portal */\\n readonly hraPortal = LinkIds.Portal;\\n\\n /** Metadata page link routing after clicking on Illustration */\\n readonly illustrationMetadata = LinkIds.Illustration;\\n\\n /** Embed link routing after clicking on Embed */\\n readonly embed = LinkIds.Embed;\\n\\n /** A dispatcher function to download file in specified format */\\n readonly download = dispatch(DownloadActions.Download);\\n /** Selects the current value of the available ScreenMode Size */\\n readonly size = selectSnapshot(ScreenModeSelectors.size);\\n\\n /** A dialog box which shows contact modal after clicking on contact */\\n private readonly dialog = inject(MatDialog);\\n\\n /** A function which opens the contact modal dialog box */\\n contact(): void {\\n const dialogConfig = new MatDialogConfig();\\n dialogConfig.disableClose = true;\\n this.dialog.open(ContactBehaviorComponent, dialogConfig);\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n}\\n","styleUrl":"./footer-behavior.component.scss"}],"stylesData":"","templateData":"\\n\\n"},{"name":"HeaderBehaviorComponent","id":"component-HeaderBehaviorComponent-a76f74e70c7aacab4debd2492e1302dc534513cd4598dce499fc0d4f09bf0a16fc333bcb4bb100ffc9dbcb5427533473060400e0ae5eb7051dac7768474ae300","file":"src/lib/header-behavior/header-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-header-behavior","styleUrls":["./header-behavior.component.scss"],"styles":[],"templateUrl":["./header-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"aboutLink","defaultValue":"LinkIds.About","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for about link for user click action.

\\n","line":41,"rawdescription":"\\n\\nInput for about link for user click action.\\n","modifierKind":[144]},{"name":"appTitle","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.AppTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for app title to show on the left side.

\\n","line":31,"rawdescription":"\\n\\nInput for app title to show on the left side.\\n","modifierKind":[144]},{"name":"productLogoUrl","defaultValue":"selectQuerySnapshot(RR.url, Ids.ProductLogoUrl)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product logo URL to displayed on the left side.

\\n","line":21,"rawdescription":"\\n\\nInput for product logo URL to displayed on the left side.\\n","modifierKind":[144]},{"name":"productTitle","defaultValue":"selectQuerySnapshot(RR.anyText, Ids.ProductTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product title to displayed on the left side.

\\n","line":26,"rawdescription":"\\n\\nInput for product title to displayed on the left side.\\n","modifierKind":[144]},{"name":"productTitleLink","defaultValue":"LinkIds.ProductTitle","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for product title link for user click action

\\n","line":36,"rawdescription":"\\n\\nInput for product title link for user click action\\n","modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for Header Behavior

\\n","rawdescription":"\\nComponent for Header Behavior","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component } from \'@angular/core\';\\nimport { selectQuerySnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RR } from \'@hra-ui/cdk/state\';\\nimport { HeaderComponent } from \'@hra-ui/components/molecules\';\\nimport { ResourceIds as Ids, LinkIds } from \'@hra-ui/state\';\\n\\n/** Component for Header Behavior */\\n@Component({\\n selector: \'ftu-header-behavior\',\\n standalone: true,\\n imports: [CommonModule, HeaderComponent],\\n templateUrl: \'./header-behavior.component.html\',\\n styleUrls: [\'./header-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class HeaderBehaviorComponent {\\n /**\\n * Input for product logo URL to displayed on the left side.\\n */\\n readonly productLogoUrl = selectQuerySnapshot(RR.url, Ids.ProductLogoUrl);\\n\\n /**\\n * Input for product title to displayed on the left side.\\n */\\n readonly productTitle = selectQuerySnapshot(RR.anyText, Ids.ProductTitle);\\n\\n /**\\n * Input for app title to show on the left side.\\n */\\n readonly appTitle = selectQuerySnapshot(RR.anyText, Ids.AppTitle);\\n\\n /**\\n * Input for product title link for user click action\\n */\\n readonly productTitleLink = LinkIds.ProductTitle;\\n\\n /**\\n * Input for about link for user click action.\\n */\\n readonly aboutLink = LinkIds.About;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n}\\n","styleUrl":"./header-behavior.component.scss"}],"stylesData":"","templateData":"\\n\\n"},{"name":"HraLandingPageIntroWcBehaviourComponent","id":"component-HraLandingPageIntroWcBehaviourComponent-b8c2509d12b92bff8ab139855b712563f2a92e8aa91e8ecc05714063b91b1765ade0e9c6e691367a2eaa4724d94d6dfe4ade28c89da03cfcf6eae21630452b23","file":"src/lib/hra-landing-page-intro-wc-behaviour/hra-landing-page-intro-wc-behaviour.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-wc-intro","styleUrls":["./hra-landing-page-intro-wc-behaviour.component.scss"],"styles":[],"templateUrl":["./hra-landing-page-intro-wc-behaviour.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"landingPageIntroDescription","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPageDescription)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro description

\\n","line":21,"rawdescription":"\\nselect snapshot for landing page intro description","modifierKind":[144]},{"name":"landingPageIntroPartners","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPagePartners)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro partners

\\n","line":25,"rawdescription":"\\nselect snapshot for landing page intro partners","modifierKind":[144]},{"name":"landingPageIntroReadMore","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPageIntroReadMore)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro partners

\\n","line":23,"rawdescription":"\\nselect snapshot for landing page intro partners","modifierKind":[144]},{"name":"landingPageIntroTitle","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.LandingPageTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for Landing Page title

\\n","line":19,"rawdescription":"\\nselect snapshot for Landing Page title","modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for LandingPage Intro Behaviour: Web component

\\n","rawdescription":"\\nComponent for LandingPage Intro Behaviour: Web component","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { HraLandingPageIntroWcComponent } from \'@hra-ui/components/molecules\';\\nimport { ResourceRegistrySelectors as RRS } from \'@hra-ui/cdk/state\';\\nimport { selectQuerySnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceIds as RIds } from \'@hra-ui/state\';\\n\\n/** Component for LandingPage Intro Behaviour: Web component */\\n@Component({\\n selector: \'ftu-wc-intro\',\\n standalone: true,\\n imports: [CommonModule, HraLandingPageIntroWcComponent],\\n templateUrl: \'./hra-landing-page-intro-wc-behaviour.component.html\',\\n styleUrls: [\'./hra-landing-page-intro-wc-behaviour.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class HraLandingPageIntroWcBehaviourComponent {\\n /** select snapshot for Landing Page title */\\n readonly landingPageIntroTitle = selectQuerySnapshot(RRS.anyText, RIds.LandingPageTitle);\\n /** select snapshot for landing page intro description */\\n readonly landingPageIntroDescription = selectQuerySnapshot(RRS.markdown, RIds.LandingPageDescription);\\n /** select snapshot for landing page intro partners */\\n readonly landingPageIntroReadMore = selectQuerySnapshot(RRS.markdown, RIds.LandingPageIntroReadMore);\\n /** select snapshot for landing page intro partners */\\n readonly landingPageIntroPartners = selectQuerySnapshot(RRS.markdown, RIds.LandingPagePartners);\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n\\n .intro {\\n display: inline-grid;\\n border: 1px solid #e2e7e9;\\n padding: 24px 32px 24px 32px;\\n width: 71rem;\\n }\\n}\\n","styleUrl":"./hra-landing-page-intro-wc-behaviour.component.scss"}],"stylesData":"","templateData":"\\n"},{"name":"LandingPageContentComponent","id":"component-LandingPageContentComponent-d72615e2863b7f2f08c767452a75c71c9e079687610cd3e50b54f72f11546184f7ad55c5304741d79adb9bb9ea161cdac4253ae6fb1cbbf15040f2814110616a","file":"src/lib/landing-page-content/landing-page-content.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-landing-page-content","styleUrls":["./landing-page-content.component.scss"],"styles":[],"templateUrl":["./landing-page-content.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"intersectableEls","deprecated":false,"deprecationMessage":"","type":"QueryList","optional":false,"description":"

array of element refs for intersectables

\\n","line":34,"rawdescription":"\\narray of element refs for intersectables","decorators":[{"name":"ViewChildren","stringifiedArguments":"\'intersectable\', {read: ElementRef}"}],"modifierKind":[144]},{"name":"landingPageDepthDescription","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPageDepthDescription)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page depth description

\\n","line":57,"rawdescription":"\\nselect snapshot for landing page depth description","modifierKind":[144]},{"name":"landingPageDepthImg","defaultValue":"selectQuerySnapshot(RRS.url, RIds.LandingPageDepthImg)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page depth img

\\n","line":61,"rawdescription":"\\nselect snapshot for landing page depth img","modifierKind":[144]},{"name":"landingPageDepthMoreText","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.LandingPageDepthMoreText)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot forlanding page depth more text

\\n","line":59,"rawdescription":"\\nselect snapshot forlanding page depth more text","modifierKind":[144]},{"name":"landingPageDepthTitle","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.LandingPageDepthTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page depth title

\\n","line":55,"rawdescription":"\\nselect snapshot for landing page depth title","modifierKind":[144]},{"name":"landingPageIntroDescription","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPageDescription)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro description

\\n","line":40,"rawdescription":"\\nselect snapshot for landing page intro description","modifierKind":[144]},{"name":"landingPageIntroImg","defaultValue":"selectQuerySnapshot(RRS.url, RIds.LandingPageIntroImg)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro img

\\n","line":47,"rawdescription":"\\nselect snapshot for landing page intro img","modifierKind":[144]},{"name":"landingPageIntroMoreText","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.LandingPageIntroMoreText)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro more text

\\n","line":45,"rawdescription":"\\nselect snapshot for landing page intro more text","modifierKind":[144]},{"name":"landingPageIntroPartners","defaultValue":"selectQuerySnapshot(RRS.markdown, RIds.LandingPagePartners)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for landing page intro partners

\\n","line":42,"rawdescription":"\\nselect snapshot for landing page intro partners","modifierKind":[144]},{"name":"landingPageIntroTitle","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.LandingPageTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for Landing Page title

\\n","line":37,"rawdescription":"\\nselect snapshot for Landing Page title","modifierKind":[144]},{"name":"LinkIds","defaultValue":"LinkIds","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Expose links for use it template

\\n","line":64,"rawdescription":"\\nExpose links for use it template","modifierKind":[144]},{"name":"metrics","defaultValue":"selectQuerySnapshot(RRS.field, RIds.Metrics, RTypes.Metrics, \'metrics\' as const, [])","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for metrics

\\n","line":49,"rawdescription":"\\nselect snapshot for metrics","modifierKind":[144]},{"name":"metricsLogo","defaultValue":"selectQuerySnapshot(RRS.url, RIds.MetricsLogo)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for metrics logo

\\n","line":53,"rawdescription":"\\nselect snapshot for metrics logo","modifierKind":[144]},{"name":"metricsTitle","defaultValue":"selectQuerySnapshot(RRS.anyText, RIds.MetricsTitle)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

select snapshot for metrics title

\\n","line":51,"rawdescription":"\\nselect snapshot for metrics title","modifierKind":[144]}],"methodsClass":[{"name":"handleIntersection","args":[{"name":"entries","type":"IntersectionObserverEntry[]","deprecated":false,"deprecationMessage":""},{"name":"observer","type":"IntersectionObserver","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"void","typeParameters":[],"line":82,"deprecated":false,"deprecationMessage":"","rawdescription":"\\ncallback function for intersection observer","description":"

callback function for intersection observer

\\n","jsdoctags":[{"name":"entries","type":"IntersectionObserverEntry[]","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}},{"name":"observer","type":"IntersectionObserver","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for LandingPageContent Behavior

\\n","rawdescription":"\\nComponent for LandingPageContent Behavior","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport {\\n AfterViewInit,\\n ChangeDetectionStrategy,\\n Component,\\n ElementRef,\\n inject,\\n QueryList,\\n Renderer2,\\n ViewChildren,\\n} from \'@angular/core\';\\nimport { injectDestroy$, selectQuerySnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RRS } from \'@hra-ui/cdk/state\';\\nimport {\\n LandingPageInDepthComponent,\\n LandingPageIntroComponent,\\n MetricItem,\\n MetricsComponent,\\n} from \'@hra-ui/components/molecules\';\\nimport { LinkIds, ResourceIds as RIds, ResourceTypes as RTypes } from \'@hra-ui/state\';\\n\\n/** Component for LandingPageContent Behavior */\\n@Component({\\n selector: \'ftu-landing-page-content\',\\n standalone: true,\\n imports: [CommonModule, LandingPageIntroComponent, MetricsComponent, LandingPageInDepthComponent],\\n templateUrl: \'./landing-page-content.component.html\',\\n styleUrls: [\'./landing-page-content.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class LandingPageContentComponent implements AfterViewInit {\\n /** array of element refs for intersectables */\\n @ViewChildren(\'intersectable\', { read: ElementRef })\\n readonly intersectableEls!: QueryList;\\n\\n /** select snapshot for Landing Page title */\\n readonly landingPageIntroTitle = selectQuerySnapshot(RRS.anyText, RIds.LandingPageTitle);\\n\\n /** select snapshot for landing page intro description */\\n readonly landingPageIntroDescription = selectQuerySnapshot(RRS.markdown, RIds.LandingPageDescription);\\n /** select snapshot for landing page intro partners */\\n readonly landingPageIntroPartners = selectQuerySnapshot(RRS.markdown, RIds.LandingPagePartners);\\n\\n /** select snapshot for landing page intro more text */\\n readonly landingPageIntroMoreText = selectQuerySnapshot(RRS.anyText, RIds.LandingPageIntroMoreText);\\n /** select snapshot for landing page intro img */\\n readonly landingPageIntroImg = selectQuerySnapshot(RRS.url, RIds.LandingPageIntroImg);\\n /** select snapshot for metrics */\\n readonly metrics = selectQuerySnapshot(RRS.field, RIds.Metrics, RTypes.Metrics, \'metrics\' as const, []);\\n /** select snapshot for metrics title */\\n readonly metricsTitle = selectQuerySnapshot(RRS.anyText, RIds.MetricsTitle);\\n /** select snapshot for metrics logo */\\n readonly metricsLogo = selectQuerySnapshot(RRS.url, RIds.MetricsLogo);\\n /** select snapshot for landing page depth title */\\n readonly landingPageDepthTitle = selectQuerySnapshot(RRS.anyText, RIds.LandingPageDepthTitle);\\n /** select snapshot for landing page depth description */\\n readonly landingPageDepthDescription = selectQuerySnapshot(RRS.markdown, RIds.LandingPageDepthDescription);\\n /** select snapshot forlanding page depth more text */\\n readonly landingPageDepthMoreText = selectQuerySnapshot(RRS.anyText, RIds.LandingPageDepthMoreText);\\n /** select snapshot for landing page depth img */\\n readonly landingPageDepthImg = selectQuerySnapshot(RRS.url, RIds.LandingPageDepthImg);\\n\\n /** Expose links for use it template */\\n readonly LinkIds = LinkIds;\\n\\n /** Renderer to add class for animation */\\n private readonly renderer = inject(Renderer2);\\n /** destroys observer */\\n private readonly destroy$ = injectDestroy$();\\n\\n /** creates an observer after view init */\\n ngAfterViewInit(): void {\\n const observer = new IntersectionObserver(this.handleIntersection.bind(this), {\\n threshold: 0.18,\\n });\\n\\n this.intersectableEls.forEach((el) => observer.observe(el.nativeElement));\\n this.destroy$.subscribe(() => observer.disconnect());\\n }\\n\\n /** callback function for intersection observer */\\n handleIntersection(entries: IntersectionObserverEntry[], observer: IntersectionObserver): void {\\n for (const { isIntersecting, target } of entries) {\\n if (isIntersecting) {\\n this.renderer.addClass(target, \'visible\');\\n observer.unobserve(target);\\n }\\n }\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n overflow-x: hidden;\\n\\n .intro {\\n margin: 3.5rem 2rem;\\n }\\n\\n .metrics {\\n opacity: 0;\\n\\n &.visible {\\n animation: fadeIn 2s ease-in forwards;\\n }\\n }\\n\\n .in-depth {\\n opacity: 0;\\n\\n &.visible {\\n overflow: hidden;\\n animation: slideIn 2s ease-in-out forwards;\\n }\\n }\\n}\\n\\n@keyframes fadeIn {\\n 0% {\\n opacity: 0;\\n }\\n\\n 100% {\\n opacity: 1;\\n }\\n}\\n\\n@keyframes slideIn {\\n 0% {\\n transform: translateX(200%);\\n opacity: 1;\\n }\\n\\n 100% {\\n transform: translateX(0);\\n opacity: 1;\\n }\\n}\\n","styleUrl":"./landing-page-content.component.scss"}],"stylesData":"","implements":["AfterViewInit"],"templateData":"\\n\\n\\n\\n\\n\\n"},{"name":"MedicalIllustrationBehaviorComponent","id":"component-MedicalIllustrationBehaviorComponent-6fea78f0a6011315eef3ff0e9cf3f451130b68d93388f1b8ff7f362f6c7f2ec8bbad2f6518d0329f94a749b1e02a1018129acf2b8340f015397957c3e0fd985d","file":"src/lib/medical-illustration-behavior/medical-illustration-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-medical-illustration-behavior","styleUrls":["./medical-illustration-behavior.component.scss"],"styles":[],"templateUrl":["./medical-illustration-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"currentUrl","defaultValue":"selectSnapshot(IllustratorSelectors.url)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Current illustration url

\\n","line":23,"rawdescription":"\\n\\nCurrent illustration url\\n","modifierKind":[144]},{"name":"iri","defaultValue":"selectSnapshot(ActiveFtuSelectors.iri)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Iri of medical illustration behavior component

\\n","line":33,"rawdescription":"\\n\\nIri of medical illustration behavior component\\n","modifierKind":[144]},{"name":"mapping","defaultValue":"selectSnapshot(IllustratorSelectors.mapping)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Current mapping file

\\n","line":28,"rawdescription":"\\n\\nCurrent mapping file\\n","modifierKind":[144]},{"name":"tissues","defaultValue":"selectSnapshot(TissueLibrarySelectors.tissues)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Get all tissues

\\n","line":38,"rawdescription":"\\n\\nGet all tissues\\n","modifierKind":[144]},{"name":"updateNodeOnClicked","defaultValue":"dispatch(IllustratorActions.SetClicked)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Updates the active node on node click

\\n","line":57,"rawdescription":"\\n\\nUpdates the active node on node click\\n","modifierKind":[144]},{"name":"updateNodeOnHover","defaultValue":"dispatch(IllustratorActions.SetHover)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Updates the active node on node hover

\\n","line":52,"rawdescription":"\\n\\nUpdates the active node on node hover\\n","modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Behavior component for medical illustration component

\\n","rawdescription":"\\n\\nBehavior component for medical illustration component\\n","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component } from \'@angular/core\';\\nimport { dispatch, selectSnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { LabelBoxComponent } from \'@hra-ui/components/atoms\';\\nimport { InteractiveSvgComponent } from \'@hra-ui/components/molecules\';\\nimport { ActiveFtuSelectors, IllustratorActions, IllustratorSelectors, TissueLibrarySelectors } from \'@hra-ui/state\';\\n\\n/**\\n * Behavior component for medical illustration component\\n */\\n@Component({\\n selector: \'ftu-medical-illustration-behavior\',\\n standalone: true,\\n imports: [CommonModule, InteractiveSvgComponent, LabelBoxComponent],\\n templateUrl: \'./medical-illustration-behavior.component.html\',\\n styleUrls: [\'./medical-illustration-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class MedicalIllustrationBehaviorComponent {\\n /**\\n * Current illustration url\\n */\\n readonly currentUrl = selectSnapshot(IllustratorSelectors.url);\\n\\n /**\\n * Current mapping file\\n */\\n readonly mapping = selectSnapshot(IllustratorSelectors.mapping);\\n\\n /**\\n * Iri of medical illustration behavior component\\n */\\n readonly iri = selectSnapshot(ActiveFtuSelectors.iri);\\n\\n /**\\n * Get all tissues\\n */\\n readonly tissues = selectSnapshot(TissueLibrarySelectors.tissues);\\n\\n /**\\n * Gets tissue title from the list of tissues\\n */\\n get tissueTitle(): string {\\n const iri = this.iri();\\n const tissues = this.tissues();\\n return iri ? tissues[iri].label : \'\';\\n }\\n\\n /**\\n * Updates the active node on node hover\\n */\\n readonly updateNodeOnHover = dispatch(IllustratorActions.SetHover);\\n\\n /**\\n * Updates the active node on node click\\n */\\n readonly updateNodeOnClicked = dispatch(IllustratorActions.SetClicked);\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n hra-label-box {\\n border-bottom: 0.063rem solid #d3d3d3;\\n width: 100%;\\n height: 3.5rem;\\n }\\n}\\n","styleUrl":"./medical-illustration-behavior.component.scss"}],"stylesData":"","accessors":{"tissueTitle":{"name":"tissueTitle","getSignature":{"name":"tissueTitle","type":"string","returnType":"string","line":43,"rawdescription":"\\n\\nGets tissue title from the list of tissues\\n","description":"

Gets tissue title from the list of tissues

\\n"}}},"templateData":"{{ tissueTitle }}\\n\\n\\n"},{"name":"ScreenNoticeBehaviorComponent","id":"component-ScreenNoticeBehaviorComponent-de4fc156bf7f658d9ca0a8d114626d829387a03f3b206cb5439f1ad22b9e157cbc51e850b06eb8f0b9dd48a75acb723b42c7fd79d0c50694757e9d23cac9f416","file":"src/lib/screen-notice-behavior/screen-notice-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-ui-screen-notice-behavior","styleUrls":["./screen-notice-behavior.component.scss"],"styles":[],"templateUrl":["./screen-notice-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"content","defaultValue":"selectQuerySnapshot(RR.anyText, ResourceIds.ScreenSizeNoticeContent)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Content of screen notice behavior component

\\n","line":21,"rawdescription":"\\nContent of screen notice behavior component","modifierKind":[144]},{"name":"portal","defaultValue":"LinkIds.Portal","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Hra portal link routing after clicking on HRA Portal

\\n","line":24,"rawdescription":"\\nHra portal link routing after clicking on HRA Portal","modifierKind":[144]}],"methodsClass":[{"name":"close","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":33,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nA function which closes the screen size notice dialog box","description":"

A function which closes the screen size notice dialog box

\\n"}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

A component for screen size notice behavior which provides the content to be displayed and provides functionality\\nfor the buttons on the notice modal

\\n","rawdescription":"\\nA component for screen size notice behavior which provides the content to be displayed and provides functionality\\nfor the buttons on the notice modal","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, inject } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { dispatch, selectQuerySnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { ResourceRegistrySelectors as RR, StorageActions, StorageId } from \'@hra-ui/cdk/state\';\\nimport { ResourceIds, LinkIds } from \'@hra-ui/state\';\\nimport { ScreenSizeNoticeComponent } from \'@hra-ui/components/molecules\';\\nimport { MatDialogRef } from \'@angular/material/dialog\';\\n\\n/** A component for screen size notice behavior which provides the content to be displayed and provides functionality\\n * for the buttons on the notice modal */\\n@Component({\\n selector: \'ftu-ui-screen-notice-behavior\',\\n standalone: true,\\n imports: [CommonModule, ScreenSizeNoticeComponent],\\n templateUrl: \'./screen-notice-behavior.component.html\',\\n styleUrls: [\'./screen-notice-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class ScreenNoticeBehaviorComponent {\\n /** Content of screen notice behavior component*/\\n readonly content = selectQuerySnapshot(RR.anyText, ResourceIds.ScreenSizeNoticeContent);\\n\\n /** Hra portal link routing after clicking on HRA Portal*/\\n readonly portal = LinkIds.Portal;\\n\\n /** Reference for the screen size notice dialog box*/\\n private readonly ref = inject(MatDialogRef, { optional: true });\\n\\n /** A dispatcher function that sets the Local Storage as \'shown\'*/\\n private readonly setScreenNoticeShown = dispatch(StorageActions.Set, StorageId.Local, \'screen-size-notice\', \'shown\');\\n\\n /** A function which closes the screen size notice dialog box*/\\n close(): void {\\n this.setScreenNoticeShown();\\n this.ref?.close();\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n}\\n","styleUrl":"./screen-notice-behavior.component.scss"}],"stylesData":"","templateData":" \\n"},{"name":"TissueLibraryBehaviorComponent","id":"component-TissueLibraryBehaviorComponent-1565978e9f70870b546b49f929236ee86c2eb9cc241e10b805863df59e4d66dca72495ffa8c27a7f282e396acc84f78b6724255570a4eab733a3af995543b47a","file":"src/lib/tissue-library-behavior/tissue-library-behavior.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"ftu-tissue-library-behavior","styleUrls":["./tissue-library-behavior.component.scss"],"styles":[],"templateUrl":["./tissue-library-behavior.component.html"],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"list","deprecated":false,"deprecationMessage":"","type":"TissueTreeListComponent","optional":true,"description":"

Reference to the TissueTreeListComponent.

\\n","line":25,"rawdescription":"\\n\\nReference to the TissueTreeListComponent.\\n","decorators":[{"name":"ViewChild","stringifiedArguments":"\'list\', {static: true}"}],"modifierKind":[144]},{"name":"selected","deprecated":false,"deprecationMessage":"","type":"Tissue","optional":true,"description":"

Selected of tissue library behavior component

\\n","line":34,"rawdescription":"\\n\\nSelected of tissue library behavior component\\n"},{"name":"tissues","defaultValue":"selectSnapshot(TissueLibrarySelectors.tissues)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Input for tissues data

\\n","line":30,"rawdescription":"\\n\\nInput for tissues data\\n","modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for Tissue Library Behavior

\\n","rawdescription":"\\n\\nComponent for Tissue Library Behavior\\n","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, ViewChild } from \'@angular/core\';\\nimport { select$, selectSnapshot } from \'@hra-ui/cdk/injectors\';\\nimport { TissueTreeListComponent } from \'@hra-ui/components/molecules\';\\nimport { Tissue } from \'@hra-ui/services\';\\nimport { ActiveFtuSelectors, TissueLibrarySelectors } from \'@hra-ui/state\';\\nimport { LabelBoxComponent } from \'@hra-ui/components/atoms\';\\n\\n/**\\n * Component for Tissue Library Behavior\\n */\\n@Component({\\n selector: \'ftu-tissue-library-behavior\',\\n standalone: true,\\n imports: [CommonModule, LabelBoxComponent, TissueTreeListComponent],\\n templateUrl: \'./tissue-library-behavior.component.html\',\\n styleUrls: [\'./tissue-library-behavior.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class TissueLibraryBehaviorComponent {\\n /**\\n * Reference to the TissueTreeListComponent.\\n */\\n @ViewChild(\'list\', { static: true })\\n readonly list?: TissueTreeListComponent;\\n\\n /**\\n * Input for tissues data\\n */\\n readonly tissues = selectSnapshot(TissueLibrarySelectors.tissues);\\n /**\\n * Selected of tissue library behavior component\\n */\\n selected?: Tissue;\\n\\n /**\\n * Sets the TissueItem instance as undefined if\\n * the url is undefined\\n */\\n constructor() {\\n /** Get iris from the observable else reset selection if\\n * iri is undefined\\n */\\n select$(ActiveFtuSelectors.iri).subscribe((iri) => {\\n this.selected = iri && this.tissues()[iri];\\n if (iri === undefined) {\\n this.list?.resetSelection();\\n }\\n });\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n .label {\\n border-bottom: 1px solid #e2e7e9;\\n width: 100%;\\n height: 3.5rem;\\n }\\n}\\n","styleUrl":"./tissue-library-behavior.component.scss"}],"stylesData":"","constructorObj":{"name":"constructor","description":"

Sets the TissueItem instance as undefined if\\nthe url is undefined

\\n","deprecated":false,"deprecationMessage":"","args":[],"line":34,"rawdescription":"\\n\\nSets the TissueItem instance as undefined if\\nthe url is undefined\\n"},"templateData":"FTU Library\\n \\n"}],"modules":[],"miscellaneous":{"variables":[{"name":"EMPTY_TISSUE_INFO","ctype":"miscellaneous","subtype":"variable","file":"src/lib/biomarker-details/biomarker-details.component.ts","deprecated":false,"deprecationMessage":"","type":"TissueInfo","defaultValue":"{\\n id: \'\',\\n label: \'\',\\n}","rawdescription":"PlaceHolder for Empty Tissue Info","description":"

PlaceHolder for Empty Tissue Info

\\n"},{"name":"EMPTY_TISSUE_INFO","ctype":"miscellaneous","subtype":"variable","file":"src/lib/biomarker-details-wc/biomarker-details-wc.component.ts","deprecated":false,"deprecationMessage":"","type":"TissueInfo","defaultValue":"{\\n id: \'\',\\n label: \'\',\\n}","rawdescription":"PlaceHolder for Empty Tissue Info","description":"

PlaceHolder for Empty Tissue Info

\\n"}],"functions":[],"typealiases":[],"enumerations":[],"groupedVariables":{"src/lib/biomarker-details/biomarker-details.component.ts":[{"name":"EMPTY_TISSUE_INFO","ctype":"miscellaneous","subtype":"variable","file":"src/lib/biomarker-details/biomarker-details.component.ts","deprecated":false,"deprecationMessage":"","type":"TissueInfo","defaultValue":"{\\n id: \'\',\\n label: \'\',\\n}","rawdescription":"PlaceHolder for Empty Tissue Info","description":"

PlaceHolder for Empty Tissue Info

\\n"}],"src/lib/biomarker-details-wc/biomarker-details-wc.component.ts":[{"name":"EMPTY_TISSUE_INFO","ctype":"miscellaneous","subtype":"variable","file":"src/lib/biomarker-details-wc/biomarker-details-wc.component.ts","deprecated":false,"deprecationMessage":"","type":"TissueInfo","defaultValue":"{\\n id: \'\',\\n label: \'\',\\n}","rawdescription":"PlaceHolder for Empty Tissue Info","description":"

PlaceHolder for Empty Tissue Info

\\n"}]},"groupedFunctions":{},"groupedEnumerations":{},"groupedTypeAliases":{}}}')},"./dist/compodoc/components-molecules/documentation.json":module=>{"use strict";module.exports=JSON.parse('{"pipes":[],"interfaces":[{"name":"ContactData","id":"interface-ContactData-309310b2740da63be5ea5aaa894ef73ced8bed2a86b50643af4dd031551d6cdb7b26ece6b3328d0e31c21e46f940bd8b901f5665c241ca2a4cb38f39631bd8a3","file":"src/lib/contact-modal/contact-modal.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EmailInputComponent, RequiredInputComponent, RequiredTextboxComponent } from \'@hra-ui/components/atoms\';\\nimport { produce } from \'immer\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/**\\n An interface representing contact data information which will be emitted if all the fields are in correct format.\\n */\\nexport interface ContactData {\\n /** The email address of the person submitting the form. */\\n email: string;\\n /** The subject line of the message being sent. */\\n subject: string;\\n /** The body of the message being sent. */\\n message: string;\\n}\\n\\n/** Initial empty contact data */\\nconst EMPTY_CONTACT_DATA: Partial = {\\n email: undefined,\\n subject: undefined,\\n message: undefined,\\n};\\n\\n/**\\n * Contact modal component.\\n */\\n@Component({\\n selector: \'hra-contact-modal\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatButtonModule,\\n MatIconModule,\\n EmailInputComponent,\\n MarkdownModule,\\n RequiredTextboxComponent,\\n RequiredInputComponent,\\n ],\\n templateUrl: \'./contact-modal.component.html\',\\n styleUrls: [\'./contact-modal.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class ContactModalComponent {\\n /** Input for product logo URL to displayed on the left side. */\\n @Input() productLogoUrl = \'\';\\n\\n /** Input for product title to displayed on the left side. */\\n @Input() productTitle = \'\';\\n\\n /** Emits when the submit button is clicked and all the values are appropriate. */\\n @Output() readonly submitClick = new EventEmitter();\\n\\n /** Emits when the cancel button or close icon is clicked */\\n @Output() readonly closeClick = new EventEmitter();\\n\\n /** A function to disable the submit button. If all the values are in approproiate format, then it will be enabled. */\\n get disableSubmit(): boolean {\\n return Object.values(this.contactData).some((value) => value === undefined);\\n }\\n\\n /** Asigns the undefined initially to all the input fields. */\\n contactData = EMPTY_CONTACT_DATA;\\n\\n /** Updates the contact data object with a new value for a given key. */\\n updateData(key: K, value?: ContactData[K]): void {\\n this.contactData = produce(this.contactData, (draft) => {\\n draft[key] = value;\\n });\\n }\\n\\n /** It emits the updated value of contact data */\\n submit(): void {\\n this.submitClick.emit(this.contactData as ContactData);\\n }\\n}\\n","properties":[{"name":"email","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

The email address of the person submitting the form.

\\n","line":14,"rawdescription":"\\nThe email address of the person submitting the form."},{"name":"message","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

The body of the message being sent.

\\n","line":18,"rawdescription":"\\nThe body of the message being sent."},{"name":"subject","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

The subject line of the message being sent.

\\n","line":16,"rawdescription":"\\nThe subject line of the message being sent."}],"indexSignatures":[],"kind":165,"description":"

An interface representing contact data information which will be emitted if all the fields are in correct format.

\\n","rawdescription":"\\n\\nAn interface representing contact data information which will be emitted if all the fields are in correct format.\\n","methods":[]},{"name":"DataItem","id":"interface-DataItem-dba50a1e9cbac5f9733930bd6b04d1ac5fda31ee6342e13da75314f7b5dbbf46c436aab104bfc47abdc323e9ff42aeeb0047ee89577f639d3979c6964344bbd7","file":"src/lib/biomarker-table-data-card/biomarker-table-data-card.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule } from \'@angular/material/table\';\\n\\n/** An item which defines a string label and a string value */\\nexport interface DataItem {\\n /** A string property that represents the label */\\n label: string;\\n /** A string property that represents the value */\\n value: string;\\n}\\n\\n/** An item which represents a section with a data item and an indicator for the last item in the section */\\nexport interface SectionItem {\\n /** A number property that represents the section number */\\n section: number;\\n /** A DateItem property that represents a section and its data */\\n data: DataItem;\\n /** A boolean property that represents the last item of a section */\\n isLastItem: boolean;\\n}\\n\\n/** This component displays a table with sections, where each section contains a list of items with a label and a value. */\\n@Component({\\n selector: \'hra-biomarker-table-data-card\',\\n standalone: true,\\n imports: [CommonModule, MatTableModule],\\n templateUrl: \'./biomarker-table-data-card.component.html\',\\n styleUrls: [\'./biomarker-table-data-card.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableDataCardComponent implements OnChanges {\\n /** Nested list of DataItems for each section which is displayed to the user */\\n @Input() data: DataItem[][] = [];\\n\\n /** Converted nested array of DataItem into Flat array of SectionItem */\\n sectionItems: SectionItem[] = [];\\n\\n /** Triggers an update on sectionItems array when data is changed */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.updateSectionItems();\\n }\\n }\\n\\n /** Updates sectionItems array when data is changed */\\n private updateSectionItems(): void {\\n const newSectionItems: SectionItem[] = [];\\n\\n this.data.forEach((section, sectionIndex) => {\\n section.forEach((item, itemIndex) => {\\n newSectionItems.push({\\n data: item,\\n section: sectionIndex,\\n isLastItem: itemIndex === section.length - 1,\\n });\\n });\\n });\\n\\n this.sectionItems = newSectionItems;\\n }\\n}\\n","properties":[{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

A string property that represents the label

\\n","line":8,"rawdescription":"\\nA string property that represents the label"},{"name":"value","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

A string property that represents the value

\\n","line":10,"rawdescription":"\\nA string property that represents the value"}],"indexSignatures":[],"kind":165,"description":"

An item which defines a string label and a string value

\\n","rawdescription":"\\nAn item which defines a string label and a string value","methods":[]},{"name":"DataNode","id":"interface-DataNode-8544338e8c5e11dd440f8b104bfa31552155bc5006289770258a8e940978177df7797adcb9bafb5b09a9943913ecf339692d528f868c6846be5c3de8a6270237","file":"src/lib/tissue-tree-list/tissue-tree-list.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { FlatTreeControl } from \'@angular/cdk/tree\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n Input,\\n OnChanges,\\n Output,\\n SimpleChanges,\\n} from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatRippleModule } from \'@angular/material/core\';\\nimport { MatExpansionModule } from \'@angular/material/expansion\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatTreeFlatDataSource, MatTreeFlattener, MatTreeModule } from \'@angular/material/tree\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { LinkId } from \'@hra-ui/cdk/state\';\\n\\n/** Base node type */\\nexport interface DataNode {\\n /** User readable label */\\n label: string;\\n /** Id to pass as a query parameter on navigation */\\n id?: string;\\n /** Link to navigate to on node click */\\n link?: LinkId;\\n /** Nested nodes */\\n children?: K[];\\n}\\n\\n/**\\n * Internal interface for flat tissue data hierarchy\\n */\\ninterface InternalNode> {\\n /** Displayed label */\\n label: string;\\n /** Whether the node can be expanded to display child nodes */\\n expandable: boolean;\\n /** Depth of node in the tree */\\n level: number;\\n /** Associated user node data */\\n data: T;\\n}\\n\\n/**\\n * Tabular View for hubMap tissue side-bar\\n */\\n@Component({\\n selector: \'hra-tissue-tree-list\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatButtonModule,\\n MatTreeModule,\\n MatIconModule,\\n MatExpansionModule,\\n MatRippleModule,\\n LinkDirective,\\n ],\\n templateUrl: \'./tissue-tree-list.component.html\',\\n styleUrls: [\'./tissue-tree-list.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class TissueTreeListComponent> implements OnChanges {\\n /**\\n * Input of tissue tree list component\\n */\\n @Input() nodes: Record = {} as Record;\\n\\n /**\\n * Node selected, to view the data associated with it\\n */\\n @Input() selected?: T = undefined;\\n\\n /**\\n * Output of tissue tree list component\\n */\\n @Output() readonly selectedChange = new EventEmitter();\\n\\n /**\\n * tree controller, used to control the nodes in the tree\\n */\\n readonly control = new FlatTreeControl>(\\n (node) => node.level,\\n (node) => node.expandable\\n );\\n\\n /**\\n * Flattener of tissue tree list component, returns flat-data structure\\n */\\n readonly flattener = new MatTreeFlattener>(\\n (node, level) => ({\\n label: node.label,\\n expandable: (node.children?.length ?? 0) > 0,\\n level,\\n data: node,\\n }),\\n (node) => node.level,\\n (node) => node.expandable,\\n (node) => node.children?.map((id) => this.nodes[id])\\n );\\n\\n /**\\n * Data source of tissue tree list component, defines the data in mat-tree\\n */\\n readonly dataSource = new MatTreeFlatDataSource(this.control, this.flattener);\\n\\n /**\\n * Take actions if any data changes\\n * @param changes changes in data\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'nodes\' in changes) {\\n this.dataSource.data = this.findRootNodes();\\n }\\n if (\'selected\' in changes) {\\n const path = this.selected ? this.dfsFindPath(this.findRootNodes(), this.selected) : [];\\n this.expandPath(path);\\n }\\n }\\n\\n /**\\n * check if the current node has children\\n * @param node current selected node\\n * @returns boolean, which means if node has children\\n */\\n hasChild(_: number, node: InternalNode): boolean {\\n return node.expandable;\\n }\\n\\n /**\\n * It selects the node, which is clicked.\\n * @param node Tissue Tree Item, which is clicked\\n */\\n selectNode(node: T): void {\\n if (this.selected !== node) {\\n this.selected = node;\\n this.selectedChange.emit(this.selected);\\n }\\n }\\n\\n /**\\n * Resets selection and collapes all nodes of the tree.\\n */\\n resetSelection(): void {\\n this.selected = undefined;\\n this.control.collapseAll();\\n }\\n\\n /**\\n * It creates a copy of the input nodes object.\\n * It iterates over it and removes all the children nodes from it.\\n * @returns remaining nodes which are root nodes.\\n */\\n private findRootNodes(): T[] {\\n const { nodes } = this;\\n const roots = { ...this.nodes };\\n for (const key in nodes) {\\n for (const child of nodes[key].children ?? []) {\\n delete roots[child];\\n }\\n }\\n\\n return Object.values(roots);\\n }\\n\\n /**\\n * expands the tree nodes based on the path provided.\\n * @param path is given as an input.\\n */\\n private expandPath(path: DataNode[]): void {\\n const nodes = this.control.dataNodes.filter((node) => path.includes(node.data));\\n nodes.forEach((node) => this.control.expand(node));\\n }\\n\\n /**\\n * It used the logic of depth first search to find the target node.\\n * returns the path to the target node.\\n */\\n private dfsFindPath(nodes: T[], target: T, path: T[] = []): T[] {\\n for (const node of nodes) {\\n path.push(node);\\n if (node === target) {\\n return path;\\n }\\n\\n const savedLength = path.length;\\n const children = node.children?.map((id) => this.nodes[id]) ?? [];\\n if (this.dfsFindPath(children, target, path).length > savedLength) {\\n return path;\\n }\\n\\n path.pop();\\n }\\n\\n return path;\\n }\\n}\\n","properties":[{"name":"children","deprecated":false,"deprecationMessage":"","type":"K[]","optional":true,"description":"

Nested nodes

\\n","line":29,"rawdescription":"\\nNested nodes"},{"name":"id","deprecated":false,"deprecationMessage":"","type":"string","optional":true,"description":"

Id to pass as a query parameter on navigation

\\n","line":25,"rawdescription":"\\nId to pass as a query parameter on navigation"},{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

User readable label

\\n","line":23,"rawdescription":"\\nUser readable label"},{"name":"link","deprecated":false,"deprecationMessage":"","type":"LinkId","optional":true,"description":"

Link to navigate to on node click

\\n","line":27,"rawdescription":"\\nLink to navigate to on node click"}],"indexSignatures":[],"kind":165,"description":"

Base node type

\\n","rawdescription":"\\nBase node type","methods":[]},{"name":"DownloadFormat","id":"interface-DownloadFormat-45c5a61fc5d68c201808fb76ff867f9a7cf8e42e6ef95ae08b440dbd37ce63eb4c77c3da0597ef90973854d65522a3ba496eeb5eccbe75750c1fd2f5abf52e6b","file":"src/lib/footer/footer.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { ConnectedPosition, OverlayModule } from \'@angular/cdk/overlay\';\\nimport { MatListModule } from \'@angular/material/list\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { EMPTY_LINK } from \'@hra-ui/cdk/state\';\\n\\n/**\\n * Base type for different download format options.\\n */\\nexport interface DownloadFormat {\\n /**\\n * User readable format label\\n */\\n label: string;\\n}\\n\\n/**\\n * Positioning value for the download list popup\\n */\\nconst DOWNLOADS_LIST_POSITION: ConnectedPosition[] = [\\n {\\n panelClass: \'above\',\\n originX: \'start\',\\n originY: \'top\',\\n overlayX: \'start\',\\n overlayY: \'bottom\',\\n offsetY: 0,\\n },\\n {\\n panelClass: \'below\',\\n originX: \'start\',\\n originY: \'bottom\',\\n overlayX: \'start\',\\n overlayY: \'top\',\\n },\\n];\\n\\n/**\\n * Component for footer that displays its content at the bottom of the page with different action buttons.\\n */\\n@Component({\\n selector: \'hra-footer\',\\n standalone: true,\\n imports: [CommonModule, MatButtonModule, MatIconModule, OverlayModule, MatListModule, LinkDirective],\\n templateUrl: \'./footer.component.html\',\\n styleUrls: [\'./footer.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class FooterComponent {\\n /** Host binding of footer component */\\n @HostBinding(\'class\')\\n @Input()\\n size: \'small\' | \'large\' = \'large\';\\n\\n /** Input for product logo URL to displayed on the left side. */\\n @Input() productLogoUrl = \'\';\\n\\n /** Input for product title to displayed on the left side. */\\n @Input() productTitle = \'\';\\n\\n /** Input for HRA Portal link */\\n @Input() hraPortal = EMPTY_LINK;\\n\\n /** Input for Illustration metadata page link in HRA Portal */\\n @Input() illustrationMetadata = EMPTY_LINK;\\n\\n /** Input for embed link in HRA Portal */\\n @Input() embed = EMPTY_LINK;\\n\\n /** Different download formats options displayed to the user */\\n @Input() downloadFormats: T[] = [];\\n\\n /** Emits the selected download format */\\n @Output() readonly download = new EventEmitter();\\n\\n /** Emits when the contact button is clicked */\\n @Output() readonly contactClick = new EventEmitter();\\n\\n /** Download list popup overlay positioning */\\n readonly DOWNLOADS_LIST_POSITION = DOWNLOADS_LIST_POSITION;\\n\\n /** Gets whether the footer required is small */\\n get isSmall(): boolean {\\n return this.size === \'small\';\\n }\\n\\n /** Whether the download list panel is open */\\n downloadListOpen = false;\\n}\\n","properties":[{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

User readable format label

\\n","line":17,"rawdescription":"\\n\\nUser readable format label\\n"}],"indexSignatures":[],"kind":165,"description":"

Base type for different download format options.

\\n","rawdescription":"\\n\\nBase type for different download format options.\\n","methods":[]},{"name":"InternalNode","id":"interface-InternalNode-8544338e8c5e11dd440f8b104bfa31552155bc5006289770258a8e940978177df7797adcb9bafb5b09a9943913ecf339692d528f868c6846be5c3de8a6270237","file":"src/lib/tissue-tree-list/tissue-tree-list.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { FlatTreeControl } from \'@angular/cdk/tree\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n Input,\\n OnChanges,\\n Output,\\n SimpleChanges,\\n} from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatRippleModule } from \'@angular/material/core\';\\nimport { MatExpansionModule } from \'@angular/material/expansion\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatTreeFlatDataSource, MatTreeFlattener, MatTreeModule } from \'@angular/material/tree\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { LinkId } from \'@hra-ui/cdk/state\';\\n\\n/** Base node type */\\nexport interface DataNode {\\n /** User readable label */\\n label: string;\\n /** Id to pass as a query parameter on navigation */\\n id?: string;\\n /** Link to navigate to on node click */\\n link?: LinkId;\\n /** Nested nodes */\\n children?: K[];\\n}\\n\\n/**\\n * Internal interface for flat tissue data hierarchy\\n */\\ninterface InternalNode> {\\n /** Displayed label */\\n label: string;\\n /** Whether the node can be expanded to display child nodes */\\n expandable: boolean;\\n /** Depth of node in the tree */\\n level: number;\\n /** Associated user node data */\\n data: T;\\n}\\n\\n/**\\n * Tabular View for hubMap tissue side-bar\\n */\\n@Component({\\n selector: \'hra-tissue-tree-list\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatButtonModule,\\n MatTreeModule,\\n MatIconModule,\\n MatExpansionModule,\\n MatRippleModule,\\n LinkDirective,\\n ],\\n templateUrl: \'./tissue-tree-list.component.html\',\\n styleUrls: [\'./tissue-tree-list.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class TissueTreeListComponent> implements OnChanges {\\n /**\\n * Input of tissue tree list component\\n */\\n @Input() nodes: Record = {} as Record;\\n\\n /**\\n * Node selected, to view the data associated with it\\n */\\n @Input() selected?: T = undefined;\\n\\n /**\\n * Output of tissue tree list component\\n */\\n @Output() readonly selectedChange = new EventEmitter();\\n\\n /**\\n * tree controller, used to control the nodes in the tree\\n */\\n readonly control = new FlatTreeControl>(\\n (node) => node.level,\\n (node) => node.expandable\\n );\\n\\n /**\\n * Flattener of tissue tree list component, returns flat-data structure\\n */\\n readonly flattener = new MatTreeFlattener>(\\n (node, level) => ({\\n label: node.label,\\n expandable: (node.children?.length ?? 0) > 0,\\n level,\\n data: node,\\n }),\\n (node) => node.level,\\n (node) => node.expandable,\\n (node) => node.children?.map((id) => this.nodes[id])\\n );\\n\\n /**\\n * Data source of tissue tree list component, defines the data in mat-tree\\n */\\n readonly dataSource = new MatTreeFlatDataSource(this.control, this.flattener);\\n\\n /**\\n * Take actions if any data changes\\n * @param changes changes in data\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'nodes\' in changes) {\\n this.dataSource.data = this.findRootNodes();\\n }\\n if (\'selected\' in changes) {\\n const path = this.selected ? this.dfsFindPath(this.findRootNodes(), this.selected) : [];\\n this.expandPath(path);\\n }\\n }\\n\\n /**\\n * check if the current node has children\\n * @param node current selected node\\n * @returns boolean, which means if node has children\\n */\\n hasChild(_: number, node: InternalNode): boolean {\\n return node.expandable;\\n }\\n\\n /**\\n * It selects the node, which is clicked.\\n * @param node Tissue Tree Item, which is clicked\\n */\\n selectNode(node: T): void {\\n if (this.selected !== node) {\\n this.selected = node;\\n this.selectedChange.emit(this.selected);\\n }\\n }\\n\\n /**\\n * Resets selection and collapes all nodes of the tree.\\n */\\n resetSelection(): void {\\n this.selected = undefined;\\n this.control.collapseAll();\\n }\\n\\n /**\\n * It creates a copy of the input nodes object.\\n * It iterates over it and removes all the children nodes from it.\\n * @returns remaining nodes which are root nodes.\\n */\\n private findRootNodes(): T[] {\\n const { nodes } = this;\\n const roots = { ...this.nodes };\\n for (const key in nodes) {\\n for (const child of nodes[key].children ?? []) {\\n delete roots[child];\\n }\\n }\\n\\n return Object.values(roots);\\n }\\n\\n /**\\n * expands the tree nodes based on the path provided.\\n * @param path is given as an input.\\n */\\n private expandPath(path: DataNode[]): void {\\n const nodes = this.control.dataNodes.filter((node) => path.includes(node.data));\\n nodes.forEach((node) => this.control.expand(node));\\n }\\n\\n /**\\n * It used the logic of depth first search to find the target node.\\n * returns the path to the target node.\\n */\\n private dfsFindPath(nodes: T[], target: T, path: T[] = []): T[] {\\n for (const node of nodes) {\\n path.push(node);\\n if (node === target) {\\n return path;\\n }\\n\\n const savedLength = path.length;\\n const children = node.children?.map((id) => this.nodes[id]) ?? [];\\n if (this.dfsFindPath(children, target, path).length > savedLength) {\\n return path;\\n }\\n\\n path.pop();\\n }\\n\\n return path;\\n }\\n}\\n","properties":[{"name":"data","deprecated":false,"deprecationMessage":"","type":"T","optional":false,"description":"

Associated user node data

\\n","line":43,"rawdescription":"\\nAssociated user node data"},{"name":"expandable","deprecated":false,"deprecationMessage":"","type":"boolean","optional":false,"description":"

Whether the node can be expanded to display child nodes

\\n","line":39,"rawdescription":"\\nWhether the node can be expanded to display child nodes"},{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Displayed label

\\n","line":37,"rawdescription":"\\nDisplayed label"},{"name":"level","deprecated":false,"deprecationMessage":"","type":"number","optional":false,"description":"

Depth of node in the tree

\\n","line":41,"rawdescription":"\\nDepth of node in the tree"}],"indexSignatures":[],"kind":165,"description":"

Internal interface for flat tissue data hierarchy

\\n","rawdescription":"\\n\\nInternal interface for flat tissue data hierarchy\\n","methods":[]},{"name":"MetricItem","id":"interface-MetricItem-e52c0a1cdf090042d1924c4907a4034774cbb442217faca9ec5035e76d2796116cf55644ecf49ae040fdea1168f9c5d99f6ce15b2079f70de3d853fece481b30","file":"src/lib/metrics/metrics.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\n\\n/**\\n An interface representing a single metric with an icon, value and description.\\n */\\nexport interface MetricItem {\\n /** Represents the icon associated with the metric. */\\n icon: string;\\n /** Describes the numberical value of the metric. */\\n value: string;\\n /** Describes the type of metric. */\\n description: string;\\n}\\n/**\\n * Describes the metrics for the HuBMAP project.\\n */\\n@Component({\\n selector: \'hra-metrics\',\\n standalone: true,\\n imports: [CommonModule],\\n templateUrl: \'./metrics.component.html\',\\n styleUrls: [\'./metrics.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class MetricsComponent {\\n /** Main title of metrics component. */\\n @Input() title = \'\';\\n\\n /** Logo of metrics component. */\\n @Input() logo = \'\';\\n\\n /** List of metrics that will be shown to the user. */\\n @Input() metrics: MetricItem[] = [];\\n}\\n","properties":[{"name":"description","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Describes the type of metric.

\\n","line":13,"rawdescription":"\\nDescribes the type of metric."},{"name":"icon","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Represents the icon associated with the metric.

\\n","line":9,"rawdescription":"\\nRepresents the icon associated with the metric."},{"name":"value","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Describes the numberical value of the metric.

\\n","line":11,"rawdescription":"\\nDescribes the numberical value of the metric."}],"indexSignatures":[],"kind":165,"description":"

An interface representing a single metric with an icon, value and description.

\\n","rawdescription":"\\n\\nAn interface representing a single metric with an icon, value and description.\\n","methods":[]},{"name":"NodeMapEntry","id":"interface-NodeMapEntry-34dafc0493fcadf92dd676bebad498e3798e87879ccd7ab9c56dfb6b52cf51b41a6b132fa4c00fa2f32867f3f84829bef3163da37de19cf480f10a8cd94e74f1","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ConnectedPosition, OverlayModule } from \'@angular/cdk/overlay\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n inject,\\n Input,\\n OnChanges,\\n OnDestroy,\\n Output,\\n Renderer2,\\n SimpleChanges,\\n ViewEncapsulation,\\n} from \'@angular/core\';\\nimport { TooltipComponent } from \'@hra-ui/components/atoms\';\\nimport { InlineSVGModule, SVGScriptEvalMode } from \'ng-inline-svg-2\';\\nimport { BehaviorSubject, debounce, fromEventPattern, Observable, Subject, takeUntil, timer } from \'rxjs\';\\nimport { NodeEventHandler } from \'rxjs/internal/observable/fromEvent\';\\n\\n/** Delay before tooltip becomes visible */\\nconst HOVER_DELAY = 200;\\n\\n/** Tooltip position settings */\\nconst TOOLTIP_POSITIONS: ConnectedPosition[] = [\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'start\',\\n overlayY: \'center\',\\n offsetX: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'end\',\\n overlayY: \'center\',\\n offsetX: -8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'top\',\\n offsetY: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'bottom\',\\n offsetY: -8,\\n },\\n];\\n\\n/** Node tooltip data */\\nexport interface NodeTooltipData {\\n /** Node name */\\n node: string;\\n /** Center point of hovered node in screen coordinates */\\n origin: { x: number; y: number };\\n}\\n\\n/** Interface for node entries */\\nexport interface NodeMapEntry {\\n /** Node label */\\n label: string;\\n /** Node id in svg */\\n id: string;\\n /** Ontology id of cell type */\\n ontologyId: string;\\n}\\n\\n/**\\n * Interactive SVG component\\n */\\n@Component({\\n selector: \'hra-interactive-svg\',\\n standalone: true,\\n imports: [CommonModule, InlineSVGModule, OverlayModule, TooltipComponent],\\n templateUrl: \'./interactive-svg.component.html\',\\n styleUrls: [\'./interactive-svg.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n encapsulation: ViewEncapsulation.ShadowDom,\\n})\\nexport class InteractiveSvgComponent implements OnChanges, OnDestroy {\\n /** SVG url */\\n @Input() url?: string;\\n\\n /** Mapping info */\\n @Input() mapping: T[] = [];\\n\\n /** Highlighted ontology id */\\n @Input() highlightId?: string;\\n\\n /** Emits node id when hovered */\\n @Output() readonly nodeHover = new EventEmitter();\\n\\n /** Emits node id when clicked */\\n @Output() readonly nodeClick = new EventEmitter();\\n\\n /** SVG script eval mode */\\n readonly NEVER_EVAL_SCRIPTS = SVGScriptEvalMode.NEVER;\\n\\n /** Tooltip position settings */\\n readonly TOOLTIP_POSITIONS = TOOLTIP_POSITIONS;\\n\\n /** Observable of node hover data or undefined when there is no active hover */\\n readonly nodeHoverData$ = new BehaviorSubject(undefined);\\n\\n /** Observable of node hover with a timer */\\n readonly nodeHoverDelayedData$ = this.nodeHoverData$.pipe(debounce((event) => timer(event ? HOVER_DELAY : 0)));\\n\\n /** Custom renderer */\\n private readonly renderer = inject(Renderer2);\\n\\n /** Destroys */\\n private destroy$ = new Subject();\\n\\n /** Crosswalk element of svg */\\n private crosswalkEl?: Element;\\n\\n /** List of highlighted svg elements */\\n private highlightedElements: Element[] = [];\\n\\n /**\\n * Updates the highlighting based on current highlight id\\n * @param changes\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'highlightId\' in changes) {\\n this.resetHighlight();\\n this.setHighlight();\\n }\\n }\\n\\n /**\\n * Highlights cells that match highlightId\\n */\\n private setHighlight() {\\n const { mapping, highlightId, crosswalkEl } = this;\\n const entry = mapping.find(({ ontologyId }) => ontologyId === highlightId);\\n if (!entry || !crosswalkEl) {\\n return;\\n }\\n\\n let id = this.encodeId(entry.id);\\n const element = crosswalkEl.querySelector(`#${id}`);\\n if (!element) {\\n return;\\n } else if (element.nodeName !== \'g\') {\\n id = element.parentElement?.id ?? \'\';\\n }\\n\\n const elements = crosswalkEl.querySelectorAll(`#${id} :is(path, polygon, polyline)`);\\n this.highlightedElements = Array.from(elements);\\n elements.forEach((el) => el.classList.add(\'click-active\'));\\n }\\n\\n /**\\n * Resets all highlighted elements in the svg\\n */\\n private resetHighlight(): void {\\n for (const el of this.highlightedElements) {\\n el.classList.remove(\'click-active\');\\n }\\n this.highlightedElements = [];\\n }\\n\\n /**\\n * Clears observables on destroy\\n */\\n ngOnDestroy(): void {\\n this.clear();\\n }\\n\\n /**\\n * Sets SVG element\\n * @param el SVG element\\n */\\n setSvgElement(el: SVGElement): void {\\n this.clear();\\n this.crosswalkEl = el.querySelector(\'[id^=\\"Crosswalk\\"]\') ?? undefined;\\n if (this.crosswalkEl) {\\n // Move to front (i.e. last child in svg)\\n this.renderer.appendChild(el, this.crosswalkEl);\\n this.attachCrosswalkHover(this.crosswalkEl);\\n }\\n }\\n\\n /**\\n * Removes underscores from id\\n * @param name Node name\\n * @returns node name without underscores\\n */\\n formatNodeName(name: string): string {\\n return name.replace(/_/g, \' \');\\n }\\n\\n /**\\n * Attaches crosswalk hover\\n * @param el element\\n */\\n private attachCrosswalkHover(el: Element): void {\\n this.attachEvent(el, \'mouseover\').subscribe((event) => this.onCrosswalkHover(event));\\n this.attachEvent(el, \'mouseout\').subscribe(() => this.onCrosswalkHover(undefined as never as MouseEvent));\\n this.attachEvent(el, \'click\').subscribe((event) => this.nodeClick.emit(this.getNode(event)));\\n }\\n\\n /**\\n * Finds matching node in data from a hovered element\\n * @param event Mouse event\\n */\\n private onCrosswalkHover(event: MouseEvent): void {\\n if (event) {\\n const node = this.getNode(event);\\n if (node) {\\n this.nodeHoverData$.next({\\n node: node.label,\\n origin: {\\n x: event.clientX,\\n y: event.clientY,\\n },\\n });\\n this.nodeHover.emit(node); //emits node entry\\n }\\n } else {\\n this.nodeHoverData$.next(undefined);\\n this.nodeHover.emit();\\n }\\n }\\n\\n /**\\n * Clears observables\\n */\\n private clear(): void {\\n this.destroy$.next();\\n this.destroy$.complete();\\n this.destroy$ = new Subject();\\n }\\n\\n /**\\n * Returns entry from mapping if target, parent, or grandparent id matches the node name\\n * @param event Event\\n * @returns Node entry that matches the target id\\n */\\n private getNode(event: Event): T | undefined {\\n const targetId = (event.target as Element).id;\\n const parentId = (event.target as Element).parentElement?.id ?? \'\';\\n const grandparentId = (event.target as Element).parentElement?.parentElement?.id ?? \'\';\\n const idCollection = [targetId, parentId, grandparentId];\\n for (const id of idCollection) {\\n const decodedID = this.decodeId(id);\\n const match = this.mapping.find(\\n (item) => item.id?.toLowerCase() === decodedID.toLowerCase() //search mapping by name for matching node entry\\n );\\n if (match) {\\n return match;\\n }\\n }\\n return undefined;\\n }\\n\\n /**\\n * Decodes id into a normal string\\n * @param id Undecoded ID\\n * @returns id\\n */\\n private decodeId(id: string): string {\\n const replacer = (_match: string, hex: string) => String.fromCharCode(Number.parseInt(hex, 16));\\n return id.replace(/_x([\\\\da-f]+)_/gi, replacer);\\n }\\n\\n /**\\n * Turns normal string into decoded SVG id\\n * @param id id\\n * @returns Encoded id\\n */\\n private encodeId(id: string): string {\\n const replacer = (match: string) => `_x${match.charCodeAt(0).toString(16).toUpperCase()}_`;\\n return id.replace(/[^a-z0-9-]/gi, replacer);\\n }\\n\\n /**\\n * Attaches an event listener\\n * @template K\\n * @param el Element\\n * @param event Event\\n * @returns Observable\\n */\\n private attachEvent(el: Element, event: K): Observable {\\n const { renderer, destroy$ } = this;\\n const add = (handler: NodeEventHandler) => renderer.listen(el, event, handler);\\n const remove = (_handler: NodeEventHandler, unlisten: () => void) => unlisten();\\n return fromEventPattern(add, remove).pipe(takeUntil(destroy$));\\n }\\n}\\n","properties":[{"name":"id","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Node id in svg

\\n","line":69,"rawdescription":"\\nNode id in svg"},{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Node label

\\n","line":67,"rawdescription":"\\nNode label"},{"name":"ontologyId","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Ontology id of cell type

\\n","line":71,"rawdescription":"\\nOntology id of cell type"}],"indexSignatures":[],"kind":165,"description":"

Interface for node entries

\\n","rawdescription":"\\nInterface for node entries","methods":[]},{"name":"NodeTooltipData","id":"interface-NodeTooltipData-34dafc0493fcadf92dd676bebad498e3798e87879ccd7ab9c56dfb6b52cf51b41a6b132fa4c00fa2f32867f3f84829bef3163da37de19cf480f10a8cd94e74f1","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ConnectedPosition, OverlayModule } from \'@angular/cdk/overlay\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n inject,\\n Input,\\n OnChanges,\\n OnDestroy,\\n Output,\\n Renderer2,\\n SimpleChanges,\\n ViewEncapsulation,\\n} from \'@angular/core\';\\nimport { TooltipComponent } from \'@hra-ui/components/atoms\';\\nimport { InlineSVGModule, SVGScriptEvalMode } from \'ng-inline-svg-2\';\\nimport { BehaviorSubject, debounce, fromEventPattern, Observable, Subject, takeUntil, timer } from \'rxjs\';\\nimport { NodeEventHandler } from \'rxjs/internal/observable/fromEvent\';\\n\\n/** Delay before tooltip becomes visible */\\nconst HOVER_DELAY = 200;\\n\\n/** Tooltip position settings */\\nconst TOOLTIP_POSITIONS: ConnectedPosition[] = [\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'start\',\\n overlayY: \'center\',\\n offsetX: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'end\',\\n overlayY: \'center\',\\n offsetX: -8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'top\',\\n offsetY: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'bottom\',\\n offsetY: -8,\\n },\\n];\\n\\n/** Node tooltip data */\\nexport interface NodeTooltipData {\\n /** Node name */\\n node: string;\\n /** Center point of hovered node in screen coordinates */\\n origin: { x: number; y: number };\\n}\\n\\n/** Interface for node entries */\\nexport interface NodeMapEntry {\\n /** Node label */\\n label: string;\\n /** Node id in svg */\\n id: string;\\n /** Ontology id of cell type */\\n ontologyId: string;\\n}\\n\\n/**\\n * Interactive SVG component\\n */\\n@Component({\\n selector: \'hra-interactive-svg\',\\n standalone: true,\\n imports: [CommonModule, InlineSVGModule, OverlayModule, TooltipComponent],\\n templateUrl: \'./interactive-svg.component.html\',\\n styleUrls: [\'./interactive-svg.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n encapsulation: ViewEncapsulation.ShadowDom,\\n})\\nexport class InteractiveSvgComponent implements OnChanges, OnDestroy {\\n /** SVG url */\\n @Input() url?: string;\\n\\n /** Mapping info */\\n @Input() mapping: T[] = [];\\n\\n /** Highlighted ontology id */\\n @Input() highlightId?: string;\\n\\n /** Emits node id when hovered */\\n @Output() readonly nodeHover = new EventEmitter();\\n\\n /** Emits node id when clicked */\\n @Output() readonly nodeClick = new EventEmitter();\\n\\n /** SVG script eval mode */\\n readonly NEVER_EVAL_SCRIPTS = SVGScriptEvalMode.NEVER;\\n\\n /** Tooltip position settings */\\n readonly TOOLTIP_POSITIONS = TOOLTIP_POSITIONS;\\n\\n /** Observable of node hover data or undefined when there is no active hover */\\n readonly nodeHoverData$ = new BehaviorSubject(undefined);\\n\\n /** Observable of node hover with a timer */\\n readonly nodeHoverDelayedData$ = this.nodeHoverData$.pipe(debounce((event) => timer(event ? HOVER_DELAY : 0)));\\n\\n /** Custom renderer */\\n private readonly renderer = inject(Renderer2);\\n\\n /** Destroys */\\n private destroy$ = new Subject();\\n\\n /** Crosswalk element of svg */\\n private crosswalkEl?: Element;\\n\\n /** List of highlighted svg elements */\\n private highlightedElements: Element[] = [];\\n\\n /**\\n * Updates the highlighting based on current highlight id\\n * @param changes\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'highlightId\' in changes) {\\n this.resetHighlight();\\n this.setHighlight();\\n }\\n }\\n\\n /**\\n * Highlights cells that match highlightId\\n */\\n private setHighlight() {\\n const { mapping, highlightId, crosswalkEl } = this;\\n const entry = mapping.find(({ ontologyId }) => ontologyId === highlightId);\\n if (!entry || !crosswalkEl) {\\n return;\\n }\\n\\n let id = this.encodeId(entry.id);\\n const element = crosswalkEl.querySelector(`#${id}`);\\n if (!element) {\\n return;\\n } else if (element.nodeName !== \'g\') {\\n id = element.parentElement?.id ?? \'\';\\n }\\n\\n const elements = crosswalkEl.querySelectorAll(`#${id} :is(path, polygon, polyline)`);\\n this.highlightedElements = Array.from(elements);\\n elements.forEach((el) => el.classList.add(\'click-active\'));\\n }\\n\\n /**\\n * Resets all highlighted elements in the svg\\n */\\n private resetHighlight(): void {\\n for (const el of this.highlightedElements) {\\n el.classList.remove(\'click-active\');\\n }\\n this.highlightedElements = [];\\n }\\n\\n /**\\n * Clears observables on destroy\\n */\\n ngOnDestroy(): void {\\n this.clear();\\n }\\n\\n /**\\n * Sets SVG element\\n * @param el SVG element\\n */\\n setSvgElement(el: SVGElement): void {\\n this.clear();\\n this.crosswalkEl = el.querySelector(\'[id^=\\"Crosswalk\\"]\') ?? undefined;\\n if (this.crosswalkEl) {\\n // Move to front (i.e. last child in svg)\\n this.renderer.appendChild(el, this.crosswalkEl);\\n this.attachCrosswalkHover(this.crosswalkEl);\\n }\\n }\\n\\n /**\\n * Removes underscores from id\\n * @param name Node name\\n * @returns node name without underscores\\n */\\n formatNodeName(name: string): string {\\n return name.replace(/_/g, \' \');\\n }\\n\\n /**\\n * Attaches crosswalk hover\\n * @param el element\\n */\\n private attachCrosswalkHover(el: Element): void {\\n this.attachEvent(el, \'mouseover\').subscribe((event) => this.onCrosswalkHover(event));\\n this.attachEvent(el, \'mouseout\').subscribe(() => this.onCrosswalkHover(undefined as never as MouseEvent));\\n this.attachEvent(el, \'click\').subscribe((event) => this.nodeClick.emit(this.getNode(event)));\\n }\\n\\n /**\\n * Finds matching node in data from a hovered element\\n * @param event Mouse event\\n */\\n private onCrosswalkHover(event: MouseEvent): void {\\n if (event) {\\n const node = this.getNode(event);\\n if (node) {\\n this.nodeHoverData$.next({\\n node: node.label,\\n origin: {\\n x: event.clientX,\\n y: event.clientY,\\n },\\n });\\n this.nodeHover.emit(node); //emits node entry\\n }\\n } else {\\n this.nodeHoverData$.next(undefined);\\n this.nodeHover.emit();\\n }\\n }\\n\\n /**\\n * Clears observables\\n */\\n private clear(): void {\\n this.destroy$.next();\\n this.destroy$.complete();\\n this.destroy$ = new Subject();\\n }\\n\\n /**\\n * Returns entry from mapping if target, parent, or grandparent id matches the node name\\n * @param event Event\\n * @returns Node entry that matches the target id\\n */\\n private getNode(event: Event): T | undefined {\\n const targetId = (event.target as Element).id;\\n const parentId = (event.target as Element).parentElement?.id ?? \'\';\\n const grandparentId = (event.target as Element).parentElement?.parentElement?.id ?? \'\';\\n const idCollection = [targetId, parentId, grandparentId];\\n for (const id of idCollection) {\\n const decodedID = this.decodeId(id);\\n const match = this.mapping.find(\\n (item) => item.id?.toLowerCase() === decodedID.toLowerCase() //search mapping by name for matching node entry\\n );\\n if (match) {\\n return match;\\n }\\n }\\n return undefined;\\n }\\n\\n /**\\n * Decodes id into a normal string\\n * @param id Undecoded ID\\n * @returns id\\n */\\n private decodeId(id: string): string {\\n const replacer = (_match: string, hex: string) => String.fromCharCode(Number.parseInt(hex, 16));\\n return id.replace(/_x([\\\\da-f]+)_/gi, replacer);\\n }\\n\\n /**\\n * Turns normal string into decoded SVG id\\n * @param id id\\n * @returns Encoded id\\n */\\n private encodeId(id: string): string {\\n const replacer = (match: string) => `_x${match.charCodeAt(0).toString(16).toUpperCase()}_`;\\n return id.replace(/[^a-z0-9-]/gi, replacer);\\n }\\n\\n /**\\n * Attaches an event listener\\n * @template K\\n * @param el Element\\n * @param event Event\\n * @returns Observable\\n */\\n private attachEvent(el: Element, event: K): Observable {\\n const { renderer, destroy$ } = this;\\n const add = (handler: NodeEventHandler) => renderer.listen(el, event, handler);\\n const remove = (_handler: NodeEventHandler, unlisten: () => void) => unlisten();\\n return fromEventPattern(add, remove).pipe(takeUntil(destroy$));\\n }\\n}\\n","properties":[{"name":"node","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Node name

\\n","line":59,"rawdescription":"\\nNode name"},{"name":"origin","deprecated":false,"deprecationMessage":"","type":"literal type","optional":false,"description":"

Center point of hovered node in screen coordinates

\\n","line":61,"rawdescription":"\\nCenter point of hovered node in screen coordinates"}],"indexSignatures":[],"kind":165,"description":"

Node tooltip data

\\n","rawdescription":"\\nNode tooltip data","methods":[]},{"name":"SectionItem","id":"interface-SectionItem-dba50a1e9cbac5f9733930bd6b04d1ac5fda31ee6342e13da75314f7b5dbbf46c436aab104bfc47abdc323e9ff42aeeb0047ee89577f639d3979c6964344bbd7","file":"src/lib/biomarker-table-data-card/biomarker-table-data-card.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule } from \'@angular/material/table\';\\n\\n/** An item which defines a string label and a string value */\\nexport interface DataItem {\\n /** A string property that represents the label */\\n label: string;\\n /** A string property that represents the value */\\n value: string;\\n}\\n\\n/** An item which represents a section with a data item and an indicator for the last item in the section */\\nexport interface SectionItem {\\n /** A number property that represents the section number */\\n section: number;\\n /** A DateItem property that represents a section and its data */\\n data: DataItem;\\n /** A boolean property that represents the last item of a section */\\n isLastItem: boolean;\\n}\\n\\n/** This component displays a table with sections, where each section contains a list of items with a label and a value. */\\n@Component({\\n selector: \'hra-biomarker-table-data-card\',\\n standalone: true,\\n imports: [CommonModule, MatTableModule],\\n templateUrl: \'./biomarker-table-data-card.component.html\',\\n styleUrls: [\'./biomarker-table-data-card.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableDataCardComponent implements OnChanges {\\n /** Nested list of DataItems for each section which is displayed to the user */\\n @Input() data: DataItem[][] = [];\\n\\n /** Converted nested array of DataItem into Flat array of SectionItem */\\n sectionItems: SectionItem[] = [];\\n\\n /** Triggers an update on sectionItems array when data is changed */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.updateSectionItems();\\n }\\n }\\n\\n /** Updates sectionItems array when data is changed */\\n private updateSectionItems(): void {\\n const newSectionItems: SectionItem[] = [];\\n\\n this.data.forEach((section, sectionIndex) => {\\n section.forEach((item, itemIndex) => {\\n newSectionItems.push({\\n data: item,\\n section: sectionIndex,\\n isLastItem: itemIndex === section.length - 1,\\n });\\n });\\n });\\n\\n this.sectionItems = newSectionItems;\\n }\\n}\\n","properties":[{"name":"data","deprecated":false,"deprecationMessage":"","type":"DataItem","optional":false,"description":"

A DateItem property that represents a section and its data

\\n","line":18,"rawdescription":"\\nA DateItem property that represents a section and its data"},{"name":"isLastItem","deprecated":false,"deprecationMessage":"","type":"boolean","optional":false,"description":"

A boolean property that represents the last item of a section

\\n","line":20,"rawdescription":"\\nA boolean property that represents the last item of a section"},{"name":"section","deprecated":false,"deprecationMessage":"","type":"number","optional":false,"description":"

A number property that represents the section number

\\n","line":16,"rawdescription":"\\nA number property that represents the section number"}],"indexSignatures":[],"kind":165,"description":"

An item which represents a section with a data item and an indicator for the last item in the section

\\n","rawdescription":"\\nAn item which represents a section with a data item and an indicator for the last item in the section","methods":[]},{"name":"SourceListItem","id":"interface-SourceListItem-f0d0464b044f898be3752719190f2d8ad8511283d4daafb2f8b17bd0f4dfa0290abbbeb293819664c07134fcaee5a64313aaf72d69e335a063e244c2ba1d7c0c","file":"src/lib/source-list/source-list.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule } from \'@angular/material/table\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EmptyBiomarkerComponent, LabelBoxComponent } from \'@hra-ui/components/atoms\';\\n\\n/** SourceListItem interface contains title and link to the dataset for the SourceList*/\\nexport interface SourceListItem {\\n /** Title of the dataset in the SourceList */\\n title: string;\\n\\n /** Label of the dataset in the SourceList */\\n label: string;\\n\\n /** Link to the dataset in the SourceList */\\n link: string;\\n}\\n\\n/** This component shows list of sources with title and links to the datasets */\\n@Component({\\n selector: \'hra-source-list\',\\n standalone: true,\\n imports: [CommonModule, MatTableModule, MatIconModule, LabelBoxComponent, EmptyBiomarkerComponent],\\n templateUrl: \'./source-list.component.html\',\\n styleUrls: [\'./source-list.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class SourceListComponent {\\n /** List of sources with titles and links displayed to the user */\\n @Input() sources: SourceListItem[] = [];\\n /**\\n * Input buttonon text of empty biomarker component.\\n */\\n @Input() collaborateText = \'\';\\n\\n /**\\n * Input message markdown of empty biomarker component.\\n */\\n @Input() message = \'\';\\n /**\\n * Show table of source list component which toggles to true or false\\n * based on click\\n */\\n showTable = true;\\n\\n /** Emits when the contact button is clicked */\\n @Output() readonly collaborateClick = new EventEmitter();\\n\\n /**\\n * It changes the value of showTable to false if value it true\\n * and vice versa\\n */\\n toggleTable(): void {\\n this.showTable = !this.showTable;\\n }\\n}\\n","properties":[{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Label of the dataset in the SourceList

\\n","line":13,"rawdescription":"\\nLabel of the dataset in the SourceList"},{"name":"link","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Link to the dataset in the SourceList

\\n","line":16,"rawdescription":"\\nLink to the dataset in the SourceList"},{"name":"title","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Title of the dataset in the SourceList

\\n","line":10,"rawdescription":"\\nTitle of the dataset in the SourceList"}],"indexSignatures":[],"kind":165,"description":"

SourceListItem interface contains title and link to the dataset for the SourceList

\\n","rawdescription":"\\nSourceListItem interface contains title and link to the dataset for the SourceList","methods":[]}],"injectables":[],"guards":[],"interceptors":[],"classes":[],"directives":[],"components":[{"name":"BiomarkerTableDataCardComponent","id":"component-BiomarkerTableDataCardComponent-dba50a1e9cbac5f9733930bd6b04d1ac5fda31ee6342e13da75314f7b5dbbf46c436aab104bfc47abdc323e9ff42aeeb0047ee89577f639d3979c6964344bbd7","file":"src/lib/biomarker-table-data-card/biomarker-table-data-card.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-biomarker-table-data-card","styleUrls":["./biomarker-table-data-card.component.scss"],"styles":[],"templateUrl":["./biomarker-table-data-card.component.html"],"viewProviders":[],"inputsClass":[{"name":"data","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nNested list of DataItems for each section which is displayed to the user","description":"

Nested list of DataItems for each section which is displayed to the user

\\n","line":34,"type":"DataItem[][]","decorators":[]}],"outputsClass":[],"propertiesClass":[{"name":"sectionItems","defaultValue":"[]","deprecated":false,"deprecationMessage":"","type":"SectionItem[]","optional":false,"description":"

Converted nested array of DataItem into Flat array of SectionItem

\\n","line":37,"rawdescription":"\\nConverted nested array of DataItem into Flat array of SectionItem"}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

This component displays a table with sections, where each section contains a list of items with a label and a value.

\\n","rawdescription":"\\nThis component displays a table with sections, where each section contains a list of items with a label and a value.","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule } from \'@angular/material/table\';\\n\\n/** An item which defines a string label and a string value */\\nexport interface DataItem {\\n /** A string property that represents the label */\\n label: string;\\n /** A string property that represents the value */\\n value: string;\\n}\\n\\n/** An item which represents a section with a data item and an indicator for the last item in the section */\\nexport interface SectionItem {\\n /** A number property that represents the section number */\\n section: number;\\n /** A DateItem property that represents a section and its data */\\n data: DataItem;\\n /** A boolean property that represents the last item of a section */\\n isLastItem: boolean;\\n}\\n\\n/** This component displays a table with sections, where each section contains a list of items with a label and a value. */\\n@Component({\\n selector: \'hra-biomarker-table-data-card\',\\n standalone: true,\\n imports: [CommonModule, MatTableModule],\\n templateUrl: \'./biomarker-table-data-card.component.html\',\\n styleUrls: [\'./biomarker-table-data-card.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableDataCardComponent implements OnChanges {\\n /** Nested list of DataItems for each section which is displayed to the user */\\n @Input() data: DataItem[][] = [];\\n\\n /** Converted nested array of DataItem into Flat array of SectionItem */\\n sectionItems: SectionItem[] = [];\\n\\n /** Triggers an update on sectionItems array when data is changed */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.updateSectionItems();\\n }\\n }\\n\\n /** Updates sectionItems array when data is changed */\\n private updateSectionItems(): void {\\n const newSectionItems: SectionItem[] = [];\\n\\n this.data.forEach((section, sectionIndex) => {\\n section.forEach((item, itemIndex) => {\\n newSectionItems.push({\\n data: item,\\n section: sectionIndex,\\n isLastItem: itemIndex === section.length - 1,\\n });\\n });\\n });\\n\\n this.sectionItems = newSectionItems;\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'utils\';\\n@use \'variables\' as vars;\\n\\n:host {\\n display: flex;\\n padding: 1rem 1.5rem;\\n border-radius: 0.5rem;\\n box-shadow: 0.063rem 0.125rem 1rem 0.125rem rgba(0, 0, 0, 0.16);\\n background-color: vars.$primary-contrast-rgb;\\n\\n .mat-mdc-cell {\\n padding: 0.25rem 0rem;\\n }\\n\\n .mat-mdc-row {\\n height: fit-content;\\n }\\n\\n .no-border {\\n border: none;\\n }\\n\\n .label {\\n color: #243142;\\n padding-right: 3rem;\\n }\\n\\n .value {\\n color: #4c5a69;\\n }\\n\\n .sr-only {\\n @include utils.sr-only();\\n }\\n}\\n","styleUrl":"./biomarker-table-data-card.component.scss"}],"stylesData":"","implements":["OnChanges"],"templateData":"
No data
\\n 0\\" [dataSource]=\\"sectionItems\\">\\n \\n\\n \x3c!-- Label Column --\x3e\\n \\n \\n \\n \\n\\n \x3c!-- Value Column --\x3e\\n \\n \\n \\n \\n\\n \\n
\\n Biomarker Table Data Card\\n
Item Label\\n {{ element.data.label }}\\n Item Value\\n {{ element.data.value }}\\n
\\n"},{"name":"BiomarkerTableDataIconComponent","id":"component-BiomarkerTableDataIconComponent-0fab04062dee70e0c4d57bfdc6f056400c9b82591b050c6912b9e59a896e1a5535f884a104c1d3f95c19721a049ca51f5b2a953512dc1d6a501c29d5399a063c","file":"src/lib/biomarker-table-data-icon/biomarker-table-data-icon.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-biomarker-table-data-icon","styleUrls":["./biomarker-table-data-icon.component.scss"],"styles":[],"template":"","templateUrl":[],"viewProviders":[],"inputsClass":[{"name":"color","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nRepresents the color of the icon","description":"

Represents the color of the icon

\\n","line":17,"type":"string","decorators":[]},{"name":"size","defaultValue":"0","deprecated":false,"deprecationMessage":"","rawdescription":"\\nRepresents the size of the icon","description":"

Represents the size of the icon

\\n","line":20,"type":"number","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Describes the data icon for the table

\\n","rawdescription":"\\n\\nDescribes the data icon for the table\\n","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, HostBinding, Input } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\n\\n/**\\n * Describes the data icon for the table\\n */\\n@Component({\\n selector: \'hra-biomarker-table-data-icon\',\\n standalone: true,\\n imports: [CommonModule],\\n template: \'\',\\n styleUrls: [\'./biomarker-table-data-icon.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableDataIconComponent {\\n /** Represents the color of the icon */\\n @HostBinding(\'style.background-color\') @Input() color = \'\';\\n\\n /** Represents the size of the icon */\\n @HostBinding(\'style.--radius.rem\') @Input() size = 0;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n border-radius: 50%;\\n --radius: 0.625rem;\\n width: var(--radius);\\n height: var(--radius);\\n}\\n","styleUrl":"./biomarker-table-data-icon.component.scss"}],"stylesData":""},{"name":"ContactModalComponent","id":"component-ContactModalComponent-309310b2740da63be5ea5aaa894ef73ced8bed2a86b50643af4dd031551d6cdb7b26ece6b3328d0e31c21e46f940bd8b901f5665c241ca2a4cb38f39631bd8a3","file":"src/lib/contact-modal/contact-modal.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-contact-modal","styleUrls":["./contact-modal.component.scss"],"styles":[],"templateUrl":["./contact-modal.component.html"],"viewProviders":[],"inputsClass":[{"name":"productLogoUrl","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for product logo URL to displayed on the left side.","description":"

Input for product logo URL to displayed on the left side.

\\n","line":49,"type":"string","decorators":[]},{"name":"productTitle","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for product title to displayed on the left side.","description":"

Input for product title to displayed on the left side.

\\n","line":52,"type":"string","decorators":[]}],"outputsClass":[{"name":"closeClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the cancel button or close icon is clicked","description":"

Emits when the cancel button or close icon is clicked

\\n","line":58,"type":"EventEmitter"},{"name":"submitClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the submit button is clicked and all the values are appropriate.","description":"

Emits when the submit button is clicked and all the values are appropriate.

\\n","line":55,"type":"EventEmitter"}],"propertiesClass":[{"name":"contactData","defaultValue":"EMPTY_CONTACT_DATA","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Asigns the undefined initially to all the input fields.

\\n","line":66,"rawdescription":"\\nAsigns the undefined initially to all the input fields."}],"methodsClass":[{"name":"submit","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":76,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nIt emits the updated value of contact data","description":"

It emits the updated value of contact data

\\n"},{"name":"updateData","args":[{"name":"key","type":"K","deprecated":false,"deprecationMessage":""},{"name":"value","type":"","deprecated":false,"deprecationMessage":"","optional":true}],"optional":false,"returnType":"void","typeParameters":["K"],"line":69,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nUpdates the contact data object with a new value for a given key.","description":"

Updates the contact data object with a new value for a given key.

\\n","jsdoctags":[{"name":"key","type":"K","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}},{"name":"value","type":"","deprecated":false,"deprecationMessage":"","optional":true,"tagName":{"text":"param"}}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Contact modal component.

\\n","rawdescription":"\\n\\nContact modal component.\\n","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EmailInputComponent, RequiredInputComponent, RequiredTextboxComponent } from \'@hra-ui/components/atoms\';\\nimport { produce } from \'immer\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/**\\n An interface representing contact data information which will be emitted if all the fields are in correct format.\\n */\\nexport interface ContactData {\\n /** The email address of the person submitting the form. */\\n email: string;\\n /** The subject line of the message being sent. */\\n subject: string;\\n /** The body of the message being sent. */\\n message: string;\\n}\\n\\n/** Initial empty contact data */\\nconst EMPTY_CONTACT_DATA: Partial = {\\n email: undefined,\\n subject: undefined,\\n message: undefined,\\n};\\n\\n/**\\n * Contact modal component.\\n */\\n@Component({\\n selector: \'hra-contact-modal\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatButtonModule,\\n MatIconModule,\\n EmailInputComponent,\\n MarkdownModule,\\n RequiredTextboxComponent,\\n RequiredInputComponent,\\n ],\\n templateUrl: \'./contact-modal.component.html\',\\n styleUrls: [\'./contact-modal.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class ContactModalComponent {\\n /** Input for product logo URL to displayed on the left side. */\\n @Input() productLogoUrl = \'\';\\n\\n /** Input for product title to displayed on the left side. */\\n @Input() productTitle = \'\';\\n\\n /** Emits when the submit button is clicked and all the values are appropriate. */\\n @Output() readonly submitClick = new EventEmitter();\\n\\n /** Emits when the cancel button or close icon is clicked */\\n @Output() readonly closeClick = new EventEmitter();\\n\\n /** A function to disable the submit button. If all the values are in approproiate format, then it will be enabled. */\\n get disableSubmit(): boolean {\\n return Object.values(this.contactData).some((value) => value === undefined);\\n }\\n\\n /** Asigns the undefined initially to all the input fields. */\\n contactData = EMPTY_CONTACT_DATA;\\n\\n /** Updates the contact data object with a new value for a given key. */\\n updateData(key: K, value?: ContactData[K]): void {\\n this.contactData = produce(this.contactData, (draft) => {\\n draft[key] = value;\\n });\\n }\\n\\n /** It emits the updated value of contact data */\\n submit(): void {\\n this.submitClick.emit(this.contactData as ContactData);\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n position: relative;\\n padding-top: 2rem;\\n margin-right: 1.5rem;\\n margin-left: 1.5rem;\\n font-family: \'Inter\';\\n\\n .product-logo {\\n display: flex;\\n align-items: center;\\n\\n .product-logo-image {\\n margin-right: 1rem;\\n }\\n\\n .product-title {\\n color: #990000;\\n margin: 0;\\n font-weight: 600;\\n }\\n }\\n\\n .close {\\n position: absolute;\\n top: 1.5rem;\\n right: 0rem;\\n }\\n\\n .submit {\\n margin-right: 1.5rem;\\n }\\n\\n .submit,\\n .cancel {\\n width: 7.5rem;\\n }\\n\\n .email {\\n margin-top: 1.25rem;\\n }\\n\\n .message-field {\\n margin-top: 1rem;\\n }\\n\\n .subject-field {\\n margin-top: 1rem;\\n }\\n\\n .desc {\\n margin-top: 1.5rem;\\n }\\n}\\n","styleUrl":"./contact-modal.component.scss"}],"stylesData":"","accessors":{"disableSubmit":{"name":"disableSubmit","getSignature":{"name":"disableSubmit","type":"boolean","returnType":"boolean","line":61,"rawdescription":"\\nA function to disable the submit button. If all the values are in approproiate format, then it will be enabled.","description":"

A function to disable the submit button. If all the values are in approproiate format, then it will be enabled.

\\n"}}},"templateData":"\\n \\"Prodoct\\n

{{ productTitle }}

\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n"},{"name":"FooterComponent","id":"component-FooterComponent-45c5a61fc5d68c201808fb76ff867f9a7cf8e42e6ef95ae08b440dbd37ce63eb4c77c3da0597ef90973854d65522a3ba496eeb5eccbe75750c1fd2f5abf52e6b","file":"src/lib/footer/footer.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-footer","styleUrls":["./footer.component.scss"],"styles":[],"templateUrl":["./footer.component.html"],"viewProviders":[],"inputsClass":[{"name":"downloadFormats","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nDifferent download formats options displayed to the user","description":"

Different download formats options displayed to the user

\\n","line":74,"type":"T[]","decorators":[]},{"name":"embed","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for embed link in HRA Portal","description":"

Input for embed link in HRA Portal

\\n","line":71,"type":"any","decorators":[]},{"name":"hraPortal","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for HRA Portal link","description":"

Input for HRA Portal link

\\n","line":65,"type":"any","decorators":[]},{"name":"illustrationMetadata","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for Illustration metadata page link in HRA Portal","description":"

Input for Illustration metadata page link in HRA Portal

\\n","line":68,"type":"any","decorators":[]},{"name":"productLogoUrl","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for product logo URL to displayed on the left side.","description":"

Input for product logo URL to displayed on the left side.

\\n","line":59,"type":"string","decorators":[]},{"name":"productTitle","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for product title to displayed on the left side.","description":"

Input for product title to displayed on the left side.

\\n","line":62,"type":"string","decorators":[]},{"name":"size","defaultValue":"\'large\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nHost binding of footer component","description":"

Host binding of footer component

\\n","line":56,"type":"\\"small\\" | \\"large\\"","decorators":[]}],"outputsClass":[{"name":"contactClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the contact button is clicked","description":"

Emits when the contact button is clicked

\\n","line":80,"type":"EventEmitter"},{"name":"download","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits the selected download format","description":"

Emits the selected download format

\\n","line":77,"type":"EventEmitter"}],"propertiesClass":[{"name":"downloadListOpen","defaultValue":"false","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Whether the download list panel is open

\\n","line":91,"rawdescription":"\\nWhether the download list panel is open"},{"name":"DOWNLOADS_LIST_POSITION","defaultValue":"DOWNLOADS_LIST_POSITION","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Download list popup overlay positioning

\\n","line":83,"rawdescription":"\\nDownload list popup overlay positioning","modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for footer that displays its content at the bottom of the page with different action buttons.

\\n","rawdescription":"\\n\\nComponent for footer that displays its content at the bottom of the page with different action buttons.\\n","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { ConnectedPosition, OverlayModule } from \'@angular/cdk/overlay\';\\nimport { MatListModule } from \'@angular/material/list\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { EMPTY_LINK } from \'@hra-ui/cdk/state\';\\n\\n/**\\n * Base type for different download format options.\\n */\\nexport interface DownloadFormat {\\n /**\\n * User readable format label\\n */\\n label: string;\\n}\\n\\n/**\\n * Positioning value for the download list popup\\n */\\nconst DOWNLOADS_LIST_POSITION: ConnectedPosition[] = [\\n {\\n panelClass: \'above\',\\n originX: \'start\',\\n originY: \'top\',\\n overlayX: \'start\',\\n overlayY: \'bottom\',\\n offsetY: 0,\\n },\\n {\\n panelClass: \'below\',\\n originX: \'start\',\\n originY: \'bottom\',\\n overlayX: \'start\',\\n overlayY: \'top\',\\n },\\n];\\n\\n/**\\n * Component for footer that displays its content at the bottom of the page with different action buttons.\\n */\\n@Component({\\n selector: \'hra-footer\',\\n standalone: true,\\n imports: [CommonModule, MatButtonModule, MatIconModule, OverlayModule, MatListModule, LinkDirective],\\n templateUrl: \'./footer.component.html\',\\n styleUrls: [\'./footer.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class FooterComponent {\\n /** Host binding of footer component */\\n @HostBinding(\'class\')\\n @Input()\\n size: \'small\' | \'large\' = \'large\';\\n\\n /** Input for product logo URL to displayed on the left side. */\\n @Input() productLogoUrl = \'\';\\n\\n /** Input for product title to displayed on the left side. */\\n @Input() productTitle = \'\';\\n\\n /** Input for HRA Portal link */\\n @Input() hraPortal = EMPTY_LINK;\\n\\n /** Input for Illustration metadata page link in HRA Portal */\\n @Input() illustrationMetadata = EMPTY_LINK;\\n\\n /** Input for embed link in HRA Portal */\\n @Input() embed = EMPTY_LINK;\\n\\n /** Different download formats options displayed to the user */\\n @Input() downloadFormats: T[] = [];\\n\\n /** Emits the selected download format */\\n @Output() readonly download = new EventEmitter();\\n\\n /** Emits when the contact button is clicked */\\n @Output() readonly contactClick = new EventEmitter();\\n\\n /** Download list popup overlay positioning */\\n readonly DOWNLOADS_LIST_POSITION = DOWNLOADS_LIST_POSITION;\\n\\n /** Gets whether the footer required is small */\\n get isSmall(): boolean {\\n return this.size === \'small\';\\n }\\n\\n /** Whether the download list panel is open */\\n downloadListOpen = false;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: flex;\\n padding: 1rem 2rem;\\n border-top: 0.063rem solid #e2e7e9;\\n align-items: center;\\n background-color: #f8f9fa;\\n gap: 1rem;\\n\\n --palette-primary-500: #abcdef;\\n\\n .controls {\\n display: flex;\\n justify-content: flex-end;\\n }\\n .filler {\\n flex-grow: 1;\\n }\\n\\n .product-title {\\n color: #990000;\\n margin-right: 0rem;\\n }\\n\\n a {\\n cursor: pointer;\\n display: flex;\\n }\\n\\n .product-logo-image {\\n height: 1.2rem;\\n margin-right: 1rem;\\n }\\n\\n button {\\n justify-content: center;\\n align-items: center;\\n min-width: 9rem;\\n min-height: 3rem;\\n gap: 0.5rem;\\n\\n --palette-primary-100-rgb: #4c5a69;\\n --palette-primary-500-rgb: #243142;\\n\\n &.mat-accent {\\n &:active {\\n --palette-primary-700-rgb: #4c5a69;\\n }\\n .mat-icon {\\n z-index: 1;\\n }\\n }\\n }\\n}\\n\\n::ng-deep {\\n .download-options-panel {\\n box-shadow: 0.1rem 0.1rem 0.4rem 0.2rem #dad7d7;\\n background-color: #ffffff;\\n }\\n}\\n::ng-deep .download-button {\\n .mdc-button__label {\\n display: flex;\\n gap: 0.5rem;\\n }\\n}\\n","styleUrl":"./footer.component.scss"}],"stylesData":"","accessors":{"isSmall":{"name":"isSmall","getSignature":{"name":"isSmall","type":"boolean","returnType":"boolean","line":86,"rawdescription":"\\nGets whether the footer required is small","description":"

Gets whether the footer required is small

\\n"}}},"templateData":"\\n
\\n\\n\\n\\n\\n download \\n Download\\n\\n\\n\\n\\n
\\n\\n\\n\\n\\n\\n\\n \\n \\n {{ format.label }}\\n \\n \\n\\n"},{"name":"FullscreenContainerComponent","id":"component-FullscreenContainerComponent-78edc2b37cbc90a17be0fcca4ed7291593d5f3d12c4ea823de3f9510c13bad4492bc5cd65823726fc7e333c874880c17093ff9d20096fd92e20137c8cc4f75af","file":"src/lib/fullscreen/fullscreen-container.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-fullscreen-container","styleUrls":[],"styles":["\\n :host {\\n display: block;\\n position: relative;\\n }\\n "],"template":"","templateUrl":[],"viewProviders":[],"inputsClass":[{"name":"fullscreen","defaultValue":"false","deprecated":false,"deprecationMessage":"","rawdescription":"\\nA boolean input property that controls the fullscreen mode","description":"

A boolean input property that controls the fullscreen mode

\\n","line":38,"type":"boolean","decorators":[]}],"outputsClass":[],"propertiesClass":[{"name":"content","deprecated":false,"deprecationMessage":"","type":"QueryList","optional":true,"description":"

A property that gets a reference to any child components of type FullscreenContentComponent that are projected into the component's content area

\\n","line":35,"rawdescription":"\\nA property that gets a reference to any child components of type FullscreenContentComponent that are projected into the component\'s content area","decorators":[{"name":"ContentChildren","stringifiedArguments":"FullscreenContentComponent"}],"modifierKind":[144]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

A component that wraps any child components of type FullscreenContentComponent and\\nsets their isFullScreen property to true or false based on its own fullscreen input property

\\n","rawdescription":"\\nA component that wraps any child components of type FullscreenContentComponent and\\nsets their isFullScreen property to true or false based on its own fullscreen input property\\n","type":"component","sourceCode":"import {\\n AfterContentInit,\\n ChangeDetectionStrategy,\\n Component,\\n ContentChildren,\\n Input,\\n OnChanges,\\n QueryList,\\n SimpleChanges,\\n} from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { FullscreenContentComponent } from \'./fullscreen-content.component\';\\n\\n/** A component that wraps any child components of type FullscreenContentComponent and\\n * sets their isFullScreen property to true or false based on its own fullscreen input property\\n */\\n@Component({\\n selector: \'hra-fullscreen-container\',\\n standalone: true,\\n imports: [CommonModule, FullscreenContentComponent],\\n template: \'\',\\n styles: [\\n `\\n :host {\\n display: block;\\n position: relative;\\n }\\n `,\\n ],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class FullscreenContainerComponent implements AfterContentInit, OnChanges {\\n /** A property that gets a reference to any child components of type FullscreenContentComponent that are projected into the component\'s content area */\\n @ContentChildren(FullscreenContentComponent)\\n readonly content?: QueryList;\\n\\n /** A boolean input property that controls the fullscreen mode */\\n @Input() fullscreen = false;\\n\\n /** It calls the updateFullscreenMode method to set the isFullScreen property of the child\\n * FullscreenContentComponent instances based on the value of the fullscreen input property\\n */\\n ngAfterContentInit(): void {\\n this.updateFullscreenMode();\\n }\\n\\n /** It checks if the fullscreen input property has changed, and calls the updateFullscreenMode method if it has */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'fullscreen\' in changes) {\\n this.updateFullscreenMode();\\n }\\n }\\n\\n /** A private method that sets the isFullScreen property of each child FullscreenContentComponent based on the value of the fullscreen */\\n private updateFullscreenMode(): void {\\n this.content?.forEach((content) => {\\n content.isFullScreen = this.fullscreen;\\n });\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":"","stylesData":"\\n :host {\\n display: block;\\n position: relative;\\n }\\n \\n","implements":["AfterContentInit","OnChanges"]},{"name":"FullscreenContentComponent","id":"component-FullscreenContentComponent-061cdd7c639f9c53e46272aaf23ed318885fbcf937978d8940b0f0baf165576129c5897204992603662d7b530bcd8d63a7d7a97602a18e97b7f1711f84c4725f","file":"src/lib/fullscreen/fullscreen-content.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-fullscreen-content","styleUrls":["./fullscreen-content.component.scss"],"styles":[],"template":"","templateUrl":[],"viewProviders":[],"inputsClass":[],"outputsClass":[],"propertiesClass":[{"name":"isFullScreen","defaultValue":"false","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

This binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true

\\n","line":40,"rawdescription":"\\nThis binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true","decorators":[{"name":"HostBinding","stringifiedArguments":"\'class.fullscreen-on\'"},{"name":"HostBinding","stringifiedArguments":"\'@animateResize\'"}]}],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[{"name":"@animateResize","defaultValue":"false","deprecated":false,"deprecationMessage":"","rawdescription":"\\nThis binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true","description":"

This binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true

\\n","line":40,"type":"boolean","decorators":[]},{"name":"class.fullscreen-on","defaultValue":"false","deprecated":false,"deprecationMessage":"","rawdescription":"\\nThis binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true","description":"

This binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true

\\n","line":40,"type":"boolean","decorators":[]}],"hostListeners":[],"description":"

A component that displays its content in fullscreen mode when its isFullScreen property is set to true

\\n","rawdescription":"\\nA component that displays its content in fullscreen mode when its isFullScreen property is set to true","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, HostBinding } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { animate, state, style, transition, trigger } from \'@angular/animations\';\\n\\n/** A component that displays its content in fullscreen mode when its isFullScreen property is set to true */\\n@Component({\\n selector: \'hra-fullscreen-content\',\\n standalone: true,\\n imports: [CommonModule],\\n animations: [\\n trigger(\'animateResize\', [\\n state(\\n \'true\',\\n style({\\n width: \'100%\',\\n position: \'absolute\',\\n right: 0,\\n })\\n ),\\n state(\\n \'false\',\\n style({\\n width: \'50%\',\\n position: \'absolute\',\\n right: 0,\\n })\\n ),\\n transition(\'true <=> false\', [animate(\'0.5s ease\')]),\\n ]),\\n ],\\n template: \'\',\\n styleUrls: [\'./fullscreen-content.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class FullscreenContentComponent {\\n /** This binds the isFullScreen property to the class.fullscreen-on when isFullScreen is true */\\n @HostBinding(\'class.fullscreen-on\')\\n /** This binds the isFullScreen property to the @animateResize when isFullScreen is true */\\n @HostBinding(\'@animateResize\')\\n isFullScreen = false;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n overflow-y: hidden;\\n transition: width 0.5s ease;\\n width: 50%;\\n\\n &.fullscreen-on {\\n z-index: 100;\\n background: #f8f9fa;\\n }\\n}\\n","styleUrl":"./fullscreen-content.component.scss"}],"stylesData":""},{"name":"HeaderComponent","id":"component-HeaderComponent-81f5689eacf69c8f1658a62e299bcad0df485f2cc8e6664f3f16cfa7d30400e53a54549f6aa8125abb2fc207fb428887c0a19dde695063a2d92611d78d9c6956","file":"src/lib/header/header.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-header","styleUrls":["./header.component.scss"],"styles":[],"templateUrl":["./header.component.html"],"viewProviders":[],"inputsClass":[{"name":"aboutLink","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for about link","description":"

Input for about link

\\n","line":40,"type":"any","decorators":[]},{"name":"appTitle","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput for app title to show on the left side.\\n","description":"

Input for app title to show on the left side.

\\n","line":34,"type":"string","decorators":[]},{"name":"productLogoUrl","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput for product logo URL to displayed on the left side.\\n","description":"

Input for product logo URL to displayed on the left side.

\\n","line":24,"type":"string","decorators":[]},{"name":"productTitle","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput for product title to displayed on the left side.\\n","description":"

Input for product title to displayed on the left side.

\\n","line":29,"type":"string","decorators":[]},{"name":"productTitleLink","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInput for Product Title link","description":"

Input for Product Title link

\\n","line":37,"type":"any","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Header component, displays on top of every page.

\\n","rawdescription":"\\n\\nHeader component, displays on top of every page.\\n","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatRippleModule } from \'@angular/material/core\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { EMPTY_LINK } from \'@hra-ui/cdk\';\\n\\n/**\\n * Header component, displays on top of every page.\\n */\\n@Component({\\n selector: \'hra-header\',\\n standalone: true,\\n imports: [CommonModule, MatButtonModule, MatIconModule, MatRippleModule, LinkDirective],\\n templateUrl: \'./header.component.html\',\\n styleUrls: [\'./header.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class HeaderComponent {\\n /**\\n * Input for product logo URL to displayed on the left side.\\n */\\n @Input() productLogoUrl = \'\';\\n\\n /**\\n * Input for product title to displayed on the left side.\\n */\\n @Input() productTitle = \'\';\\n\\n /**\\n * Input for app title to show on the left side.\\n */\\n @Input() appTitle = \'\';\\n\\n /** Input for Product Title link */\\n @Input() productTitleLink = EMPTY_LINK;\\n\\n /** Input for about link */\\n @Input() aboutLink = EMPTY_LINK;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'utils\';\\n@use \'variables\' as vars;\\n\\n:host {\\n display: flex;\\n align-items: center;\\n height: 5rem;\\n padding: 0 2rem 0 1rem;\\n\\n @include utils.define-flex-filler();\\n\\n h1 {\\n // Reset margins for h1 elements\\n margin: 0;\\n }\\n\\n .product {\\n display: flex;\\n align-items: center;\\n text-decoration: none;\\n // Style the ripple animation\\n padding: 0 1rem;\\n border-radius: 0.25rem;\\n\\n &:hover {\\n cursor: pointer;\\n }\\n\\n .text {\\n margin-left: 1rem;\\n font-weight: 600;\\n color: vars.$accent-rgb;\\n }\\n }\\n\\n .app {\\n margin-left: 0.5rem;\\n }\\n\\n .about {\\n width: 9rem;\\n height: 3rem;\\n text-decoration: none;\\n span {\\n border-bottom: 1px solid var(--palette-primary-500-rgb);\\n }\\n .icon {\\n width: 1.5rem;\\n height: 1.5rem;\\n font-size: 1.5rem;\\n }\\n }\\n\\n @media (max-width: 30rem) {\\n height: 4.5rem;\\n\\n .product .text,\\n .about .text {\\n @include utils.sr-only();\\n }\\n\\n .product {\\n height: 2.5rem;\\n padding: 0 0.25rem;\\n\\n .logo {\\n width: 1.5rem;\\n height: 1.5rem;\\n }\\n }\\n\\n .app {\\n font-size: 1rem;\\n line-height: 1.5rem;\\n }\\n\\n .about {\\n min-width: 2.5rem;\\n width: 2.5rem;\\n height: 2.5rem;\\n padding: 0;\\n\\n .icon {\\n margin: 0;\\n }\\n }\\n }\\n\\n @media (max-width: 20rem) {\\n padding: 0;\\n }\\n}\\n","styleUrl":"./header.component.scss"}],"stylesData":"","templateData":"\\n \\n

{{ productTitle }}

\\n\\n

{{ appTitle }}

\\n\\n
\\n\\n\\n info_outlined\\n About\\n\\n"},{"name":"HraLandingPageIntroWcComponent","id":"component-HraLandingPageIntroWcComponent-57ba89b5fa60bec2ad59de1cc52e4d3002935eab8da7f77895b1d7b507237df7df5d8fa2fec4dd3ba498b8d06fc5f70758beb2ba67ccbb24f2819798948e81d4","file":"src/lib/hra-landing-page-intro-wc/hra-landing-page-intro-wc.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-ui-hra-landing-page-intro-wc","styleUrls":["./hra-landing-page-intro-wc.component.scss"],"styles":[],"templateUrl":["./hra-landing-page-intro-wc.component.html"],"viewProviders":[],"inputsClass":[{"name":"description","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nDescription for FTU Explorer","description":"

Description for FTU Explorer

\\n","line":19,"type":"string","decorators":[]},{"name":"partners","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nThank you message to partners","description":"

Thank you message to partners

\\n","line":22,"type":"string","decorators":[]},{"name":"readMore","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nIntro Image file url","description":"

Intro Image file url

\\n","line":25,"type":"string","decorators":[]},{"name":"title","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nIntro title for FTU Explorer","description":"

Intro title for FTU Explorer

\\n","line":16,"type":"string","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for LandingPage Intro - Web coomponent

\\n","rawdescription":"\\nComponent for LandingPage Intro - Web coomponent","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/** Component for LandingPage Intro - Web coomponent */\\n@Component({\\n selector: \'hra-ui-hra-landing-page-intro-wc\',\\n standalone: true,\\n imports: [CommonModule, MarkdownModule],\\n templateUrl: \'./hra-landing-page-intro-wc.component.html\',\\n styleUrls: [\'./hra-landing-page-intro-wc.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class HraLandingPageIntroWcComponent {\\n /** Intro title for FTU Explorer */\\n @Input() title = \'\';\\n\\n /** Description for FTU Explorer */\\n @Input() description = \'\';\\n\\n /** Thank you message to partners */\\n @Input() partners = \'\';\\n\\n /** Intro Image file url */\\n @Input() readMore = \'\';\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n gap: 8px;\\n padding: 24px, 32px, 24px, 32px;\\n .title {\\n font-size: 20px;\\n font-family: Inter;\\n font-weight: 400;\\n line-height: 24px;\\n letter-spacing: 0em;\\n text-align: left;\\n }\\n\\n .description .partners .readMore {\\n font-family: Inter;\\n font-size: 16px;\\n font-weight: 400;\\n line-height: 24px;\\n letter-spacing: 0em;\\n text-align: left;\\n }\\n ::ng-deep a {\\n color: vars.$primary-rgb;\\n font-weight: 700;\\n }\\n ::ng-deep p {\\n margin: 0;\\n }\\n}\\n","styleUrl":"./hra-landing-page-intro-wc.component.scss"}],"stylesData":"","templateData":"

{{ title }}

\\n\\n\\n\\n\\n\\n\\n"},{"name":"InfoModalComponent","id":"component-InfoModalComponent-56dc03e6960f4005149bab8dbf6a5b713061505964f6b3cc7d33868ed7f83aff7dbf222ccf66999864c6313f218c20f849715b3ebcc4d2ea44285c6e07811662","file":"src/lib/info-modal/info-modal.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-info-modal","styleUrls":["./info-modal.component.scss"],"styles":[],"templateUrl":["./info-modal.component.html"],"viewProviders":[],"inputsClass":[{"name":"description","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nInformation modal message to the user","description":"

Information modal message to the user

\\n","line":24,"type":"string","decorators":[]},{"name":"productLogoUrl","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nProduct logo shown to the user","description":"

Product logo shown to the user

\\n","line":21,"type":"string","decorators":[]},{"name":"productTitle","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nProduct title shown to the user","description":"

Product title shown to the user

\\n","line":18,"type":"string","decorators":[]}],"outputsClass":[{"name":"closeClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the close icon is clicked","description":"

Emits when the close icon is clicked

\\n","line":27,"type":"EventEmitter"}],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Displays an information modal to the user with the product title and logo and description

\\n","rawdescription":"\\nDisplays an information modal to the user with the product title and logo and description","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/** Displays an information modal to the user with the product title and logo and description */\\n@Component({\\n selector: \'hra-info-modal\',\\n standalone: true,\\n imports: [CommonModule, MatButtonModule, MatIconModule, MarkdownModule],\\n templateUrl: \'./info-modal.component.html\',\\n styleUrls: [\'./info-modal.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class InfoModalComponent {\\n /** Product title shown to the user */\\n @Input() productTitle = \'\';\\n\\n /** Product logo shown to the user */\\n @Input() productLogoUrl = \'\';\\n\\n /** Information modal message to the user */\\n @Input() description = \'\';\\n\\n /** Emits when the close icon is clicked */\\n @Output() readonly closeClick = new EventEmitter();\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n position: relative;\\n padding: 2rem 2rem 1.25rem 2rem;\\n\\n .close {\\n position: absolute;\\n top: 1.5rem;\\n right: 1.5rem;\\n }\\n\\n .title {\\n display: flex;\\n align-items: center;\\n\\n .product-logo-image {\\n height: 2.75rem;\\n margin-right: 1rem;\\n }\\n\\n .product-title {\\n margin: 0;\\n color: #990000;\\n }\\n }\\n\\n .description {\\n display: block;\\n margin-top: 1rem;\\n }\\n}\\n","styleUrl":"./info-modal.component.scss"}],"stylesData":"","templateData":"\\n \\"Prodoct\\n

{{ productTitle }}

\\n\\n\\n\\n\\n\\n"},{"name":"InteractiveSvgComponent","id":"component-InteractiveSvgComponent-34dafc0493fcadf92dd676bebad498e3798e87879ccd7ab9c56dfb6b52cf51b41a6b132fa4c00fa2f32867f3f84829bef3163da37de19cf480f10a8cd94e74f1","file":"src/lib/interactive-svg/interactive-svg.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":["ViewEncapsulation.ShadowDom"],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-interactive-svg","styleUrls":["./interactive-svg.component.scss"],"styles":[],"templateUrl":["./interactive-svg.component.html"],"viewProviders":[],"inputsClass":[{"name":"highlightId","deprecated":false,"deprecationMessage":"","rawdescription":"\\nHighlighted ontology id","description":"

Highlighted ontology id

\\n","line":94,"type":"string","decorators":[]},{"name":"mapping","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nMapping info","description":"

Mapping info

\\n","line":91,"type":"T[]","decorators":[]},{"name":"url","deprecated":false,"deprecationMessage":"","rawdescription":"\\nSVG url","description":"

SVG url

\\n","line":88,"type":"string","decorators":[]}],"outputsClass":[{"name":"nodeClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits node id when clicked","description":"

Emits node id when clicked

\\n","line":100,"type":"EventEmitter"},{"name":"nodeHover","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits node id when hovered","description":"

Emits node id when hovered

\\n","line":97,"type":"EventEmitter"}],"propertiesClass":[{"name":"NEVER_EVAL_SCRIPTS","defaultValue":"SVGScriptEvalMode.NEVER","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

SVG script eval mode

\\n","line":103,"rawdescription":"\\nSVG script eval mode","modifierKind":[144]},{"name":"nodeHoverData$","defaultValue":"new BehaviorSubject(undefined)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Observable of node hover data or undefined when there is no active hover

\\n","line":109,"rawdescription":"\\nObservable of node hover data or undefined when there is no active hover","modifierKind":[144]},{"name":"nodeHoverDelayedData$","defaultValue":"this.nodeHoverData$.pipe(debounce((event) => timer(event ? HOVER_DELAY : 0)))","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Observable of node hover with a timer

\\n","line":112,"rawdescription":"\\nObservable of node hover with a timer","modifierKind":[144]},{"name":"TOOLTIP_POSITIONS","defaultValue":"TOOLTIP_POSITIONS","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Tooltip position settings

\\n","line":106,"rawdescription":"\\nTooltip position settings","modifierKind":[144]}],"methodsClass":[{"name":"formatNodeName","args":[{"name":"name","type":"string","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"string","typeParameters":[],"line":196,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nRemoves underscores from id\\n","description":"

Removes underscores from id

\\n","jsdoctags":[{"name":{"pos":4993,"end":4997,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"name"},"type":"string","deprecated":false,"deprecationMessage":"","tagName":{"pos":4987,"end":4992,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":"

Node name

\\n"},{"tagName":{"pos":5014,"end":5021,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":"

node name without underscores

\\n"}]},{"name":"setSvgElement","args":[{"name":"el","type":"SVGElement","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"void","typeParameters":[],"line":181,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nSets SVG element\\n","description":"

Sets SVG element

\\n","jsdoctags":[{"name":{"pos":4595,"end":4597,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"el"},"type":"SVGElement","deprecated":false,"deprecationMessage":"","tagName":{"pos":4589,"end":4594,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":"

SVG element

\\n"}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Interactive SVG component

\\n","rawdescription":"\\n\\nInteractive SVG component\\n","type":"component","sourceCode":"import { ConnectedPosition, OverlayModule } from \'@angular/cdk/overlay\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n inject,\\n Input,\\n OnChanges,\\n OnDestroy,\\n Output,\\n Renderer2,\\n SimpleChanges,\\n ViewEncapsulation,\\n} from \'@angular/core\';\\nimport { TooltipComponent } from \'@hra-ui/components/atoms\';\\nimport { InlineSVGModule, SVGScriptEvalMode } from \'ng-inline-svg-2\';\\nimport { BehaviorSubject, debounce, fromEventPattern, Observable, Subject, takeUntil, timer } from \'rxjs\';\\nimport { NodeEventHandler } from \'rxjs/internal/observable/fromEvent\';\\n\\n/** Delay before tooltip becomes visible */\\nconst HOVER_DELAY = 200;\\n\\n/** Tooltip position settings */\\nconst TOOLTIP_POSITIONS: ConnectedPosition[] = [\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'start\',\\n overlayY: \'center\',\\n offsetX: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'end\',\\n overlayY: \'center\',\\n offsetX: -8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'top\',\\n offsetY: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'bottom\',\\n offsetY: -8,\\n },\\n];\\n\\n/** Node tooltip data */\\nexport interface NodeTooltipData {\\n /** Node name */\\n node: string;\\n /** Center point of hovered node in screen coordinates */\\n origin: { x: number; y: number };\\n}\\n\\n/** Interface for node entries */\\nexport interface NodeMapEntry {\\n /** Node label */\\n label: string;\\n /** Node id in svg */\\n id: string;\\n /** Ontology id of cell type */\\n ontologyId: string;\\n}\\n\\n/**\\n * Interactive SVG component\\n */\\n@Component({\\n selector: \'hra-interactive-svg\',\\n standalone: true,\\n imports: [CommonModule, InlineSVGModule, OverlayModule, TooltipComponent],\\n templateUrl: \'./interactive-svg.component.html\',\\n styleUrls: [\'./interactive-svg.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n encapsulation: ViewEncapsulation.ShadowDom,\\n})\\nexport class InteractiveSvgComponent implements OnChanges, OnDestroy {\\n /** SVG url */\\n @Input() url?: string;\\n\\n /** Mapping info */\\n @Input() mapping: T[] = [];\\n\\n /** Highlighted ontology id */\\n @Input() highlightId?: string;\\n\\n /** Emits node id when hovered */\\n @Output() readonly nodeHover = new EventEmitter();\\n\\n /** Emits node id when clicked */\\n @Output() readonly nodeClick = new EventEmitter();\\n\\n /** SVG script eval mode */\\n readonly NEVER_EVAL_SCRIPTS = SVGScriptEvalMode.NEVER;\\n\\n /** Tooltip position settings */\\n readonly TOOLTIP_POSITIONS = TOOLTIP_POSITIONS;\\n\\n /** Observable of node hover data or undefined when there is no active hover */\\n readonly nodeHoverData$ = new BehaviorSubject(undefined);\\n\\n /** Observable of node hover with a timer */\\n readonly nodeHoverDelayedData$ = this.nodeHoverData$.pipe(debounce((event) => timer(event ? HOVER_DELAY : 0)));\\n\\n /** Custom renderer */\\n private readonly renderer = inject(Renderer2);\\n\\n /** Destroys */\\n private destroy$ = new Subject();\\n\\n /** Crosswalk element of svg */\\n private crosswalkEl?: Element;\\n\\n /** List of highlighted svg elements */\\n private highlightedElements: Element[] = [];\\n\\n /**\\n * Updates the highlighting based on current highlight id\\n * @param changes\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'highlightId\' in changes) {\\n this.resetHighlight();\\n this.setHighlight();\\n }\\n }\\n\\n /**\\n * Highlights cells that match highlightId\\n */\\n private setHighlight() {\\n const { mapping, highlightId, crosswalkEl } = this;\\n const entry = mapping.find(({ ontologyId }) => ontologyId === highlightId);\\n if (!entry || !crosswalkEl) {\\n return;\\n }\\n\\n let id = this.encodeId(entry.id);\\n const element = crosswalkEl.querySelector(`#${id}`);\\n if (!element) {\\n return;\\n } else if (element.nodeName !== \'g\') {\\n id = element.parentElement?.id ?? \'\';\\n }\\n\\n const elements = crosswalkEl.querySelectorAll(`#${id} :is(path, polygon, polyline)`);\\n this.highlightedElements = Array.from(elements);\\n elements.forEach((el) => el.classList.add(\'click-active\'));\\n }\\n\\n /**\\n * Resets all highlighted elements in the svg\\n */\\n private resetHighlight(): void {\\n for (const el of this.highlightedElements) {\\n el.classList.remove(\'click-active\');\\n }\\n this.highlightedElements = [];\\n }\\n\\n /**\\n * Clears observables on destroy\\n */\\n ngOnDestroy(): void {\\n this.clear();\\n }\\n\\n /**\\n * Sets SVG element\\n * @param el SVG element\\n */\\n setSvgElement(el: SVGElement): void {\\n this.clear();\\n this.crosswalkEl = el.querySelector(\'[id^=\\"Crosswalk\\"]\') ?? undefined;\\n if (this.crosswalkEl) {\\n // Move to front (i.e. last child in svg)\\n this.renderer.appendChild(el, this.crosswalkEl);\\n this.attachCrosswalkHover(this.crosswalkEl);\\n }\\n }\\n\\n /**\\n * Removes underscores from id\\n * @param name Node name\\n * @returns node name without underscores\\n */\\n formatNodeName(name: string): string {\\n return name.replace(/_/g, \' \');\\n }\\n\\n /**\\n * Attaches crosswalk hover\\n * @param el element\\n */\\n private attachCrosswalkHover(el: Element): void {\\n this.attachEvent(el, \'mouseover\').subscribe((event) => this.onCrosswalkHover(event));\\n this.attachEvent(el, \'mouseout\').subscribe(() => this.onCrosswalkHover(undefined as never as MouseEvent));\\n this.attachEvent(el, \'click\').subscribe((event) => this.nodeClick.emit(this.getNode(event)));\\n }\\n\\n /**\\n * Finds matching node in data from a hovered element\\n * @param event Mouse event\\n */\\n private onCrosswalkHover(event: MouseEvent): void {\\n if (event) {\\n const node = this.getNode(event);\\n if (node) {\\n this.nodeHoverData$.next({\\n node: node.label,\\n origin: {\\n x: event.clientX,\\n y: event.clientY,\\n },\\n });\\n this.nodeHover.emit(node); //emits node entry\\n }\\n } else {\\n this.nodeHoverData$.next(undefined);\\n this.nodeHover.emit();\\n }\\n }\\n\\n /**\\n * Clears observables\\n */\\n private clear(): void {\\n this.destroy$.next();\\n this.destroy$.complete();\\n this.destroy$ = new Subject();\\n }\\n\\n /**\\n * Returns entry from mapping if target, parent, or grandparent id matches the node name\\n * @param event Event\\n * @returns Node entry that matches the target id\\n */\\n private getNode(event: Event): T | undefined {\\n const targetId = (event.target as Element).id;\\n const parentId = (event.target as Element).parentElement?.id ?? \'\';\\n const grandparentId = (event.target as Element).parentElement?.parentElement?.id ?? \'\';\\n const idCollection = [targetId, parentId, grandparentId];\\n for (const id of idCollection) {\\n const decodedID = this.decodeId(id);\\n const match = this.mapping.find(\\n (item) => item.id?.toLowerCase() === decodedID.toLowerCase() //search mapping by name for matching node entry\\n );\\n if (match) {\\n return match;\\n }\\n }\\n return undefined;\\n }\\n\\n /**\\n * Decodes id into a normal string\\n * @param id Undecoded ID\\n * @returns id\\n */\\n private decodeId(id: string): string {\\n const replacer = (_match: string, hex: string) => String.fromCharCode(Number.parseInt(hex, 16));\\n return id.replace(/_x([\\\\da-f]+)_/gi, replacer);\\n }\\n\\n /**\\n * Turns normal string into decoded SVG id\\n * @param id id\\n * @returns Encoded id\\n */\\n private encodeId(id: string): string {\\n const replacer = (match: string) => `_x${match.charCodeAt(0).toString(16).toUpperCase()}_`;\\n return id.replace(/[^a-z0-9-]/gi, replacer);\\n }\\n\\n /**\\n * Attaches an event listener\\n * @template K\\n * @param el Element\\n * @param event Event\\n * @returns Observable\\n */\\n private attachEvent(el: Element, event: K): Observable {\\n const { renderer, destroy$ } = this;\\n const add = (handler: NodeEventHandler) => renderer.listen(el, event, handler);\\n const remove = (_handler: NodeEventHandler, unlisten: () => void) => unlisten();\\n return fromEventPattern(add, remove).pipe(takeUntil(destroy$));\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":".svg {\\n max-height: calc(100vh - 14rem);\\n overflow-y: auto;\\n}\\nsvg {\\n max-height: calc(100vh - 10rem);\\n width: 100%;\\n}\\n\\n[id^=\'Crosswalk\'] {\\n :is(path, polygon, polyline) {\\n fill: transparent;\\n stroke: transparent;\\n }\\n\\n .hover-active & g:hover > :is(path, polygon, polyline),\\n .hover-active & g > g:hover > :is(path, polygon, polyline),\\n .click-active {\\n fill: hsl(0deg 100% 50%);\\n mix-blend-mode: saturation;\\n }\\n}\\n\\n::-webkit-scrollbar {\\n width: 0.5rem;\\n height: 0.5rem;\\n}\\n\\n::-webkit-scrollbar-track {\\n background: #f8f9fa;\\n border: 0.063rem solid #d3d3d3;\\n}\\n\\n::-webkit-scrollbar-thumb {\\n background: #a0abb4;\\n border-radius: 0.5rem;\\n}\\n","styleUrl":"./interactive-svg.component.scss"}],"stylesData":"","implements":["OnChanges","OnDestroy"],"templateData":"\\n\\n\\n \\n \\n \\n\\n"},{"name":"LandingPageInDepthComponent","id":"component-LandingPageInDepthComponent-266cc77d12f81268af62a259a42675f25c0be65e3cab6881ce7afcd3dbaa4ab87e767f669fc822ea592327de677787a00c9eb4a5b9b1171d78fe6aefc8cc439b","file":"src/lib/landing-page-in-depth/landing-page-in-depth.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-landing-page-in-depth","styleUrls":["./landing-page-in-depth.component.scss"],"styles":[],"templateUrl":["./landing-page-in-depth.component.html"],"viewProviders":[],"inputsClass":[{"name":"description","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nImage description shown to the user","description":"

Image description shown to the user

\\n","line":24,"type":"string","decorators":[]},{"name":"img","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nImage shown to the user","description":"

Image shown to the user

\\n","line":27,"type":"string","decorators":[]},{"name":"moreLink","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nLink to navigate to on more button click","description":"

Link to navigate to on more button click

\\n","line":33,"type":"any","decorators":[]},{"name":"moreText","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nText for more button","description":"

Text for more button

\\n","line":30,"type":"string","decorators":[]},{"name":"title","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nImage title shown to the user","description":"

Image title shown to the user

\\n","line":21,"type":"string","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Displays the image and also corresponding title and text along with a button to read more

\\n","rawdescription":"\\n\\nDisplays the image and also corresponding title and text along with a button to read more\\n","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EMPTY_LINK, LinkDirective } from \'@hra-ui/cdk\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/**\\n * Displays the image and also corresponding title and text along with a button to read more\\n */\\n@Component({\\n selector: \'hra-landing-page-in-depth\',\\n standalone: true,\\n imports: [CommonModule, MarkdownModule, MatButtonModule, MatIconModule, LinkDirective],\\n templateUrl: \'./landing-page-in-depth.component.html\',\\n styleUrls: [\'./landing-page-in-depth.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class LandingPageInDepthComponent {\\n /** Image title shown to the user */\\n @Input() title = \'\';\\n\\n /** Image description shown to the user */\\n @Input() description = \'\';\\n\\n /** Image shown to the user */\\n @Input() img = \'\';\\n\\n /** Text for more button */\\n @Input() moreText = \'\';\\n\\n /** Link to navigate to on more button click */\\n @Input() moreLink = EMPTY_LINK;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n display: grid;\\n grid-template-columns: 2fr 3fr;\\n grid-template-rows: auto auto 1fr;\\n column-gap: 2rem;\\n row-gap: 2rem;\\n padding: 3.5rem 2rem;\\n\\n .image {\\n grid-column: 1;\\n grid-row: 1 / span 3;\\n width: 100%;\\n height: auto;\\n align-self: center;\\n border-radius: 1rem;\\n box-shadow: 0.06rem 0.13rem 1rem 0.13rem #00000029;\\n }\\n\\n .title {\\n font-size: 2rem;\\n line-height: 2.5rem;\\n margin: 0;\\n }\\n\\n .description {\\n font-size: 1rem;\\n line-height: 1.5rem;\\n\\n ::ng-deep p {\\n margin: 0;\\n }\\n\\n ::ng-deep a {\\n color: vars.$primary-rgb;\\n font-weight: 700;\\n }\\n }\\n\\n .more-button {\\n width: fit-content;\\n height: 3rem;\\n }\\n}\\n","styleUrl":"./landing-page-in-depth.component.scss"}],"stylesData":"","templateData":"\\"\\"\\n

{{ title }}

\\n\\n\\n"},{"name":"LandingPageIntroComponent","id":"component-LandingPageIntroComponent-8e48a2ad3d32eea60c9dee7976b3dbc195b3a8107a3c174ac68b4696362903f19522bad089b509daae23505334aa5361945e7a8124fd32f17a6834c349c87aed","file":"src/lib/landing-page-intro/landing-page-intro.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-landing-page-intro","styleUrls":["./landing-page-intro.component.scss"],"styles":[],"templateUrl":["./landing-page-intro.component.html"],"viewProviders":[],"inputsClass":[{"name":"description","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nDescription for FTU Explorer","description":"

Description for FTU Explorer

\\n","line":22,"type":"string","decorators":[]},{"name":"img","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nIntro Image file url","description":"

Intro Image file url

\\n","line":28,"type":"string","decorators":[]},{"name":"moreLink","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\nLink to navigate to on more button click","description":"

Link to navigate to on more button click

\\n","line":34,"type":"any","decorators":[]},{"name":"moreText","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nText for more button","description":"

Text for more button

\\n","line":31,"type":"string","decorators":[]},{"name":"partners","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nThank you message to partners","description":"

Thank you message to partners

\\n","line":25,"type":"string","decorators":[]},{"name":"title","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nIntro title for FTU Explorer","description":"

Intro title for FTU Explorer

\\n","line":19,"type":"string","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Component for LandingPage Intro

\\n","rawdescription":"\\nComponent for LandingPage Intro","type":"component","sourceCode":"import { CommonModule } from \'@angular/common\';\\nimport { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EMPTY_LINK, LinkDirective } from \'@hra-ui/cdk\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/** Component for LandingPage Intro */\\n@Component({\\n selector: \'hra-landing-page-intro\',\\n standalone: true,\\n imports: [CommonModule, MatButtonModule, MatIconModule, MarkdownModule, LinkDirective],\\n templateUrl: \'./landing-page-intro.component.html\',\\n styleUrls: [\'./landing-page-intro.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class LandingPageIntroComponent {\\n /** Intro title for FTU Explorer */\\n @Input() title = \'\';\\n\\n /** Description for FTU Explorer */\\n @Input() description = \'\';\\n\\n /** Thank you message to partners */\\n @Input() partners = \'\';\\n\\n /** Intro Image file url */\\n @Input() img = \'\';\\n\\n /** Text for more button */\\n @Input() moreText = \'\';\\n\\n /** Link to navigate to on more button click */\\n @Input() moreLink = EMPTY_LINK;\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n display: grid;\\n grid-template-columns: 3fr 2fr;\\n grid-template-rows: auto auto 3rem 1fr;\\n align-items: start;\\n column-gap: 2rem;\\n row-gap: 2rem;\\n\\n .title {\\n font-size: 3rem;\\n line-height: 4rem;\\n margin: 0;\\n }\\n\\n .more-button {\\n width: fit-content;\\n height: 3rem;\\n }\\n\\n .image {\\n grid-column: 2;\\n grid-row: 1 / span 4;\\n place-self: center;\\n width: 100%;\\n height: auto;\\n }\\n\\n .description,\\n .partners {\\n ::ng-deep p {\\n margin: 0;\\n }\\n\\n ::ng-deep a {\\n color: vars.$primary-rgb;\\n font-weight: 700;\\n }\\n }\\n\\n .red-theme {\\n background-color: #990000;\\n border-color: #990000;\\n &:hover {\\n background-color: #990000;\\n border-color: #990000;\\n\\n mat-icon {\\n transform: translateX(30%);\\n transition: 0.5s;\\n }\\n }\\n\\n &:active,\\n &:focus,\\n &:focus:not(:hover) {\\n background-color: #990000;\\n border-color: #990000;\\n\\n ::ng-deep .mat-mdc-focus-indicator {\\n background-color: #990000 !important;\\n border-color: #990000;\\n }\\n }\\n }\\n}\\n","styleUrl":"./landing-page-intro.component.scss"}],"stylesData":"","templateData":"

{{ title }}

\\n\\n\\n\\n\\n\\n\\"alt\\"\\n"},{"name":"MetricsComponent","id":"component-MetricsComponent-e52c0a1cdf090042d1924c4907a4034774cbb442217faca9ec5035e76d2796116cf55644ecf49ae040fdea1168f9c5d99f6ce15b2079f70de3d853fece481b30","file":"src/lib/metrics/metrics.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-metrics","styleUrls":["./metrics.component.scss"],"styles":[],"templateUrl":["./metrics.component.html"],"viewProviders":[],"inputsClass":[{"name":"logo","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nLogo of metrics component.","description":"

Logo of metrics component.

\\n","line":31,"type":"string","decorators":[]},{"name":"metrics","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nList of metrics that will be shown to the user.","description":"

List of metrics that will be shown to the user.

\\n","line":34,"type":"MetricItem[]","decorators":[]},{"name":"title","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nMain title of metrics component.","description":"

Main title of metrics component.

\\n","line":28,"type":"string","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Describes the metrics for the HuBMAP project.

\\n","rawdescription":"\\n\\nDescribes the metrics for the HuBMAP project.\\n","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\n\\n/**\\n An interface representing a single metric with an icon, value and description.\\n */\\nexport interface MetricItem {\\n /** Represents the icon associated with the metric. */\\n icon: string;\\n /** Describes the numberical value of the metric. */\\n value: string;\\n /** Describes the type of metric. */\\n description: string;\\n}\\n/**\\n * Describes the metrics for the HuBMAP project.\\n */\\n@Component({\\n selector: \'hra-metrics\',\\n standalone: true,\\n imports: [CommonModule],\\n templateUrl: \'./metrics.component.html\',\\n styleUrls: [\'./metrics.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class MetricsComponent {\\n /** Main title of metrics component. */\\n @Input() title = \'\';\\n\\n /** Logo of metrics component. */\\n @Input() logo = \'\';\\n\\n /** List of metrics that will be shown to the user. */\\n @Input() metrics: MetricItem[] = [];\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n padding: 2rem 0 0 0;\\n background: #f8f9fa;\\n gap: 0.5rem;\\n\\n .logo {\\n height: 2.75rem;\\n }\\n\\n .header-title {\\n font-size: 2rem;\\n line-height: 2.5rem;\\n }\\n\\n .metrics {\\n display: flex;\\n flex-direction: row;\\n overflow-x: auto;\\n max-width: 100%;\\n gap: 2rem;\\n padding: 2rem 1.75rem;\\n\\n .metric {\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n min-width: 14.25rem;\\n height: 14.75rem;\\n padding-top: 2rem;\\n padding-bottom: 2rem;\\n\\n .logo {\\n margin-bottom: 2rem;\\n }\\n\\n .value {\\n font-size: 3rem;\\n line-height: 4rem;\\n margin-bottom: 0.25rem;\\n }\\n\\n .description {\\n font-size: 1rem;\\n text-align: center;\\n }\\n }\\n }\\n}\\n","styleUrl":"./metrics.component.scss"}],"stylesData":"","templateData":"\\"\\"\\n{{ title }}\\n\\n
\\n
\\n \\"\\"\\n {{ item.value }} \\n {{ item.description }} \\n
\\n
\\n"},{"name":"ScreenSizeNoticeComponent","id":"component-ScreenSizeNoticeComponent-6b641a220201d969fb228ecf72f5e7a8fc87da742b8a53350bc9c27cea9c54a6493313826b99ec8c34dfd7004772a27748e45af5b0c9ead80bdf168a781117f8","file":"src/lib/screen-size-notice/screen-size-notice.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-screen-size-notice","styleUrls":["./screen-size-notice.component.scss"],"styles":[],"templateUrl":["./screen-size-notice.component.html"],"viewProviders":[],"inputsClass":[{"name":"content","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput for passing screen size notice content\\n","description":"

Input for passing screen size notice content

\\n","line":23,"type":"string","decorators":[]},{"name":"portal","defaultValue":"EMPTY_LINK","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput of screen size notice component\\n","description":"

Input of screen size notice component

\\n","line":28,"type":"any","decorators":[]}],"outputsClass":[{"name":"proceedClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the proceed button is clicked","description":"

Emits when the proceed button is clicked

\\n","line":31,"type":"EventEmitter"}],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

The screen size notice component displays a notice for the users specifying the required screen size

\\n","rawdescription":"\\n\\nThe screen size notice component displays a notice for the users specifying the required screen size\\n","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EMPTY_LINK, LinkDirective } from \'@hra-ui/cdk\';\\n\\n/**\\n * The screen size notice component displays a notice for the users specifying the required screen size\\n */\\n@Component({\\n selector: \'hra-screen-size-notice\',\\n standalone: true,\\n imports: [CommonModule, MarkdownModule, MatButtonModule, MatIconModule, LinkDirective],\\n templateUrl: \'./screen-size-notice.component.html\',\\n styleUrls: [\'./screen-size-notice.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class ScreenSizeNoticeComponent {\\n /**\\n * Input for passing screen size notice content\\n */\\n @Input() content = \'\';\\n\\n /**\\n * Input of screen size notice component\\n */\\n @Input() portal = EMPTY_LINK;\\n\\n /** Emits when the proceed button is clicked */\\n @Output() readonly proceedClick = new EventEmitter();\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: none;\\n position: relative;\\n border-radius: 0.5rem;\\n padding: 1.5rem;\\n flex-direction: column;\\n\\n .header-close {\\n position: absolute;\\n top: 0.625rem;\\n right: 1rem;\\n }\\n\\n h3 {\\n margin: 0 0 1rem 0;\\n font-weight: 700;\\n }\\n\\n .btn-stroked {\\n font-weight: 700;\\n margin-bottom: 1rem;\\n margin-top: 1rem;\\n padding: 0.75rem 0;\\n letter-spacing: 0.5px;\\n }\\n\\n .btn-flat {\\n font-weight: 700;\\n font-size: 16px;\\n padding: 0.75rem 0;\\n letter-spacing: 0.5px;\\n color: white;\\n }\\n\\n .content {\\n font-size: 1rem;\\n line-height: 1.5rem;\\n letter-spacing: 0.5px;\\n }\\n\\n @media (max-width: 480px) {\\n display: flex;\\n }\\n}\\n","styleUrl":"./screen-size-notice.component.scss"}],"stylesData":"","templateData":"

Screen Size Notice

\\n\\n\\n\\n Human Reference Atlas Portal \\n"},{"name":"SourceListComponent","id":"component-SourceListComponent-f0d0464b044f898be3752719190f2d8ad8511283d4daafb2f8b17bd0f4dfa0290abbbeb293819664c07134fcaee5a64313aaf72d69e335a063e244c2ba1d7c0c","file":"src/lib/source-list/source-list.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-source-list","styleUrls":["./source-list.component.scss"],"styles":[],"templateUrl":["./source-list.component.html"],"viewProviders":[],"inputsClass":[{"name":"collaborateText","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput buttonon text of empty biomarker component.\\n","description":"

Input buttonon text of empty biomarker component.

\\n","line":34,"type":"string","decorators":[]},{"name":"message","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput message markdown of empty biomarker component.\\n","description":"

Input message markdown of empty biomarker component.

\\n","line":39,"type":"string","decorators":[]},{"name":"sources","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nList of sources with titles and links displayed to the user","description":"

List of sources with titles and links displayed to the user

\\n","line":30,"type":"SourceListItem[]","decorators":[]}],"outputsClass":[{"name":"collaborateClick","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\nEmits when the contact button is clicked","description":"

Emits when the contact button is clicked

\\n","line":47,"type":"EventEmitter"}],"propertiesClass":[{"name":"showTable","defaultValue":"true","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Show table of source list component which toggles to true or false\\nbased on click

\\n","line":44,"rawdescription":"\\n\\nShow table of source list component which toggles to true or false\\nbased on click\\n"}],"methodsClass":[{"name":"toggleTable","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":53,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nIt changes the value of showTable to false if value it true\\nand vice versa\\n","description":"

It changes the value of showTable to false if value it true\\nand vice versa

\\n"}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

This component shows list of sources with title and links to the datasets

\\n","rawdescription":"\\nThis component shows list of sources with title and links to the datasets","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule } from \'@angular/material/table\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { EmptyBiomarkerComponent, LabelBoxComponent } from \'@hra-ui/components/atoms\';\\n\\n/** SourceListItem interface contains title and link to the dataset for the SourceList*/\\nexport interface SourceListItem {\\n /** Title of the dataset in the SourceList */\\n title: string;\\n\\n /** Label of the dataset in the SourceList */\\n label: string;\\n\\n /** Link to the dataset in the SourceList */\\n link: string;\\n}\\n\\n/** This component shows list of sources with title and links to the datasets */\\n@Component({\\n selector: \'hra-source-list\',\\n standalone: true,\\n imports: [CommonModule, MatTableModule, MatIconModule, LabelBoxComponent, EmptyBiomarkerComponent],\\n templateUrl: \'./source-list.component.html\',\\n styleUrls: [\'./source-list.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class SourceListComponent {\\n /** List of sources with titles and links displayed to the user */\\n @Input() sources: SourceListItem[] = [];\\n /**\\n * Input buttonon text of empty biomarker component.\\n */\\n @Input() collaborateText = \'\';\\n\\n /**\\n * Input message markdown of empty biomarker component.\\n */\\n @Input() message = \'\';\\n /**\\n * Show table of source list component which toggles to true or false\\n * based on click\\n */\\n showTable = true;\\n\\n /** Emits when the contact button is clicked */\\n @Output() readonly collaborateClick = new EventEmitter();\\n\\n /**\\n * It changes the value of showTable to false if value it true\\n * and vice versa\\n */\\n toggleTable(): void {\\n this.showTable = !this.showTable;\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'utils\';\\n@use \'variables\' as vars;\\n\\n:host {\\n display: block;\\n height: 100%;\\n\\n .sr-only {\\n @include utils.sr-only();\\n }\\n\\n .toggle {\\n display: flex;\\n align-items: center;\\n height: 3.5rem;\\n grid-area: source-list-header;\\n color: var(--dark-primary-text);\\n border-top: 0.063rem solid #d3d3d3;\\n border-bottom: 0.063rem solid #d3d3d3;\\n }\\n\\n .table-content {\\n height: calc(100% - 3.5rem);\\n overflow: auto;\\n\\n &.hidden {\\n display: none;\\n }\\n\\n table {\\n height: 100%;\\n }\\n\\n .mat-mdc-cell {\\n vertical-align: top;\\n border: none;\\n padding: 0.25rem 0.875rem;\\n font-size: 1rem;\\n }\\n\\n ::ng-deep .mdc-data-table__content {\\n display: block;\\n padding: 1rem 0rem;\\n }\\n }\\n}\\n","styleUrl":"./source-list.component.scss"}],"stylesData":"","templateData":"\\n Source Data\\n \\n {{ showTable ? \'keyboard_arrow_down\' : \'keyboard_arrow_up\' }}\\n \\n\\n\\n
\\n \\n \\n\\n \x3c!-- Position Column --\x3e\\n \\n \\n \\n \\n\\n \x3c!-- Data Column --\x3e\\n \\n \\n \\n \\n\\n \\n
\\n Source List Table with Title and Links\\n
Item Number{{ i + 1 }}.Title and Link\\n {{ element.title }}\\n
\\n {{ element.label }}\\n
\\n \\n
\\n"},{"name":"TissueTreeListComponent","id":"component-TissueTreeListComponent-8544338e8c5e11dd440f8b104bfa31552155bc5006289770258a8e940978177df7797adcb9bafb5b09a9943913ecf339692d528f868c6846be5c3de8a6270237","file":"src/lib/tissue-tree-list/tissue-tree-list.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-tissue-tree-list","styleUrls":["./tissue-tree-list.component.scss"],"styles":[],"templateUrl":["./tissue-tree-list.component.html"],"viewProviders":[],"inputsClass":[{"name":"nodes","defaultValue":"{} as Record","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput of tissue tree list component\\n","description":"

Input of tissue tree list component

\\n","line":69,"type":"Record","decorators":[]},{"name":"selected","defaultValue":"undefined","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nNode selected, to view the data associated with it\\n","description":"

Node selected, to view the data associated with it

\\n","line":74,"type":"T","decorators":[]}],"outputsClass":[{"name":"selectedChange","defaultValue":"new EventEmitter()","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nOutput of tissue tree list component\\n","description":"

Output of tissue tree list component

\\n","line":79,"type":"EventEmitter"}],"propertiesClass":[{"name":"control","defaultValue":"new FlatTreeControl>(\\n (node) => node.level,\\n (node) => node.expandable\\n )","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

tree controller, used to control the nodes in the tree

\\n","line":84,"rawdescription":"\\n\\ntree controller, used to control the nodes in the tree\\n","modifierKind":[144]},{"name":"dataSource","defaultValue":"new MatTreeFlatDataSource(this.control, this.flattener)","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Data source of tissue tree list component, defines the data in mat-tree

\\n","line":107,"rawdescription":"\\n\\nData source of tissue tree list component, defines the data in mat-tree\\n","modifierKind":[144]},{"name":"flattener","defaultValue":"new MatTreeFlattener>(\\n (node, level) => ({\\n label: node.label,\\n expandable: (node.children?.length ?? 0) > 0,\\n level,\\n data: node,\\n }),\\n (node) => node.level,\\n (node) => node.expandable,\\n (node) => node.children?.map((id) => this.nodes[id])\\n )","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Flattener of tissue tree list component, returns flat-data structure

\\n","line":92,"rawdescription":"\\n\\nFlattener of tissue tree list component, returns flat-data structure\\n","modifierKind":[144]}],"methodsClass":[{"name":"hasChild","args":[{"name":"_","type":"number","deprecated":false,"deprecationMessage":""},{"name":"node","type":"InternalNode","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"boolean","typeParameters":[],"line":128,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\ncheck if the current node has children\\n","description":"

check if the current node has children

\\n","jsdoctags":[{"name":"_","type":"number","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}},{"name":{"pos":3422,"end":3426,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"node"},"type":"InternalNode","deprecated":false,"deprecationMessage":"","tagName":{"pos":3416,"end":3421,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":"

current selected node

\\n"},{"tagName":{"pos":3455,"end":3462,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":"

boolean, which means if node has children

\\n"}]},{"name":"resetSelection","args":[],"optional":false,"returnType":"void","typeParameters":[],"line":146,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nResets selection and collapes all nodes of the tree.\\n","description":"

Resets selection and collapes all nodes of the tree.

\\n"},{"name":"selectNode","args":[{"name":"node","type":"T","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"void","typeParameters":[],"line":136,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nIt selects the node, which is clicked.\\n","description":"

It selects the node, which is clicked.

\\n","jsdoctags":[{"name":{"pos":3665,"end":3669,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"node"},"type":"T","deprecated":false,"deprecationMessage":"","tagName":{"pos":3659,"end":3664,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":"

Tissue Tree Item, which is clicked

\\n"}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Tabular View for hubMap tissue side-bar

\\n","rawdescription":"\\n\\nTabular View for hubMap tissue side-bar\\n","type":"component","sourceCode":"import { FlatTreeControl } from \'@angular/cdk/tree\';\\nimport { CommonModule } from \'@angular/common\';\\nimport {\\n ChangeDetectionStrategy,\\n Component,\\n EventEmitter,\\n Input,\\n OnChanges,\\n Output,\\n SimpleChanges,\\n} from \'@angular/core\';\\nimport { MatButtonModule } from \'@angular/material/button\';\\nimport { MatRippleModule } from \'@angular/material/core\';\\nimport { MatExpansionModule } from \'@angular/material/expansion\';\\nimport { MatIconModule } from \'@angular/material/icon\';\\nimport { MatTreeFlatDataSource, MatTreeFlattener, MatTreeModule } from \'@angular/material/tree\';\\nimport { LinkDirective } from \'@hra-ui/cdk\';\\nimport { LinkId } from \'@hra-ui/cdk/state\';\\n\\n/** Base node type */\\nexport interface DataNode {\\n /** User readable label */\\n label: string;\\n /** Id to pass as a query parameter on navigation */\\n id?: string;\\n /** Link to navigate to on node click */\\n link?: LinkId;\\n /** Nested nodes */\\n children?: K[];\\n}\\n\\n/**\\n * Internal interface for flat tissue data hierarchy\\n */\\ninterface InternalNode> {\\n /** Displayed label */\\n label: string;\\n /** Whether the node can be expanded to display child nodes */\\n expandable: boolean;\\n /** Depth of node in the tree */\\n level: number;\\n /** Associated user node data */\\n data: T;\\n}\\n\\n/**\\n * Tabular View for hubMap tissue side-bar\\n */\\n@Component({\\n selector: \'hra-tissue-tree-list\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatButtonModule,\\n MatTreeModule,\\n MatIconModule,\\n MatExpansionModule,\\n MatRippleModule,\\n LinkDirective,\\n ],\\n templateUrl: \'./tissue-tree-list.component.html\',\\n styleUrls: [\'./tissue-tree-list.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class TissueTreeListComponent> implements OnChanges {\\n /**\\n * Input of tissue tree list component\\n */\\n @Input() nodes: Record = {} as Record;\\n\\n /**\\n * Node selected, to view the data associated with it\\n */\\n @Input() selected?: T = undefined;\\n\\n /**\\n * Output of tissue tree list component\\n */\\n @Output() readonly selectedChange = new EventEmitter();\\n\\n /**\\n * tree controller, used to control the nodes in the tree\\n */\\n readonly control = new FlatTreeControl>(\\n (node) => node.level,\\n (node) => node.expandable\\n );\\n\\n /**\\n * Flattener of tissue tree list component, returns flat-data structure\\n */\\n readonly flattener = new MatTreeFlattener>(\\n (node, level) => ({\\n label: node.label,\\n expandable: (node.children?.length ?? 0) > 0,\\n level,\\n data: node,\\n }),\\n (node) => node.level,\\n (node) => node.expandable,\\n (node) => node.children?.map((id) => this.nodes[id])\\n );\\n\\n /**\\n * Data source of tissue tree list component, defines the data in mat-tree\\n */\\n readonly dataSource = new MatTreeFlatDataSource(this.control, this.flattener);\\n\\n /**\\n * Take actions if any data changes\\n * @param changes changes in data\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'nodes\' in changes) {\\n this.dataSource.data = this.findRootNodes();\\n }\\n if (\'selected\' in changes) {\\n const path = this.selected ? this.dfsFindPath(this.findRootNodes(), this.selected) : [];\\n this.expandPath(path);\\n }\\n }\\n\\n /**\\n * check if the current node has children\\n * @param node current selected node\\n * @returns boolean, which means if node has children\\n */\\n hasChild(_: number, node: InternalNode): boolean {\\n return node.expandable;\\n }\\n\\n /**\\n * It selects the node, which is clicked.\\n * @param node Tissue Tree Item, which is clicked\\n */\\n selectNode(node: T): void {\\n if (this.selected !== node) {\\n this.selected = node;\\n this.selectedChange.emit(this.selected);\\n }\\n }\\n\\n /**\\n * Resets selection and collapes all nodes of the tree.\\n */\\n resetSelection(): void {\\n this.selected = undefined;\\n this.control.collapseAll();\\n }\\n\\n /**\\n * It creates a copy of the input nodes object.\\n * It iterates over it and removes all the children nodes from it.\\n * @returns remaining nodes which are root nodes.\\n */\\n private findRootNodes(): T[] {\\n const { nodes } = this;\\n const roots = { ...this.nodes };\\n for (const key in nodes) {\\n for (const child of nodes[key].children ?? []) {\\n delete roots[child];\\n }\\n }\\n\\n return Object.values(roots);\\n }\\n\\n /**\\n * expands the tree nodes based on the path provided.\\n * @param path is given as an input.\\n */\\n private expandPath(path: DataNode[]): void {\\n const nodes = this.control.dataNodes.filter((node) => path.includes(node.data));\\n nodes.forEach((node) => this.control.expand(node));\\n }\\n\\n /**\\n * It used the logic of depth first search to find the target node.\\n * returns the path to the target node.\\n */\\n private dfsFindPath(nodes: T[], target: T, path: T[] = []): T[] {\\n for (const node of nodes) {\\n path.push(node);\\n if (node === target) {\\n return path;\\n }\\n\\n const savedLength = path.length;\\n const children = node.children?.map((id) => this.nodes[id]) ?? [];\\n if (this.dfsFindPath(children, target, path).length > savedLength) {\\n return path;\\n }\\n\\n path.pop();\\n }\\n\\n return path;\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'variables\' as vars;\\n\\n:host {\\n display: block;\\n height: calc(100% - 5rem);\\n overflow-y: auto;\\n .row {\\n min-height: 2rem;\\n &.child {\\n padding: 5px 0 5px 64px;\\n }\\n &.selected {\\n background-color: vars.$accent-lighter-rgb;\\n }\\n\\n .toggle {\\n width: 2rem;\\n height: 2rem;\\n padding: 0.25rem;\\n }\\n\\n .label-container {\\n display: flex;\\n align-items: center;\\n height: 2rem;\\n padding: 0 1rem;\\n border-radius: 0.25rem;\\n\\n .link {\\n cursor: pointer;\\n text-decoration: none;\\n color: rgba(vars.$dark-primary-text);\\n }\\n }\\n\\n &.selected .label-container .link {\\n color: vars.$accent-rgb;\\n }\\n }\\n}\\n","styleUrl":"./tissue-tree-list.component.scss"}],"stylesData":"","implements":["OnChanges"],"templateData":"\\n \\n \\n \\n\\n \\n \\n\\n \\n \\n\\n\\n\\n
\\n \\n {{ label }}\\n \\n \\n {{ label }}\\n \\n
\\n\\n"},{"name":"TitleCardComponent","id":"component-TitleCardComponent-dda33e0370aff82797f5b3494c98b25f59e8b87daefd03e828cec8116928222c19885f73255625acfce7c66d590784fd1ad8faa664dac65130f8119fc2670670","file":"src/lib/title-card/title-card.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-title-card","styleUrls":["./title-card.component.scss"],"styles":[],"templateUrl":["./title-card.component.html"],"viewProviders":[],"inputsClass":[{"name":"description","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nDescription for the title card shown to the user","description":"

Description for the title card shown to the user

\\n","line":19,"type":"string","decorators":[]},{"name":"title","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nTitle for the title card shown to the user","description":"

Title for the title card shown to the user

\\n","line":16,"type":"string","decorators":[]}],"outputsClass":[],"propertiesClass":[],"methodsClass":[],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Displays title card to the user with title and description

\\n","rawdescription":"\\nDisplays title card to the user with title and description","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, Input } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MarkdownModule } from \'ngx-markdown\';\\n\\n/** Displays title card to the user with title and description */\\n@Component({\\n selector: \'hra-title-card\',\\n standalone: true,\\n imports: [CommonModule, MarkdownModule],\\n templateUrl: \'./title-card.component.html\',\\n styleUrls: [\'./title-card.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class TitleCardComponent {\\n /** Title for the title card shown to the user*/\\n @Input() title = \'\';\\n\\n /** Description for the title card shown to the user*/\\n @Input() description = \'\';\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":":host {\\n display: block;\\n\\n .title {\\n margin-bottom: 0.5rem;\\n }\\n}\\n","styleUrl":"./title-card.component.scss"}],"stylesData":"","templateData":"

{{ title }}

\\n\\n"}],"modules":[],"miscellaneous":{"variables":[{"name":"DOWNLOADS_LIST_POSITION","ctype":"miscellaneous","subtype":"variable","file":"src/lib/footer/footer.component.ts","deprecated":false,"deprecationMessage":"","type":"ConnectedPosition[]","defaultValue":"[\\n {\\n panelClass: \'above\',\\n originX: \'start\',\\n originY: \'top\',\\n overlayX: \'start\',\\n overlayY: \'bottom\',\\n offsetY: 0,\\n },\\n {\\n panelClass: \'below\',\\n originX: \'start\',\\n originY: \'bottom\',\\n overlayX: \'start\',\\n overlayY: \'top\',\\n },\\n]","rawdescription":"Positioning value for the download list popup","description":"

Positioning value for the download list popup

\\n"},{"name":"EMPTY_CONTACT_DATA","ctype":"miscellaneous","subtype":"variable","file":"src/lib/contact-modal/contact-modal.component.ts","deprecated":false,"deprecationMessage":"","type":"Partial","defaultValue":"{\\n email: undefined,\\n subject: undefined,\\n message: undefined,\\n}","rawdescription":"Initial empty contact data","description":"

Initial empty contact data

\\n"},{"name":"HOVER_DELAY","ctype":"miscellaneous","subtype":"variable","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"number","defaultValue":"200","rawdescription":"Delay before tooltip becomes visible","description":"

Delay before tooltip becomes visible

\\n"},{"name":"TOOLTIP_POSITIONS","ctype":"miscellaneous","subtype":"variable","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"ConnectedPosition[]","defaultValue":"[\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'start\',\\n overlayY: \'center\',\\n offsetX: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'end\',\\n overlayY: \'center\',\\n offsetX: -8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'top\',\\n offsetY: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'bottom\',\\n offsetY: -8,\\n },\\n]","rawdescription":"Tooltip position settings","description":"

Tooltip position settings

\\n"}],"functions":[],"typealiases":[],"enumerations":[],"groupedVariables":{"src/lib/footer/footer.component.ts":[{"name":"DOWNLOADS_LIST_POSITION","ctype":"miscellaneous","subtype":"variable","file":"src/lib/footer/footer.component.ts","deprecated":false,"deprecationMessage":"","type":"ConnectedPosition[]","defaultValue":"[\\n {\\n panelClass: \'above\',\\n originX: \'start\',\\n originY: \'top\',\\n overlayX: \'start\',\\n overlayY: \'bottom\',\\n offsetY: 0,\\n },\\n {\\n panelClass: \'below\',\\n originX: \'start\',\\n originY: \'bottom\',\\n overlayX: \'start\',\\n overlayY: \'top\',\\n },\\n]","rawdescription":"Positioning value for the download list popup","description":"

Positioning value for the download list popup

\\n"}],"src/lib/contact-modal/contact-modal.component.ts":[{"name":"EMPTY_CONTACT_DATA","ctype":"miscellaneous","subtype":"variable","file":"src/lib/contact-modal/contact-modal.component.ts","deprecated":false,"deprecationMessage":"","type":"Partial","defaultValue":"{\\n email: undefined,\\n subject: undefined,\\n message: undefined,\\n}","rawdescription":"Initial empty contact data","description":"

Initial empty contact data

\\n"}],"src/lib/interactive-svg/interactive-svg.component.ts":[{"name":"HOVER_DELAY","ctype":"miscellaneous","subtype":"variable","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"number","defaultValue":"200","rawdescription":"Delay before tooltip becomes visible","description":"

Delay before tooltip becomes visible

\\n"},{"name":"TOOLTIP_POSITIONS","ctype":"miscellaneous","subtype":"variable","file":"src/lib/interactive-svg/interactive-svg.component.ts","deprecated":false,"deprecationMessage":"","type":"ConnectedPosition[]","defaultValue":"[\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'start\',\\n overlayY: \'center\',\\n offsetX: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'end\',\\n overlayY: \'center\',\\n offsetX: -8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'top\',\\n offsetY: 8,\\n },\\n {\\n originX: \'center\',\\n originY: \'center\',\\n overlayX: \'center\',\\n overlayY: \'bottom\',\\n offsetY: -8,\\n },\\n]","rawdescription":"Tooltip position settings","description":"

Tooltip position settings

\\n"}]},"groupedFunctions":{},"groupedEnumerations":{},"groupedTypeAliases":{}}}')},"./dist/compodoc/components-organisms/documentation.json":module=>{"use strict";module.exports=JSON.parse('{"pipes":[],"interfaces":[{"name":"DataCell","id":"interface-DataCell-1a11b32dee89b55746dd02d393406aa7ea06e3d180099074510a109749d06241410786b045f3a9d570f4479be6442014b194d68f340724b0e76b4b0983b59760","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule, MatTableDataSource } from \'@angular/material/table\';\\nimport {\\n BiomarkerTableDataCardComponent,\\n BiomarkerTableDataIconComponent,\\n DataItem,\\n} from \'@hra-ui/components/molecules\';\\nimport { HoverDirective } from \'@hra-ui/cdk\';\\nimport { GradientPoint, SizeLegend } from \'@hra-ui/components/atoms\';\\n\\n/**\\n * RGBTriblet of type RGB to store color\\n */\\ntype RGBTriplet = [number, number, number];\\n\\n/**\\n * An interface representing a single cell of the table.\\n */\\nexport interface DataCell {\\n /** Represents the color of the icon */\\n color: string;\\n /** Represents the size of the icon */\\n size: number;\\n /** Represents the data for the data card */\\n data: {\\n cell: string;\\n biomarker: string;\\n meanExpression: number;\\n /** Number of datasets for this Tissue */\\n dataset_count: number;\\n };\\n}\\n\\n/**\\n * Details of the Tissue\\n */\\nexport interface TissueInfo {\\n /** ID of the Tissue */\\n id: string;\\n /** Name of the Tissue */\\n label: string;\\n}\\n\\n/** Describes the composition of a single row in the table */\\nexport type DataRow = [string, number | undefined, ...(T | undefined)[]];\\n\\n/** Cell types table, describing the types and quanitites of cells for a specific organ */\\n@Component({\\n selector: \'hra-biomarker-table\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatTableModule,\\n BiomarkerTableDataIconComponent,\\n HoverDirective,\\n BiomarkerTableDataCardComponent,\\n ],\\n templateUrl: \'./biomarker-table.component.html\',\\n styleUrls: [\'./biomarker-table.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableComponent implements OnChanges {\\n /**\\n * Input: TissueInfo carrying the details of the tissue open\\n */\\n @Input() tissueInfo: TissueInfo = {\\n id: \'\',\\n label: \'\',\\n };\\n\\n /** Columns for the table */\\n @Input() columns: string[] = [];\\n\\n /** Rows of the table */\\n @Input() data: DataRow[] = [];\\n\\n /** Gradient colors along with their stop points */\\n @Input() gradient: GradientPoint[] = [];\\n\\n /** Taking input for the radius of the circle and the label to be displayed. */\\n @Input() sizes: SizeLegend[] = [];\\n\\n /**Cell name which is hovered, used for highlighting */\\n @Input() hightlightedCellName = \'\';\\n\\n /** Getter method to provide the definations of the columns */\\n get columnsWithTypeAndCount(): string[] {\\n return [\'type\', \'count\', ...this.columns];\\n }\\n\\n /** Source for the table */\\n readonly dataSource = new MatTableDataSource>([]);\\n\\n /**\\n * sets the data source for the table on every change\\n * @param changes object consisting of change in the Input\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.dataSource.data = this.data;\\n }\\n }\\n\\n /** Lerp function to give value beween min and max value based on the given value\\n *\\n * @param value\\n * @param min\\n * @param max\\n * @returns\\n */\\n lerp(value: number, min: number, max: number): number {\\n return min * (1 - value) + max * value;\\n }\\n\\n /**\\n * Converts HexCode to RGB\\n * @param hex\\n * @returns\\n */\\n hex2rgb(hex: string): RGBTriplet {\\n const r = parseInt(hex.slice(1, 3), 16);\\n const g = parseInt(hex.slice(3, 5), 16);\\n const b = parseInt(hex.slice(5, 7), 16);\\n return [r, g, b];\\n }\\n\\n /**\\n * Gets Min and Max color grade based on the meanExpression value\\n * @param meanExpression\\n * @returns\\n */\\n getMinMaxColor(meanExpression: number): { minColor: RGBTriplet; maxColor: RGBTriplet } {\\n const index = this.gradient.findIndex((item, i, arr) => {\\n return meanExpression >= item.percentage && meanExpression <= arr[i + 1]?.percentage;\\n });\\n\\n const minColor: RGBTriplet = this.hex2rgb(this.gradient[index]?.color ?? this.gradient[0].color);\\n const maxColor: RGBTriplet = this.hex2rgb(\\n this.gradient[index + 1]?.color ?? this.gradient[this.gradient.length - 1].color\\n );\\n\\n return { minColor, maxColor };\\n }\\n\\n /**\\n * Gets Min and Max size grade based on the Percentage value\\n * @param percentage\\n * @returns\\n */\\n getMinMaxSize(percentage: number): { minSize: number; maxSize: number } {\\n const index = this.sizes.findIndex((item, i, arr) => {\\n return percentage >= parseFloat(item.label) / 100 && percentage <= parseFloat(arr[i + 1]?.label) / 100;\\n });\\n const minSize: number = this.sizes[index]?.radius ?? this.sizes[0].radius;\\n const maxSize: number = this.sizes[index + 1]?.radius ?? this.sizes[this.sizes.length - 1].radius;\\n return { minSize, maxSize };\\n }\\n\\n /**\\n * Calculates the color of this value on this gradient\\n * @param value\\n * @returns\\n */\\n getColor(value: number): string {\\n const { minColor, maxColor } = this.getMinMaxColor(value);\\n return (\\n \'#\' +\\n minColor\\n .map((min, index) => this.lerp(value, min, maxColor[index]))\\n .map((component) => Math.round(component).toString(16))\\n .join(\'\')\\n );\\n }\\n\\n /**\\n * gets Size of the Cell based on the percentage value\\n * @param value\\n * @returns\\n */\\n getSize(value: number): number {\\n const { minSize, maxSize } = this.getMinMaxSize(value);\\n return this.lerp(value, minSize, maxSize);\\n }\\n\\n /**\\n * rocesses the object for hover data for Table Cell\\n * @param index index of the row of the datasource\\n * @param row row of the datasource\\n * @returns\\n */\\n getHoverData([index, row]: [number, DataRow]): DataItem[][] {\\n if (row[index] === undefined) {\\n return [];\\n }\\n\\n const {\\n tissueInfo: { id, label },\\n } = this;\\n const {\\n data: { cell, biomarker, meanExpression, dataset_count },\\n } = row[index] as T;\\n\\n return [\\n [\\n { label: \'Functional Tissue Unit Name\', value: label },\\n { label: \'Uberon ID\', value: id },\\n { label: \'#Datasets\', value: `${dataset_count ?? 0}` },\\n ],\\n [\\n { label: \'Cell Type Name\', value: row[0] },\\n { label: \'CL ID\', value: cell },\\n { label: \'Number of Cells\', value: `${row[1]}` },\\n ],\\n [\\n { label: \'Gene Name\', value: this.columns[index - 2] },\\n { label: \'HGNC ID\', value: biomarker },\\n { label: \'Mean Expression Value\', value: meanExpression.toFixed(6) },\\n ],\\n ];\\n }\\n}\\n","properties":[{"name":"color","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Represents the color of the icon

\\n","line":22,"rawdescription":"\\nRepresents the color of the icon"},{"name":"data","deprecated":false,"deprecationMessage":"","type":"literal type","optional":false,"description":"

Represents the data for the data card

\\n","line":26,"rawdescription":"\\nRepresents the data for the data card"},{"name":"size","deprecated":false,"deprecationMessage":"","type":"number","optional":false,"description":"

Represents the size of the icon

\\n","line":24,"rawdescription":"\\nRepresents the size of the icon"}],"indexSignatures":[],"kind":165,"description":"

An interface representing a single cell of the table.

\\n","rawdescription":"\\n\\nAn interface representing a single cell of the table.\\n","methods":[]},{"name":"TissueInfo","id":"interface-TissueInfo-1a11b32dee89b55746dd02d393406aa7ea06e3d180099074510a109749d06241410786b045f3a9d570f4479be6442014b194d68f340724b0e76b4b0983b59760","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","type":"interface","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule, MatTableDataSource } from \'@angular/material/table\';\\nimport {\\n BiomarkerTableDataCardComponent,\\n BiomarkerTableDataIconComponent,\\n DataItem,\\n} from \'@hra-ui/components/molecules\';\\nimport { HoverDirective } from \'@hra-ui/cdk\';\\nimport { GradientPoint, SizeLegend } from \'@hra-ui/components/atoms\';\\n\\n/**\\n * RGBTriblet of type RGB to store color\\n */\\ntype RGBTriplet = [number, number, number];\\n\\n/**\\n * An interface representing a single cell of the table.\\n */\\nexport interface DataCell {\\n /** Represents the color of the icon */\\n color: string;\\n /** Represents the size of the icon */\\n size: number;\\n /** Represents the data for the data card */\\n data: {\\n cell: string;\\n biomarker: string;\\n meanExpression: number;\\n /** Number of datasets for this Tissue */\\n dataset_count: number;\\n };\\n}\\n\\n/**\\n * Details of the Tissue\\n */\\nexport interface TissueInfo {\\n /** ID of the Tissue */\\n id: string;\\n /** Name of the Tissue */\\n label: string;\\n}\\n\\n/** Describes the composition of a single row in the table */\\nexport type DataRow = [string, number | undefined, ...(T | undefined)[]];\\n\\n/** Cell types table, describing the types and quanitites of cells for a specific organ */\\n@Component({\\n selector: \'hra-biomarker-table\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatTableModule,\\n BiomarkerTableDataIconComponent,\\n HoverDirective,\\n BiomarkerTableDataCardComponent,\\n ],\\n templateUrl: \'./biomarker-table.component.html\',\\n styleUrls: [\'./biomarker-table.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableComponent implements OnChanges {\\n /**\\n * Input: TissueInfo carrying the details of the tissue open\\n */\\n @Input() tissueInfo: TissueInfo = {\\n id: \'\',\\n label: \'\',\\n };\\n\\n /** Columns for the table */\\n @Input() columns: string[] = [];\\n\\n /** Rows of the table */\\n @Input() data: DataRow[] = [];\\n\\n /** Gradient colors along with their stop points */\\n @Input() gradient: GradientPoint[] = [];\\n\\n /** Taking input for the radius of the circle and the label to be displayed. */\\n @Input() sizes: SizeLegend[] = [];\\n\\n /**Cell name which is hovered, used for highlighting */\\n @Input() hightlightedCellName = \'\';\\n\\n /** Getter method to provide the definations of the columns */\\n get columnsWithTypeAndCount(): string[] {\\n return [\'type\', \'count\', ...this.columns];\\n }\\n\\n /** Source for the table */\\n readonly dataSource = new MatTableDataSource>([]);\\n\\n /**\\n * sets the data source for the table on every change\\n * @param changes object consisting of change in the Input\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.dataSource.data = this.data;\\n }\\n }\\n\\n /** Lerp function to give value beween min and max value based on the given value\\n *\\n * @param value\\n * @param min\\n * @param max\\n * @returns\\n */\\n lerp(value: number, min: number, max: number): number {\\n return min * (1 - value) + max * value;\\n }\\n\\n /**\\n * Converts HexCode to RGB\\n * @param hex\\n * @returns\\n */\\n hex2rgb(hex: string): RGBTriplet {\\n const r = parseInt(hex.slice(1, 3), 16);\\n const g = parseInt(hex.slice(3, 5), 16);\\n const b = parseInt(hex.slice(5, 7), 16);\\n return [r, g, b];\\n }\\n\\n /**\\n * Gets Min and Max color grade based on the meanExpression value\\n * @param meanExpression\\n * @returns\\n */\\n getMinMaxColor(meanExpression: number): { minColor: RGBTriplet; maxColor: RGBTriplet } {\\n const index = this.gradient.findIndex((item, i, arr) => {\\n return meanExpression >= item.percentage && meanExpression <= arr[i + 1]?.percentage;\\n });\\n\\n const minColor: RGBTriplet = this.hex2rgb(this.gradient[index]?.color ?? this.gradient[0].color);\\n const maxColor: RGBTriplet = this.hex2rgb(\\n this.gradient[index + 1]?.color ?? this.gradient[this.gradient.length - 1].color\\n );\\n\\n return { minColor, maxColor };\\n }\\n\\n /**\\n * Gets Min and Max size grade based on the Percentage value\\n * @param percentage\\n * @returns\\n */\\n getMinMaxSize(percentage: number): { minSize: number; maxSize: number } {\\n const index = this.sizes.findIndex((item, i, arr) => {\\n return percentage >= parseFloat(item.label) / 100 && percentage <= parseFloat(arr[i + 1]?.label) / 100;\\n });\\n const minSize: number = this.sizes[index]?.radius ?? this.sizes[0].radius;\\n const maxSize: number = this.sizes[index + 1]?.radius ?? this.sizes[this.sizes.length - 1].radius;\\n return { minSize, maxSize };\\n }\\n\\n /**\\n * Calculates the color of this value on this gradient\\n * @param value\\n * @returns\\n */\\n getColor(value: number): string {\\n const { minColor, maxColor } = this.getMinMaxColor(value);\\n return (\\n \'#\' +\\n minColor\\n .map((min, index) => this.lerp(value, min, maxColor[index]))\\n .map((component) => Math.round(component).toString(16))\\n .join(\'\')\\n );\\n }\\n\\n /**\\n * gets Size of the Cell based on the percentage value\\n * @param value\\n * @returns\\n */\\n getSize(value: number): number {\\n const { minSize, maxSize } = this.getMinMaxSize(value);\\n return this.lerp(value, minSize, maxSize);\\n }\\n\\n /**\\n * rocesses the object for hover data for Table Cell\\n * @param index index of the row of the datasource\\n * @param row row of the datasource\\n * @returns\\n */\\n getHoverData([index, row]: [number, DataRow]): DataItem[][] {\\n if (row[index] === undefined) {\\n return [];\\n }\\n\\n const {\\n tissueInfo: { id, label },\\n } = this;\\n const {\\n data: { cell, biomarker, meanExpression, dataset_count },\\n } = row[index] as T;\\n\\n return [\\n [\\n { label: \'Functional Tissue Unit Name\', value: label },\\n { label: \'Uberon ID\', value: id },\\n { label: \'#Datasets\', value: `${dataset_count ?? 0}` },\\n ],\\n [\\n { label: \'Cell Type Name\', value: row[0] },\\n { label: \'CL ID\', value: cell },\\n { label: \'Number of Cells\', value: `${row[1]}` },\\n ],\\n [\\n { label: \'Gene Name\', value: this.columns[index - 2] },\\n { label: \'HGNC ID\', value: biomarker },\\n { label: \'Mean Expression Value\', value: meanExpression.toFixed(6) },\\n ],\\n ];\\n }\\n}\\n","properties":[{"name":"id","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

ID of the Tissue

\\n","line":40,"rawdescription":"\\nID of the Tissue"},{"name":"label","deprecated":false,"deprecationMessage":"","type":"string","optional":false,"description":"

Name of the Tissue

\\n","line":42,"rawdescription":"\\nName of the Tissue"}],"indexSignatures":[],"kind":165,"description":"

Details of the Tissue

\\n","rawdescription":"\\n\\nDetails of the Tissue\\n","methods":[]}],"injectables":[],"guards":[],"interceptors":[],"classes":[],"directives":[],"components":[{"name":"BiomarkerTableComponent","id":"component-BiomarkerTableComponent-1a11b32dee89b55746dd02d393406aa7ea06e3d180099074510a109749d06241410786b045f3a9d570f4479be6442014b194d68f340724b0e76b4b0983b59760","file":"src/lib/biomarker-table/biomarker-table.component.ts","changeDetection":"ChangeDetectionStrategy.OnPush","encapsulation":[],"entryComponents":[],"inputs":[],"outputs":[],"providers":[],"selector":"hra-biomarker-table","styleUrls":["./biomarker-table.component.scss"],"styles":[],"templateUrl":["./biomarker-table.component.html"],"viewProviders":[],"inputsClass":[{"name":"columns","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nColumns for the table","description":"

Columns for the table

\\n","line":73,"type":"string[]","decorators":[]},{"name":"data","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nRows of the table","description":"

Rows of the table

\\n","line":76,"type":"DataRow[]","decorators":[]},{"name":"gradient","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nGradient colors along with their stop points","description":"

Gradient colors along with their stop points

\\n","line":79,"type":"GradientPoint[]","decorators":[]},{"name":"hightlightedCellName","defaultValue":"\'\'","deprecated":false,"deprecationMessage":"","rawdescription":"\\nCell name which is hovered, used for highlighting","description":"

Cell name which is hovered, used for highlighting

\\n","line":85,"type":"string","decorators":[]},{"name":"sizes","defaultValue":"[]","deprecated":false,"deprecationMessage":"","rawdescription":"\\nTaking input for the radius of the circle and the label to be displayed.","description":"

Taking input for the radius of the circle and the label to be displayed.

\\n","line":82,"type":"SizeLegend[]","decorators":[]},{"name":"tissueInfo","defaultValue":"{\\n id: \'\',\\n label: \'\',\\n }","deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nInput: TissueInfo carrying the details of the tissue open\\n","description":"

Input: TissueInfo carrying the details of the tissue open

\\n","line":67,"type":"TissueInfo","decorators":[]}],"outputsClass":[],"propertiesClass":[{"name":"dataSource","defaultValue":"new MatTableDataSource>([])","deprecated":false,"deprecationMessage":"","type":"","optional":false,"description":"

Source for the table

\\n","line":93,"rawdescription":"\\nSource for the table","modifierKind":[144]}],"methodsClass":[{"name":"getColor","args":[{"name":"value","type":"number","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"string","typeParameters":[],"line":165,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nCalculates the color of this value on this gradient\\n","description":"

Calculates the color of this value on this gradient

\\n","jsdoctags":[{"name":{"pos":4778,"end":4783,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"value"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":4772,"end":4777,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":4790,"end":4797,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"getHoverData","args":[{"type":"[number, DataRow]","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"[][]","typeParameters":[],"line":192,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nrocesses the object for hover data for Table Cell\\n","description":"

rocesses the object for hover data for Table Cell

\\n","jsdoctags":[{"type":"[number, DataRow]","deprecated":false,"deprecationMessage":"","tagName":{"text":"param"}},{"tagName":{"pos":5512,"end":5519,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"getMinMaxColor","args":[{"name":"meanExpression","type":"number","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"literal type","typeParameters":[],"line":133,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nGets Min and Max color grade based on the meanExpression value\\n","description":"

Gets Min and Max color grade based on the meanExpression value

\\n","jsdoctags":[{"name":{"pos":3545,"end":3559,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"meanExpression"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":3539,"end":3544,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":3566,"end":3573,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"getMinMaxSize","args":[{"name":"percentage","type":"number","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"literal type","typeParameters":[],"line":151,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nGets Min and Max size grade based on the Percentage value\\n","description":"

Gets Min and Max size grade based on the Percentage value

\\n","jsdoctags":[{"name":{"pos":4199,"end":4209,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"percentage"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":4193,"end":4198,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":4216,"end":4223,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"getSize","args":[{"name":"value","type":"number","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"number","typeParameters":[],"line":181,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\ngets Size of the Cell based on the percentage value\\n","description":"

gets Size of the Cell based on the percentage value

\\n","jsdoctags":[{"name":{"pos":5181,"end":5186,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"value"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":5175,"end":5180,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":5193,"end":5200,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"hex2rgb","args":[{"name":"hex","type":"string","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"RGBTriplet","typeParameters":[],"line":121,"deprecated":false,"deprecationMessage":"","rawdescription":"\\n\\nConverts HexCode to RGB\\n","description":"

Converts HexCode to RGB

\\n","jsdoctags":[{"name":{"pos":3236,"end":3239,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"hex"},"type":"string","deprecated":false,"deprecationMessage":"","tagName":{"pos":3230,"end":3235,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":3246,"end":3253,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]},{"name":"lerp","args":[{"name":"value","type":"number","deprecated":false,"deprecationMessage":""},{"name":"min","type":"number","deprecated":false,"deprecationMessage":""},{"name":"max","type":"number","deprecated":false,"deprecationMessage":""}],"optional":false,"returnType":"number","typeParameters":[],"line":112,"deprecated":false,"deprecationMessage":"","rawdescription":"\\nLerp function to give value beween min and max value based on the given value\\n\\n","description":"

Lerp function to give value beween min and max value based on the given value

\\n","jsdoctags":[{"name":{"pos":3024,"end":3029,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"value"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":3018,"end":3023,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"name":{"pos":3042,"end":3045,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"min"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":3036,"end":3041,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"name":{"pos":3058,"end":3061,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"max"},"type":"number","deprecated":false,"deprecationMessage":"","tagName":{"pos":3052,"end":3057,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"param"},"comment":""},{"tagName":{"pos":3068,"end":3075,"flags":4227072,"modifierFlagsCache":0,"transformFlags":0,"kind":79,"escapedText":"returns"},"comment":""}]}],"deprecated":false,"deprecationMessage":"","hostBindings":[],"hostListeners":[],"description":"

Cell types table, describing the types and quanitites of cells for a specific organ

\\n","rawdescription":"\\nCell types table, describing the types and quanitites of cells for a specific organ","type":"component","sourceCode":"import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from \'@angular/core\';\\nimport { CommonModule } from \'@angular/common\';\\nimport { MatTableModule, MatTableDataSource } from \'@angular/material/table\';\\nimport {\\n BiomarkerTableDataCardComponent,\\n BiomarkerTableDataIconComponent,\\n DataItem,\\n} from \'@hra-ui/components/molecules\';\\nimport { HoverDirective } from \'@hra-ui/cdk\';\\nimport { GradientPoint, SizeLegend } from \'@hra-ui/components/atoms\';\\n\\n/**\\n * RGBTriblet of type RGB to store color\\n */\\ntype RGBTriplet = [number, number, number];\\n\\n/**\\n * An interface representing a single cell of the table.\\n */\\nexport interface DataCell {\\n /** Represents the color of the icon */\\n color: string;\\n /** Represents the size of the icon */\\n size: number;\\n /** Represents the data for the data card */\\n data: {\\n cell: string;\\n biomarker: string;\\n meanExpression: number;\\n /** Number of datasets for this Tissue */\\n dataset_count: number;\\n };\\n}\\n\\n/**\\n * Details of the Tissue\\n */\\nexport interface TissueInfo {\\n /** ID of the Tissue */\\n id: string;\\n /** Name of the Tissue */\\n label: string;\\n}\\n\\n/** Describes the composition of a single row in the table */\\nexport type DataRow = [string, number | undefined, ...(T | undefined)[]];\\n\\n/** Cell types table, describing the types and quanitites of cells for a specific organ */\\n@Component({\\n selector: \'hra-biomarker-table\',\\n standalone: true,\\n imports: [\\n CommonModule,\\n MatTableModule,\\n BiomarkerTableDataIconComponent,\\n HoverDirective,\\n BiomarkerTableDataCardComponent,\\n ],\\n templateUrl: \'./biomarker-table.component.html\',\\n styleUrls: [\'./biomarker-table.component.scss\'],\\n changeDetection: ChangeDetectionStrategy.OnPush,\\n})\\nexport class BiomarkerTableComponent implements OnChanges {\\n /**\\n * Input: TissueInfo carrying the details of the tissue open\\n */\\n @Input() tissueInfo: TissueInfo = {\\n id: \'\',\\n label: \'\',\\n };\\n\\n /** Columns for the table */\\n @Input() columns: string[] = [];\\n\\n /** Rows of the table */\\n @Input() data: DataRow[] = [];\\n\\n /** Gradient colors along with their stop points */\\n @Input() gradient: GradientPoint[] = [];\\n\\n /** Taking input for the radius of the circle and the label to be displayed. */\\n @Input() sizes: SizeLegend[] = [];\\n\\n /**Cell name which is hovered, used for highlighting */\\n @Input() hightlightedCellName = \'\';\\n\\n /** Getter method to provide the definations of the columns */\\n get columnsWithTypeAndCount(): string[] {\\n return [\'type\', \'count\', ...this.columns];\\n }\\n\\n /** Source for the table */\\n readonly dataSource = new MatTableDataSource>([]);\\n\\n /**\\n * sets the data source for the table on every change\\n * @param changes object consisting of change in the Input\\n */\\n ngOnChanges(changes: SimpleChanges): void {\\n if (\'data\' in changes) {\\n this.dataSource.data = this.data;\\n }\\n }\\n\\n /** Lerp function to give value beween min and max value based on the given value\\n *\\n * @param value\\n * @param min\\n * @param max\\n * @returns\\n */\\n lerp(value: number, min: number, max: number): number {\\n return min * (1 - value) + max * value;\\n }\\n\\n /**\\n * Converts HexCode to RGB\\n * @param hex\\n * @returns\\n */\\n hex2rgb(hex: string): RGBTriplet {\\n const r = parseInt(hex.slice(1, 3), 16);\\n const g = parseInt(hex.slice(3, 5), 16);\\n const b = parseInt(hex.slice(5, 7), 16);\\n return [r, g, b];\\n }\\n\\n /**\\n * Gets Min and Max color grade based on the meanExpression value\\n * @param meanExpression\\n * @returns\\n */\\n getMinMaxColor(meanExpression: number): { minColor: RGBTriplet; maxColor: RGBTriplet } {\\n const index = this.gradient.findIndex((item, i, arr) => {\\n return meanExpression >= item.percentage && meanExpression <= arr[i + 1]?.percentage;\\n });\\n\\n const minColor: RGBTriplet = this.hex2rgb(this.gradient[index]?.color ?? this.gradient[0].color);\\n const maxColor: RGBTriplet = this.hex2rgb(\\n this.gradient[index + 1]?.color ?? this.gradient[this.gradient.length - 1].color\\n );\\n\\n return { minColor, maxColor };\\n }\\n\\n /**\\n * Gets Min and Max size grade based on the Percentage value\\n * @param percentage\\n * @returns\\n */\\n getMinMaxSize(percentage: number): { minSize: number; maxSize: number } {\\n const index = this.sizes.findIndex((item, i, arr) => {\\n return percentage >= parseFloat(item.label) / 100 && percentage <= parseFloat(arr[i + 1]?.label) / 100;\\n });\\n const minSize: number = this.sizes[index]?.radius ?? this.sizes[0].radius;\\n const maxSize: number = this.sizes[index + 1]?.radius ?? this.sizes[this.sizes.length - 1].radius;\\n return { minSize, maxSize };\\n }\\n\\n /**\\n * Calculates the color of this value on this gradient\\n * @param value\\n * @returns\\n */\\n getColor(value: number): string {\\n const { minColor, maxColor } = this.getMinMaxColor(value);\\n return (\\n \'#\' +\\n minColor\\n .map((min, index) => this.lerp(value, min, maxColor[index]))\\n .map((component) => Math.round(component).toString(16))\\n .join(\'\')\\n );\\n }\\n\\n /**\\n * gets Size of the Cell based on the percentage value\\n * @param value\\n * @returns\\n */\\n getSize(value: number): number {\\n const { minSize, maxSize } = this.getMinMaxSize(value);\\n return this.lerp(value, minSize, maxSize);\\n }\\n\\n /**\\n * rocesses the object for hover data for Table Cell\\n * @param index index of the row of the datasource\\n * @param row row of the datasource\\n * @returns\\n */\\n getHoverData([index, row]: [number, DataRow]): DataItem[][] {\\n if (row[index] === undefined) {\\n return [];\\n }\\n\\n const {\\n tissueInfo: { id, label },\\n } = this;\\n const {\\n data: { cell, biomarker, meanExpression, dataset_count },\\n } = row[index] as T;\\n\\n return [\\n [\\n { label: \'Functional Tissue Unit Name\', value: label },\\n { label: \'Uberon ID\', value: id },\\n { label: \'#Datasets\', value: `${dataset_count ?? 0}` },\\n ],\\n [\\n { label: \'Cell Type Name\', value: row[0] },\\n { label: \'CL ID\', value: cell },\\n { label: \'Number of Cells\', value: `${row[1]}` },\\n ],\\n [\\n { label: \'Gene Name\', value: this.columns[index - 2] },\\n { label: \'HGNC ID\', value: biomarker },\\n { label: \'Mean Expression Value\', value: meanExpression.toFixed(6) },\\n ],\\n ];\\n }\\n}\\n","assetsDirs":[],"styleUrlsData":[{"data":"@use \'utils\';\\n@use \'variables\' as vars;\\n\\n:host {\\n display: block;\\n\\n .sr-only {\\n @include utils.sr-only();\\n }\\n\\n .table {\\n margin-left: -1px;\\n\\n .highlight {\\n background-color: #f8f9fa;\\n }\\n td.type {\\n text-transform: lowercase;\\n }\\n }\\n\\n .table th {\\n background-color: #fff7f8;\\n color: #59264d;\\n text-align: right;\\n }\\n\\n .table td {\\n border-bottom: 0.063rem solid #d3d3d3;\\n border-left: 0.063rem solid #d3d3d3;\\n }\\n\\n .table tr:first-child td {\\n border-top: 0rem solid #d3d3d3;\\n }\\n\\n tr > td:first-child {\\n text-align: left;\\n padding: 0 2rem;\\n }\\n\\n tr > th:first-child {\\n text-align: left;\\n padding: 0 2rem;\\n }\\n\\n tr > td:last-of-type {\\n border-right: 0.063rem solid #d3d3d3;\\n }\\n\\n tr > th:last-of-type {\\n border-right: 0.063rem solid #d3d3d3;\\n border-left: solid #d3d3d3 1px;\\n }\\n\\n .type {\\n height: 3rem;\\n max-width: 26rem;\\n min-width: 17rem;\\n border-radius: 0rem;\\n white-space: nowrap;\\n }\\n\\n .count {\\n text-align: right;\\n height: 3rem;\\n min-width: 6.5rem;\\n }\\n\\n .count:not(:first-child) {\\n border-left: solid #d3d3d3 1px;\\n }\\n\\n .icon-header {\\n max-width: 5rem;\\n white-space: nowrap;\\n overflow: hidden;\\n text-overflow: ellipsis;\\n }\\n\\n .icon-cell {\\n max-width: 5rem;\\n min-height: 3rem;\\n\\n .icon {\\n margin: auto;\\n }\\n }\\n}\\n\\n::ng-deep .mat-mdc-tab-header {\\n margin-left: -1px !important;\\n}\\n\\n::ng-deep .biomarker-table-hover.full-column-name {\\n display: flex;\\n padding: 1rem 1.5rem;\\n border-radius: 0.5rem;\\n box-shadow: 0.063rem 0.125rem 1rem 0.125rem rgba(0, 0, 0, 0.16);\\n background-color: vars.$primary-contrast-rgb;\\n overflow: auto;\\n max-width: fit-content;\\n}\\n","styleUrl":"./biomarker-table.component.scss"}],"stylesData":"","implements":["OnChanges"],"accessors":{"columnsWithTypeAndCount":{"name":"columnsWithTypeAndCount","getSignature":{"name":"columnsWithTypeAndCount","type":"[]","returnType":"string[]","line":88,"rawdescription":"\\nGetter method to provide the definations of the columns","description":"

Getter method to provide the definations of the columns

\\n"}}},"templateData":"\\n \\n\\n \\n \\n\\n \\n \\n\\n \\n \\n\\n \\n \\n\\n \\n \\n\\n \\n \\n\\n \\n \\n
\\n Cell type table by Biomarker\\n
Cell Type\\n {{ element[0] }}\\n Cell Count\\n {{ element[1] !== undefined ? (element[1] | number) : \'no data\' }}\\n \\n {{ column }}\\n \\n \\n \\n\\n \\n
\\n \\n
\\n\\n\\n
\\n {{ columnName }}\\n
\\n\\n\\n\\n \\n\\n"}],"modules":[],"miscellaneous":{"variables":[],"functions":[],"typealiases":[{"name":"DataRow","ctype":"miscellaneous","subtype":"typealias","rawtype":"[string, , ...[]]","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","description":"

Describes the composition of a single row in the table

\\n","kind":183},{"name":"RGBTriplet","ctype":"miscellaneous","subtype":"typealias","rawtype":"[number, number, number]","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","description":"

RGBTriblet of type RGB to store color

\\n","kind":183}],"enumerations":[],"groupedVariables":{},"groupedFunctions":{},"groupedEnumerations":{},"groupedTypeAliases":{"src/lib/biomarker-table/biomarker-table.component.ts":[{"name":"DataRow","ctype":"miscellaneous","subtype":"typealias","rawtype":"[string, , ...[]]","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","description":"

Describes the composition of a single row in the table

\\n","kind":183},{"name":"RGBTriplet","ctype":"miscellaneous","subtype":"typealias","rawtype":"[number, number, number]","file":"src/lib/biomarker-table/biomarker-table.component.ts","deprecated":false,"deprecationMessage":"","description":"

RGBTriblet of type RGB to store color

\\n","kind":183}]}}}')}},__webpack_require__=>{var __webpack_exec__=moduleId=>__webpack_require__(__webpack_require__.s=moduleId);__webpack_require__.O(0,[650],(()=>(__webpack_exec__("./storybook-config-entry.js"),__webpack_exec__("./.storybook/styles.scss?ngGlobalStyle"))));__webpack_require__.O()}]); \ No newline at end of file diff --git a/storybook/components-organisms/project.json b/storybook/components-organisms/project.json index 783da2f55..fb595dd45 100644 --- a/storybook/components-organisms/project.json +++ b/storybook/components-organisms/project.json @@ -1 +1 @@ -{"generatedAt":1694197558717,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"nx","packageName":"@nrwl/storybook","version":"15.9.2"},"monorepo":"Nx","packageManager":{"type":"npm","version":"8.19.4"},"framework":{"name":"@storybook/angular","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/angular","storybookVersion":"7.0.2","storybookVersionSpecifier":"^7.0.2","language":"typescript","storybookPackages":{"@nrwl/storybook":{"version":"15.9.2"},"@storybook/angular":{"version":"7.0.2"},"@storybook/core-common":{"version":"7.0.2"},"@storybook/core-server":{"version":"7.0.2"},"@storybook/test-runner":{"version":"0.10.0"},"eslint-plugin-storybook":{"version":"0.6.11"}},"addons":{"@storybook/addon-essentials":{"version":"7.0.2"}}} +{"generatedAt":1694200565787,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"nx","packageName":"@nrwl/storybook","version":"15.9.2"},"monorepo":"Nx","packageManager":{"type":"npm","version":"8.19.4"},"framework":{"name":"@storybook/angular","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/angular","storybookVersion":"7.0.2","storybookVersionSpecifier":"^7.0.2","language":"typescript","storybookPackages":{"@nrwl/storybook":{"version":"15.9.2"},"@storybook/angular":{"version":"7.0.2"},"@storybook/core-common":{"version":"7.0.2"},"@storybook/core-server":{"version":"7.0.2"},"@storybook/test-runner":{"version":"0.10.0"},"eslint-plugin-storybook":{"version":"0.6.11"}},"addons":{"@storybook/addon-essentials":{"version":"7.0.2"}}}