Choix entre plusieurs algorithmes

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

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

function calculateTablesWidth() {
  // Retrieve the width of each table
  const table1Width = document.getElementById('table1').offsetWidth;
  const table2Width = document.getElementById('table2').offsetWidth;
  const table3Width = document.getElementById('table3').offsetWidth;

  // Sum the widths of all tables
  const tablesWidth = table1Width + table2Width + table3Width;
  
  // Log the width to the console or perform other actions with it
  console.log('Combined tables width:', tablesWidth);
  
  // Return the value in case it needs to be used where the function was called
  return tablesWidth;
}

grid_two_dataframes = await html`
<div style="
              background: #fff;
              margin: 0;
              border: none ;
              display: grid;
              max-width: 1000px; /* Set a max-width to control the spread */
              grid-template-areas: 
                'a b c'
                'g g g'
                'f f f'
                'd d d'
                'e e e'
                ;
              grid-gap: 5px; /* Reduced gap */
            ">
              <div name="a" style="grid-area: a; position: relative;" id="table1">${viewof tt1}</div>
              <div name="b" style="grid-area: b; position: relative;" id="table2">${viewof tt2}</div>
              <div name="c" style="grid-area: c; position: relative;" id="table3">${viewof tt3}</div>
              <div name="g" style="grid-area: g; 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;" id = "button-validate">${count_printed}</div>
</div>
`

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

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

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' : ''}`

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 n°1 👍️", color: "green", decision: "Accepted 1"},
  {text: "Accepter n°2 👍️", color: "green", decision: "Accepted 2"},
  {text: "Accepter les deux 👍️👍️", color: "green", decision: "Both accepted"},
  {text: "Rejeter les deux 👎️", 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
  }
))

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_match1[current_row])
array3 = reshape_row(df_match2[current_row])

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

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

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

viewof tt3 = table_pairs(
  array3, colors_data3, 
   {"value": "Paire potentielle n°2"},
   ["value"]
)

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")

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_match1 = db.query(
  `SELECT ${columns_to_show.map(l => l + "_match1").join(', ')} FROM match`
)
df_match2 = db.query(
  `SELECT ${columns_to_show.map(l => l + "_match2").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("_match1", "").replace("_match2", ""));
unique_columns = Array.from(new Set(unique_columns_dup))

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

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

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

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 ;
  }
}

viewof final_table = Inputs.table(
  x
)

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>`