Makie grid gui


I have been working on a project to create spreadsheet style gui for displaying data contained in either a Matrix or a Dataframe. I want to use Makie because I also make use of the powerful charting functionality makie provides. After a few false starts using buttons (too slow) I have made a lot of progress using a combination of hline, vline, mesh and text, all displayed in an axis. Part of the concept is to have a series of tabs that show a different view of the data and that’s working fine detecting the event but now I have to update the text displayed.

I have found this reference and it looks like I might be able to remove all or some of the plot objects so I can refresh.

Setup and cleanup

Some interactions might have more complex state involving plot objects that need to be setup or removed. For those purposes, you can overload the methods registration_setup!(parent, interaction) and deregistration_cleanup!(parent, interaction) which are called during registration and deregistration, respectively.

However, I don’t understand how to use this information. Can someone point me to an example of it’s implementation?


That section is just about adding and removing interactions of an Axis, so for example if you want to create a mouse-drag interaction that needs some infrastructure, you can set it up and remove it again with those hooks.

now I have to update the text displayed

This seems to be the crux of your problem, could you post some runnable example code that shows your exact issue?

Would a Pluto notebook help here rather than Makie? Pluto is reactive, like spreadsheets.

Hi jules,

This code shows the problem. Each time a different Tab is selected the tab background and text colour changes and the field names need to change to show the fields appropriate for the newly selected tab. As you can see after a few tabs are selected the text commands and mesh commands just add to the plot as expected. Obviously I will have the same issue when I start displaying data for each field. So, I need a way to delete some or all of the text and mesh plot objects.

using version 1.8.2 and vscode under windows 10.

apologies for the amateur standard coding.


function Spreadsheet_cellCountX(s::Spread)
     return max(size(s.columnLabels,1),size(s.columnLabels,2))

function Spreadsheet_gridWidth(s::Spread)
    return s.cellWidth * Spreadsheet_cellCountX(s)

function Spreadsheet_gridHeight(s::Spread)
    return s.cellHeight * s.cellCountY
function Spreadsheet_cellTextXOffset(s::Spread)
    return floor(s.cellWidth*s.textPaddingX)
function Spreadsheet_cellTextYOffset(s::Spread)
    return floor(s.cellHeight*s.textPaddingY)

function drawSpreadsheet(s::Spread)

    vertices = [0.0 0.0;s.cellWidth 0.0;s.cellWidth Spreadsheet_gridHeight(s)-2*s.cellHeight; 0.0 Spreadsheet_gridHeight(s)-2*s.cellHeight] 
    faces = [1 2 3;3 4 1]
    mesh!(s.axis,vertices, faces, color = (:gray,0.3), shading = false)

    vertices = [0.0 Spreadsheet_gridHeight(s)-2*s.cellHeight;
                Spreadsheet_gridWidth(s) Spreadsheet_gridHeight(s)-2*s.cellHeight;
                Spreadsheet_gridWidth(s) Spreadsheet_gridHeight(s)-s.cellHeight;
                0.0 Spreadsheet_gridHeight(s)-s.cellHeight] 
    faces = [1 2 3;3 4 1]
    mesh!(s.axis,vertices, faces, color = (:gray,0.3), shading = false)

    vlines = [vlines!(s.axis,i, color=(:black, 0.90)) for i=0:s.cellWidth:Spreadsheet_gridWidth(s)] 
    hlines = [hlines!(s.axis,i, color=(:black, 0.90)) for i=0:s.cellHeight:Spreadsheet_gridHeight(s)]

function drawTabs(s::Spread,tab::Int)
    #define tab labels
    for i=1:size(columnLabels,2) 
        if i==tab
        text!(s.axis,s.tabLabels[i], position = ((i-1)*s.cellWidth+(s.textPaddingX*s.cellWidth),Spreadsheet_gridHeight(s)-s.cellHeight+(s.textPaddingY*s.cellHeight)), color = (:black,0.99), textsize = s.fontSize)
            text!(s.axis,s.tabLabels[i], position = ((i-1)*s.cellWidth+(s.textPaddingX*s.cellWidth),Spreadsheet_gridHeight(s)-s.cellHeight+(s.textPaddingY*s.cellHeight)), color = (:black,0.4), textsize = s.fontSize)

    vertices = [(tab-1)*s.cellWidth Spreadsheet_gridHeight(s)-s.cellHeight;
    tab*s.cellWidth Spreadsheet_gridHeight(s)-s.cellHeight;
    tab*s.cellWidth Spreadsheet_gridHeight(s);
    (tab-1)*s.cellWidth Spreadsheet_gridHeight(s)] 
    faces = [1 2 3;3 4 1]
    mesh!(s.axis,vertices, faces, color = (:gray,0.3), shading = false)

function drawColumnHeaders(s::Spread,tab::Int)
    for i=1:size(columnLabels,1) 
        text!(s.axis,s.columnLabels[tab,i], position = ((i-1)*s.cellWidth+(s.textPaddingX*s.cellWidth),Spreadsheet_gridHeight(s)-2*s.cellHeight+(s.textPaddingY*s.cellHeight)), color = (:black,0.99), textsize = s.fontSize)

thanks johnh but I’m way too deep into Makie for the rest of the project to give up easily. If my incompetence wins out I will have a look at Pluto.

You should be able to delete plots from the axis using delete! although I’m not sure right now if this isn’t a bit buggy still. Also, you should use array arguments for text and vlines etc, not make one plot object for each instance as that gives you worse performance. And using array arguments you don’t have to delete plot objects but change the arrays

Thanks jules.

I understand but having trouble implementing

I changed the vlines ok with

vlines = [vlines!(s.axis,i, color=(:black, 0.90)) for i=0:s.cellWidth:Spreadsheet_gridWidth(s)]

changed to

vlines = vlines!(s.axis,[0:s.cellWidth:Spreadsheet_gridWidth(s);], color=(:black, 0.90))

is this what you meant?

But when I try to change the following text! command my ignorance gets in the way.

text!(s.axis,s.tabLabels[i], position = ((i-1)*s.cellWidth+(s.textPaddingX*s.cellWidth),Spreadsheet_gridHeight(s)-s.cellHeight+(s.textPaddingY*s.cellHeight)), color = (:black,0.99), textsize = s.fontSize)

I tried changing the strings for the text into an array and putting the x positions into one array and y into another and I tried putting the positions into an array of tuples and tried passing a tuple os x and y arrays but nothing works and i get a message saying the conversion trait PointBased() was unsuccessful. The API talks about

text(positions; text, kwargs...)
text(x, y; text, kwargs...)
text(x, y, z; text, kwargs...)

Plots one or multiple texts passed via the text keyword. Text uses the PointBased conversion trait.

but I have no idea what that means or how to implement. I looked through but couldn’t see a relevant example. Can you point me to an example?


A lot of the examples in the docs pass arrays to text

Thanks jules, passing in observable arrays to text! works perfectly and it’s fast.