Unable to render color to Field when condition is met

[tomsterkw]

Hello and thank you for the review of my issue.

I am attempting to color a field/apply an icon if the field meets a certain criteria. For example, if the field is labeled FILESIZE and the value is > 100. However, I receive no changes to the rendered table.

I've created the following .css/.js files in the proper directory (apps/appname/appserver/static) but my logic does not appear to be properly met. I've tried bumping/restarting splunk which makes me believe my coding needs a little work.
Please see the appropriate search below:

Dashboard:

<dashboard script="TOMtest4js.js" stylesheet="TOMtest3css.css">
<label>TomDash3</label>
<row>
<panel>
  <table id="highlight">
    <search>
      <query>| makeresults | eval FILESIZE = 10000</query>
      <earliest>-24h@h</earliest>
      <latest>now</latest>
    </search>
    <option name="drilldown">none</option>
  </table>
</panel>
</row>
</dashboard>

TOMtest4js.js

require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {

    //Row coloring example with custom, client-side range interpretation

    var RangeMapIconRenderer = TableView.BaseCellRenderer.extend({
            canRender: function(cell) {
            // Enable this custom cell renderer for both active_hist_searches and realtime
            return cell.field === 'FILESIZE';
    },
    render: function($td, cell) {
            // Add a class to the cell based on the returned value
            var value = parseFloat(cell.value);
            var icon = 'error';
            var range = 'severe';

            // Apply interpretation for string of test
                    if (value > 100) {
                    icon = "check-circle";
                    range = "low";
                    }
                    else {
                    icon = "alert";
                    range = "elevated";
                    }
                    $td.addClass('icon').html(_.template('<%- value %> <i class="icon-<%-icon%> <%- range %>" title="<%- range %>"></i>', {
                            icon: icon,
                            range: range
                            value: value.toFixed(2)
                    }));
                    $td.addClass('numeric');
    }
});
mvc.Components.get('highlight').getVisualization(function(tableView) {
                    tableView.addCellRenderer(new RangeMapIconRenderer());
                    });
});

TOMtest3css.css

td.icon i {
    font-size: 22px;
}
td.icon .severe {
    color: red;
}
td.icon .elevated {
    color: orangered;
}
td.icon .low {
    color: #006400;
}