I implement a web page in reactjs, and should show some input and output nodes and the edges between them. the data inside each nodes will change periodically and i need to change the data for them time to time.
i implemented it and works fine, but after stay in this page for a minute it can not remove the previous edges and it remain in the web page.
I uploaded a video clip about this issue
any idea about this issue?
issue with edges in react flow- youtube link
Finally I found the issue, i set the random generated id for edges, which sometimes make a repeated id and cause this issue, when i set the unique id for each edges issue solved. :)
Related
I am currently building a calendar schedule view feature, where I have Month title as Header and the days as the items. I am currently fetching calendar event of about 6 weeks. which if the data is not present or so, it would still cover up the page and I can use onScrollEnd to query more data via useQuery.
But, I am trying to optimize my calendar feature and querying 6 weeks worth of events would not be ideal and would take time to load. thus, I was trying to find a way, where, if I can query let's say 1 week worth of data, if that does not have enough data (like 1-2 events) to cover the screen (for user to invoke onScrollEnd), then query next batch and so on and at the end wrapping the container with memo in order to help boost the load speed and lazy load data as required. Any idea how would this be possible?
I have looked at various examples of lazy loading such as:
https://snack.expo.dev/#johnborges/044274
etc, but my problem is that in these code examples, they do not cover the possibility of first or second batch/ page to have less data and querying for next page automatically.
I also thought of using FlatList nested with SectionList, but ended with conclusion that it would not be possible and data would be rendered twice.
What I want to happen:
<Schedule> --> component
render → Coordinate which Month in the SectionList should paginate through the events
<SectionList>
onEndReached → create more months
<Month>
<FlatList>
render → <Event />
onEndReached → fetch more events
<FlatList>
</Month>
</SectionList>
<Schedule>
So there are two "onEndReached" triggers, one to create more months when the user scrolls down the entire page and a second to get more events, when the user scrolls down the current month.
The Month component should just load 1 weeks worth of events at a time and paginate as the user is scrolling.. I somehow need some way to figure out that if the current week does not have enough data to cover the screen then query more data, and so one as always show the full page... Any help/ ideas would be appreciated. Thanks :).
I would try to measure the y position of the last element. If the y position is not close enough to the bottom, fetch more items. Store the previous fetch in the state. Add to that state the new fetch.
I've used Couch CMS to create a blog page with index of articles.
I've used Couch for blog systems before and the blog index item always displays underneath each other. However, this time they must display next to each other. I've tried so many things, but the index items remains under each other oppose to next to each other. The website is based on bootstrap, but the columns just keep on stacking on top of each other.
Can someone please help?
URL: https://legacyeb.co.za/news.php
Solved. Just make sure the couch page open and page close tags are in the correct place.
Everything in between the tags gets repeated with the blog index.
I have the following sandBox https://codesandbox.io/s/mqk1z565qp with a custom implementation of react-virtualized using Table and InfiniteLoader components inspired by official documentation and examples. https://github.com/bvaughn/reactvirtualized/blob/master/docs/InfiniteLoader.md
but I am driving nuts when adding InfiniteLoader.
I need help from the community what is wrong with the current implementation and to help me to move forward.
In the current stand point initial data is not properly rendered. Only some of them are rendered... The expectation is that the first 50 batch of users are displayed with any interaction from user end. Why it is not happening right now?
Secondly when user scrolls down in some point a request should be done to the server for requesting next batch of rows (50 more). Right now, when user scrolls the example behaves wrongly.
As I understand from the documentation for each row a request is send to the server with a given startIndex / stopIndex.
Regarding this In a later stage have 2 thoughts pending to implement.
Reduce the number of request to the server. ideally only when scrolling is close to reach the bottom ask for next batch.
Translate from startIndex / stopIndex to a page param. My real API endpoint is the param that expects and not startIndex / stopIndex!
But for now I am happy enough having a scrollable table and loading data on demand through InfiniteLoader
note: I have a data.js. It fakes a resultset of data split in 3 pages.
I am trying to detect when a content-type node is updated or saved for the first time and has attached audio.
If this is the case I want to re-write the Twitter Card meta tags to turn an image card into a media card and then include a link to the relevant audio field to complete the media card and player options.
I have a rule set that detects the creation / update of a node; I can screen for nodes of the correct "type", and my rule fires appropriately, but I am failing on my rule action to re-write the meta tags.
Rules tells me that $node is available to me, so I've been trying to do:
$node->metatags[LANGUAGE_NONE]['description']['value'] = 'Some description.';
$node->metatags[LANGUAGE_NONE]['title']['value'] = 'Some title | ZZZ';
This I have followed by an "entity save" action. My rationale is to write the changes before the recursion lock kicks in and stops the rule executing.
I've been going round the houses for a day trying to solve this. Can someone please point me in the right direction?
Many thanks.
Didn't fully understand your requirement. But you can easily update your node datas using hook_node_presave (https://api.drupal.org/api/drupal/modules%21node%21node.api.php/function/hook_node_presave/7.x) before node is being saved in to database.
Use hook_node_insert(https://api.drupal.org/api/drupal/modules%21node%21node.api.php/function/hook_node_insert/7.x) and hook_node_update(https://api.drupal.org/api/drupal/modules%21node%21node.api.php/function/hook_node_update/7.x) if you need to do the same thing after the node is saved in to database
I want to create a small web app which would display a list of movies, with a Google spreadsheet set as a database. So far, I was able to connect my spreadsheet to my app and I also added some filters to it. (As a side note, this thread really helped me in the process.)
Here is a very simplified version of my app: http://plnkr.co/edit/BtbSCVOh7KJsMHjANxMP?p=preview
I still have 3 problems with my <select>, which I can't fix despite trying for hours:
I can't sort my <options> alphabetically. Trying with orderBy didn't return anything.
I can't figure out a way to split my categories when there are more than one for a movie.
If the "categorie" field in my spreadsheet is empty, it will return a blank <option> which I would like to remove or hide.
My guess is that I'll need to update my function one way or another, but I'm a bit lost at the moment.
Any help on this would be really appreciated!