Intercept frus-history/appendix-a, replace with javascript chart

On https://history.state.gov/historicaldocuments/frus-history/appendix-a, we intercept the request for this "appendix-a" page, and supply instead a javascript-based dynamic chart that we built with dygraph (see screenshot below).

Currently, hsg-shell dutifully shows the TEI content, albeit with a wider-than-needed image of the charts:

http://localhost:8080/exist/apps/hsg-shell/historicaldocuments/frus-history/appendix-a

I've pasted in the code we use on hsg that drives this section; the relevant HTML and JSON files are in https://github.com/HistoryAtState/frus-history/tree/master/frus-production-chart.

Not sure what the best way is to override the default behavior?

else if ($docs:id = 'appendix-a') then
    let $chart-intro := doc('/db/history/data/historicaldocuments/frus-production-chart-intro.html')
    let $chart-data := util:binary-to-string(util:binary-doc('/db/history/data/historicaldocuments/frus-production-chart-data.json'))
    let $chart-parameters := util:binary-to-string(util:binary-doc('/db/history/data/historicaldocuments/frus-production-chart-parameters.json'))
    return
    <div xmlns="http://www.w3.org/1999/xhtml">
        <h2>{$book-title}</h2>
        {$nav}
        <style type="text/css">
            .dygraph-title {{
                font-size: 75%;
                color: #606060;
                margin-bottom: 2em;
            }}
            em {{
                font-weight: inherit;
                font-style: oblique;
            }}
            .dygraph-ylabel {{
                color: rgb(155,17,30);
            }}
            .dygraph-y2label {{
                color: rgb(73, 102, 144);
            }}
            .dygraph-axis-label-x {{
                color: rgb(73, 102, 144);
            }}
            .dygraph-axis-label-y {{
                color: rgb(155,17,30);
            }}
            .dygraph-axis-label-y2 {{
                color: rgb(73, 102, 144);
            }}
            .dygraph-legend {{
                margin-top: 10px;
                }}
            }}
        </style>
        <div class="bordered" style="margin-bottom: 1em">
            <div id="graph" style="width: 100%; height: 400px"/>
            <div style="margin-top: 1em; margin-left: 1em">
                <p style="margin-bottom: 0">Select Datasets to Display Above:<br/>
                    <input type="checkbox" id="0" checked="checked" onClick="change(this)"/>
                    <label for="0" style="font-weight: normal; color: inherit;">Annual <em>FRUS</em>
                        Production</label><br/>
                    <input type="checkbox" id="1" checked="checked" onClick="change(this)"/>
                    <label for="1" style="font-weight: normal; color: inherit;">Average <em>FRUS</em>
                        Lag</label><br/>
                    <input type="checkbox" id="2" onClick="change(this)"/>
                    <label for="2" style="font-weight: normal; color: inherit;">Average Regular
                            <em>FRUS</em> Lag</label>
                </p>
            </div>
        </div>
        {$chart-intro}
        <!--[if IE]><script type="text/javascript" src="//s3.amazonaws.com/static.history.state.gov/js/excanvas.compiled.js"></script><![endif]-->
        <script type="text/javascript" src="{concat($style:STATIC-FILE-PATH, '/js/dygraph-combined.js')}"></script>
        <script type="text/javascript">
            setStatus();
            function setStatus() {{
                document.getElementById("visibility").innerHTML =
                    g.visibility().toString();
            }}
            function change(el) {{
                g.setVisibility(parseInt(el.id), el.checked);
                setStatus();
            }}
        </script>
        <script type="text/javascript">
            g = new Dygraph(document.getElementById("graph"),{$chart-data},{$chart-parameters});
        </script>
        {$nav}
    </div>

HistoryAtState / hsg-shell

Intercept frus-history/appendix-a, replace with javascript chart #155