Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Possible 3.15/Octane regression with ember-table addon #18613

Closed
bantic opened this issue Dec 13, 2019 · 19 comments
Closed

Possible 3.15/Octane regression with ember-table addon #18613

bantic opened this issue Dec 13, 2019 · 19 comments

Comments

@bantic
Copy link
Member

bantic commented Dec 13, 2019

We noticed that the release of Ember 3.15 broke the test suite for the Ember Table addon.

The errors we are seeing look like this:

Error: Assertion Failed: You attempted to update `rows` on `<(unknown):ember4815>`,
but it had already been used previously in the same computation.
Attempting to update a value after using it in a computation can
cause logical errors, infinite revalidation bugs, and performance
issues, and is not supported.
            
            `rows` was first used:
            
            - While rendering:
              ----------------
                application
                  index
                    ember-table
                      ember-tfoot
                        this.data-test-row-count

We have an issue open at the ember-table repo: Addepar/ember-table#795
And this is a link directly to the breaking build at Travis: https://travis-ci.org/Addepar/ember-table/jobs/623723306

It may be that we are doing something unusual/unsavory in our code to trigger this, but I thought it might be worth raising attention in case it belies a deeper issue worth looking into, since this was only a minor release and our test suite was green with the previous minor release.

Thanks in advance if anyone has any suggestions about where to go hunting for a fix.

@pzuraq
Copy link
Contributor

pzuraq commented Dec 13, 2019

We did expect the new assertion to possibly throw in a few existing cases, mostly ones introduced since 3.13 but there could definitely be others. Fundamentally, the assertion is a stronger version of the backtracking rerender assertion, and is triggered because rows was already used before it was updated.

Is rows being updated by test code, or code within Ember Table?

@mixonic
Copy link
Member

mixonic commented Dec 21, 2019

@pzuraq I'm taking a look. It seems like the stack is fired from https://github.com/Addepar/ember-table/blob/040df201be07fe753ad36a931ce845423d78379a/tests/integration/components/tree-test.js#L20. That line causes a rerender. The original value for rows was at https://github.com/Addepar/ember-table/blob/040df201be07fe753ad36a931ce845423d78379a/tests/helpers/generate-table.js#L154 <- red herring

I don't understand the assertion message (which is probably concerning since I, of all people, should probably be able to understand it). Of course the property is changing after initial render, we are changing it so the rerender will happen.

(update) Ok, I think the phrase "computation" in the assertion is vague or misleading. I think it should say "render"? ...but maybe computation here is apt, I'm not sure, the ember-table code is pretty wild with CP use.

I believe I narrowed it down to:

I guess we will try to refactor to avoid it and see if the result is better code. I'll reserve judgement on if I think it is a regression or bugfix until after that :-p

@llunn
Copy link

llunn commented Dec 28, 2019

I ran into this also and the error message was indeed difficult to parse.

I was creating a new record in a glimmer component like so, where the route's model hook was also doing a findAll for the same model type.

export default class FormReturnItemComponent extends Component {
  @service store;
  @service moment;

  @tracked model= this.store.createRecord('return');
  // stuff
}

The odd part is that this only occurs when there is initially no results from the model hook (i.e. 0 records returned because none exist). As soon as a record does exist the problem doesn't manifest.

It is still unclear where exactly this assertion is stemming from (the component or the route). In my case, the route is not passing data to the component; the only link between the two is the routes model data and the new record of the same type being created in the component.

@mixonic I discovered two ways to resolve it:

  1. Remove @tracked from the model attribute in the component (ramifications of this??)
  2. Set the attribute initialization on the next runloop cycle.

Solution 2 looks something like this....

import { next } from '@ember/runloop';
export default class FormReturnItemComponent extends Component {
  @service store;
  @service moment;

  @tracked model;

  constructor(owner, args) {
    super(owner, args);
    next(this, () => { this.model = this.store.createRecord('return');});
  }
  //stuff
}

I don't have enough experience with Octane to advocate for one over the other; perhaps someone else can chime in and provide guidance.

@MichalBryxi
Copy link

MichalBryxi commented Dec 28, 2019

@llunn be careful with things like:

...
next(this, () => { this.model = this.store.createRecord('return');});
...

It will work for the user, most of the times. Except when it does not. Maybe some flickering will occur, or things being null when you don't expect them to be.

Most importantly it will very likely come back and bite you in the tests.

We were hunting dozens of those errors when tests randomly fail and people just added yet another run.later or run.next and it worked for a while, and then started failing again.

@MichalBryxi
Copy link

I was creating a new record in a glimmer component like so, where the route's model hook was also doing a findAll for the same model type.
...
In my case, the route is not passing data to the component; the only link between the two is the routes model data and the new record of the same type being created in the component.

route is not passing data to the component - I don't have a clear picture of the code you have, but right the next part of the sentence seems to contradict this: the only link between the two is the routes model data - What do you mean by this?

I imagine the component is being called as:

<FormReturnItemComponent @model={{@model}} />

If this is the case, then there is a communication between route and component. And since you are mutating data on both in one render loop, you are getting this error.

If you could create a repo with minimal reproducible code, I might be able to tell you how to make it work. cc: @llunn

@pzuraq
Copy link
Contributor

pzuraq commented Dec 28, 2019

@llunn can you post the full stack trace of the error message that you are triggering? There should be two stack traces included

  1. The stack trace in the code where some value was first used
  2. The stack trace in the code where the same value was updated, during a single render

This is what the assertion is preventing, and if you provide the full stack trace we may be able to figure out what's causing it. Without it, it's hard to tell what is going on.

@llunn
Copy link

llunn commented Dec 29, 2019

It will work for the user, most of the times. Except when it does not. Maybe some flickering will occur, or things being null when you don't expect them to be.

Most importantly it will very likely come back and bite you in the tests.

@MichalBryxi Indeed, thanks; I personally find it very hard to write test code for components.

I believe I was unclear in my previous post, and likely partly due to bad variable names. In my component I have a variable named model, which is a different variable than @model=something passed as a component argument. For example, in the snippet below, the two model attributes are not the same; one is referring to this.model and one is referring to this.args.model. I'm sure you are aware of this, but may have led to confusion based on my bad variable name.

export default class SomeComponent extends Component {
  model = 'local scope';
}
<SomeComponent @model='parent scope'/>

For my component it is simply <FormReturnItemComponent/>, and the sharing aspect was referring to the route querying for a model of type X and the form creating a model of type X, but are otherwise completely independent with respect to data.

@pzuraq What is worse is that I'm now unable to reproduce the problem (after 90 minutes of trying) and thus can't provide a trace. To be honest, my project is new and I have a lot of moving parts at the moment, so who knows where the source was, which is both scary and relieving at the same time! The basic scenario was something like this:

  1. On a route, perform a query to the store for a particular model type in the model hook;
  2. In a component, create a record in the constructor of that same model type;
  3. On the routes template, output the query results;
  4. On the component template, bind the new record to form controls;
  5. Include the component in the routes template.

I initially thought there might be a race condition going on, where one or more of the following was happening:

  1. The routes template was attempting to render a newly created record (from the component) after it has already rendered the record array from the routes model hook (in the same run loop cycle); or
  2. The component created the record, which caused ember data to attempt to update the routes model before it was ready (not sure if this is even possible);

If and when I come across this again I will isolate it right away, which may be a good example of how not to do things. ha!

Sorry I couldn't have been more help.

@MichalBryxi
Copy link

@llunn maybe this comment in other thread might be of an assistance: Addepar/ember-table#795 (comment)

mixonic added a commit to mixonic/ember-table that referenced this issue Jan 8, 2020
Ember internals use an observer for attribute bindings. In this case the
observer timing causes a computation based on a value which is then
updated by a side-effect-having CP.

Here avoid the observer interaction by instead setting the count itself
as part of the computation side effects.

See:

* Addepar#795
* emberjs/ember.js#18613

Fixes Addepar#795
@nehalbhanushali
Copy link

nehalbhanushali commented Jan 27, 2020

I have had the same issue where ember-source update from 3.14.1 to 3.15.0 causes tests to fail with error on a custom-input component and not ember-table.
This error seems to be associated with the use of classNameBindings in the component.

Attempting to update a value after using it in a computation can cause logical errors, 
infinite revalidation bugs, and performance issues, and is not supported.

`date` was first used:

- While rendering:
  ----------------
    application
      index
       input-wrapper
          this.hasError

@nehalbhanushali
Copy link

nehalbhanushali commented Jan 28, 2020

ember-source 3.16.0 has the fix for this.
#18668

@rwjblue
Copy link
Member

rwjblue commented Jan 30, 2020

Thanks for confirming @nehalbhanushali!

@aarzootrehan
Copy link

aarzootrehan commented Jun 30, 2020

I am facing a similar error. Not using ember table. The error says :

Uncaught Error: Assertion Failed: You attempted to update [] on <abc@model:someModel::ember509:null>, but it had already been used previously in the same computation. Attempting to update a value after using it in a computation can cause logical errors, infinite revalidation bugs, and performance issues, and is not supported.

[] was first used:

  • While rendering:

    application
    stack trace goes here ....
    this.abc
  • While rendering:

    application
    stack trace goes here .....
    this.abc
    In my case, this.abc is an ember array initialized in a component with a tracked property.
import { A } from '@ember/array';
@tracked abc = A([])

While the computation happens, this.abc changes it values, intiially from an empty array : [] ,
then while doing
this.abc.pushObject(someObject_here), on this particular line, my code breaks.

Wrapping this.abc.pushObject(someObject_here), in next() works but my code is dependent on this.abc array and so if this push happens in next() , the object consuming this.abc does not works fine.
In other words, next() doesnot solves my problem. Can't use it.

All of this happened when I upgraded my ember-source to 3.16.6. :(

Any other alternative?

Copy link
Contributor

pzuraq commented Jul 1, 2020

@aarzootrehan this error means that you are using the array during the render process in some way before you attempt to update it. This could result in, for instance, Ember rendering your array before it was updated, and not updating properly, which is why it is not allowed in general.

The recommendation is to avoid doing this, since it requires you to rerender multiple times. It may mean you have to refactor some code to get things to work in a way where your array is mutated before it is used, but this is generally easier to predict code-wise.

If you think that rerendering is acceptable for this use case, then you can opt-in to a second render pass by scheduling into actions:

schedule('actions', () => this.abc.pushObject());

This is generally not recommended, I really do encourage you to try to refactor your code to avoid this, but you can use it as an escape hatch.

@iamareebjamal
Copy link

  get events() {
    return this.args.sessions.map(session => {
      const speakerNames = session.speakers.toArray().map(speaker => speaker.name).join(', ');
      return {
        title      : `${session.title} | ${speakerNames}`,
        start      : session.startsAt.tz(this.timezone).format(),
        end        : session.endsAt.tz(this.timezone).format(),
        resourceId : session.microlocation.get('id'),
        color      : session.track.get('color'),
        serverId   : session.get('id') // id of the session on BE
      };
    });
  }

This code throws "You attempted to update currentState on <open-event-frontend@model:speaker::ember602:4447>, but it had already been used previously in the same computation. Attempting to update a value after using it in a computation can cause logical errors, infinite revalidation bugs, and performance issues, and is not supported.
"

As you can already see that there is no mutation here, ember data may have made some changes internally but I have no control over it. How to avoid it as it is a purely read only code?

tempo22 added a commit to overloop-crm/ember-table that referenced this issue Apr 1, 2021
* Revert "[bugfix] Recompute row meta index when previous prepend causes shift (Addepar#623)" (Addepar#651)

This reverts commit 5efba8c.

* Fix build (Addepar#661)

* Update addepar-style-toolbox to fix import issue

* [CHORE] allow ember-release to fail tests

This is temporary until we have time to investigate what is going on.

* Upgrade several project dependencies (Addepar#658)

* Upgrade linting packages

* Upgrade ember-math-helpers

* Upgrade ember-native-dom-helpers

* Upgrade ember-angle-bracket-invocation-polyfill

* Upgrade ember-fetch

* Upgrade ember-cli-dependency-checker

* Upgrade ember-try

* Upgrade ember-auto-import

* Upgrade default addon dependencies

* Upgrade ember-cli-sass

* Upgrade ember-compatibility-helpers

* Upgrade @html-next/vertical-collection

* Upgrade husky

* Revert "Upgrade ember-cli-sass"

This reverts commit ad3fc22.

* Add .yarnrc and .npmrc

This will allow to add the yarn.lock file and to rely on the public Addepar packages available for all.

* Add yarn.lock

* [FEATURE] Add support for context menu on header cells (Addepar#662)

```
{{ember-th api=r onContextMenu='actionHandler'}}
```

* don't try to notify the cell value of a change if the context is being destroyed

* [CHORE] Node 6 support - pin jsdom

* Pin ember-cli-page-object

Fix build issue on Travis
https://travis-ci.org/Addepar/ember-table/jobs/513359138

Related to san650/ember-cli-page-object#446

* [FEATURE] Use `sortEmptyLast` on the header to have empty values at the end of a sort result.

```
<EmberThead @sortEmptyLast=true />
```

* ember-th renders only the block when one is passed.

Add ember-th/sort-indicator and ember-th/resize-handle

It allows to fully customize the content of `ember-th` without the need to duplicate the logic for sorting and resizing

```
{{#ember-th |columnValue columnMeta|}}
  {{columnValue.name}}

  {{ember-th/sort-indicator columnMeta=columnMeta}}

  {{ember-th/resize-handle columnMeta=columnMeta}}
{{/ember-th}}
```

* [BUGFIX] Empty values are sorted properly

* [CHORE] Update to node 8

* [CHORE] Unpin jsdom after dropping support for Node 6

* [BUGFIX] Ensure dynamicAlias works on latest Ember (Addepar#679)

* [BUGFIX] Ensure dynamicAlias works on latest Ember

There were some subtle changes on the latest Ember that made aliases
and properties that include . in their name to stop working. Instead
of creating dynamic aliases, we now just access the properties directly
on _context, which should fix the issue.

* fix release tests

* Start converting to classic classes (Addepar#677)

* Start converting to classic classes

* Finish up conversion and convert TBody

* Convert row-wrapper and simple-checkbox to classic classes (Addepar#681)

There is one issue, where we are setting properties in a computed, which did not seem to be flagged be ESLint before, but is flagged when we use a class computed. I added `// eslint-disable-next-line ember/no-side-effects, ember-best-practices/no-side-effect-cp` to get around the issue for now.

@pzuraq do we need to do something else to fix this or is disabling ESLint there okay?

* thead, th, and tr to classic components (Addepar#680)

* thead, th, and tr to classic components

* Fix some tests

* Add missing attributeBindings

* Use defaultTo for sortFunction and compareFunction

* fix defaultTo

* Convert collapse-tree, column-tree, and ember-td to classic (Addepar#682)

* Convert collapse-tree and ember-td to classic

* Convert column-tree to classic

* Move ember-decorators to devDeps (Addepar#685)

* Move ember-decorators to devDeps

* Store functions before calling removeObserver on them

* [BUG] Setting the column width to its current value works

It used to return `undefined` which would lead the `delta` to be `NaN`,
causing an infinite loop when resizing a leaf column.

* [BUG] Fix memory leaks related to vertical-collection

* Change pinned dependency specifier for vertical-collection

Change from `user/repo#sha` to `https://github.com/user/repo.git#sha` form.
Yarn has a bug related to installing changed SHA versions when they are pinned in `user/repo` form,
that could cause consumers of this addon (or developers of this addon) to fail to get updated
dependency code via `yarn install`, see: yarnpkg/yarn#4722 (comment)

* Ensure that table column widths are recomputed when columns change

This fixes an issue where removing a column can leave a blank space in the
table because it doesn't recompute column widths. The table's `ResizeSensor`
is primarily responsible for noticing resizes and updating widths, but when a
column is removed, although the inner `table` element width changes, the
container `.ember-table` element does not change its width, and thus the
`ResizeSensor` never notices, and the column widths are not recomputed.

This modifies the `ember-thead` observer to have it call `fillupHandler` when
column count changes.

It also changes the observer in `ember-thead` to watch `columns.[]` instead
of just `columns`, because in the latter case, the `fillupHandler` will not
be called if a column was removed via mutation (e.g. `popObject`).

Adds tests for removal via both ways (mutation and `this.set('columns',
newColumns)`). Also adds tests that adding columns also causes column widths
to be computed.

Co-authored-by: Jonathan Jackson

* Skip _onColumnsChange when there are no remaining columns

* Convert ember-thead test to a form that works with older Ember

This should make it so that the tests pass on Ember 1.12 and 1.13.

Use a special `requestAnimationFrame` waiter that waits 2 RAF turns to
ensure that the table's columns are done being laid out when the test
starts measuring their dimensions.

* Fix arguments for test helper functions

* Use back-compatible template for ember 1.12 and 1.13

* Add Ember-1.12 compatibility for `this.set` and `this.get` in test

* Add comment about the `rafFinished` helper

* [CHORE] ember-beta is supported

It was deactivated with Addepar#661

* [PERF] Set default bufferSize to 1

By default, ember-table allocates a buffer of 20 rows
before and after the visible ones.

This default value forces a lot of computation in the case of tables with many columns and complex cells,
from syncinc more data (from rows to cells for example) and triggering more observers
(based on the number of computed properties defines per cell for example).
VC also does not allocate the part of the buffer that should be above the visible first row,
as there is none when loading the table. This means that the initial scroll will also
lead to the creation of 20 rows in the DOM (and the underlying computation to render the content).

From a pure UI/UX point of view, we don't need more than 1 row on each side of the table,
and it's already the default for `vertical-collection`.

* [TEST] Add rowCount to page object for thead, tbody and tfoot

In some tests, it is interesting to see if a row is properly inserted or removed.
Because `vertical-collection` tries to not render all the rows, we can't simply
count the number of `tr`. Instead we use the `data-test-row-count` attribute
to keep track of the number of available rows in a table.

* ember-decorators/argument is needed to generate the documentation

Custom cell and header pages rely on it

* Enable strict BEM class name format

* [FEATURE] Text alignment can be defined per column

The `textAlign` property on a column definition accepts `left`, `center` and `right`.
When the property is set, a class is added to the cell (`ember-table__text-align-left`,
`ember-table__text-align-center`, `ember-table__text-align-right`).

* CHORE: Change jsconfig settings so that tests are included

Both "include" and "exclude" are unnecessary together, so modify
"exclude" to exclude all relevant directories.

This makes it so that VSCode won't complain about decorator usage
in dummy/* JS files, among other things.

* DOCS: Fix rendering of addon docs pages

 * Upgrade ember-cli-addon-docs and related devDeps
 * Remove @ember-decorators/argument devDep

Convert custom-cell and custom-header docs components to classic.
Fixes issue where the table-customization addon docs page would throw
errors at runtime related to the `@argument` decorator.

 * Restructure docs index and application templates

Add a `nav.item` for 'docs.index', otherwise ember-cli-addon-docs
hits an assertion and throws an error in local development when it tries
and fails to associate the currentURL ('/docs') with a known docs route.

Remove some private-api `style=` component props and errant spacer `li`s in
the nav. In newer ember-cli-addon-docs its styles are namespaced (under
`docs-X` classes), and the styling of the nav no longer looked correct.

 * Upgrade angle-bracket polyfill

Upgrade the polyfill to allow using `<EmberTh::SortIndicator>`
nested angle-bracket invocation style on the table-customization docs page.
Prior to this upgrade, the page would throw errors when visited.

* DOCS: Avoid passing incorrect/unneeded args to faker.* methods

faker.company.companyName for its first arg expects either a format string
or an integer in the range [0,2]:
https://github.com/Marak/faker.js/blob/3a4bb358614c1e1f5d73f4df45c13a1a7aa013d7/lib/company.js#L26-L39

Passing a value greater than 2 results in a returned value of `string
parameter is required!` instead of a faked name. This wasn't obvious because
the number of generated rows is dynamic (via `getRandomInt`), so it only
shows up if the # of generated rows is enough to trigger the error, and then
you have to scroll to the bottom of the table to notice it.

Also remove the argument passed to `department` because it doesn't accept an argument:
https://github.com/Marak/faker.js/blob/3a4bb358614c1e1f5d73f4df45c13a1a7aa013d7/lib/commerce.js#L22-L24

Ditto for `productName`:
https://github.com/Marak/faker.js/blob/3a4bb358614c1e1f5d73f4df45c13a1a7aa013d7/lib/commerce.js#L31-L35

* DOCS: Improve table-customization docs pages

  * Move `getRandomInt` helper to utils/generators
  * Use more explanatory data for table-customization sorting

Previously, the data displayed in the table didn't have any difference,
row-to-row, so it wasn't obvious that clicking the column headers actually
did change the sorting.

This copies over the sortable columns/rows data from the sorting docs example.

  * Interactive sort/resize indicators on customization page

On the table customization page, add checkboxes to turn on/off the
sort/resize indicators in the header columns, so that docs readers
can better understand how they are used.

  * table-customization: More obvious cell/column customizations

Use a SCSS loop to define the `.text-<color>` and `.bg-<color>` style
rules.

Remove the "text-" prefix from the color names used in code, move this
into the template.

Make custom cells use a `text-<color>` class.
Make custom header cells use a `bg-<color>` class, for variety.

Separate some of the reused controller properties so that it's clearer
which property is used for which example.

* DOCS: Add basic acceptance test for docs/ routes

* DOCS: Test that subcolumns docs render cells

Fix rendering of generated dummy rows. Cells with valuePaths longer than
a single character were being skipped over in the dummy row's `unknownProperty`
hook.
Fix by removing the length check in `unknownProperty` and explicitly adding
the needed properties to the class definition so that the only accesses
that hit `unknownProperty` should be `valuePath`s for rendering.

* [DOCS] Fix autogenerated API docs for components

Change from using the addon-docs esdoc to yuidoc plugin.
esdoc is meant for "native classes"-style exports, and it was silently
ignoring the documentation for the components, resulting in no output.

Add some additional `@argument <argName>` annotations so that yuidoc
will properly pick up argument names.

yuidoc's syntax does allow for `@optional`, `@required` and `@default`
annotations for arguments, but when I added them these were either not being
parsed correctly or (my assumption) the addon-docs yuidoc plugin wasn't using
that extra parsed data, but either way the addition of those annotations
wasn't affecting the generated API docs so instead I've modified the `@type`
annotations to indicate optional args, with default values in parens when
appropriate.

* [DOCS] Add "Testing" section

Add `addon-test-support/index.js` to export the TablePage from a central
location.

Upgrade @addepar/eslint-config to ^4.0.2 so that the `index.js` is linted
correctly.

Add a "Testing" section to the addon docs that describes basic usage of the
TablePage.

* DOCS: Better spacing for Resize/Reorder columns demo

* DOCS: Remove unused args to docs-hero

* [DOCS] Remove unused `.red-cell` css style

The "red-cell" class usage was removed here in Addepar@cf37ef1#diff-ab03e59e6d25ee3864870f2d10de6a7fL8
but the selector wasn't removed at the same time.

* [CHORE] v2.0.0-beta.8

* [CHORE] Add 3.4, 3.8 LTS to ember-try

Fixes Addepar#719

* [CHORE] Update .travis.yml

Remove some deprecated config settings for Travis.
Update settings to more closely align with the default addon output,
see https://github.com/ember-cli/ember-addon-output/blob/master/.travis.yml

* [CHORE] More update to travis.yml

* [CHORE] Remove unused ember-cli-addon-docs configs

addon docs no longer uses configuration settings in ember-cli-build.js,
it has its own separate config file in config/addon-docs.js instead.

* Remove @function annotation from private mergeSort function

* [DOCS] Unconditionally enable faker for dummy app

* [DOCS] Show selected-row checkmark

Fixes Addepar#593

The underlying styles that we import from '@addepar/style-toolbox/onyx/index'
should be modified so that they don't hardcode an absolute URL for the background-image
checkmark svg, but in lieu of that larger-scope fix, this PR copies the checkmark.svg
asset and adds a singular style override to display it.

* [DOCS] Add 2-state sorting example

Fixes Addepar#721

Also add checkbox to configure `sortEmptyLast` on that demo.
Add test for the 2-state sorting.

Use `label` instead of `span` on all the places `demo-options` are shown.

* Bump up the size of demo data for selection

* Use objectAt to fetch rowValues (cause meta alloc)

Although the `selection` set contains raw values only, some other code
(like the summing of selected counts for group selection state in
`collapse-tree.js`) expect that all items in the `selection` set have a
meta allocated.

The non-meta-allocated rows were added where the bare `children`
property of a rowValue was being iterated. Instead with this change the
`tree` is referenced for pulling out the children, meaning the meta
cache system is exercised and metas allocated for any selected row.

* [DOCS] Fix up wording and typo in docs

* Update tests/dummy/app/pods/docs/guides/body/row-selection/template.md

Co-Authored-By: Matthew Beale <matt.beale@addepar.com>

* fix eslint

* [DOCS] Change styling for row-selection demo options

Change the styling so the interactive row-selection demo
moves the radio button labels to the right of the button, and
add back in some alignment and spacing between the labels.
The docs were using a tailwind CSS class "pr-4" but tailwind is no longer
provided via addon-docs, so those styles were not being applied.

* Test that unrendered (occluded) row selection can be managed

This is a failing test for Addepar#726.

Also fixes a typo in an unrelated test assertion message.

* v2.0.0-beta.9

* [DOCS] Add interactive row-selection demo

Change the row-selection docs example to display the current value of
`selection` to help clarify that it can be an array or single item,
and it doesn't include a group's children when that group is selected.

* Add failing test for Addepar#735

* Potential fix for Addepar#735

* v2.0.0

* [DOCS] Miscellaneous small fixes

Remove undefined `py-2` and `pr-4` CSS classes (vestiges from when tailwind
was included in the build from addon-docs).
Consolidate example options to use `demo-options` class wherever possible.
Remove unneeded `demo-option` class.

Fix the 'color' property on the columns in the custom-header example so that
the correct bg-color CSS classes are applied.

Use a separate selection property `demoSelection` for the last demo on the
'row selection' page. When the `selection` property was shared amongst all
the demos on the page, it was possible to select a row in one of the demos
that didn't exist in the later ones, and would cause an error.

Fix typos.

* [DOCS] Update readme to add link to online docs

* move addon to dependencies

Fix 741.
Required so consuming apps can import the helper.

* enable fillMode to support an nth-column option

* make all single column fill modes reuse the same resize implementation

* [DOCS] Update docs for `fillColumnIndex`

* [DOCS] Test clicking on snippets links on docs pages

* [DOCS] Fix demo snippets on Sorting, Dynamic Fixed Columns docs

* Add failing tests for Addepar#747

Adds several failing tests for Addepar#747.

* Add `setupAllRowMeta`, `mapSelectionToMeta` to CollapseTree

Add a function `setupAllRowMeta` that walks all the table's rows and
sets up a row meta for each one. This is called lazily in the case where
the table has a `selection` that includes some rows that don't yet have
rowMetas. This can happen if the selection includes rows that haven't yet
rendered. The rowMeta for a row is lazily created when it is rendered,
so rows that haven't yet rendered won't have a row meta. This usually is
not a problem because in normal user interaction with a table, the user will
only interact with rows that are rendered. However, it's possible to
programmatically set a selection, and in this case a row in the selection
may not yet have been rendered.

It's also possible for a `selection` to contain a row without a corresponding
rowMeta if that row is not part of the table's rows. This is an invalid selection,
and this commit adds an Ember.warning for times when we detect such a case.

Fixes Addepar#747

Modifies one of the 747 test cases to assert that the warning is triggered
when ET encounters a selection with a row that is not part of the table.

* Add debug-handlers polyfill to capture warning in older Ember

Add `test` condition to warn call in collapse-tree

* assert row is selected in test

* only register the warn handler 1x during testing

* Do not JSON.stringify missing row

* [TESTS] footer page object extends body page object

The footer component extends the body component. This makes the
exported Test Page object able to operate on `table.footer` the same
way it does on `table.body`.

* [DOCS] Add Changelog.md (Addepar#750)

auto-generated via `npx auto-changelog`

* [CHORE] Use release-it for releases (Addepar#751)

* Update readme and release-it config

* Release 2.1.0

* Added example of using CSS Flex with ember-table (Addepar#752)

Per discussion on #topic-tables I've added my Twiddles for both a pure CSS version and a Bootstrap version.

* [TESTS] Allow ember-beta scenario to fail at CI (Addepar#755)

Relates to Addepar#754

* Add npm version badge

* Update version badge in README

* [FEAT] Enforce maximum height (by percentage) for sticky footers and he… (Addepar#753)

When the footer or header will take up more than 50% of the height
of the table, the sticky polyfill will now position some of the
cells so that they must be scrolled to in order to be seen.
Otherwise, all of the body cells are covered by the sticky header/footer
cells.

* Release 2.1.1

* [CHORE] use vertical-collection @ ^1.0.0-beta.14 (Addepar#756)

The latest beta release. Does not include any new functionality.

The comparison between the previous pinned sha and this version:

html-next/vertical-collection@ca8cab8...v1.0.0-beta.14

* Release 2.1.2

* bugfix: allow zero for fillColumnIndex

fix: Addepar#767

* Bump deps. Pin addon-docs to avoid regression

The regression is tracked upstream:
ember-learn/ember-cli-addon-docs#402 (comment)
if a fix lands the strict version dependency on ember-cli-addon-docs can
be loosened.

* Release 2.1.3

* Update ember-classy-page-object to latest ^0.6.0 (Addepar#772)

* Update ember-classy-page-object to latest ^0.6.0

* Bump to ^0.6.1

* Release 2.1.4

* Fix release badge (Addepar#774)

Use the "npm version" badge since the "release" badge only shows github releases (not tags), and we don't always create an official github release when we tag a new version.

* Fix CI (Addepar#773)

* remove legacy ember-decorators

* use ember-qunit instead of ember-cli-qunit

* Remove ember-legacy-class-shim

docs: https://github.com/pzuraq/ember-legacy-class-shim

We no longer have ES6 classes inside this addon, so we don't need the shim

* Skip column reordering tests on ember release, beta, canary

See: Addepar#775

* Add note that async observers are needed for Ember 3.13+

* Update README to point out Ember 3.13 regressions

* Use async observer when target app is Ember 3.13+ (Addepar#777)

* Add `observer` util to opt in to async in 3.13+

* Remove code that skips column-reordering tests for 3.13+

* Use ember 3.12 in package.json

* Fix lint

* change eslint no-restricted-imports messages, pr feedback

* Rename imported ember observer functions, pr feedback

* Fix argument order for addObserver/removeObserver

* Use `settled` to fix collapse-tree tests

The use of `await settled()` seems to be required to properly wait for the
now-async observers to finish notifying of property changes to the collapse tree.

Also:
  * Fix propogate typo
  * Replace some hardcoded for loop lengths in tests with eg `expectedValue.length`

* Remove unused `_notifyCollection` property (Addepar#779)

This was introduced in Addepar#529 but never used either in that change
or since, so it seems like it can be safely removed.

* [DOCS] Add browser compatibility section (Addepar#769)

* Fix column-reordering with Ember 3.13+ (Addepar#778)

* Add parameterizedComponentModule helper, test w/ and w/out ember arrays

* Notify using the keyName rather than the full path

Fixes Addepar#776

* Run resize tests w/ and w/o emberA column/rows

* [FEAT] Add direction to reorder indicator (Addepar#766)

* [DOCS] Remove Ember 3.13 section from readme (Addepar#781)

The Ember 3.13 bugs are now all fixed, so remove this section.

Also: run the markdown formatter over the README to clean up.

* Bump ember-test-selectors (Addepar#782)

0.3.9 of Ember test selectors is very old and does not strip data-test-
when using Babel 7. Bump to 2.1.0.

See: https://github.com/simplabs/ember-test-selectors/releases

* Release v2.2.0

* [DOCS] Add new reorder-directional classes (Addepar#783)

* Use resolutions to force prettier to 1.18.2

* bugfix: first multiselection has no _lastSelectedIndex

* Release 2.2.1

* Avoid "update prop already used in computation"

Ember internals use an observer for attribute bindings. In this case the
observer timing causes a computation based on a value which is then
updated by a side-effect-having CP.

Here avoid the observer interaction by instead setting the count itself
as part of the computation side effects.

See:

* Addepar#795
* emberjs/ember.js#18613

Fixes Addepar#795

* Ignore engine incompat

Avoids the issue with Node 8 caused by
npm/node-semver@d61f828#diff-b9cfc7f2cdf78a7f4b91a753d10865a2R35

* Release 2.2.2

* Add testing for rowCount for tree tables

* Update row count when tree collapses

The row count did not update when the collapse of a tree was toggled.
Here ensure that happens with an observer in dev mode.

Fixes Addepar#804

* Release 2.2.3

* restore ember th behavior

* Quickfix: column re-ordering

Co-authored-by: Cy Klassen <cytklassen@gmail.com>
Co-authored-by: Cyril Fluck <github@fluck.fr>
Co-authored-by: Josemar Luedke <230476+josemarluedke@users.noreply.github.com>
Co-authored-by: Cyril Fluck <cyril.fluck@addepar.com>
Co-authored-by: Nolan Evans <22493+nolman@users.noreply.github.com>
Co-authored-by: Matthew Beale <matt.beale@madhatted.com>
Co-authored-by: Chris Garrett <me@pzuraq.com>
Co-authored-by: Robert Wagner <rwwagner90@gmail.com>
Co-authored-by: Jerry Nummi <nummi@users.noreply.github.com>
Co-authored-by: Cory Forsyth <cory.forsyth@addepar.com>
Co-authored-by: Jonathan Jackson <jonathan.jackson@addepar.com>
Co-authored-by: Cory Forsyth <cory.forsyth@gmail.com>
Co-authored-by: Matthew Beale <matt.beale@addepar.com>
Co-authored-by: Eli Flanagan <eflanagan@innovu.com>
Co-authored-by: Chris Bonser <bonser.chris@gmail.com>
Co-authored-by: Chris Bonser <chris.bonser@gmail.com>
Co-authored-by: octabode <mark@climate.com>
Co-authored-by: Michal Bryxí <michal.bryxi@crowdstrike.com>
Co-authored-by: Camille TJHOA <camille.tjhoa@outlook.com>
Co-authored-by: Fry Kten <32638334+frykten@users.noreply.github.com>
Co-authored-by: frykten <fry.kten.art@gmail.com>
Co-authored-by: Jiaying <jiaying.xu@addepar.com>
@tschoartschi
Copy link

I have similar problems 🤔 I do the following (pseudo-code because the real code is pretty much involved):

class Form extends Component {
  @dropTaks
  * createShortId() {
    // ... DO SOME MORE STUFF ...
    // ... REMOVED THIS FROM SAMPLE TO KEEP IT READABLE ...
    const shortId = this.store.createRecord('short-id', {
      referencedId: this.item.id,
      type: SHORT_ID_TYPES.ITEM
    });
    yield shortId.save(); // <-- this .save() breaks
  }
}

Then I get the following error message:

Uncaught Error: Assertion Failed: You attempted to update `_tracking` on `Tag`, but it had already been used previously in the same computation.  Attempting to update a value after using it in a computation can cause logical errors, infinite revalidation bugs, and performance issues, and is not supported.

`_tracking` was first used:

- While rendering:
  -top-level
    application
      protected
        protected.tenant
          protected.tenant.catalog
            protected.tenant.catalog.product
              product-form
                utils/form-for
                  utils/collapsible
                    variations/integration-link-form

Stack trace for the update:
    at dirtyTagFor (vendor-d9433266.js:58431)
    at setter (vendor-d9433266.js:58717)
    at Tag.set [as _tracking] (vendor-d9433266.js:16451)
    at Tag.notify (vendor-d9433266.js:74707)
    at RecordState.notify (vendor-d9433266.js:74920)
    at vendor-d9433266.js:74892
    at NotificationManager.notify (vendor-d9433266.js:91900)

I struggle debugging it because I never use _tracking anywhere neither I use Tag...

Does someone have some tips and tricks how to debug this problem?

@pjcarly
Copy link

pjcarly commented Feb 4, 2022

@tschoartschi what version of Ember are you running?

I am getting the exact same error, but not with the ember-table addon, it is our own code. Nowhere are we using _tracking or Tag whatsoever. And your reply here is the only documented result of someone experiencing the same error.

@tschoartschi
Copy link

@pjcarly I needed to add yield Promise.resolve(); as the first statement in the function (in the ember-concurrency task). I can not remember how I found out about this but I think @NullVoxPopuli gave me the tip.

Currently we are on "ember-source": "3.28.1". I don't know if we can remove the yield Promise.resolve(); already but it works now and I'm happy 🙂

@NullVoxPopuli
Copy link
Contributor

More info on yield Promise.resolve() here: NullVoxPopuli/ember-resources#340 (comment)

@pjcarly
Copy link

pjcarly commented Feb 5, 2022

Thanks for the info. Unfortunately I doubt it has anything to do with a store.query in my case.

I'll first have to understand what the error is and then investigate what is going on in my codebase.

I have a hunch it has something to do with ember-data-model-fragments

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests