Instadeq Week in Two Minutes #5: Form builder cell...
# two-minute-week
m
Instadeq Week in Two Minutes #5: Form builder cell to create forms that emit output on change and submit, register and reload providers dynamically and allow services to specify configuration parameters that appear in the UI:

https://youtu.be/Bk8SBjTRJLg

👍 1
😎 1
m
Do you work on this fulltime? Great progress in a week time I think!
m
yes, I work full time
m
That's awesome! My own project is still a side project. What's your tech stack on the frontend?
m
react, bootstrap, immutablejs, voca, draftjs, echarts
m
Cool! I don't know voca and echarts so I'll look into those
m
voca is just string functions, echarts is just if you want charts 😄
r
I don't have much input on this besides it looks like you're making good progress. I do know of a few smaller companies that need a super simple self setup data querying system like this, but a big thing for them is collating the data in nice reports for upper management. Do plan on helping people produce reports/documents from their queries, or are you just looking at the data analysis side of things?
m
reports and documents is the end goal, it's just that we know how to solve that part so I'm not showing that much and leaving the final touches on that to the end 🙂
🍰 1
this is our current product:

https://www.youtube.com/watch?v=LK9Lfo4dFLU

i
I noticed two UI things that felt lacking, both related to scrolling, and I'm curious if / how you're planning to improve them. 1. When you want to connect two things that are far apart on the page (at 0:50), you grab one and then drag it to the top of the page, and then wait while the page scrolls up. 2. When you drag the slider (1:04), the select table grows and shrinks. Since you're looking at the slider, which is below the table, the whole page jumps up and down.
m
for 1 I have the basket, I don't always use it but for long drags it's really useful, for 2, yes, I've noticed it too and I don't know yet how to best solve it, I was thinking some sort of portal and/or side by side temporary view to see effects of one cell into another one, open to ideas on this one
i
For 1, can you select those draggable value label things (like "goals" in the video)? If so, can you copy-paste them to achieve the same thing as a drag? For 2, I've tried solving this problem by adjusting the scroll position to compensate for changing element sizes higher up on the page, but that never worked well enough for me to ship it. I've compensated by basically removing things from the DOM when they're outside the view, so that they can't mess with scrolling, and then reinserting them into the DOM in response to a user action. I don't think that'd work in your case, though. So perhaps the idea of pulling controls out of the main flow is the best bet. You've certainly got a lot of horizontal space to play with in your layout, so you could maybe carve off room for a panel along the left or right that could house vertical sliders and other controls. * shrug *
m
here's a short demo of the basket tool to drag and drop things to it and then take them from there in the other place
🍰 1
now I understood what you mean by 2, one partial solution for it was to render tables always with 10 rows, if it has less they will have empty rows, this would avoid most of the growing and shrinking of cells, it would add unused vertical space but at least it would be stable.
👍 1
before I thought you meant that it was hard to see the effect of the slider on the other cell since it was not on the viewport, my answer did not make sense to what you actually said 😛
an alternative solution is to add another navigation mode that allows you to go to the next/previous cell but the current one is always "full screen", I could add some basic tile management to have 2 or more cells instead of just one
👍 1