[Feature-789] Perspective component extensibility

document.querySelector('[data-row-id="22"]').scrollIntoView()

quite easy if you have virtualized rows off. if not will be a bit harder. well asuming the table gets loaded in fast enough.

i can make something better, but dont have time right now

Now that the pandora-markdown box is open, how about making js injection a bit... cleaner ?

eh, there is no way to do this clean, safe and easily for someone who doesnt know js.

But at the moment, when they do need js, they come to the forum and end up hacking the markdown component. That can't be a good solution.
And for those who know js, they still have to go through hoops.
That there is no built-in way is not stopping anyone, it just makes it ugly.

1 Like

i mean you could call it a js component, but it would look just the same tbh.
it would both be text to html, and would require onload hacks, unless perspective does some things around it for only js onload, but that would limit the flexibility.

I wasn't thinking about a js component, but something like a js script associated to views. Maybe a script on the root, like message handlers, or something like that.
And js scripts in the library as well, that you could call from the special view js script...

that would make you think it is tied to only the view, but it wouldnt be.

a system.perspective.javescript("string") could be intersting though, if it sort of knows which compontnnet triggered it, would reduce the need of finding it in the document. but it would not work as easy as that

Oh, but it greatly reduces IA's support surface. Probably a huge win for IA.

4 Likes

yeah no need to pay javascripters, just tag me for free :stuck_out_tongue:

6 Likes

@victordcq FWIW, I'm a huge fan of your work.

6 Likes

Someone reminded me of this so i wipped something up
focusRow.zip (37.1 KB)

had to use html parsing for " (&q uot;) because it was doig annyoing with the escaped characters xd (the disadvantage of parsing a string to js xd)

	
	code =  """<img style='display:none' src='/favicon.ico' onload=\"	
		document.querySelector('#"""+value.id+""" [data-row-id=&quot;"""+str(value.number)+"""&quot;]').scrollIntoView();	
		document.querySelector('#"""+value.id+""" [data-row-id=&quot;"""+str(value.number)+"""&quot;] .content').click();				
	\"></img>""".replace("\n", "").replace("\t", "")
	return code
		

(vitualized must be off)

2 Likes

Legend!

1 Like

Thanks for uploading that. I feel like I made every mistake along the way to getting this working but now know just enough to be dangerous now :sweat_smile:

To clarify, this method requires that you make create a domId value in the table's meta properties which is then referenced in the markdown code along with the source of row selection (you also have to turn off the escapeHtml on the markdown component and also turn off virtualized in the table props). Am I missing anything?

i think thats it yes, i had made a demo view.
you probably want to make this conditional if nothing is selected

1 Like

Hooooow would you do this when virtualised is on? I have to have it on cause the table has so many rows it's super slow if it's off :weary:

Alright alright, i'll use some mutation magic.
Just be sure the row number exists else it will keep searching for it xd

Here you go :wink:

(this code only works on virtualised grids)
(nobody really cares if this is clean code or not so just puting in some empty try cacthes to keep it running xd)
(it assumes all the rows have the same height)

code =  """<img style='display:none' src='/favicon.ico' onload=\"	
		const heightRow = document.querySelector('#"""+value.id+""" .tr-group.ia_table__rowGroup.ia_table__body__rowGroup').offsetHeight;
		const heightScroll = heightRow * """+value.number+""";
		const grid = document.querySelector('#"""+value.id+""" .ReactVirtualized__Grid');
		const callbackScrollOnce = (mutationList, observer) => {
				try{		
					document.querySelector('#"""+value.id+""" [data-row-id=&quot;"""+str(value.number)+"""&quot;]').scrollIntoView();	
					document.querySelector('#"""+value.id+""" [data-row-id=&quot;"""+str(value.number)+"""&quot;] .content').click();
					observer.disconnect();				
				} catch (error) {}
			};		
		const observerScroll = new MutationObserver(callbackScrollOnce);
		const scrollListener = document.querySelector('#"""+value.id+""" .ReactVirtualized__Grid__innerScrollContainer');
		observerScroll.observe(scrollListener, { attributes: false, childList: true, subtree: true });
		grid.scrollTo(0,heightScroll);	
		try{		
			document.querySelector('#"""+value.id+""" [data-row-id=&quot;"""+str(value.number)+"""&quot;]').scrollIntoView();	
			document.querySelector('#"""+value.id+""" [data-row-id=&quot;"""+str(value.number)+"""&quot;] .content').click();
		} catch (error) {}	
	\"></img>""".replace("\n", "").replace("\t", "")
	return code
2 Likes

:astonished:
Looking forward to trying this out next week when I'm back (or earlier more than likely if I'm honest.. haha)! Our client will be super happy to have this working!

Oops, forgot to say thanks!

1 Like

I just tested it, very nice!! One small thing is that it doesn't scroll to the right position if some of the rows aren't the default single-line height (e.g. their cell contents length has increased the height of the row).
I try to avoid this anyway in this table though so shouldn't be an issue. Thanks again!

Yes. Its not really possible to know how hieght every row since they havent been rendered yet, so the only way i see this possible is to just do this. Using the height of the first found rendered row.
const heightScroll = heightRow * """+value.number+""";

i did put in an other scroll into view to try find it again if its close enough, but the virtualised table only renders a couple rows out of view, so this might not work with very varient rows.

1 Like

i guess it could be possible to make a smarter way to find it if it uses a couple of steps in between (ex after the first scroll to height, if it doesnt find the correct row number, check which rownumbers are in view and see how much you are short and adjust height to that...
but that is a whole lot of work for somehting that wont be smoot and very confusing to watch the grid go up and down untill it finds the row xd