Giter VIP home page Giter VIP logo

neatline's Introduction

Neatline status update

Neatline is currently in the process of moving to a new home with Performant Software! More info will be forthcoming from Performant; you can direct any questions in the mean time to Performant’s contact page.

Neatline

Neatline is a lightweight, extensible framework for creating interactive editions of visual materials - maps, paintings, photographs, and anything else that can be captured as an image.

Built as a plugin for Omeka, a collection-management framework developed by the Roy Rosenzweig Center for History and New Media, Neatline adds a digital map-making environment that makes it easy to represent geospatial information as a collection of "records" plotted on a map, which can be bound together into interactive exhibits that tell stories and make arguments.

Designed for scholars, archivists, journalists, and students, Neatline provides a flexible set of tools that can be adapted to fit the needs of a wide range of digital mapping projects. In addition to the core content management system, Neatline exposes a flexible programming API and "sub-plugin" system makes it easy for developers to add custom functionality for specific projects - everything from simple UI widgets up to really elaborate modifications that extend the core data model and add completely new interactions.

neatline's People

Contributors

akstuhl avatar amandavisconti avatar ammonshepherd avatar csbailey5t avatar davidmcclure avatar eam5 avatar jaguillette avatar jamiefolsom avatar jeremyboggs avatar krdyke avatar rondauva avatar shane-et-al avatar travisbrown avatar vpnagraj avatar zploskey avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

neatline's Issues

Item title size tweening can get out of sync by double-clicking

Click on an item title to open an edit form. Then, click on the title again to hide the form. Open again, and this time click twice in fast succession on the title. Even though the form closes and does not reopen, the title will pop back up to the larger font size as if the form were open.

Either the title size change should be blocked, or the whole form should move in unison with the title. I prefer the latter.

Feature selection breaks if first click on page is on a feature

If the first click action that takes place on the page is on one of the feature vectors, the click selection clams up and will not execute any further selection or deselection clicks. If there is a click on any of the item listings or any of the timeline events, this bug is not present.

Add tooltips to data inputs explaining valid formats

Date entry for items consists of two text inputs that currently are blank and without any explanation of what formats are valid. The left field is for the date, and can accommodate any of these formats:

2011
June 2011
June 25, 2011

Commas are irrelevant. The second field is for time. Any of these formats are recognized:

3:00
3:00 am
3:00am
3:00 AM
3:00AM
3:00 pm
3:00pm
3:00 PM
3:00PM
13:00

There should be tooltips that appear when the user focuses on the inputs that explain this.

Neatline-ify the CSS for Simile Timeline

Currently, Simile Timeline is styled with the default css. This looks bad.

I wrote an application in the item edit form to create a date ambiguity gradient that gets applied to the intervals spans by the javascript (this can't be done with static css). This improves the situation, but we need to create a separate base stylesheet for the timeline that, ideally, makes Simile look less like Simile and more like the rest of Neatline.

This stylesheet should be queued as a static application asset on NL editor/public page load.

The Neatline admin CSS is getting randomly loaded into other admin views

Bizarrely, the stylesheet that makes the Omeka admin look Neatilne-y is getting randomly loaded into other views, including the main item edit view, the settings administration, and some other plugin admins. This appears to be because the conditional code that checks the current module/controller is not specific enough, and it loading the NL css when it shouldn't.

Add an option to "shrink" the editor

In the topbar, there should be an option to shrink the editor so that the administrator can temporarily see the exhibit as an end user would see it. This would cause the item editor block to slide off of the screen to the left, and the top bar would shrink down to a very minimal size, just enough space for a "back to normal" button of some sort, which would reverse the action.

Fast window resize breaks item browser horizontal dragging

A quick / dramatic resize of the window can break the width sliding functionality of the item editor. Usually, after shrinking the size of the window quickly, the drag will still work in that state, but the dotted handle indicator will not display when the cursor hovers on the region. Then, if the window is dragged back open to a larger state, the drag will not work at all.

Search ajax call should cancel running requests to avoid success overwrites

When text is typed into the search box in the item browser, an ajax call is fired to fetch item results on keyup. In some situations when the latency hangs on one or another of the calls, you can have the situation when results populate for a completed word, but then one of the queries initiated by one of the previous keystrokes takes longer than the final query, returns null results, and overwrites the new list of results.

Each of these requests should cancel any other running requests to prevent this.

Item listings top offsets values not being recomputed correctly

The code that auto-scrolls the edit forms to the top of the item browser in the editor relies on a $.data parameter attached to each of the item title listings that records the item's top offset relative to the item editor block. When the items listings are ajaxed in, the code walks the new list of table row elements and glosses on the event bindings for the form open, edit, etc. As it hits each element, it also computes the top offset relative to the whole div, and then when there is a click on the element the code scrolls the container to that vertical position so as to align the form at the top of the block.

This works for the initial items ajax load, some sorting/filtering/search actions break the code and cause the forms to not align properly at the top of the block. It seems as if the top offsets are either (a) not being recomputed, or (b) not being overwritten in the elements' data registries successfully. This bug can be hard to replicate, but it can be significant, since when things go bad it can cause the item edit forms to zoom way down out of the visible area on click, and a user likely would not even realize that the form is expanded below.

Get partial-string results on items search

Say that you have an item called "Test." In the items editor search bar, if you type "Te," there will be zero results. If you type "Test," you get the item as a result. This is because the server code currently relies on the baked-in Omeka search filtering code, which does not match partial results.

This is not intuitive, especially in an ajax content (think Google instant). I worry that people will see that partial strings do not return results, and not know that the full string would get matches. We should change this code to match partials.

Really, the best place for this would be in Omeka core.

:hover color change bug with Space/Time blocks in item listings

In the item editor, hover the cursor on one of the S block for a given item listing. It turns orange. Then, move the mouse either left so that it leaves the S block and enters the item title block, or right so that it enters the T block. As the cursor leaves the S block, the S block should drop back to the blue highlighted color, since that is the base background for a highlighted row element. Instead, it goes to the true default yellow, which is the color for an un-highlighted row.

When the cursor leaves one of the S/T cells, the code should check to see if the row is still highlighted and push to the correct color. It may be necessary to bind a mouseleave event onto the whole row, as opposed to just the individual cell divs, and only push back to the yellow when the row div fires mouseleave.

On item edit form open, fade other item listings and add scroll if necessary

Right now, the item edit forms just open up below the item listing and the listing scrolls to the top of the region. This works fine now, since the forms are small and it's rare that they would be taller than the height of the window.

Since it's likely that more options will be added to these forms, though (configuration options for the appearance of the timeline entry, etc.) these forms will probably eventually become tall enough that it's conceivable that they could exceed the height of the items editor block.

This is not a huge problem, since you can always just scroll the whole container div with the items to see more of the form. But, this can be unwieldy if there are lots of items - going down just a little bit can be hard if the total scroll height of the region is really large.

On form open, (a) the other items listings should fade out to emphasize the fact that the edit form is the area of focus, and (b) if the form is higher than the item editor block, the form should only be as tall as the block, and smallscroll() should be added to the form itself so that the form can be scrolled independently of the container.

Break the neatline-editor.css and neatline.css files into widget-specific stylesheets

The neatline-editor.css file is large and difficult to work with. Starting with the layout-builder and gradient-builder widgets, I've started doing individual stylesheets for each widget. We need to go back and split out the neatline-editor.css and nealtine.css files into these stylesheets, each of which corresponds to a NL widget:

(Editor styles - should go in views/admin/css):

  • edit-geometry.css
  • item-filter.css
  • small-scroll.css
  • item-editor.css

(Public-facing styles - should go in views/shared/css):

  • neatline.css
  • neatline-map.css
  • nealtine-time.css
  • maybe neatline-undated-items.css, depending on how we decide to handle the matter of what should be displayed in that block, and if it should be materially different from the item browser in the editor.

Tearing out the correct styles should be a easy - the large stylesheets are clearly divided into sections that correspond to the widgets.

input placeholder

The fields on the Neatline admin input elements need the placeholder attribute on the input elements to prompt the user for their use (e.g. date vs time fields)

Implement the Undated Items block

The UDI displays items that have an active spatial record by no time record. It works essentially like the item browser tray, but without the editing functionality. On click on the items, focus map on item.

The backend/ajax structure for this is set up, but the JavaScript to do the display and wire-up with the other widgets needs to be implemented.

Add mousewheel scroll to smallscroll()

smallscroll() is a standalone widget that adds the scrollbar to the item filter drop down (and in the future to long item edit forms and popup description bubbles). If the cursor is on the scroll element for a smallscroll() instantiation, scrolling the mousewheel should cause the div to scroll accordingly.

Date ambiguity sliders get stuck when the left slider is dragged all the way to the right

The problem the right slider is statically set to have a higher z-index, so when the left slider is pulled all the way to the left is gets slipped beneath the right slider. But then the right slider can't be pulled righwards "off" of the slider track, so neither slider can be moved at all.

To fix, on mousedown on either of the sliders set that slider's z-index to 2 (or whatever) and the other slider to 1 (or whatever). Do that toggle on each mousedown, and the most recently dragger slider will always be accessible to the cursor, meaning that any action can always be undone.

Timeline resize on page resize not working correctly

When the window is resized, the timeline should shift the heights and positions of the two bands to stay aligned in the timeline block. Right now, this kind of happens, but (a) when the window gets too squat, the bottom numbers on the bottom band get truncated by the bottom of the window, and (b) if the screen gets too tall relative to its starting size the bottom band floats up off the bottom of the block.

Since occlusion is impossible to avoid beyond a certain point (part (a) above), the bigger issues is the small-to-large movement - the resize should always accommodate more space.

Map vector double-loading error on item save.

  • Open an item that does not have an active spatial record.
  • Add vectors.
  • Click save.

When the vector data reloads, it double-loads on top of the extant vectors - for some reason the vectors that are there before the save are not removed before the new ones are layered on.

Save button on item edit form should be Neatline purple

Right now the save buttons are the Twitter bootstrap default blue. This looks bad. They should be the Neatline default purple, with a vertical light-to-darker gradient (like the top bar in the editor). This isn't as easy as just making the color change, because the bootstrap styles on buttons are kind of leveraged with the specific colors they choose, and making changes to the hexes without also tweaking the gradients / :hover animations causes ugliness.

Add public-facing deployment

  • Define a /neatline/id route.
  • Write a separate instantiation script that omits editing callbacks.
  • Add template for public display.

Design and implement new data schema across the plugin suite

Currently, NL data gets saved like this:

  • At the start, the code check to see if there is an extant DC field that makes sense in the context of the NL exhibit.
  • If so, that data gets defaulted into the item edit form.
  • If the user saves the form with that data, NL creates an association record that ties the extant element text in question to the exhibit id.
  • If the use changes the default values, NL detects the change, creates a new element text on the item for that DC field, and then creates the association.
  • Because of the multi-part structure of the time data (start date, start time, end date, end time), the associations table for the time data is separate, although it still write all new data as stacked DC Date elements on the item record.

In order to move the data stores off of the DC records, we need to create a series of Neatline-specific tables across the plugins to house the data. We need to nail down the specific structure of this. There are various difficulties and conceptual kinks - for example, does it make sense to store vector data on the Maps plugin, even though, taken individually, the maps plugin never has anything to do with feature data (only features and NL proper do).

Make it possible to add new items for the exhibit without leaving the editor

Right now, you can only add existing items to the Neatline. What if you wanted to add totally new data? You would have to go back to vanilla Omeka, create the item, and then go back into Neatline and add it to the exhibit. This is unnecessary.

We should add an option, accessible through the top bar, that lets users add new items right in the Neatline editor. When you click on it, a new listing gets added to the top of the items listings block and a form expands below the item with all of the DC fields, like what you would see in the normal item add view. The form is styled just like the standard NL item edit forms.

When you save the new item, the form shrinks to be the normal edit form that you would see for any other existing item.

Make item filtering functionality more intuitive

Item filtering has some odd behavior that I do not totally understand. Right now, when the All / None option is toggled, the code retrieves all items no matter what, and they all display. But, if you start filtering down the list - say, uncheck a single tag - the code then branches differently and just retrieves items that fall into one of the checked buckets (one of the tags, types, or collections).

Then, though, if you re-check the item that you unchecked, the full list of items does not reappear in its entirety (since the code is still checking for membership in the groups individually and not fetching all regardless of membership, as it would if the All / None were toggled). It is as if there are some items that are not selected when the code fetches all items that appear in any extant tag, collection, or type, which seems to be impossible. Theoretically, getting all items of all extant types should get all items, but it doesn't.

Either way, the behavior of the server code here is not intuitive, and the UX for the filterer should be improved.

Items search ajax should cache results

Items search filtering fires an ajax request to fetch a new items listing on keyup. Each successful string-results combination should be cached, and duplicate string queries should be intercepted on the way out.

On item form save, reload map data

When an item form is saved, the map vector data should reload from the server, so that the new vectors are immediately coupled with the TL and editor.

Add smallscroll() bars to timeline popups

Right now, the timeline popups are fairly small. Since these could conceivably used to present fairly in-depth and lengthy interpretive / descriptive prose, they should be able to accomodate larger amounts of text.

If the auto height of the boxes is above a certain constant (say, 400px), smallscroll() the content divs.

Optimize data-exists and data-population code during item load

When items get loaded into the Neatline editor item browser pane, four things need to happen for each item:

  1. Check to see if the item has an active NL record for the timeline.
  2. Check to see if the item has an active NL record for the map.
  3. Check to see if the item has an extant DC element text that COULD be used out-of-the-box for the map.
  4. Check to see if the item has an extant DC element text that COULD be used out-of-the-box for the timeline.

3 and 4 are important, especially when there are a lot of items. When I started using the editor, I immediately ran into the situation where I would enter time data for an item, add it to the exhibit, and then take it back off, and then have no idea which item it was that I added the data to.

Anyway, checking those four things for each of the items is currently done in a raw, enumerative way that triggers a large number of database queries for each item listings load, and causes noticeable slowdown when the editor loads (and whenever the items list is re-queried, like when the user filters the list by taxonomy or search string).

Allow Neatline exhibit creation without an existing Map or Timeline

If you try to create a Neatline exhibit without actually having an existing Map or Timeline in your database, you get the following error:

Before you can start a Neatline exhibit, create at least one map or one timeline.

Seems like you should still be able to create a Neatline exhibit without actually creating a separate timeline or uploading maps. You could just using any existing items, for example, and draw features on the base layer. Items themselves could also have date information that could appear on the Neatline exhibit's timeline.

If this isn't ideal, we should at least hide the create buttons until the user has the necessary Map and/or Timeline, with some explanation that they need to do that.

Multiple bugs on layer reload and edit

There is a suite of bugs triggered by the core vectoring edit tasks that appear to be related to a series of OpenLayers callbacks that get automatically called when map "controls" are added, removed, activated, and deactivated. Any/all of these produce bugs:

  • Open an edit item form, add a feature, and click save.
    (If this doesn't produce a OL error, close the form and then try to open any other edit form)
  • Open an item form and toggle the space record for that item on and off.

I am pretty sure that the essence of the problem is this: when a controls is added, you have to specify the layers that the control acts on. So, when I add modifyFeatures, I pass in the array of _currentVectorLayers. But then the code makes changes to that stack of layers - it might get totally replaced if a save is made and the stack is rebuilt from scratch; if an item edit form is opened for an item without an existing spatial record, a new vector layer is added.

Once these changes occur, it appears that OL chokes when virtually anything at all happens to the old control - if any method is called on it, even if the control is just destroyed. Once these errors get thrown, the whole JavaScript application shuts down.

My current approach to just aggressively destroy and re-instantiate these controls before and after any conceivable change to the layers stack. This has not worked so far.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.