allusion-app/allusion

A free and open source desktop application for managing your visual library

allusion's Issues

Preview window deselect behavior due to select state active

I noticed when you have made a selection using the select button in the tool buttons. When you close the preview window using space it also deselect the images, than on the next press an empty preview window opens and on the third press they all get selected again and will show.

Not sure this is a real bug or anything that could be worked around. Using ESC wont show this behavior. Its just due to space also will active/deactive a bool menu item. Im not sure why they get selected again while it looks like the button isnt highlighted. Perhaps this is a BluePrint thing.

Zoom in / out not always working

I noticed the new zoom in/out functions in the file menu system. However they dont always react properly for me on OSX. Also cmd + doesnt zoom on my end, i need to press cmd shift + in order to get it working. However cmd - does work. Sometimes it doesn do anything and also the menu items dont respond? Cant figure out whats wrong there though.

Removing tags removes associated files

When a tag is added to the file, every file with this tag is removed from the list. The biggest problem is that I cannot add the files again since they already exist in the database. Even though they are fetched they cannot be displayed and mbox keeps throwing exceptions.

Deleting search query breaks quick search and advanced search

I noticed that when you delete a search query from either quick search or advanced/extended search, it breaks functionality. Say you search for a tag and then delete it from quick search using the small X, then it doesnt work anymore.

Things is, it doesnt happen consistent. It happened now twice and have not figured out how to replicate it each time.

Ill try to add new findings to this post

Adding search input should clear input when say tag is chosen

Say you're looking for a certain tag, upon typing a dropdown will shows tags from where you can choose one. When you do choose on from that list, the old input stays. I thing once you choose one, that input should not be there. Now i need to delete each time i want to continue adding tags.

Assigning tags to files

Could be either done through drag & drop or by selecting files and then clicking on a tag to assign it to them

Implement proof of concept of tag relationships

• Data structure for storing in the database
• Show in UI
• Creating and modifying them in the UI

Update Dependencies

React Hooks are stable since the release of React 16.8 and mobx-react-lite depends on hooks.

Add toolbar

Missing information in info panel

• resolution
• colorspace
• dimensions

Drag tag cant reach top tag tree

When you want to drag a tag to the top in the tree node and the list is long, this cant be done. The issue perhaps due to "Add Tag" is always added to the bottom of the list.

A workaround could be, when a tag collection is selected and a tag is added, this tag is added to the selected tag collection. When no selection is made perhaps a move function could help.

Im not sure why dragging doesnt scroll the actually. In Chrome this does work and since this uses Chrome as a core i would expect the same behavior.

It does work when you drag an image from the content area around. So it seems the custom drag action is preventing this behavior.

Show info panel when clicking on a file

Like in the mockups

Changing the gallery layout

We currently consider having three layouts: Grid, masonry and a list view
Edit: And a Present/Slideshow view

Localized Date Times

While I was looking at some guide I discovered the toLocaleString method on Date. It is pretty neat since it takes care of padding and can detect the locale of my system. There is even the more efficient Int.DateTimeFormat type for formatting many dates.

The code would replace formatDate in the FileInfo/ImageInfo component.

// Setting undefined will look up the system locale
const formatter= new Intl.DateTimeFormat(undefined, {
  timeZone: 'UTC',
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
});

...
const date = new Date(Date.UTC(2019, 11, 3, 3, 0, 0));
console.log(formatter.format(date));
// Output on German System:  03.11.2019, 03:00

However, I find the comma pretty ugly which is why this could be changed a little bit.

// see above code...

const formatDateTime = (d: Date) => {
  return formatter.formatToParts(d).map(({type, value}) => { 
    if (type === 'literal' && value === ', ') {
      return ' ';
    } 
    return value;
  }).reduce((string, part) => string + part);
};

console.log(formatDateTime(date));
// Output on German System:  03.11.2019 03:00

Papercuts

This issue is also for collecting all issues related to finishing the first Alpha version. For reference see the document here. Note that not every point listed is part of this issue as that requires more work and time.

Update

• See updated project management document.
• 15/08/2020: Minimum required features are built but still need a lot of polish.
• 27/10/2020: See the project Alpha for more information

UI

• Revise drag and drop overlay options
• Mutli-preview carousel in the inspector Removed (@RvanderLaan PR #243)
• Resizable panels and toolbar (e.g. outliner, inspector)
• Use actual Tooltip component instead of data attribute (@hummingly PR #225)
• Create a Toolbar component (@hummingly PR #225)
• Design settings drawer as separate window (@RvanderLaan PR #226)
• Improve toaster content (i.e. show an icon button with text instead of only an icon) Replaced with a custom one and decided to use it sparely (@RvanderLaan #236)
• Extend the missing file detail panel in list view or create some kind of recovery dialogue like for locations
• Overflowing tags in list view should be hidden instead and expanded scrollable on hover (@hummingly PR #225)
• Full screen mode not working on Windows. When active prevents app windows to be resized

UX Polish

• Revise settings options
• More intuitive tag selection
• Keyboard navigation (and fix tab indices)
• Improve app specific text (e.g. dialogs, alerts)
• Shortcut search does not work with search results. Filled searchbar stop shortcut from working

Missing Features

• Show currently missing information in info panel #38
• Add more options to gallery context menu (toolbar) (@RvanderLaan PR #227)
  • Sort
  • View

Low Priority

• TeachingTip for help center content visualization
• Customizable accent color
• Add masonry layout #222
• Custom drag and drop effect pointers
• Shortcut remapper #229

Proper logging

Log messages are not shown or stored anywhere in the released version.
A library like this stores all messages in a log file:
https://www.npmjs.com/package/electron-log

Integrate custom icons

Some search queries need different functions or methods

I see that when using date as search query it has wrong function method. Should date show something before and after?

I think current ones are a bit confusing in this context. But i just noticed Adobe Bridge, for instance, uses this same principle. Should we keep this method or think of more meaning methods?

Filter files when clicking on a tag

Instead of renaming

Removing files from your library

Delete icon is gone from toolbar

I noticed in #58 the delete function now has a nice layover. However i dont see the delete button no more in the toolbar, also dont see anything about that being removed from the toolbar?

Drag-drop-import menu shows when dragging tags

I just tried the branch #77 Drag-drop-import and i noticed when dragging a tag i also get the menu. I just wanted to check if this is a known issue.

Preview window arrow buttons image stuck

I jsut noticed in the latest master branch than sometimes when using the arrow buttons at the top the image seems to be stuck. I believe it happens when you use overview, highlight an image, then return to big view. Then the arrow buttons tend show some kind of glitch. You can scroll through the images using the arrow buttons. Using left and right buttons still work.

I think this is caused by the highlight function, this was added so that after returning from overview and an image was highlighted. That image will become the active viewed image. My guess the arrow buttons looks at some kind of index and isnt updated properly.

Highlight / active state issue

We talked about perhaps adding a background tint or outline color to items for active state. This is the function like in a browser when the users switch input by hitting the tab key. In browser a highlight border appears.

This issue kind arose when we discussed the preview window issue appeard in issue #67. However im not sure we should use this. Because currently hitting tab doesnt do really much. You need to hit tab many times when eventually something will happen. For instance when we have the select function active in the toolbar and we hit tab 1 time, nothing actually happens. After hitting tab many times suddenly we see some movement in the inspector window and eventually the tag panel gets highlighted. Than after many more presses the tag hierarchy on left starts to move.

Currently i dont see any function for this tab method for switching input. Perhaps not everything is added to some sort of tab index.

Also im not sure how we can style it properly. In the current layout there are a couple items which have the active state, so they are highlighted. Perhaps i need to check BluePrintJS again and see how its properly done.

EDIT
I had a quick look at Blueprintjs, it looks like they add aria for this. https://blueprintjs.com/docs/#core/components/tabs
Im not 100% convinced we need this. I mean it sort of represents a browser feel. I taught we were going more for a desktop experience.

Ive attached a screenshot and also tried a screengrab to show the current issue

Crash due to undefined path

These lines usually produce crashes at some point.

https://github.com/RvanderLaan/VisualLibrary/blob/3bee8d575a814566517f9a05ffaf66e3771cfc64/src/renderer/frontend/components/Inspector.tsx#L33

https://github.com/RvanderLaan/VisualLibrary/blob/3bee8d575a814566517f9a05ffaf66e3771cfc64/src/renderer/frontend/components/Inspector.tsx#L46

The bug is so annoying because it is sometimes unproducible. The tracebacks that I've got, suggest that the actual problematic line is another one.

https://github.com/RvanderLaan/VisualLibrary/blob/3bee8d575a814566517f9a05ffaf66e3771cfc64/src/renderer/frontend/components/Inspector.tsx#L23

The array is at some point filled with undefined objects due to a bug in mobx or somwhere else. I will leave this issue as a reminder.

Design Checklist

The purpose of the following list is to keep track of tasks to be worked on by the design team. This includes tweaks on the UI as well as other project related tasks such as the website or the documentation. Change and extend the list as needed.

Design Todo List

• Tutorial upon for first time users
• Web Design
• Workflow for missing images
• Documentation Structure
• Chrome Extension UI
• Light Theme UI
• Search Interface Specifics

Preview window switch stays checked/active

I just noticed that the checkbox/switch stays active when switch view modes. I seems to keep being active and turn inactive when you click aside. Yet in the dev tools, i didnt see any css of being it active?

EDIT
Found it, it is a CSS issue, ill fix this

Tag names can be empty

Right now the user can press enter and have a new empty tag. I've made some changes but I wanted to push #8 before. Also I'm unsure if I should alert as notification.

@action
  addTag(tagName: string) {
    if (tagName && tagName.length > 0) {
      const tag = new ClientTag(this, tagName);
      this.tagList.push(tag);
      this.backend.createTag(tag.id, tag.name, tag.description);
    } else {
      alert('Tag name cannot be empty!');
    }
  }

Set up a testing framework

Writing tests would be useful to avoid issues like #14 but it does introduce some additional work.
At the start of projects, testing is often a hassle since many features are being added and changed. I think it would be a good practice though to at least get familiar with how it works, since you can learn how to write code that is more easily tested later on.

Jest is a popular testing framework for JavaScript, and also has some guidelines for how to test React components.

Searching files using tags

• Implement UI component for entering tags in a search bar
• Fetch corresponding files from the database
• Exclude tags

Responsive Design

• toggable outliner
• move tool icons below on resize

Delete always shows menu

In the toolbar, the icon delete is disabled when nothing is selecting in the content area. How the button still runs the function when its clicked. Perhaps its still in development, but i look at the code and it should not do that. My guess is that how the menu item is built. Basically, its because the button has a span inside which contains a SVG icon. I noticed when the icon is deleted the button is really disabled when no selection is made.

In the Blueprintjs manual/code it shows a ::before or ::after for icons. But i guess this is because we have custom icons maybe?

But on this page the buttons are build like we have, but there a disabled button is really disabled.

But for tags when its disabled it does work, so i guess something in the function is correct? When i look at the HTML code it does show 'disabled' properly.

Perhaps its because the function which checks if something is selected or not is still being run even while the button is disabled.

Resizing the size of the sidebar and inspector

By dragging the borders

I get blueprintjs missing core errors after installing dexie

I was looking at the branch sorting and after that i suddenly got many errors about imports using double quotes instead of single quote in all blueprintjs files??? After a restart that was gone.

But now i get a missing blueprintjs/core link, not sure what happened there though?

Bad performance when opening many images

Here is a blogpost of someone who had the same issue, and compared several libraries like Brick.js for React but eventually made something by themselves: https://hackernoon.com/masonry-in-react-a-performance-hell-fb779f5fcebd
We could try out the one they developed, but we also should compare the performance with alternatives ourselves

Select image(s) and hit R results in crash

I think when selecting images, the function "replace query" should disabled. When you perform this action while having images selected in the content area it results in a crash 100%.

This is the output
Cannot read property 'path' of undefined at Array.forEach (<anonymous>)

Dragging tag in list show import image tag helper

When dragging tags or a tag in the tag hierarchy, the popup shows for tagging images on import.

See below

Sorting images in different ways

It would be nice to sort images in the main view based on when they were added to the library, created, modified, or based on their name, size, etc.

Hotkeys

Thumbnail generation

Nice i see you got this started. We do need to perhaps load the original when in slide view. Now sometimes the images looks sharp and sometimes its blurry.

I also noticed some images dont show properly

Preview

• Space to close
• Always on top
• Thumbnail view toggle

Option to ignore dot files

Localize Hotkeys

Different keyboards require different shortcuts

Selecting image in slideview issue

I notice when your in slide view and click on the image, the first image gets selected in from the list. This also causes for a weird glitch when cycling through the image. Instead of showing the next image, its will show the second image from the grid view. Also the inspector will show the wrong image when selecting an image in slide view.

See below screengrab and below that the total images of this range. Notice that each time i click the first image show in the inspector. The soft image glitch is not visible in this screengrab, however you can see that its reset to the first image when something is selected

Refactor file structure and entity names

Also add more documentation in comments

Manually order tags

The order of tags is currently controlled by the way they are defined in the database. It would be nice to order them manually using drag & drop.
Related to #3 since ordering folders in the hierarchy should also be possible

Coloring tags and using light hue shows white text

I noticed that some lighter Hue's will show white text. It basically should show dark text perhaps when the slider is moved over the top part of the color picker part. But perhaps that will cause issues with darker hues like red, purple, dark blue. Basically, the left part of the hue slider should show dark text and the right part should show white.

Here you see an example of the left part of the hue slider. These lighter hue will show white text

Customizing Blueprint.js

Single Image Import

Using preview window with dual display gives narrow screen

I noticed today testing dual display setup, that the preview window opens quite narrow. Its looks like the code also add the second screen in the width, not sure why because code has primDisplay? But perhaps its something else, because if the screen was also used for the width, than the window should be wider actually. I think a different approach needs to be done. Perhaps width should be done like widthScale = verticalScale something like this. not sure if this is possible. At home on a single display i dont get this narrow screen. There my display is 1440x900 Retina, the resolution is 2880x1800 actual pixels.

My displays are screen 1= 2560x1440 and screen 2 =1920x1080.

See below example of how the preview window opens