Software Review

Current Reviews

The following issue has multiple stages:

rOpenSci software peer-review is currently handling:

2 pre-submission issues
10 standard issues
8 stats issues

The following table provides details of each issue, with results filtered by the following controls:

“Submission Stage” to list issues with the specified stage.
“Holding” to list issues which are on hold (true) or not (false).
“Sort By” to sort results either by the Submission Stage (“stage”, 0-5), or “urgency”, as described below.

Some rows in the table are highlighted to visually indicate degrees of urgency according to the scheme defined in the following sub-section. Rows with no highlight may be considered up-to-date, and require no action. Submissions which have not yet been given a ‘Stage’ label are listed below as ‘(No stage)’, and highlighted with the highest urgency level.

urgency_colours = ["#FFFF8088", "#FFFF0088", "#FFAA0088", "#FF550088", "#FF000088"]

submissionsIn = {
    return transpose(submissions).map(row => ({
        ...row,
        rowColor: row.urgency === 1 ? urgency_colours[0] :
            row.urgency === 2 ? urgency_colours[1] :
            row.urgency === 3 ? urgency_colours[2] :
            row.urgency === 4 ? urgency_colours[3] :
            row.urgency === 5 ? urgency_colours[4] : "transparent",
    }));
}

viewof stage = {
    const input =  Inputs.checkbox(
        ["(No stage)",
         "0/presubmission",
         "1/editor-checks",
         "2/seeking-reviewer(s)",
         "3/reviewer(s)-assigned",
         "4/review(s)-in-awaiting-changes",
         "5/awaiting-reviewer(s)-response"
        ],
        {
            value: [
                "(No stage)",
                "0/presubmission",
                "1/editor-checks",
                "2/seeking-reviewer(s)",
                "3/reviewer(s)-assigned",
                "4/review(s)-in-awaiting-changes",
                "5/awaiting-reviewer(s)-response"
            ],
            label: htl.html`<b>Submission Stage:</b>`,
        }
    );

    // Modification ideas from
    // https://talk.observablehq.com/t/what-is-the-best-way-to-style-an-input-checkbox/7690/2
    const scope = DOM.uid().id;
    input.classList.add(scope);

    input.append(htl.html`<style>
    .${scope} > div, .${scope} > div label { display: flex; flex-wrap: wrap; gap: 10px; width: 300px }
    `)

    return input;
}

viewof holding = Inputs.checkbox(
    [true, false],
    {
        value: [false],
        label: htl.html`<b>Holding:</b>`,
    }
)

viewof sortBy = Inputs.radio(
    ["stage", "urgency"],
    {
        value: "stage",
        label: htl.html`<b>Sort by:</b>`,
    }
)

filtered = submissionsIn.filter(function(submission) {
  return stage.includes(submission.stage) &&
    holding.includes(submission.holding)
})
// Only sort by urgency if there are any:
anyUrgent = filtered.some(submission => submission.urgency > 0)
sortCol1 = sortBy === "stage" ? "stage" : anyUrgent ? "urgency_rev" : "stage"
sortCol2 = "elapsed_days"

// Sorts by both stage and elapsed days:
filteredSorted = filtered.sort((a, b) => {
    if (a[sortCol1] > b[sortCol1]) {
        return 1;
    } else if (a[sortCol1] < b[sortCol1]) {
        return -1;
    } else {
        if (a[sortCol2] < b[sortCol2]) {
            return 1;
        } else if (a[sortCol2] > b[sortCol2]) {
            return -1;
        }
    }
    return 0;
});

// Definition of colorTable function, adapted from
// https://observablehq.com/@mootari/colored-table-rows
// This can't be placed in a separate file, because that requires importing
// observable/table, but there is no path here to do that import.
function colorTable(data, {
        colorColumn,
        colorOpacity = 0.5,
        editorColumn,
        lastActiveColumn,
        issueNumColumn,
        columns = undefined,
        format = {}, ...options}) {
  const [row] = data;
  if(!row) return Inputs.table(data, options);
  
  let index = Object.keys(row).indexOf(colorColumn);
  if(index < 0) throw Error("colorColumn not found in data");
  if(format[colorColumn]) throw Error("colorColumn is reserved");
  if(columns && columns.indexOf(colorColumn) < 0) columns.push(colorColumn);
  if(columns) index = columns.indexOf(colorColumn);
  const nth = `nth-child(${index + 2})`;

  // Observable Table doesn't know about rows, so need to convert the
  // "lastActiveColumn" into an array with the issue number and last active
  // string so then pass to the `format` call below to construct <a> href
  // objects:
  const preprocessedData = data.map(row => ({
     ...row,
     [lastActiveColumn]: [row[issueNumColumn],row[lastActiveColumn]]
  }));``

  const form = Inputs.table(preprocessedData, {
    format: {
      ...format,
      [colorColumn]: d => htl.html`<div style="--row-color:${d}">`,
      [editorColumn]: d => htl.html`<a href="https://github.com/${d}">${d}</a>`,
      [lastActiveColumn]: d => htl.html`<a href="https://github.com/ropensci/software-review/issues/${d[0]}">${d[1]}</a>`,
    },
    columns,
    ...options
  });

  const scope = DOM.uid().id;
  form.classList.add(scope);
  
  form.append(htl.html`<style>

    /* Ensure that the sticky header always stays on top */
    .${scope} thead { position: relative; z-index: 2 }

    /* Hide the last column */
    .${scope} th:${nth},
    .${scope} td:${nth} { width: 0; padding: 0 }
    .${scope} th:${nth} { visibility: hidden }

    /* Inject the background color */
    .${scope} tr { position: relative }
    .${scope} td:${nth} div:after {
      opacity: ${colorOpacity};
      content: "";
      display: block;
      height: 100%;
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
      background-color: var(--row-color);
    }
  `);

  return form;
}

// And modified verison for open reviews table
function reviewTable(data, {
        colorColumn,
        colorOpacity = 0.5,
        issueNumColumn,
        titleColumn,
        columns = undefined,
        format = {}, ...options}) {
  const [row] = data;
  if(!row) return Inputs.table(data, options);
  
  let index = Object.keys(row).indexOf(colorColumn);
  if(index < 0) throw Error("colorColumn not found in data");
  if(format[colorColumn]) throw Error("colorColumn is reserved");
  if(columns && columns.indexOf(colorColumn) < 0) columns.push(colorColumn);
  if(columns) index = columns.indexOf(colorColumn);
  const nth = `nth-child(${index + 2})`;

  // Observable Table doesn't know about rows, so need to convert the
  // "titleColumn" into an array with the title and issue number
  // so then pass to the `format` call below to construct <a> href
  // objects:
  const preprocessedData = data.map(row => ({
     ...row,
     [titleColumn]: [row[titleColumn],row[issueNumColumn]]
  }));``

  const form = Inputs.table(preprocessedData, {
    format: {
      ...format,
      [colorColumn]: d => htl.html`<div style="--row-color:${d}">`,
      [issueNumColumn]: d => htl.html`<a href="https://github.com/ropensci/software-review/issues/${d}">${d}</a>`,
      [titleColumn]: d => htl.html`<span style="white-space:break-spaces;"><a href="https://github.com/ropensci/software-review/issues/${d[1]}">${d[0]}</a></span>`,
    },
    columns,
    ...options
  });

  const scope = DOM.uid().id;
  form.classList.add(scope);
  
  form.append(htl.html`<style>

    /* Ensure that the sticky header always stays on top */
    .${scope} thead { position: relative; z-index: 2 }

    /* Hide the last column */
    .${scope} th:${nth},
    .${scope} td:${nth} { width: 0; padding: 0 }
    .${scope} th:${nth} { visibility: hidden }

    /* Inject the background color */
    .${scope} tr { position: relative }
    .${scope} td:${nth} div:after {
      opacity: ${colorOpacity};
      content: "";
      display: block;
      height: 100%;
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
      background-color: var(--row-color);
    }
  `);

  return form;
}

columns = ["stage_num", "number", "title", "stats", "stage_date", "editor", "inactive_for"]
reviewTable(filteredSorted,
  {
    colorColumn: "rowColor",
    issueNumColumn: "number",
    titleColumn: "title",
    columns: columns,
    height: 'auto',
    layout: 'auto',
    header: {
        stage_num: "Stage",
        number: "Number",
        title: "Title",
        stats: "Stats?",
        stage_date: "Stage date",
        inactive_for: "Inactive for",
    },
    format: {
        stage_num: s => s === -1 ? "(No stage)" : s,
    }
  }
)

Urgency of Reviews

Levels of urgency used in the previous table are coloured according to the following scheme:

urgencyDat = transpose(urgency).map(row => ({
    ...row,
    rowColor: row.urgency === 1 ? urgency_colours[0] :
        row.urgency === 2 ? urgency_colours[1] :
        row.urgency === 3 ? urgency_colours[2] :
        row.urgency === 4 ? urgency_colours[3] :
        row.urgency === 5 ? urgency_colours[4] : "transparent",
}));

colorTable(urgencyDat, {
    columns: ["urgency", "importance"],
    colorColumn: "rowColor",
})

Levels of urgency are calculated from the following expected times for each review stage:

stage	time (days)
0/Pre-submission	7
1/Editor Checks	7
2/Seeking Reviewers	14
3/Reviewer(s) Assigned	21
4/Review(s) in Awaiting Changes	21
5/Awaiting Reviewer(s) Response	21

Levels of urgency for each review are times taken for current stage as a multiple of those base times, with values rounded down to nearest integer. For example, a submission which has been undergoing 1\/Editor Checks for 17 days would have an urgency of floor(17/7) = 2. A submission which has been under review (stage 3\/Reviewer(s) Assigned) for 12 weeks would have an urgency of floor(12 * 7 / 21) = 4. These urgency levels then map on to the colour codes shown above.