I'm putting together a website, where one of the pages holds an interactive map. The map is implemented as a big table, where each node is a td.
Now this map takes a while to render, and so, I'd love for the site to be displayed as it renders, so that even if the map is not fully rendered, the user can click links or the part of the map that is rendered.
Is there an easy way to do this? AJAX is one option, but since it is a Django website and the map depends on data from the Django template, AJAX becomes a bit unwieldy.
So is there a way to make the page visible while rendering?
(I considered making each node an iframe, so that they would be rendered individually, but that seems a bit silly too)
the django template should only render an empty map (or a map holding the first 10 points) with the javascript code firing on page ready
this javascript script should do this:
request 10 nodes from django (using a different url/view)
render the fetched nodes into the page
if no more nodes: END
goto 1.
Hope this helps
After trying a few different things, it seems that the problem was too many database queries. Each of the nodes made calls to the database while rendering, which caused them to be very slow.
For reference:
Custom filters in Django should not make database queries, if they are used heavily on a page
Related
The case
I am implementing a web app with Angular#6 and Django#2.2. In my app, I provide the users with a form with options. Based on the selected options, I request the backend for the relative results. The results are rows of the form {orderNumer: integer, message: string}. The number of rows, that the backend responds with, ranges from 0 up to 20k.
The Problem and what I have done
I am currently using Angular Material Table, requesting the whole file from django (no streaming) and since angular get the results, I am passing them into angular material table.
The problem is that in case of 14k rows, the table displays this result with a delay of 12secs. I mean that from the time that all 14k rows are fetched to Angular from Django, there are 12 secs passed to be displayed.
Some Limitations
I have noticed about pagination, i.e. requesting data in chunks either when user scrolls or gets to the results next page. However, this is not the desired behavior in my app. I want the user to be able to download the results without having to scroll down or getting to the next page again and again.
Questions
What are some best practices in such a situation?
1) Do I partially load the results to angular material table? Is there a way?
2) What do I do while streaming the rows from the backend, instead of requesting the whole file? In this case, have I to do this independently of the size of the file?
What takes the most time is not downloading the array not even going through it. What takes 12sec is to add the HTML elements to the DOM.
So, this's what I would do in this situation:
download the array (even if it's 14K rows, I don't think there's a need to stream it)
Store a sub-array in a variable then display this sub-array with ng-for-trackBy for performance reasons (and add the code necessary to add rows as the user comes near the bottom of the displayed array)
Use the OnPush change detection strategy, also for performance reasons (https://angular.io/api/core/ChangeDetectionStrategy)
Or:
Download the array
Use a virtual scroll list by leveraging the Angular CDK (https://material.angular.io/cdk/scrolling/overview)
Hope it helps,
I'm developing an app in flask. I have to tables, one renders on the server side using jinja2 and the other one is a live table that renders dynamically using socketio. They are in different routes but the tables look the same in design.
My problem relies on the rendering, I iterate through the same database in both cases but in the dynamic part i get the json and render it with mustache and the static table do the same but with jinja2. I need to store data related with states and categories that i obtain from the database for every row and use it for rendering in both routes.
basically I want to know where to store this relationship:
{category_id:{icon:x, color:y, name:z}}
I'm almost sure that whatever solution I get I would eventually need this as a jquery object (my current solution but a single change in that data means change multiple places on different templates) so i can then access on rendering to get the dynamic data, but... that doesn't mean i now how to get there nor how to share the same data structure between flask jinja and js. Thanks in advance.
If I understand your question correctly, you can use Flask sessions to store data between views.
from flask import session
Then you can set it:
session['config'] = {category_id:{icon:x, color:y, name:z}}
And get it, and pass it to your view:
default_config = {category_id:{icon:x, color:y, name:z}}
config = session.get('config', default_config)
I am very new to ember.
how do i create a component/view that has to load data, for ex if i need a search box on multiple page (with some extra properties passed in), which hits the database and gets results. every documentation i read says the model has to be passed in to the view. however i do not want to copy the code which loads search results from the backend on every page.
ideally what i want to do
{{view myseachbox... extrafilter="yyy"}}
is setting the controllerBinding to say MySearchController where the functionality of fetching data will be implemented the way to go?
any pointers are appreciated.
Quite often we deal with lists of things on our site. These initially get loaded with the rest of the page from the server. However, any updates received we would like to update these lists using Ember.
All of the examples I have seen so far with Ember views deal with controlling content on a page that has always been created purely by Ember. What options are there for dealing with DOM elements that already exist on the page with Ember views?
There has been some discussion around this idea here: https://github.com/emberjs/ember.js/issues/563
In the current situation two approaches come to my mind:
Replace the static rendered list with an Ember.CollectionView as soon as all list items are available to ember as data objects (e.g through ember-data)
Use plain old jQuery to append the latest updates at the beginning / end of the list
I guess it depends on how complex your list items and the updating logic is. If updates need reordering of items and your list needs complex interaction, the first approach using ember might be better suited, although there could be a "flickering" of content while the lists are replaced. The second approach is much simpler but also limited. I would only use jQuery for appending / prepending content. Still, if the lists are simple it would be overkill to even use ember in this case.
I'm working on a Django site with a basic three column design. Left column navigation, center column content and right column URL specific content blocks.
My question is about the best method of controlling the URL specific content blocks in the right column.
I am thinking of something along the lines of the Flatpages app that will make the content available to the template context if the URL matches a pre-determined pattern (perhaps regex?).
Does anyone know if such an app already exists?
If not, I am looking for some advice about the best way to implement it. Particularly in relation to the matching of patterns to the current URL. Is there any good way to re-use parts of the Django URL dispatcher for this use?
Django CMS is a good suggestion, it depends on how deep you want to go. If this is just the beginning of different sorts of dynamic content you want then you should go that way for sure.
A simple one-off solution would be something like this:
You would just need to write a view and add some variables on the end of the URL that would define what showed up there. Depending on how fancy you need to get, you could just create a simple models, and just map the view to the model key
www.example.com/content/sidecontent/jokes/
so if "jokes" was your block of variable sidecontent (one of many in your sides model instances) the urls.py entry for that would be
(r'^content/sidecontent/(?P<side>)/$,sides.views.showsides),
and then in your sides app you have a view with a
def showsides(request, side):
Sides.objects.get(pk=side)
etc...
For something like this I personally would use Django CMS. It's like flatpages on steroids.
Django CMS has a concept of Pages, Templates, and Plugins. Each page has an associated template. Templates have placeholders where you can insert different plugins. Plugins are like mini-applications that can have dynamic model-based content.
Although Django-CMS is an interesting suggestion, there are quite a few projects that do specifically what you've requested - render blocks of content based on a URL. The main one that I know about is django-flatblocks.