What's the right way to manage a third party dependency in an ember addon?

I'm working on an emberjs application that uses several other custom ember addons, in one of which we're adding a new dependency on mathjs (https://mathjs.org/) to do some expression parsing. It isn't clear though what the correct way to keep the configuration of that dependency on mathjs within only the addon that uses it is. Is there a "right" way to do this in ember?

What we ended up doing was just installing the mathjs package into our main app's node_modules, then exposing the library in the browser by doing an app.import('node_modules/mathjs/dist/math.min.js') in our ember-cli-build.js file. This is obviously non-ideal because it means that any app using the custom addon must also do this extra setup to expose this dependency of the addon.

FWIW, we initially tried to just install the mathjs dependency into the addon's node_modules, then we imported it in the component of the addon where it's used. But then the browser said that the mathjs module couldn't be imported from the addon.

Ember.js Change scrollbar position to match current item

So, I have a container that overflows in my component. Each item in the container references a clip to be played above. The component automatically moves through each item, playing them sequentially. However when it moves to the overflowed items, it just continues with the scroll bar staying at the default farmost left position. Is there a clean way to move the scroll bar over when a non-visible item is selected?

<div class="scroller" >
    
         <div role="button" class="thumbnail" >
             <img src= />
         </div>
     
</div>

For context a separate component is used and passed the current item to display it above this horizontal scroll bar. I want to be able to check if the current item is not visible, and if so then get its position in the scroll bar and move the scroll position to the item's position.

Errors importing d3?

I am new to d3 and am trying to create a line graph. I can't seem to properly import it, however, I get this error. I am using EmberJS, but I don't know if that is relevant.

Could not find module `d3` imported from 'filepath'.

This is my file:

import Component from '@ember/component';
import { computed } from '@ember/object';
import * as d3 from 'd3';

d3.json('URL');

export default class ComponentName extends Component {
}

I have done npm install and npm ci numerous times, and these relevant modules are in my package.json

    "devDependencies": {
        "@types/d3": "^5.16.3",
        "d3": "^6.2.0",
    }

Other modules I have installed that didn't seem too relevant:

    "devDependencies": {
        "@ember/optional-features": "^2.0.0",
        "@glimmer/component": "^1.0.1",
        "@glimmer/tracking": "^1.0.1",
        "@types/ember": "^3.16.1",
        "@types/ember-qunit": "^3.4.12",
        "@types/ember-resolver": "^5.0.10",
        "@types/ember-test-helpers": "^1.0.4",
        "@types/ember-testing-helpers": "0.0.3",
        "@types/ember__array": "3.0.4",
        "@types/ember__test-helpers": "^1.7.3",
        "@types/qunit": "^2.9.5",
        "@types/rsvp": "^4.0.2",
        "@types/sinon": "^7.0.0",
        "@typescript-eslint/eslint-plugin": "^1.11.0",
        "@typescript-eslint/parser": "^1.11.0",
        "babel-eslint": "^10.1.0",
        "broccoli-asset-rev": "^3.0.0",
        "ember-ajax": "^3.1.0",
        "ember-auto-import": "^1.6.0",
        "ember-cli": "~3.21.2",
        "ember-cli-dependency-checker": "^3.2.0",
        "ember-cli-htmlbars-inline-precompile": "^1.0.3",
        "ember-cli-inject-live-reload": "^2.0.2",
        "ember-cli-sri": "^2.1.1",
        "ember-cli-template-lint": "^1.0.0-beta.1",
        "ember-cli-terser": "^4.0.0",
        "ember-cli-typescript-blueprints": "^3.0.0",
        "ember-cli-uglify": "^2.1.0",
        "ember-disable-prototype-extensions": "^1.1.3",
        "ember-export-application-global": "^2.0.1",
        "ember-load-initializers": "^2.1.1",
        "ember-maybe-import-regenerator": "^0.1.6",
        "ember-qunit": "^4.6.0",
        "ember-resolver": "^8.0.2",
        "ember-sinon": "^4.0.0",
        "ember-sinon-qunit": "^3.4.0",
        "ember-source": "~3.21.1",
        "ember-source-channel-url": "^3.0.0",
        "ember-template-lint": "^2.11.0",
        "ember-try": "^1.4.0",
        "eslint": "^5.16.0",
        "eslint-config-prettier": "^5.0.0",
        "eslint-plugin-ember": "^8.13.0",
        "eslint-plugin-node": "^11.1.0",
        "eslint-plugin-prettier": "^3.1.0",
        "eslint-plugin-security": "^1.4.0",
        "loader.js": "^4.7.0",
        "npm-run-all": "^4.1.5",
        "prettier": "^1.18.2",
        "qunit-dom": "^1.4.0",
        "semantic-release": "^15.13.16",
        "sinon": "^7.2.2",
        "typescript": "^4.0.3"
}

How to load nested data from a service in Ember?

So my situation is as follows: I got a component with a couple of input fields that represent a contact and are filled with data from a service: @service('contact-data') contact;. Each field stands for one property that is accessed via contact.properties.

I have the properties saved as a jsObject to easily filter out empty fields when using them and I tracked it with @ tracked like so: @tracked properties = {id: 0, foo: "", bar : "abc" ,more goes here}

However, the properties do not re-render properly in the component and the textfields do not get updated.

I'd appreciate any help with this! Thanks!

Ember handlebar helper programmatic record property access?

In one case a template will have

in another it will have

Is there a way to make it such that the end part of the record attribute is accessed programmatically? i.e.

or

Is such a thing possible?

Ember Uncaught (in promise) ReferenceError: finalDescription is not defined

I get this error upon sending a request with my async function. I also tried passing in finalDescription into the async function, but no luck.

My application.js

 @tracked finalDescription;

  @action getDescription(description){
    this.finalDescription = description;

  }


@action async sendRequest() {
    const cron_minutes = finalSchedule[tag].toString();
    if (finalDescription[colour].length) {
      mystring = mystring + "/" + finalDescription[colour].toString();
    }

    ...

and description looks like this

description = {
    colour: [1,2],
    tag: [32,34,36],
    era: ["modern"],
}

Storybook - Ember.js - Getting stuck on loading state

I've installed storybook/ember on an existing Ember project, but unfortunatelly it stuck on loading screen with no error - doesn't display the welcome page and shows the spinner instead.

.storybook/main.js

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ]
}

I haven't touched anything in the stories or .storybook (everythins is the default).

package.json

{
  "name": "web-ui",
  "version": "0.0.0",
  "description": "Small description for web-ui goes here",
  "repository": "",
  "license": "MIT",
  "author": "",
  "directories": {
    "doc": "doc",
    "test": "tests"
  },
  "private": true,
  "scripts": {
    "build": "ember build",
    "lint:hbs": "ember-template-lint .",
    "lint:js": "eslint .",
    "start": "ember serve",
    "test": "ember test -r xunit",
    "coverage": "COVERAGE=true ./node_modules/.bin/ember test --silent",
    "storybook": "start-storybook -p 6006 -s dist",
    "build-storybook": "build-storybook -s dist"
  },
  "engines": {
    "node": ">= 10.*"
  },
  "devDependencies": {
    "@babel/core": "7.11.6",
    "@ember/jquery": "1.1.0",
    "@ember/optional-features": "2.0.0",
    "@glimmer/component": "1.0.1",
    "@storybook/addon-actions": "^6.0.22",
    "@storybook/addon-essentials": "^6.0.22",
    "@storybook/addon-links": "^6.0.22",
    "@storybook/ember": "^6.0.22",
    "acorn": "^8.0.1",
    "babel-eslint": "10.1.0",
    "babel-loader": "^8.1.0",
    "babel-plugin-ember-modules-api-polyfill": "^3.1.1",
    "babel-plugin-htmlbars-inline-precompile": "^4.2.0",
    "bootstrap": "3.4.1",
    "broccoli-asset-rev": "3.0.0",
    "broccoli-funnel": "3.0.3",
    "broccoli-merge-trees": "4.2.0",
    "browser": "0.2.6",
    "d3": "6.1.1",
    "ember-ajax": "5.0.0",
    "ember-auto-import": "1.6.0",
    "ember-can": "3.0.0",
    "ember-cli": "3.16.0",
    "ember-cli-app-version": "3.2.0",
    "ember-cli-babel": "7.22.1",
    "ember-cli-code-coverage": "1.0.0",
    "ember-cli-content-security-policy": "1.1.1",
    "ember-cli-dependency-checker": "3.2.0",
    "ember-cli-document-title-northm": "1.0.3",
    "ember-cli-htmlbars": "5.3.1",
    "ember-cli-inject-live-reload": "2.0.2",
    "ember-cli-json-module": "1.0.0",
    "ember-cli-jstree": "1.0.12",
    "ember-cli-less": "3.0.1",
    "ember-cli-mirage": "1.1.8",
    "ember-cli-nouislider": "1.2.1",
    "ember-cli-pagination": "3.1.5",
    "ember-cli-sri": "2.1.1",
    "ember-cli-template-lint": "1.0.0-beta.3",
    "ember-cli-test-loader": "3.0.0",
    "ember-cli-uglify": "3.0.0",
    "ember-data": "3.16.0",
    "ember-diff-attrs": "0.2.2",
    "ember-disable-proxy-controllers": "1.0.2",
    "ember-export-application-global": "2.0.1",
    "ember-flatpickr": "2.16.2",
    "ember-infinity": "2.1.2",
    "ember-inflector": "3.0.1",
    "ember-inline-svg": "1.0.0",
    "ember-intl": "5.4.2",
    "ember-load-initializers": "2.1.1",
    "ember-math-helpers": "2.15.0",
    "ember-maybe-import-regenerator": "0.1.6",
    "ember-power-select": "3.0.4",
    "ember-qunit": "4.6.0",
    "ember-radio-button": "2.0.1",
    "ember-resolver": "7.0.0",
    "ember-simple-auth": "2.1.1",
    "ember-source": "3.16.0",
    "ember-storage": "2.0.0",
    "ember-table": "2.2.3",
    "ember-template-lint": "1.13.2",
    "ember-tooltips": "3.4.5",
    "ember-truth-helpers": "2.1.0",
    "ember-vega": "1.1.5",
    "emberx-select": "3.1.1",
    "eslint": "5.16.0",
    "eslint-plugin-ember": "7.7.2",
    "eslint-plugin-node": "11.1.0",
    "jquery-mockjax": "2.6.0",
    "jshint": "2.12.0",
    "json-merger": "1.1.2",
    "loader.js": "4.7.0",
    "material-design-icons-iconfont": "4.0.5",
    "minimatch": "3.0.4",
    "node-gyp": "6.0.0",
    "qunit-dom": "1.5.0",
    "react-is": "^16.13.1",
    "request": "2.88.2",
    "rsvp": "4.8.5",
    "valid-url": "1.0.9",
    "vega-lib": "4.4.0",
    "yaml-lint": "1.2.4"
  },
  "dependencies": {
    "@ember/test-helpers": "^1.7.2",
    "@storybook/core": "^6.0.22",
    "core-js": "^3.6.5",
    "faker": "^4.1.0",
    "global": "^4.4.0",
    "regenerator-runtime": "^0.13.7",
    "semver": "^6.3.0",
    "ts-dedent": "^2.0.0"
  }
}

Any help/suggestions are appreciated.