The timeline shortcut bar on the right hand side of web app is unintuitive due to position of Year markers #7532

Closed
opened 2026-02-05 13:07:08 +03:00 by OVERLORD · 8 comments
Owner

Originally created by @mcphail on GitHub (Oct 16, 2025).

I have searched the existing issues, both open and closed, to make sure this is not a duplicate report.

  • Yes

The bug

Image The blue bar in this screenshot is half way between 2014 and 2015, suggesting the timeline hould be showing pictures from the middle of 2014. Instead, the timeline is showing pictures from July 2015. This is not intuitive and makes navigation difficult. Shouldn't the Year markers be placed at the start of the year rather than the end?

The OS that Immich Server is running on

Ubuntu 24.04

Version of Immich Server

v2.1.0

Version of Immich Mobile App

n/a

Platform with the issue

  • Server
  • Web
  • Mobile

Device make and model

Firefox 148.0.4, Windows 11

Your docker-compose.yml content

#
# WARNING: To install Immich, follow our guide: https://docs.immich.app/install/docker-compose
#
# Make sure to use the docker-compose.yml of the current release:
#
# https://github.com/immich-app/immich/releases/latest/download/docker-compose.yml
#
# The compose file on main may not be compatible with the latest release.

name: immich

services:
  immich-server:
    container_name: immich_server
    image: ghcr.io/immich-app/immich-server:${IMMICH_VERSION:-release}
    # extends:
    #   file: hwaccel.transcoding.yml
    #   service: cpu # set to one of [nvenc, quicksync, rkmpp, vaapi, vaapi-wsl] for accelerated transcoding
    volumes:
      # Do not edit the next line. If you want to change the media storage location on your system, edit the value of UPLOAD_LOCATION in the .env file
      - ${UPLOAD_LOCATION}:/data
      - /etc/localtime:/etc/localtime:ro
      - /nas/onedrive/Pictures/backup:/mnt/media/oldpics:ro
      - /nas/onedrive/Pictures/Camera Roll:/mnt/media/newpics:ro
      - /nas/old_backup/backup/Nextcloud/InstantUpload/Camera:/mnt/media/nc:ro
    env_file:
      - .env
    ports:
      - '2283:2283'
    depends_on:
      - redis
      - database
    restart: always
    healthcheck:
      disable: false

  immich-machine-learning:
    container_name: immich_machine_learning
    # For hardware acceleration, add one of -[armnn, cuda, rocm, openvino, rknn] to the image tag.
    # Example tag: ${IMMICH_VERSION:-release}-cuda
    image: ghcr.io/immich-app/immich-machine-learning:${IMMICH_VERSION:-release}
    # extends: # uncomment this section for hardware acceleration - see https://docs.immich.app/features/ml-hardware-acceleration
    #   file: hwaccel.ml.yml
    #   service: cpu # set to one of [armnn, cuda, rocm, openvino, openvino-wsl, rknn] for accelerated inference - use the `-wsl` version for WSL2 where applicable
    volumes:
      - model-cache:/cache
    env_file:
      - .env
    restart: always
    healthcheck:
      disable: false

  redis:
    container_name: immich_redis
    image: docker.io/valkey/valkey:8-bookworm@sha256:fea8b3e67b15729d4bb70589eb03367bab9ad1ee89c876f54327fc7c6e618571
    healthcheck:
      test: redis-cli ping || exit 1
    restart: always

  database:
    container_name: immich_postgres
    image: ghcr.io/immich-app/postgres:14-vectorchord0.4.3-pgvectors0.2.0@sha256:41eacbe83eca995561fe43814fd4891e16e39632806253848efaf04d3c8a8b84
    environment:
      POSTGRES_PASSWORD: ${DB_PASSWORD}
      POSTGRES_USER: ${DB_USERNAME}
      POSTGRES_DB: ${DB_DATABASE_NAME}
      POSTGRES_INITDB_ARGS: '--data-checksums'
      # Uncomment the DB_STORAGE_TYPE: 'HDD' var if your database isn't stored on SSDs
      # DB_STORAGE_TYPE: 'HDD'
    volumes:
      # Do not edit the next line. If you want to change the database storage location on your system, edit the value of DB_DATA_LOCATION in the .env file
      - ${DB_DATA_LOCATION}:/var/lib/postgresql/data
    shm_size: 128mb
    restart: always

volumes:
  model-cache:

Your .env content

# You can find documentation for all the supported env variables at https://docs.immich.app/install/environment-variables

# The location where your uploaded files are stored
UPLOAD_LOCATION=./library

# The location where your database files are stored. Network shares are not supported for the database
DB_DATA_LOCATION=./postgres

# To set a timezone, uncomment the next line and change Etc/UTC to a TZ identifier from this list: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List
# TZ=Etc/UTC

# The Immich version to use. You can pin this to a specific version like "v1.71.0"
IMMICH_VERSION=release

# Connection secret for postgres. You should change it to a random password
# Please use only the characters `A-Za-z0-9`, without special characters or spaces
DB_PASSWORD=redacted

# The values below this line do not need to be changed
###################################################################################
DB_USERNAME=postgres
DB_DATABASE_NAME=immich

Reproduction steps

  1. Add photos from library spanning multiple years
  2. Use timeline navigation shortcut bar on the right side of the screen

Relevant log output

n/a

Additional information

Reproduced by another immich user who agrees it seems unintuitive.

Thanks for making this app.

Originally created by @mcphail on GitHub (Oct 16, 2025). ### I have searched the existing issues, both open and closed, to make sure this is not a duplicate report. - [x] Yes ### The bug <img width="60" height="899" alt="Image" src="https://github.com/user-attachments/assets/9577cec5-4177-46af-8113-57c883c08c98" /> The blue bar in this screenshot is half way between 2014 and 2015, suggesting the timeline hould be showing pictures from the middle of 2014. Instead, the timeline is showing pictures from July 2015. This is not intuitive and makes navigation difficult. Shouldn't the Year markers be placed at the start of the year rather than the end? ### The OS that Immich Server is running on Ubuntu 24.04 ### Version of Immich Server v2.1.0 ### Version of Immich Mobile App n/a ### Platform with the issue - [ ] Server - [x] Web - [ ] Mobile ### Device make and model Firefox 148.0.4, Windows 11 ### Your docker-compose.yml content ```YAML # # WARNING: To install Immich, follow our guide: https://docs.immich.app/install/docker-compose # # Make sure to use the docker-compose.yml of the current release: # # https://github.com/immich-app/immich/releases/latest/download/docker-compose.yml # # The compose file on main may not be compatible with the latest release. name: immich services: immich-server: container_name: immich_server image: ghcr.io/immich-app/immich-server:${IMMICH_VERSION:-release} # extends: # file: hwaccel.transcoding.yml # service: cpu # set to one of [nvenc, quicksync, rkmpp, vaapi, vaapi-wsl] for accelerated transcoding volumes: # Do not edit the next line. If you want to change the media storage location on your system, edit the value of UPLOAD_LOCATION in the .env file - ${UPLOAD_LOCATION}:/data - /etc/localtime:/etc/localtime:ro - /nas/onedrive/Pictures/backup:/mnt/media/oldpics:ro - /nas/onedrive/Pictures/Camera Roll:/mnt/media/newpics:ro - /nas/old_backup/backup/Nextcloud/InstantUpload/Camera:/mnt/media/nc:ro env_file: - .env ports: - '2283:2283' depends_on: - redis - database restart: always healthcheck: disable: false immich-machine-learning: container_name: immich_machine_learning # For hardware acceleration, add one of -[armnn, cuda, rocm, openvino, rknn] to the image tag. # Example tag: ${IMMICH_VERSION:-release}-cuda image: ghcr.io/immich-app/immich-machine-learning:${IMMICH_VERSION:-release} # extends: # uncomment this section for hardware acceleration - see https://docs.immich.app/features/ml-hardware-acceleration # file: hwaccel.ml.yml # service: cpu # set to one of [armnn, cuda, rocm, openvino, openvino-wsl, rknn] for accelerated inference - use the `-wsl` version for WSL2 where applicable volumes: - model-cache:/cache env_file: - .env restart: always healthcheck: disable: false redis: container_name: immich_redis image: docker.io/valkey/valkey:8-bookworm@sha256:fea8b3e67b15729d4bb70589eb03367bab9ad1ee89c876f54327fc7c6e618571 healthcheck: test: redis-cli ping || exit 1 restart: always database: container_name: immich_postgres image: ghcr.io/immich-app/postgres:14-vectorchord0.4.3-pgvectors0.2.0@sha256:41eacbe83eca995561fe43814fd4891e16e39632806253848efaf04d3c8a8b84 environment: POSTGRES_PASSWORD: ${DB_PASSWORD} POSTGRES_USER: ${DB_USERNAME} POSTGRES_DB: ${DB_DATABASE_NAME} POSTGRES_INITDB_ARGS: '--data-checksums' # Uncomment the DB_STORAGE_TYPE: 'HDD' var if your database isn't stored on SSDs # DB_STORAGE_TYPE: 'HDD' volumes: # Do not edit the next line. If you want to change the database storage location on your system, edit the value of DB_DATA_LOCATION in the .env file - ${DB_DATA_LOCATION}:/var/lib/postgresql/data shm_size: 128mb restart: always volumes: model-cache: ``` ### Your .env content ```Shell # You can find documentation for all the supported env variables at https://docs.immich.app/install/environment-variables # The location where your uploaded files are stored UPLOAD_LOCATION=./library # The location where your database files are stored. Network shares are not supported for the database DB_DATA_LOCATION=./postgres # To set a timezone, uncomment the next line and change Etc/UTC to a TZ identifier from this list: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List # TZ=Etc/UTC # The Immich version to use. You can pin this to a specific version like "v1.71.0" IMMICH_VERSION=release # Connection secret for postgres. You should change it to a random password # Please use only the characters `A-Za-z0-9`, without special characters or spaces DB_PASSWORD=redacted # The values below this line do not need to be changed ################################################################################### DB_USERNAME=postgres DB_DATABASE_NAME=immich ``` ### Reproduction steps 1. Add photos from library spanning multiple years 2. Use timeline navigation shortcut bar on the right side of the screen ### Relevant log output ```shell n/a ``` ### Additional information Reproduced by another immich user who agrees it seems unintuitive. Thanks for making this app.
Author
Owner

@JoeRess commented on GitHub (Oct 16, 2025):

Can confirm that I am the aforementioned other Immich user who agrees that this is unintuitive.

@JoeRess commented on GitHub (Oct 16, 2025): Can confirm that I am the aforementioned other Immich user who agrees that this is unintuitive.
Author
Owner

@sacrosanctic commented on GitHub (Oct 16, 2025):

https://github.com/immich-app/immich/blob/main/web/src/lib/components/timeline/Scrubber.svelte#L143-L186

The code in question. The bug can be clearly seen as it's building the timeline top down and prints out the current year at the top of the array.

@sacrosanctic commented on GitHub (Oct 16, 2025): https://github.com/immich-app/immich/blob/main/web/src/lib/components/timeline/Scrubber.svelte#L143-L186 The code in question. The bug can be clearly seen as it's building the timeline top down and prints out the current year at the top of the array.
Author
Owner

@danieldietzler commented on GitHub (Oct 16, 2025):

We agree that there is currently some unintuitiveness around the timeline (luckily that's resolved by hovering over the timeline and seeing the month and year). We'll need to think about the "fix" (I'm not sure I want to call it a fix as it's more just a behavior change/decision) and we can leave this open until then. I want to emphasize however that this is not a simple +-1 bug

@danieldietzler commented on GitHub (Oct 16, 2025): We agree that there is currently some unintuitiveness around the timeline (luckily that's resolved by hovering over the timeline and seeing the month and year). We'll need to think about the "fix" (I'm not sure I want to call it a fix as it's more just a behavior change/decision) and we can leave this open until then. I want to emphasize however that this is not a simple +-1 bug
Author
Owner

@Hinfty commented on GitHub (Oct 17, 2025):

This caused me so much confusion when moving to the app. I'm not sure its even a question of style.
This looks like a timeline, just like a ruler. And half way between two marks shouldn't be anything outside of this interval.
But I'm willing to learn: How do I need to think about this visual for it to make sense?

@Hinfty commented on GitHub (Oct 17, 2025): This caused me so much confusion when moving to the app. I'm not sure its even a question of style. This looks like a timeline, just like a ruler. And half way between two marks shouldn't be anything outside of this interval. But I'm willing to learn: How do I need to think about this visual for it to make sense?
Author
Owner

@sacrosanctic commented on GitHub (Oct 17, 2025):

I just want to put out that google photo looks like this

Image
@sacrosanctic commented on GitHub (Oct 17, 2025): I just want to put out that google photo looks like this <img width="96" height="380" alt="Image" src="https://github.com/user-attachments/assets/de411709-9457-43ce-8e53-7b1c509cc0a3" />
Author
Owner

@sacrosanctic commented on GitHub (Nov 6, 2025):

the problem is fixed, it can be closed.

@sacrosanctic commented on GitHub (Nov 6, 2025): the problem is fixed, it can be closed.
Author
Owner

@tmlmt commented on GitHub (Nov 7, 2025):

image

I haven't checked on web yet but on mobile the position of the timeline ticks still doesn't make sense.

@tmlmt commented on GitHub (Nov 7, 2025): ![image](https://github.com/user-attachments/assets/312056c2-12c5-4a3a-9d51-7e79c30b34ac) I haven't checked on web yet but on mobile the position of the timeline ticks still doesn't make sense.
Author
Owner

@sacrosanctic commented on GitHub (Nov 7, 2025):

The original issue was only file for web, do maybe open a new issue?

@sacrosanctic commented on GitHub (Nov 7, 2025): The original issue was only file for web, do maybe open a new issue?
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: immich-app/immich#7532