How to use Table Selection in OJS to generate subset plots/tables?

[alexjj]

Description

I have a table which I want to select a row and then subsequent plots (a table and eventually a map) get updated with data associated with that row.

I was looking at the documentation on ojs website on tables. It's using the penguins data as an example and offers this line underneath the table to define a variable based upon the selection:

const selection = view(Inputs.table(penguins, {required: false}));

However, when I use the same syntax, the rendered page shows a syntax error with this line.

This is my current code:

awardsData = FileAttachment("sota_awards_summary.json").json();

viewof awardsfilter = Inputs.search(awardsData, {placeholder: "Search Callsign", autocomplete: true})

Inputs.table(awardsfilter, {
      columns: [
        "Callsign",
        "SummitsActivated",
        "Award",
        "AwardDate"
      ],
      header: {
        Callsign: "Operator",
        SummitsActivated: "Total Summits Activated",
        Award: "Highest Award Achieved",
        AwardDate: "Date of Award"
      },
      sort: "SummitsActivated", reverse: true,
      multiple: false
})

My JSON file has further data which I wish to display but right now I'm just trying to get the filter to work. thanks,

[mcanouil]

Could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? The goal is to make it as easy as possible for us to recreate your problem so that we can fix it: please help us help you! Thanks.

Did your code actually works on Observable?

Note that this discussion board is not about Observable, so if your code does not work on Observable, you are not in the right place to ask support about it.

---

You can share a self-contained "working" (reproducible) Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).
See https://quarto.org/bug-reports.html#small-is-beautiful-aim-for-a-single-document-with-10-lines.

If you have multiple files (and if it is absolutely required to have multiple files), please share as a Git repository.

R	Python
````qmd --- title: "Reproducible Quarto Document" format: html engine: knitr --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{r} x <- c(1, 2, 3, 4, 5) y <- c(1, 4, 9, 16, 25) plot(x, y) ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````	````qmd --- title: "Reproducible Quarto Document" format: html engine: jupyter --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{python} import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y = [1, 4, 9, 16, 25] plt.plot(x, y) plt.show() ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````

Additionally and if not already given, please share the output of quarto check within a code blocks (i.e., using three backticks ```txt), see https://quarto.org/bug-reports.html#check.

[alexjj]

Here's a small example. I've added inline data at the start, this would be replaced with FileAttachment loading the whole JSON file.

To give context on what I'm trying to do -

I want a table with a search box showing the data but not the RemainingSummits data - as I've written below. Then I want to select one row from this table, and then the table below (or ideally a leaflet map - hence the lat/long data) would show a list of all the summits. I might change it from a table to a markdown list etc. but for now it's referencing that selected row from the table.

## Data

```{ojs}
awardsData = [
  {
    "Callsign": "GM4TOE/P",
    "SummitsActivated": "77",
    "Award": "Osprey Outlander",
    "AwardDate": "2011-05-01 00:00:00",
    "RemainingSummits": [
      {
        "summitCode": "GM/CS-031",
        "latitude": 56.86096573,
        "longitude": -3.779633999,
        "points": "6"
      },
      {
        "summitCode": "GM/CS-045",
        "latitude": 56.91612625,
        "longitude": -3.860340118,
        "points": "6"
      },
      {
        "summitCode": "GM/CS-051",
        "latitude": 56.86094666,
        "longitude": -3.838457108,
        "points": "6"
      }
    ]
  },
  {
    "Callsign": "MM1EYO/P",
    "SummitsActivated": "3",
    "Award": "Heather Hopper",
    "AwardDate": "2011-04-19 00:00:00",
    "RemainingSummits": [
      {
        "summitCode": "GM/ES-003",
        "latitude": 57.05440521,
        "longitude": -3.710773945,
        "points": "10"
      },
      {
        "summitCode": "GM/ES-025",
        "latitude": 57.02741623,
        "longitude": -3.43916297,
        "points": "4"
      },
      {
        "summitCode": "GM/CS-091",
        "latitude": 57.33944321,
        "longitude": -3.843278885,
        "points": "2"
      }
    ]
  },
  {
    "Callsign": "MM1EYP/P",
    "SummitsActivated": "4",
    "Award": "Heather Hopper",
    "AwardDate": "2010-08-26 00:00:00",
    "RemainingSummits": [
      {
        "summitCode": "GM/ES-003",
        "latitude": 57.05440521,
        "longitude": -3.710773945,
        "points": "10"
      },
      {
        "summitCode": "GM/ES-025",
        "latitude": 57.02741623,
        "longitude": -3.43916297,
        "points": "4"
      },
      {
        "summitCode": "GM/CS-091",
        "latitude": 57.33944321,
        "longitude": -3.843278885,
        "points": "2"
      }
    ]
  }
];
```


## First table

```{ojs}
// awardsData = FileAttachment("sota_awards_summary.json").json();

viewof awardsfilter = Inputs.search(awardsData, {placeholder: "Search Callsign", autocomplete: true})

Inputs.table(awardsfilter, {
      columns: [
        "Callsign",
        "SummitsActivated",
        "Award",
        "AwardDate"
      ],
      header: {
        Callsign: "Operator",
        SummitsActivated: "Total Summits Activated",
        Award: "Highest Award Achieved",
        AwardDate: "Date of Award"
      },
      sort: "SummitsActivated", reverse: true,
      multiple: false
})

// Code from Observable docs, but gives a syntax error on `const`
const selectedAwardData = view(Inputs.table(awardsfilter, {required: false}));
```

## Second table

```{ojs}

// Not verified this code works as cannot get the select data to work. Might not work due to JSON structure? but I can figure that out later.

Inputs.table(selectedAwardData.RemainingSummits, {
      columns: [
        "summitCode",
        "latitude",
        "longitude",
        "points"
      ],
      header: {
        summitCode: "Summit Code",
        latitude: "Latitude",
        longitude: "Longitude",
        points: "Points"
      },
      sort: "points",
      reverse: true
    })
```

My comment on Observable is because the quarto docs link to the Observable docs for how to use ojs, I've not tried it on Observable platform.

I do wonder if I'm missing some basic understanding of the structure of using ojs in Quarto, e.g. does everything in a cell need to be in a single object literal etc. and that's why there are errors.

Thanks for your time.

[mcanouil]

I'm afraid you need to test your code and ensure it actually works alone.
If it does not, then there is nothing Quarto can do about it.

Note that I don't think you can use const at the top level.
Copy/pasting code from documentation without knowledge of it should not be done.
You should understand the code you want to use and more generally the framework https://observablehq.com/documentation/ and https://quarto.org/docs/interactive/ojs/.

(I'm no Observable expert, I only looked at the documentation in the past)

Input

Output

Code --- title: "Quarto Playground" format: html --- ```{ojs} //| echo: false awardsData = [ { "Callsign": "GM4TOE/P", "SummitsActivated": "77", "Award": "Osprey Outlander", "AwardDate": "2011-05-01 00:00:00", "RemainingSummits": [ { "summitCode": "GM/CS-031", "latitude": 56.86096573, "longitude": -3.779633999, "points": "6" }, { "summitCode": "GM/CS-045", "latitude": 56.91612625, "longitude": -3.860340118, "points": "6" }, { "summitCode": "GM/CS-051", "latitude": 56.86094666, "longitude": -3.838457108, "points": "6" } ] }, { "Callsign": "MM1EYO/P", "SummitsActivated": "3", "Award": "Heather Hopper", "AwardDate": "2011-04-19 00:00:00", "RemainingSummits": [ { "summitCode": "GM/ES-003", "latitude": 57.05440521, "longitude": -3.710773945, "points": "10" }, { "summitCode": "GM/ES-025", "latitude": 57.02741623, "longitude": -3.43916297, "points": "4" }, { "summitCode": "GM/CS-091", "latitude": 57.33944321, "longitude": -3.843278885, "points": "2" } ] }, { "Callsign": "MM1EYP/P", "SummitsActivated": "4", "Award": "Heather Hopper", "AwardDate": "2010-08-26 00:00:00", "RemainingSummits": [ { "summitCode": "GM/ES-003", "latitude": 57.05440521, "longitude": -3.710773945, "points": "10" }, { "summitCode": "GM/ES-025", "latitude": 57.02741623, "longitude": -3.43916297, "points": "4" }, { "summitCode": "GM/CS-091", "latitude": 57.33944321, "longitude": -3.843278885, "points": "2" } ] } ]; ``` ## First table ```{ojs} viewof awardsfilter = Inputs.search(awardsData, {placeholder: "Search Callsign", autocomplete: true}) Inputs.table(awardsfilter, { columns: [ "Callsign", "SummitsActivated", "Award", "AwardDate" ], header: { Callsign: "Operator", SummitsActivated: "Total Summits Activated", Award: "Highest Award Achieved", AwardDate: "Date of Award" }, sort: "SummitsActivated", reverse: true, multiple: false }) ``` ## Second table ```{ojs} Inputs.table(awardsfilter, {required: false}) ```