Shorter question: how should toolbars be programatically created and dynamically changed in a D3.js app with a Python backend?
I'm trying to create Javascript/D3 visualizations for simulations written in Python and using Flask, as an alternative to using a Tkinter GUI. I want a particular model to be selected by a radio button. Changing the selection not only changes the plot, but also swaps to a toolbar of numerical inputs appropriate for that model. I want to create the toolbars programatically, so that as a new model is added to the code an appropriate toolbar is automatically generated.
My problem is that there are a lot of ways to manipulate the DOM, and it's not clear to me what the best approach would be:
Python/Flask could manipulate the DOM, but I think that requires a
page refresh.
If HTML imports were used, there would have to be a separate .html file for each toolbar.
A unique <div> could be created for each toolbar and hidden/unhidden as needed, but it feels wrong to create a dozen <div>s rather than swap the content of one <div>.
A toolbar <div> could be torn down/built up everytime a toolbar is needed, but it feels wrong to keep building the same toolbars from scratch.
innerHTML could be swapped, but this might be bad? cf. this SO question
There are multiple options for manipulating the DOM at the frontend: JS, D3, JQuery...
To illustrate, here is a screenshot of what I have so far. The radio buttons swap between two models. In lieu of a toolbar, I have a JSON dump of the model's toolbar info. The JSON dump would be replaced by its interpretation as a series of labels and numerical inputs.
Related
Currently we have a page which has options with each section consisting of lots of checkboxes - a section might have 20 checkboxes due to each one being a separate option and then the page might have 10 sections. This takes up a lot of space and looks really messy so we experimented using select2 along with multiple option so now, by default, the space is no bigger than a text input with the added advantage that the list is searchable (when focused).
The issue is that some users have fed back that they load the page and then use ctrl-F in their browser to find the relevant setting section - using select2 (or any select based option I guess) that is no longer possible as the options are not visible on the screen.
It is something similar to the tags section at the bottom of the page - for example if I search for jQuery when focussed in the tags box it comes up but if use Ctrl-F in the browser it would not etc.
Is there a way to make the options in the select list "searchable" using the browser search without having to resort to listing them all which would then defeat the point of the change?
We had thought of displaying the options in a comma list, for example, with the same text colour as the background in a really small font but it is clunky or maybe add some sort of JS search box on the page so, whilst not using the ctrl-F route, it still makes it searchable but were curious if there was there a way we could do this via Select 2 itself or any other routes we could explore using the native browser search?
I am working on my first extensive MERN project and part of the functionality involves specific components (like a checkbox to-do list, images, text, ets...) that then allow the user to build out different pages, larger multi-checkbox aggregation lists, etc... Think of it as something like https://www.notion.so/notes.
Building the individual react components and configuring them on static pages is straightforward. However, I'm having a hard time conceptually understanding how to take those components and then dynamically allow users to build out custom pages using them.
In a broad sense, how do page builders functionally work?
Here is a broad idea. You will need a page where the left side lists all your UI components [thump nails] and the right side area for dragging and dropping those compoents. You will need a grid system with rows and columns components like Bootstrap Grid or MUI Grid dividing space into 12 portions for the layout of any page. You should let each dropped component give an option to accept its props so users can set it. Setting props can be another component.
When they save the design you should get the react component tree of what they are saving along with all properties and save it in your DB. You should be able to generate both the design view and the actual view with those saved data.
It was easy to say but I know it's a lot of work. I have seen similar work done using Angular and .NET.
I'm building my first Yii2 app in bootstrap and I was looking at a few templates to base the UI in. The problem is that each one offers a few unique form elements that I like. Is it relatively easy to copy form elements from one theme to another?
For example, copying the Ui Elements > Tree View from http://wrapbootstrap.com/preview/WB0B30DGR into another template like http://wrapbootstrap.com/preview/WB0F0419C.
Thanks!
Depending on your experience in CSS and Javascript. I also customized on several occasions templates bootstrap changing some elements. First, it is whether you intend to do only the changes to the graphics and then only the changes to boostrap.css or if you want to supplement / modify the parts managed via javascrit. For graphics all template-type bootstrap behave the same way, then it needs to identify exactly which categories you care about and modify them with the catatteristiche want. For the part controlled by javascrit the situation is similar only the most delicate and complex.
I am porting quite a huge piece of software to an ExtJS Grid. Lots of data (and I mean lots of data) is loaded on-demand into spans that are placed inside grid's cells.
Imagine grid cells having <span id="foo_bar'></span> as content, and special ajax handlers are polling the backend for updated information and once available the spans are filled with it.
Now, in case I collapse some part of the grid and then re-exand them again I loose all automatically filled cell content, and am left with empty spans (which I started from in the first place).
I know the correct way is to setup a store and push all data into the store. But as I've mentioned above: I am porting quite a huge piece of legacy software to ExtJS, and I do not really have much choice here.
Is there a way to automagically push grid cell values to the store?
Update:
A grid is loaded with, suppose, 2000 cells (this can vary tremendously). Every cell contains various grades of HTML, mostly this is , but this can be pretty much anything (including several spans or divs in one cell). In the background there is a comet process pushing new data to the HTML page almost in real time. This data is populated to the corresponding SPANS and DIVs either based on their IDs or class or both.
What I want to achieve is that either:
a) the model for the grid is atomagically updated with the new html content of the cells (how can I achieve this)?
b) when collapsing/expanding tree's nodes the model data is NOT reloaded afresh.
Is either a or b possible? if so — how?
Just update your store when the 'special ajax handlers' successfully return values. In staid of manually messing with the dom.
so in the success callback do something like -> loadData()
Edit:
Seems like you are working with very bad legacy code :) If adding a simple line of code to the ajax handler is a tremendous effort.. You can however attach dom listeners, but it's very bad practice. Here are some events to listen to
Edit:
Here is an example of the use of how you could listen to dom events, it's rather a pure js solution but, meh.. it works..
I have 3 sets of tabular data I want to display with a JavaScript framework in ASP.NET MVC. I know I can embed a separate grid in a tab, but this seems inefficient especially when large datasets are involved since I imagine 3 separate grids would be created. I haven't found a JavaScript datagrid which emulates what a spreadsheet does with multiple tabs. This example from YUI might come close though:
http://developer.yahoo.com/yui/examples/datatable/dt_dynamicfilter_source.html
I'm a little familiar with jQuery, but would be willing to switch to any framework which makes this easy. I don't really need to edit the data. Any suggestions?
EDIT: I didn't mean this to be about jQuery. Maybe some details about my scenario would help, as suggested in one of the comments. I want to display tabular data from an ordering system containing thousands of records. I'd like 3 tabs:
All orders entered in the system which haven't been paid for yet.
All orders from a specific vendor.
All orders which have been paid for.
Since each category has thousands of rows, I only want to load data if the user starts paging.
I thought having 3 tabs with 3 separate grids (one within each tab) wouldn't be performant. I haven't actually tried though, so I'm probably guilty of prematurely optimizing. I'm looking for a grid with tab support built-in. I don't think there's one for jQuery. Perhaps ExtJS?
Since you tagged this with Ext JS, I'll mention that it's quite simple to render grids into tabs using Ext JS. It also supports deferred load/render, so that only the first tab/grid would load initially, then the others would be loaded on first access. Without knowing your specific requirements it's hard to comment further.
EDIT (based on edited question): Ext grids don't directly support tabbing, but they can be embedded within a TabPanel as I mentioned for the same effect. However, based on your description, it sounds more like a filtering scenario to me. I don't see the point in having the overhead of multiple grids when only one will ever be visible, and each one's purpose is to show a specific view (i.e. filter) of the same data. I would just have a single grid with a toolbar or some other method of providing your toggle between filters, and use Ext's built-in store filtering/querying to create your views on demand. The Ext grid supports paging out of the box (client or server, in your case it would be server for thousands of records). There is also a very popular plugin called LiveGrid that provides for virtual scroll-paging of large data sets.
I'm not necessarily advocating Ext over any other framework -- I just happen to be most familiar with it and I think it could solve your problem quite nicely. I would suggest trying it out for yourself to be sure.
jQuery Grid is kinda what people use a lot. I use it and it's pretty good.
jqGrid Link
I wouldn't draw a grid with three tabs. I'd use a single grid with a tab control and then load data via jQuery as required.
Or maybe have three PartialViews that you can load dynamically when you hit a tab.
You could also use dhtmlx grid.
You could use JS tab object to create tabs.
And use javascript grid framework to create grids and populate data into grids.