Annotation de paires

d3 = require(await FileAttachment('/js/d3.min.js').url())

inputs = require(await FileAttachment('/js/inputs.min.js').url())

marked = require(await FileAttachment('/js/marked.min.js').url())

htl = require(await FileAttachment('/js/htl.min.js').url())

html`<div name="file-import">${viewof csvfile}</div>`

html`<div name="colonnes-print">${viewof columns_to_show}</div>`

// Now create the grid_two_dataframes template literal
grid_two_dataframes = await html`
  <div style="
    background: #fff;
    margin: 0;
    border: none;
    display: grid;
    width: ${screen.width};
    grid-template-areas: 
      'a b'
      'c c'
      'f d'
      'g g'
      'h h'
      'i i'
      'e e'
      ;
    grid-gap: 10px;
  ">
    <div name="a" style="grid-area: a; position: relative;">${viewof tt1}</div>
    <div name="b" style="grid-area: b; position: relative;">${viewof tt2}</div>
    <div name="c" style="grid-area: c; position: relative;">${viewof decision}</div>
    <div name="f" style="grid-area: f; position: relative;">${viewof text_input}</div>
    <div name="d" style="grid-area: d; position: relative;">${count_printed}</div>
    <div name="g" style="grid-area: g; position: relative;">${message_share}</div>
    <div name="h" style="grid-area: h; position: relative;">${progress}</div>
    <div name="i" style="grid-area: i; position: relative;">${message_final}</div>
    <div name="e" style="grid-area: e; position: relative;">${viewof download}</div>
  </div>
`;

message_share = {
  if (share < 10){
    return md`Vous avez annoté ${share}% des paires du fichier d'entrée`
  } else {
    return md`Bravo vous avez annoté ${share}% des paires du fichier d'entrée`
  }
}

progress = {
  const width = 360;
  const height = 20;
  const context = DOM.context2d(width, height);
  context.canvas.style.border = "solid 1px black";
  const i = width*(share/100);
  context.clearRect(0, 0, width, height);
  context.fillStyle = 'green'
  context.fillRect(0, 0, i, height);
  yield context.canvas;
}

message_final = {
  if (share === 100){
    return md`__Vous avez annoté l'ensemble de votre fichier 💪🎉__`
  } else {
    return md``
  }
}

md`${max_count} Annotation${max_count>1 ? 's' : ''}`

db = DuckDBClient.of({
  match : await csvfile.csv()
})

table_names = db.sql`SELECT column_name FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_NAME = 'match'`
column_names = table_names.flatMap(item => item.column_name)

df = db.sql`SELECT * FROM match`
df_query = db.query(
  `SELECT ${columns_to_show.map(l => l + "_query").join(', ')} FROM match`
)
df_match = db.query(
  `SELECT ${columns_to_show.map(l => l + "_match").join(', ')} FROM match`
)
n_rows_sql = db.sql`SELECT COUNT(*) AS COUNT FROM match`

n_rows = n_rows_sql[0]['COUNT']
max_count = Math.min(Number(n_rows),count)
current_row = Math.min(Number(n_rows)-1,count)

unique_columns_dup = column_names.map(columnName => columnName.replace("_query", "").replace("_match", ""));
unique_columns = Array.from(new Set(unique_columns_dup))

viewof csvfile = Inputs.file({label: md`__Fichier à annoter__ 📁 ([Exemple ici](https://raw.githubusercontent.com/linogaliana/serverless-annotation-tool/master/example.csv))`, accept: ".csv", required: true})

viewof columns_to_show = Inputs.checkbox(
  unique_columns,
  {label: "Colonnes à afficher", value: unique_columns, format: d => d.replace("_", " ").capitalize()})

share = Math.round(100*max_count/Number(n_rows))

viewof filename_input = Inputs.text(
    {
      label: html`<b>Nom du fichier pour l'export</b>📁`,
      placeholder: "annotations.json",
      value: "annotations.json"  
      }
)

function serialize (data) {
 let s = JSON.stringify(data);
 return new Blob([s], {type: "application/json"}) 
}

viewof download = DOM.download(serialize(x), filename_input.replace(".json", ""), "Sauvegarder les annotations 👇 dans un fichier")

viewof text_input = (count,
  Inputs.text(
    {label: html`<b>Raison de la décision</b>`,
    //disabled: decision == null,
    placeholder: "Un texte explicatif"})
)

decision_label = [
  {text: "Accepter 👍️", color: "green", decision: "Accepted"},
  {text: "Rejeter 👎️", color: "red", decision: "Rejected"},
  {text: "Indécis 🤷", color: "blue", decision: "Undecided"},
  null
]

viewof decision = (count, Inputs.radio(
  decision_label,
  {label: "Décision",
   format: x => (x == null) ? html`<span style="border-bottom: solid 2px blue; margin-bottom: -2px;">Décision à prendre 🤔` : html`<span style="text-transform: capitalize; border-bottom: solid 2px ${x.color}; margin-bottom: -2px;">${x.text}`,
   value: null
  }
))

viewof count = Inputs.button("Valider !")

viewof count_disabled = Inputs.button("Faire un choix pour pouvoir valider !", {disabled : true})

function reshape_row(row) {
  return Object.entries(row).map(([column, value]) => ({ column, value }));
}

function color_accepted(d) {
  const backgroundColor = d === "Accepted" ? "#5f9c5f" : "#fc4747";
  return html`<div style="background: ${backgroundColor};text-align:right;padding:2px 5px;">${d}</div>`;
}

function create_color_mapping(array_left, array_right) {
  const mapping = {};
  array_left.forEach((obj1, index) => {
    const obj2 = array_right[index];
    const key = obj1.value; // Use obj1.value as the key

    if (obj1.value === obj2.value) {
      mapping[key] = "#5f9c5f";
    } else {
      mapping[key] = "#fc4747";
    }
  });
  return mapping
}

function create_color_map(key, array) {
  const value = array[key];
  const backgroundColor = value ;
  return html`<div style="background: ${backgroundColor};text-align:right;padding:2px 5px;">${key}</div>`;
}
function create_variable_row(d){
  const d_nice = d.replace("_query", "").capitalize().replace("_", " ") ;
  return html`<b>${d_nice}</b>`;
}

function table_pairs(array, color_scale, header, columns, layout = "fixed") {
  console.log(array.length)
  const tt = Inputs.table(
  array,
    {
    format: {
      "value": d => create_color_map(d, color_scale),
      "column": d => create_variable_row(d)
      },
    header: header,
    columns: columns,
    rows: 18,
    layout: layout
    }
  ) ;
  return tt
}

Object.defineProperty(String.prototype, 'capitalize', {
  value: function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
  },
  enumerable: false
});

array1 = reshape_row(df_query[current_row])
array2 = reshape_row(df_match[current_row])

colors_data1 = create_color_mapping(array1, array2)
colors_data2 = create_color_mapping(array2, array1)

viewof tt1 = table_pairs(
  array1, colors_data1, 
  {"value": "Valeur observée", "column": "Variable d'intérêt"},
  ["column", "value"]
)

viewof tt2 = table_pairs(
  array2, colors_data2, 
   {"value": "Paire potentielle"},
   ["value"]
)

viewof final_table = Inputs.table(
  x,
  {format: {
      "similarity": d => color_accepted(d)
  }
  })

d = [];
function push_mutable(d){
  if (decision !== null) {
    if (d.some(element => element.count === current_row)){
      const index_replace = d.findIndex(element => element.count === current_row);
      d[index_replace] = d_row ;
    } else{
      d.push(d_row);
    }
    }
  return d ;
}
x = push_mutable(d)

d_row = {
  // Assuming `count` and `data_pairs` are already defined
  const newElement = { ...df[current_row] }; // Create a shallow copy of the original element

  if (decision !== null) {
    newElement.similarity = decision.decision; // Update the "field" property with the value of `decision.decision`
    newElement.justification = "no decision yet" ;
    newElement.count = current_row ;
  } else {
    newElement.count = current_row ;
    newElement.similarity = "no decision yet"; // Set the "field" property to "nothing" if `decision.decision` is null
    //newElement.justification = text_input ;
  }

  return newElement;
}

{
  if (x[current_row]) {
    x[current_row].justification = text_input ;
  }
}

count_printed = {
  // Define a variable to hold the content of the 'd' div
  let countDivContent;

  // Check if 'decision' is null or not and set the 'countDivContent' accordingly
  if (decision === null) {
    countDivContent = viewof count_disabled;
  } else {
    countDivContent = viewof count;
  }
  return countDivContent
}

count_hidden = {
  // Define a variable to hold the content of the 'd' div
  let countDivContent;

  // Check if 'decision' is null or not and set the 'countDivContent' accordingly
  if (decision === null) {
    countDivContent = viewof count;
  } else {
    countDivContent = viewof count_disabled;
  }
  return countDivContent
}

html`<div style="display: none;">${count_hidden}</div>`