var $ = go.GraphObject.make;  // for conciseness in defining templates
myDiagram =
  $(go.Diagram, "myDiagram",  // Diagram refers to its DIV HTML element by id
    {
});

// Add an event listener for the first draw of the diagram - not critical in this tiny case but worthwhile when many elements to be drawn
this.myDiagram.addDiagramListener("InitialLayoutCompleted",
function (e) {
  runTests()
})

// All cells are made from this tempalte
var cellTemplate =   
    $(go.Panel, go.Panel.Auto, { margin: 0, stretch: go.GraphObject.Fill }
      , new go.Binding("row", "row")
      , new go.Binding("column", "column")
      
      // shape is to give a pleasing background to the cells with an odd-even bcolor applied
      , $(go.Shape, {strokeWidth: 0, stretch: go.GraphObject.Fill, width: 50, height: 50}
          ,new go.Binding("fill", "itemIndex",  // for fun and exploring use of itemIndex
                          function(i) { return (i%2 == 0) ? "lightgreen" : "lightyellow"; }).ofObject()                            
         )  // end shape
      , $(go.TextBlock, { font: "normal 10pt sans-serif", textAlign: "center"}
          , new go.Binding("text", "id")
         ) // end textblock
     );// end cell

// This is the node that is the container of the grid of cells. When searching for cells we search from here to find
// the panel.Table then iterate the panels (cells) inside that.
var tableTemplate = 
    $(go.Node, "Auto",
      $(go.Shape, { fill: "white", stroke: "gray", strokeWidth: 0.5 })
      , $(go.Panel, "Table"
          , {  
      name: 'LIST'
      , defaultRowSeparatorStroke: "gray"
      , defaultRowSeparatorStrokeWidth: 0.5
      , defaultColumnSeparatorStroke: "gray"
      , defaultColumnSeparatorStrokeWidth: 0.5
      , defaultAlignment: go.Spot.MiddleLeft 
      , defaultSeparatorPadding: 0
      , padding: 0 // around table
      , itemTemplate: cellTemplate} // points to above template for use in cells

          ,new go.Binding('itemArray', 'cells')  ) // tells gojs make one cell part for each model.node.cells[] member
     )// end table template

var templmap=new go.Map("string", go.Node);
templmap.add("table", tableTemplate);    
myDiagram.nodeTemplateMap=templmap    // link the map to the diagram

var nodeDataArray=[
  { key: "table1"
   , category: "table"
   , id: 'table'
   , name: 'table'
   , cells: [] 
  }
];

// Add 10k cells into the model - faster when done as a JS object, likely because there is no change-monitor processing overhead 
//  as there is when using the gojs addArrayItem() function (which is sensible)
    for (var i = 0; i < 100; i=i+1) {
      for (var j = 0; j < 100; j=j+1) {

        var newCell =   {id: 'c' + i + '-' + j, row: i, column: j, name: 'c' + i + '-' + j}
        nodeDataArray[0].cells.push(newCell)      

      }
    }

myDiagram.model=new go.GraphLinksModel(nodeDataArray, []) // finally hand the initial node info to the diagram

// This function called after diagram drawn first time via 'InitialLayoutCompleted' listener
function runTests() {
  
  console.clear()
 
  // find the table node
  var tbl = findTable("table1", "LIST")
  console.log('table=' + tbl)
  
// read the cell itemArray to make an associative map.
  console.log("Map grid panels into assoc array")
  var map=[]
  var a =   tbl.itemArray
  console.log('cell cnt=' + a.length)
    for (var i = 0; i < a.length; i=i+1) {
      var c = a[i]
      map[c.id] = c     
    }
    
// finally use the map to find a couple of specific nodes with row & cell coords, just to prove that we can.
  var mappedCell=map['c2-2']
  console.log('c2-2=' + mappedCell.id + ' at (' + mappedCell.row + ', ' + mappedCell.column +')')

  var mappedCell=map['c81-89']
  console.log('c81-89=' + mappedCell.id + ' at (' + mappedCell.row + ', ' + mappedCell.column +')')
    
}

// function to get the part that contains the cells of a table.
  function findTable(nodeName, partName) {
    var nd = myDiagram.findPartForKey(nodeName)
    var tbl = nd.findObject(partName)
    return tbl
  }