index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8" />

        <script src="assets/liquidmetal.js" type="text/javascript"></script>
        <script src="assets/vue.js"></script>

        <!-- Element UI -->
        <script src="assets/index.js"></script>
        <link rel="stylesheet" href="assets/index.css">
        
      
    </head>
<body>

      <div id="app">
    
        <el-table
          stripe
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="journal"
            label="Journal"
            >
          </el-table-column>
          <el-table-column
            prop="ifs"
            label="IF"
            width="100"
            >
          </el-table-column>
          <!-- <el-table-column
            prop = 'score'
            label = 'Score'>
          </el-table-column> -->
        </el-table>

      </div>
     

</body>

<script>

// function comparef(x, y) {
//     return y['score'] - x['score']
// }

var tb = new Vue({
                el: '#app',
                data: {
                  tableData: [{}]
                }
            })

// with open("./if2023.json", 'w') as handle:
//   json.dump(tab.to_json(orient='records'), handle)


var if_data = window.readjson();
utools.onPluginEnter(({ code, type, payload }) => {
        utools.setExpendHeight(0);
        utools.setSubInput(({
            text
        }) => {

            if(text == '') {
              utools.setExpendHeight(0);
            }
            else {
              utools.setExpendHeight(500);
              for(item of if_data) {
                item['score'] = LiquidMetal.score( item['journal'], text )
              }
              if_data.sort((a, b) =>  a['score'] - b['score'])
              if_data.reverse()
              tb.tableData = if_data.slice(0, 9)
            }
            
           
        }, "Input journal name" );  
});


</script>
</body>
</html>