This is the copy of the final project report for UW Math 480b:
Programming for the Working Mathematician, which extensively uses
sage.

From William Stein's request, I am sharing my experience how I start
learning to develop some sagenb code.

Project : Developing Sage Notebook.

After using SAGE for a while, I found alot of use for Sage
Notebook(sagenb) for variety of classes, simple calculation, plots and
much more. So, the project started with a simple idea that with how
can I make sagenb look different from as it appears right now. At the
beginning I thought with using my previous web programming knowledge,
modification of the web page to be a simple task, when one only has to
deal with HTML, CSS, and JavaScript. However, this was only the
beginning of my illusion.

First of all, to get my hands dirty, I needed a sandbox to install
sage. Having only been able to use windows for my whole life (with
some experience using Unix through different virtual hosting), finding
a sandbox wasn't easy at all. The first attempt was to download and
use a binary package of sage and install it on my virtual hosting.
However, I wasn't able to figure out the appropriate distribution that
would work on my box. Hence, I switched to install from the source
code. After loading the tar ball to the machine the whole installation
process took days to complete due to errors showing up on various
places. Most of them were due to permission issues, since I did not
have to access privilege to the root. After somehow installing sage, I
came across an unbreakable barrier where all the ports were blocked,
in result not letting me use the sagenb interface through a web
browser. After this, I simply had to find a different way to install
sage somewhere.

The next approach I took was using the windows distribution which came
in a virtual box file where I would run a virtual machine. However,
after experiencing with it for a while, it was not the optimal choice
for development. Finally, I made the transition to install ubuntu on
my computer. This way I was able to have full access on where to
install what while not having to worry about other issues.

Going through all these hurdles was a pain but yet, this was only the
first step. After having a full copy of sage with around 60k files
floating, pin pointing the files that I would need to modify was not
an easy task. Very limited discussions were on sage-devel group about
how to actually be able to modify the source code for the sagenb. The
following was the only relevant info that I was able to discover.
http://groups.google.com/group/sage-devel/browse_thread/thread/eee8446e3089277b/893d1e1e331e4a9a
However, the discussion thread never grew about how to and where to
fix to get the desired results.

After staring at random python files for a while, I started to figure
out how each file interacts, which functions are called, and how the
data is processed. At the end of the long tunnel of darkness, I was
able to figure out that sagenb is run through twisted, a python plugin
that allows to run webserver using python codes, and jinja, a python
template engine, to create the web pages. At that point, I had to pick
up ubuntu, python, and now various plugin syntax in order to make my
project rolling.

Due to the long setup process, I wasn't able to enjoy much of the
coding that I thought I would be doing. However, I was able to achieve
one small goal, which is to make the cells in sagenb to be dragable,
hence, one can easily rearrange the cells. The following was done to
make this happen.

1. On the html div that contains the cell, I attached jQuery's
sortable function. This enabled each cells to be dragable which
modified the DOM.
2. Using the "cell_id_list" js variable that was updated from the
server, I compared the new list that was computed after the
rearrangement in DOM.
3. I would track the Cell that was being moved (Say C) and keep the
input for that cell.
4. After locating C's position, I would find the next cell after C.
5. Insert a new cell by using "insert_new_cell_before". This will send
an AJAX request to the server, ensuring that we create a cell in the
appropriate position.
6. Delete cell C by calling "cell_delete". This will send an AJAX
request, ensuring that the cell is removed from its previous location.

These steps were needed since the update in the DOM would not
translate to the data file in the server.

There could be further improvements and steps to make this project
complete, to be able to make it into the live sage. The following
lists a few ideas that needs to be done.

Next Steps To Do:
* As of now, the whole div cell_outer_{id} is dragable. In the future,
we would make the appropriate text/image for dragging on each
cells(possibly the upper right of the cell where the "Move" text is.

* Split up the appropriate codes into different file location.
Currently, in the template file HTML, CSS, and JavaScript codes are
crunched together. Each of these code should find its own nests.

* Browser Compatibility: Due to the limited testing environment, the
functionality was only tested in Firefox 3.6.3 under Ubuntu 10.04.
Testing and ensuring that the same functionality is achieved in every
browser/platform would be essential.

* Miscellaneous: the main sage JavaScript file has two different ways
of creating a new cell, namely insert_new_cell_before and
insert_new_text_cell_before. Distinguishing between the use of the two
different function would be beneficial in some of the next
implementation.

Through this project, I was able to learn alot of python and even more
sage especially the steps that it takes to render the sagenb. I will
be able to use these skills that I have adapted in away that I can
contribute into sage more which I look forward to do so in the future.



Attached Files:
Both of the following files are located under
/sagenb-0.8.p2/src/sagenb/build/lib/sagenb/data/sage/html/notebook/
* cell.html
* worksheet.html