<div dir="ltr">I was testing the last big improvements that Rahul and Ed have been working on:<div><ul><li>Changing the bar chart from google charts to d3<br></li><li>Changing the array of images from an array of single img and areas as div, to a multilayered png.<br>
</li></ul><div><font size="4"><b>From google charts to d3</b><br></font></div><div>It&#39;s a great improvement, that will help us build more interactive visualizations: by newspaper, stack bar charts...</div><div>I listed some of the things that need to be fixed at <a href="https://github.com/numeroteca/pageonex/issues?milestone=10&amp;page=1&amp;state=open">https://github.com/numeroteca/pageonex/issues?milestone=10&amp;page=1&amp;state=open</a></div>
<div><br></div><div><font size="4"><b>From an array of single img and areas as div, to a multilayered png</b><br></font></div><div>In the former version, there were too many http requests (too many big images) and which caused  a slow behavior in the browser. I made some tests and found a bunch of things to solve that I list bellow. I&#39;ll create issues as well, tomorrow.</div>
<div><br></div><div>Over all it looks great, and a great improvement in speed.</div><div><br></div><div>List of bugs and fixes in the display view:</div><div><div><br></div><div>+ PRIORITY <b>Areas show overlaped</b>, though in the coding view they are not:</div>
<div>Example: Here the layer: <a href="http://pageonex.com/assets/threads/40/42/code_87-fc41d8657f1ecd1e5f272a5f3f1695cc.png">http://pageonex.com/assets/threads/40/42/code_87-fc41d8657f1ecd1e5f272a5f3f1695cc.png</a> in this thread <a href="http://pageonex.com/matrushka/gezi-parki-protests-in-turkish-newspapers/">http://pageonex.com/matrushka/gezi-parki-protests-in-turkish-newspapers/</a> The day 6/04 Turkey - Millyet <a href="http://pageonex.com/matrushka/gezi-parki-protests-in-turkish-newspapers/coding/?i=milliyet-2013-06-04">http://pageonex.com/matrushka/gezi-parki-protests-in-turkish-newspapers/coding/?i=milliyet-2013-06-04</a> (among others) is displayed wrongly in the graph.</div>
<div><br></div><div>Other layers with wrong overlaping of areas: </div><div><a href="http://dev.pageonex.com/assets/threads/2/7/code_12.png">http://dev.pageonex.com/assets/threads/2/7/code_12.png</a></div><div><a href="http://pageonex.com/assets/threads/40/42/code_87-fc41d8657f1ecd1e5f272a5f3f1695cc.png">http://pageonex.com/assets/threads/40/42/code_87-fc41d8657f1ecd1e5f272a5f3f1695cc.png</a></div>
<div><a href="http://pageonex.com/assets/threads/2/41/code_86-d92bdb3202ad158f598aa269fd384498.png">http://pageonex.com/assets/threads/2/41/code_86-d92bdb3202ad158f598aa269fd384498.png</a></div><div><br></div><div style>I am not able to find a pattern.</div>
<div><br></div><div><div>+ PRIORITY The <b>transparent png</b> <a href="http://pageonex.com/assets/transparent.png">http://pageonex.com/assets/transparent.png</a> used to put the map of links to the different front pages had a grey pixel. It created a grey aea in the top left of the array of images. I removed it 663849a, and solved it in dev. However theimage in production is not <a href="http://pageonex.com/assets/transparent.png">http://pageonex.com/assets/transparent.png</a> but <a href="http://pageonex.com/assets/transparent-c86f133e8e3505b72c79262e6b82bcb6.png">http://pageonex.com/assets/transparent-c86f133e8e3505b72c79262e6b82bcb6.png</a></div>
<div><br></div><div>+ PRIORITY As it is mentioned in the commented code: <b>rows and columns need padding</b>. Now all newspaper are displayed without a pixel of separation. It will need to be variable: a pixel or 3 for long threads, 5-10 for short ones.</div>
</div><div><br></div><div>+ <b>Uncoded images should render</b> with less more opacity, to show that they are not coded. With the new png version all lookthe same. Look at the example of the Sabah newspaper: <a href="https://twitter.com/numeroteca/status/342049105192837120/photo/1">https://twitter.com/numeroteca/status/342049105192837120/photo/1</a></div>
<div>I think it is a good practice to help coder know what has not yet been coded. It was working well.</div><div><br></div><div>+ <b>Missing images</b>: when an image could not be scraped they are displayed as white (not the former 404 message). Despite, we can still make those white spaces linkable. It is useful when user want to request that image again from the coding view.</div>
<div><br></div><div>+ <b>Background with all the newspapers&#39; grid image too big</b>: I downloaded the image and it weighted 5.5Mb. When I resaved it (recompressed?) again as png it was 2.2Mb (in another case it went from 3.2Mb to 1.2Mb), used compression 9 in gimp. Any way to make them be a bit lighter?</div>
<div><br></div><div>+ In <b>some &#39;old&#39; threads are broken</b>: the display view didn&#39;t work:</div><div>Among others it happened in these ones:</div><div>  <a href="http://pageonex.com/numeroteca/test-open-thread-for-media-lab-festival/">http://pageonex.com/numeroteca/test-open-thread-for-media-lab-festival/</a></div>
<div>  <a href="http://pageonex.com/numeroteca/corrupcion-spain-enero-2013/">http://pageonex.com/numeroteca/corrupcion-spain-enero-2013/</a></div><div>  <a href="http://pageonex.com/Sasha_Costanza-Chock/drop-the-i-word/">http://pageonex.com/Sasha_Costanza-Chock/drop-the-i-word/</a></div>
<div><br></div><div>and they all gave the same error:</div><div><font face="courier new, monospace"><span class="" style="white-space:pre">        </span>Processing by CodingController#display as HTML</font></div><div><font face="courier new, monospace"><span class="" style="white-space:pre">        </span>  Parameters: {&quot;username&quot;=&gt;&quot;numeroteca&quot;, &quot;thread_name&quot;=&gt;&quot;test-open-thread-for-media-lab-festival&quot;}</font></div>
<div><font face="courier new, monospace"><span class="" style="white-space:pre">        </span>  Rendered coding/display.html.erb within layouts/application (5.1ms)</font></div><div><font face="courier new, monospace"><span class="" style="white-space:pre">        </span>Completed 500 Internal Server Error in 10ms</font></div>
<div><font face="courier new, monospace"><br></font></div><div><font face="courier new, monospace"><span class="" style="white-space:pre">        </span>ActionView::Template::Error (undefined method `[]&#39; for nil:NilClass):</font></div>
<div><font face="courier new, monospace"><span class="" style="white-space:pre">        </span>    102: &lt;div class=&quot;row&quot;&gt;</font></div><div><font face="courier new, monospace"><span class="" style="white-space:pre">        </span>    103: <span class="" style="white-space:pre">        </span>&lt;div class=&quot;span2&quot;&gt;</font></div>
<div><font face="courier new, monospace"><span class="" style="white-space:pre">        </span>    104: <span class="" style="white-space:pre">                </span>&lt;ul class=&#39;thread-coposite-labels&#39;&gt;</font></div><div><font face="courier new, monospace"><span class="" style="white-space:pre">        </span>    105: <span class="" style="white-space:pre">                        </span>&lt;% @img_map_info[&#39;row_info&#39;].each do |media_id,info| %&gt;</font></div>
<div><font face="courier new, monospace"><span class="" style="white-space:pre">        </span>    106: <span class="" style="white-space:pre">                                </span>&lt;li style=&quot;height:&lt;%=info[&#39;height&#39;]%&gt;px&quot;&gt;&lt;%=info[&#39;name&#39;]%&gt;&lt;/li&gt;</font></div>
<div><font face="courier new, monospace"><span class="" style="white-space:pre">        </span>    107: <span class="" style="white-space:pre">                        </span>&lt;% end %&gt;</font></div><div><font face="courier new, monospace"><span class="" style="white-space:pre">        </span>    108: <span class="" style="white-space:pre">                </span>&lt;/ul&gt;</font></div>
<div><font face="courier new, monospace"><span class="" style="white-space:pre">        </span>  app/views/coding/display.html.erb:105:in `_app_views_coding_display_html_erb___3013141180728199937_28041120&#39;</font></div><div><br>
</div><div>I found out that editing them and saving solved the problem. Why is this happening? Maybe it happens only to the ones that were copied from the development deployment?</div><div><br></div><div><br></div><div>+ <b>Some big threads give the following error</b>, when rying to show i the display view, like this one: <a href="http://pageonex.com/Sasha_Costanza-Chock/drop-the-i-word/">http://pageonex.com/Sasha_Costanza-Chock/drop-the-i-word/</a> </div>
<div><font face="courier new, monospace"><br></font></div><div><font face="courier new, monospace"><span class="" style="white-space:pre">        </span>Internal Server Error</font></div><div><font face="courier new, monospace"><span class="" style="white-space:pre">        </span>The server encountered an internal error or misconfiguration and was unable to complete your request.</font></div>
<div><font face="courier new, monospace"><span class="" style="white-space:pre">        </span>Please contact the server administrator, [no address given] and inform them of the time the error occurred, and anything you might have done that may have caused the error.</font></div>
<div><font face="courier new, monospace"><span class="" style="white-space:pre">        </span>More information about this error may be available in the server error log.</font></div><div><font face="courier new, monospace"><span class="" style="white-space:pre">        </span>Apache/2.2.22 (Ubuntu) Server at <a href="http://pageonex.com">pageonex.com</a> Port 80</font></div>
<div><br></div></div></div></div>