1

This question is a followup question to this thread : Jupyterlab active scroll bars for long results

In a notebook opened with Jupyterlab, when faced with cell outputs of different types (plots / text), and different lengths, it would be interesting to have a different scrolling behavior for each cell based on conditions checking those cells.

In my case I would like to have no scrolling when the output contains plots and when the output is less then 50 lines, but then activate scrolling and a smaller cell height when these conditions are met.

As the question mentioned before proposes the use of the browser extension Stylus which is based on CSS, is there a way to modify this Stylus configuration file to include this custom behavior ?

.jp-OutputArea-child {
    max-height: 33em;
}

.jp-OutputArea-child .jp-OutputArea-output {
    overflow: auto;
}

My experience in CSS being very limited, the idea would be (in pseudo-code):

IF OutputArea.height >= 50 AND OutputArea.hasPlot == False: 
{
  .jp-OutputArea-child {
      max-height: 33em;
  }
  .jp-OutputArea-child .jp-OutputArea-output {
      overflow: auto;
  }
}

ELIF OutputArea.hasPlot == True: 
{
  .jp-OutputArea-child {
      max-height: None; 
  }
  .jp-OutputArea-child .jp-OutputArea-output {
      overflow: disabled; 
  }
}

ELIF OutputArea.height < 50 AND OutputArea.hasPlot == False: 
{
  .jp-OutputArea-child {
      max-height: None;
  }
  .jp-OutputArea-child .jp-OutputArea-output {
      overflow: disabled;
  }
}

Of course I don't expect any checks to be of this type, and the checks may differ based on the plot type (matplotlib/plotly/openturns), even if for now matplotlib checks would be sufficient.

Also Stylus seems to be expendable using javascript, but my knowledge there has the same limitations. And as it seems that CSS cannot handle exceptions this custom behavior might have to pass over a style.js file.

Is there a jupyterlab setting or extension that already implements those behaviors, could the Stylus configuration file include these conditions, or is the only way to use a custom javascript extension?

Kramer84
  • 47
  • 6

0 Answers0