Json object to table view with filters

[amirrr]

Our objects representation of a features within a paper looks like the sample provided below. The challenge is to provide a table view for these with a filter on parents. The filter works based on which of the parents within this object are selected (expanded). Right now we are doing this if nested if statements which greatly limits our flexibility toward changing the structure of the response object.

This is an example of how we handle this object, we check for the expanded parents and set a list headers for them:

  if (expandedExperiment) {
    if (expandedCondition) {
      const headers = expandedBehavior
        ? [...defaultHeaders, ...experimentHeaders, ...conditionHeaders, ...behaviorHeaders]
        : [...defaultHeaders, ...experimentHeaders, ...conditionHeaders, 'behaviors']

Then show set the data for a row on table by looping through them:

(data.experiments.flatMap((experiment, exp_index) =>
            experiment.conditions.flatMap((condition, con_index) =>
              condition.behaviors.map((behavior, beh_index) => ({
                id: `${experiment_id}-${exp_index}-${con_index}-${beh_index}`,
                file_name: data.status === 'inprogress' ? data.task_id : data.file_name,
                status: data.status,
                experiment_name: experiment.name,
                experiment_description: experiment.description,
                participant_source: experiment.participant_source,
                participant_source_category: experiment.participant_source_category,
                units_randomized: experiment.units_randomized,
                units_analyzed: experiment.units_analyzed,
                sample_size_randomized: experiment.sample_size_randomized,
                sample_size_analyzed: experiment.sample_size_analyzed,
                sample_size_notes: experiment.sample_size_notes,
                adults: experiment.adults,
                age_mean: experiment.age_mean,
                age_sd: experiment.age_sd,
                female_perc: experiment.female_perc,
                male_perc: experiment.male_perc,
                gender_other: experiment.gender_other,
                language: experiment.language,
                language_secondary: experiment.language_secondary,
                compensation: experiment.compensation,
                demographics_conditions: experiment.demographics_conditions,
                population_other: experiment.population_other,
                condition_name: condition.name,
                condition_description: condition.description,
                condition_type: condition.type,
                condition_message: condition.message,
                behavior_name: behavior.name,
                behavior_description: behavior.description,
                behavior_priority: behavior.priority,
                behavior_focal: behavior.focal,
              })),
            ),
          )

The code is in client/src/components/View/TableView/hooks/data-handler.ts

Acceptance criteria:

• No hard column names for generating a row for our data table
• Given the response object and list of parents like [{name: 'condition', expanded: false},{name: 'behavior', expanded: true}] we should be able to get an array of headers and an array of objects where the keys of the objects is the same to headers (data for a table essentially) so we can display them.

An example of data object:

papers_results = [
  {
    paper: [
      {
        name: "whiting-watts-2024-a-framework-for-quantifying-individual-and-collective-common-sense.pdf",
        paper_id: "doi/something",
        authors: ["Mark Whiting", "Duncan Watts"],
        experiment: [
          {
            adults: "adults",
            age_mean: "--",
            age_sd: "--",
            compensation: "Paid via Amazon Mechanical Turk",
            demographics_condition: "N",
            description:
              "This study investigates the properties and commonness of common sense knowledge by analyzing human agreement on a range of claims from various sources. It aims to quantify the extent to which individual claims are perceived as commonsensical and how much these perceptions are shared among people.",
            name: "Quantifying Common Sense",
            female_perc: "--",
            gender_other: "--",
            language: "English",
            language_secondary: "NA",
            male_perc: "--",
            participant_source: "Amazon Mechanical Turk",
            participant_source_category: "online panel",
            population_other:
              "Participants are diverse in demographic and socioeconomic status.",
            sample_size_analyzed: 4407,
            sample_size_notes:
              "Each of the 4407 claims was rated by an average of 23.44 individuals out of 2046 participants.",
            sample_size_randomized: 2046,
            units_analyzed: "claims",
            units_randomized: "claims",
            condition: [
              {
                behavior: [
                  {
                    description:
                      "Participants rate their agreement with the claim.",
                    focal: "focal",
                    name: "Agreement with Claim",
                    priority: "primary"
                  },
                  {
                    description: "None.",
                    focal: "not",
                    name: "I don't know",
                    priority: "secondary"
                  }
                ],
                description:
                  "Claims generated through direct human input based on specific prompts.",
                message: "Yes",
                name: "Human-Generated Claims",
                type: "treatment"
              },
              {
                behavior: [
                  {
                    description:
                      "Participants rate their agreement with the claim.",
                    focal: "focal",
                    name: "Agreement with Claim",
                    priority: "primary"
                  }
                ],
                description:
                  "Claims generated by artificial intelligence models such as ConceptNet and Atomic.",
                message: "Yes",
                name: "AI-Generated Claims",
                type: "treatment"
              },
              {
                behavior: [
                  {
                    description:
                      "Participants rate their agreement with the claim.",
                    focal: "focal",
                    name: "Agreement with Claim",
                    priority: "primary"
                  }
                ],
                description:
                  "Claims extracted from natural text sources such as news articles, political emails, and aphorisms.",
                message: "Yes",
                name: "Claims in Natural Text",
                type: "treatment"
              }
            ]
          }
        ]
      }
    ]
  }
]